From 1ef66c962a1cea81dee4f5db32cd011feac7de44 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 17 Jun 2018 08:10:54 +0900
Subject: reversi :white_flower: :100:

---
 .../app/common/scripts/compose-notification.ts     |   2 +-
 .../app/common/scripts/streaming/othello-game.ts   |  11 -
 src/client/app/common/scripts/streaming/othello.ts |  31 --
 .../app/common/scripts/streaming/reversi-game.ts   |  11 +
 src/client/app/common/scripts/streaming/reversi.ts |  31 ++
 src/client/app/common/views/components/index.ts    |   4 +-
 .../app/common/views/components/othello.game.vue   | 324 ---------------------
 .../common/views/components/othello.gameroom.vue   |  42 ---
 .../app/common/views/components/othello.room.vue   | 297 -------------------
 src/client/app/common/views/components/othello.vue | 313 --------------------
 .../app/common/views/components/reversi.game.vue   | 324 +++++++++++++++++++++
 .../common/views/components/reversi.gameroom.vue   |  42 +++
 .../app/common/views/components/reversi.room.vue   | 297 +++++++++++++++++++
 src/client/app/common/views/components/reversi.vue | 313 ++++++++++++++++++++
 src/client/app/desktop/script.ts                   |  10 +-
 .../app/desktop/views/components/game-window.vue   |   6 +-
 .../app/desktop/views/components/ui.header.nav.vue |  12 +-
 src/client/app/desktop/views/pages/othello.vue     |  50 ----
 src/client/app/desktop/views/pages/reversi.vue     |  50 ++++
 src/client/app/mios.ts                             |   8 +-
 src/client/app/mobile/script.ts                    |   6 +-
 .../app/mobile/views/components/ui.header.vue      |  12 +-
 src/client/app/mobile/views/components/ui.nav.vue  |  14 +-
 src/client/app/mobile/views/pages/othello.vue      |  50 ----
 src/client/app/mobile/views/pages/reversi.vue      |  50 ++++
 src/client/assets/othello-put-me.mp3               | Bin 15672 -> 0 bytes
 src/client/assets/othello-put-you.mp3              | Bin 26121 -> 0 bytes
 src/client/assets/reversi-put-me.mp3               | Bin 0 -> 15672 bytes
 src/client/assets/reversi-put-you.mp3              | Bin 0 -> 26121 bytes
 29 files changed, 1155 insertions(+), 1155 deletions(-)
 delete mode 100644 src/client/app/common/scripts/streaming/othello-game.ts
 delete mode 100644 src/client/app/common/scripts/streaming/othello.ts
 create mode 100644 src/client/app/common/scripts/streaming/reversi-game.ts
 create mode 100644 src/client/app/common/scripts/streaming/reversi.ts
 delete mode 100644 src/client/app/common/views/components/othello.game.vue
 delete mode 100644 src/client/app/common/views/components/othello.gameroom.vue
 delete mode 100644 src/client/app/common/views/components/othello.room.vue
 delete mode 100644 src/client/app/common/views/components/othello.vue
 create mode 100644 src/client/app/common/views/components/reversi.game.vue
 create mode 100644 src/client/app/common/views/components/reversi.gameroom.vue
 create mode 100644 src/client/app/common/views/components/reversi.room.vue
 create mode 100644 src/client/app/common/views/components/reversi.vue
 delete mode 100644 src/client/app/desktop/views/pages/othello.vue
 create mode 100644 src/client/app/desktop/views/pages/reversi.vue
 delete mode 100644 src/client/app/mobile/views/pages/othello.vue
 create mode 100644 src/client/app/mobile/views/pages/reversi.vue
 delete mode 100644 src/client/assets/othello-put-me.mp3
 delete mode 100644 src/client/assets/othello-put-you.mp3
 create mode 100644 src/client/assets/reversi-put-me.mp3
 create mode 100644 src/client/assets/reversi-put-you.mp3

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/compose-notification.ts b/src/client/app/common/scripts/compose-notification.ts
index c19b1c5ad0..cc28f75998 100644
--- a/src/client/app/common/scripts/compose-notification.ts
+++ b/src/client/app/common/scripts/compose-notification.ts
@@ -55,7 +55,7 @@ export default function(type, data): Notification {
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
-		case 'othello_invited':
+		case 'reversi_invited':
 			return {
 				title: '対局への招待があります',
 				body: `${getUserName(data.parent)}さんから`,
diff --git a/src/client/app/common/scripts/streaming/othello-game.ts b/src/client/app/common/scripts/streaming/othello-game.ts
deleted file mode 100644
index 9e36f647bb..0000000000
--- a/src/client/app/common/scripts/streaming/othello-game.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import Stream from './stream';
-import MiOS from '../../../mios';
-
-export class OthelloGameStream extends Stream {
-	constructor(os: MiOS, me, game) {
-		super(os, 'othello-game', {
-			i: me ? me.token : null,
-			game: game.id
-		});
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/othello.ts b/src/client/app/common/scripts/streaming/othello.ts
deleted file mode 100644
index 8f4f217e39..0000000000
--- a/src/client/app/common/scripts/streaming/othello.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import StreamManager from './stream-manager';
-import Stream from './stream';
-import MiOS from '../../../mios';
-
-export class OthelloStream extends Stream {
-	constructor(os: MiOS, me) {
-		super(os, 'othello', {
-			i: me.token
-		});
-	}
-}
-
-export class OthelloStreamManager extends StreamManager<OthelloStream> {
-	private me;
-	private os: MiOS;
-
-	constructor(os: MiOS, me) {
-		super();
-
-		this.me = me;
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new OthelloStream(this.os, this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/reversi-game.ts b/src/client/app/common/scripts/streaming/reversi-game.ts
new file mode 100644
index 0000000000..5638b3013f
--- /dev/null
+++ b/src/client/app/common/scripts/streaming/reversi-game.ts
@@ -0,0 +1,11 @@
+import Stream from './stream';
+import MiOS from '../../../mios';
+
+export class ReversiGameStream extends Stream {
+	constructor(os: MiOS, me, game) {
+		super(os, 'reversi-game', {
+			i: me ? me.token : null,
+			game: game.id
+		});
+	}
+}
diff --git a/src/client/app/common/scripts/streaming/reversi.ts b/src/client/app/common/scripts/streaming/reversi.ts
new file mode 100644
index 0000000000..2e4395f0f1
--- /dev/null
+++ b/src/client/app/common/scripts/streaming/reversi.ts
@@ -0,0 +1,31 @@
+import StreamManager from './stream-manager';
+import Stream from './stream';
+import MiOS from '../../../mios';
+
+export class ReversiStream extends Stream {
+	constructor(os: MiOS, me) {
+		super(os, 'reversi', {
+			i: me.token
+		});
+	}
+}
+
+export class ReversiStreamManager extends StreamManager<ReversiStream> {
+	private me;
+	private os: MiOS;
+
+	constructor(os: MiOS, me) {
+		super();
+
+		this.me = me;
+		this.os = os;
+	}
+
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new ReversiStream(this.os, this.me);
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index b91008f718..5b2fa084fb 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -27,7 +27,7 @@ import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import Switch from './switch.vue';
-import Othello from './othello.vue';
+import Reversi from './reversi.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
@@ -65,7 +65,7 @@ Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-switch', Switch);
-Vue.component('mk-othello', Othello);
+Vue.component('mk-reversi', Reversi);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
diff --git a/src/client/app/common/views/components/othello.game.vue b/src/client/app/common/views/components/othello.game.vue
deleted file mode 100644
index 4c63bd18b8..0000000000
--- a/src/client/app/common/views/components/othello.game.vue
+++ /dev/null
@@ -1,324 +0,0 @@
-<template>
-<div class="root">
-	<header><b>{{ blackUser.name }}</b>(黒) vs <b>{{ whiteUser.name }}</b>(白)</header>
-
-	<div style="overflow: hidden">
-		<p class="turn" v-if="!iAmPlayer && !game.isEnded">{{ turnUser.name }}のターンです<mk-ellipsis/></p>
-		<p class="turn" v-if="logPos != logs.length">{{ turnUser.name }}のターン</p>
-		<p class="turn1" v-if="iAmPlayer && !game.isEnded && !isMyTurn">相手のターンです<mk-ellipsis/></p>
-		<p class="turn2" v-if="iAmPlayer && !game.isEnded && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">あなたのターンです</p>
-		<p class="result" v-if="game.isEnded && logPos == logs.length">
-			<template v-if="game.winner"><b>{{ game.winner.name }}</b>の勝ち{{ game.settings.isLlotheo ? ' (ロセオ)' : '' }}</template>
-			<template v-else>引き分け</template>
-		</p>
-	</div>
-
-	<div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
-		<div v-for="(stone, i) in o.board"
-			:class="{ empty: stone == null, none: o.map[i] == 'null', isEnded: game.isEnded, myTurn: !game.isEnded && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id, i) : null, prev: o.prevPos == i }"
-			@click="set(i)"
-			:title="'[' + (o.transformPosToXy(i)[0] + 1) + ', ' + (o.transformPosToXy(i)[1] + 1) + '] (' + i + ')'"
-		>
-			<img v-if="stone === true" :src="`${blackUser.avatarUrl}?thumbnail&size=128`" alt="">
-			<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
-		</div>
-	</div>
-
-	<p class="status"><b>{{ logPos }}ターン目</b> 黒:{{ o.blackCount }} 白:{{ o.whiteCount }} 合計:{{ o.blackCount + o.whiteCount }}</p>
-
-	<div class="player" v-if="game.isEnded">
-		<el-button-group>
-			<el-button type="primary" @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</el-button>
-			<el-button type="primary" @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</el-button>
-		</el-button-group>
-		<span>{{ logPos }} / {{ logs.length }}</span>
-		<el-button-group>
-			<el-button type="primary" @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</el-button>
-			<el-button type="primary" @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</el-button>
-		</el-button-group>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as CRC32 from 'crc-32';
-import Othello, { Color } from '../../../../../othello/core';
-import { url } from '../../../config';
-
-export default Vue.extend({
-	props: ['initGame', 'connection'],
-
-	data() {
-		return {
-			game: null,
-			o: null as Othello,
-			logs: [],
-			logPos: 0,
-			pollingClock: null
-		};
-	},
-
-	computed: {
-		iAmPlayer(): boolean {
-			if (!this.$store.getters.isSignedIn) return false;
-			return this.game.user1Id == this.$store.state.i.id || this.game.user2Id == this.$store.state.i.id;
-		},
-		myColor(): Color {
-			if (!this.iAmPlayer) return null;
-			if (this.game.user1Id == this.$store.state.i.id && this.game.black == 1) return true;
-			if (this.game.user2Id == this.$store.state.i.id && this.game.black == 2) return true;
-			return false;
-		},
-		opColor(): Color {
-			if (!this.iAmPlayer) return null;
-			return this.myColor === true ? false : true;
-		},
-		blackUser(): any {
-			return this.game.black == 1 ? this.game.user1 : this.game.user2;
-		},
-		whiteUser(): any {
-			return this.game.black == 1 ? this.game.user2 : this.game.user1;
-		},
-		turnUser(): any {
-			if (this.o.turn === true) {
-				return this.game.black == 1 ? this.game.user1 : this.game.user2;
-			} else if (this.o.turn === false) {
-				return this.game.black == 1 ? this.game.user2 : this.game.user1;
-			} else {
-				return null;
-			}
-		},
-		isMyTurn(): boolean {
-			if (this.turnUser == null) return null;
-			return this.turnUser.id == this.$store.state.i.id;
-		}
-	},
-
-	watch: {
-		logPos(v) {
-			if (!this.game.isEnded) return;
-			this.o = new Othello(this.game.settings.map, {
-				isLlotheo: this.game.settings.isLlotheo,
-				canPutEverywhere: this.game.settings.canPutEverywhere,
-				loopedBoard: this.game.settings.loopedBoard
-			});
-			this.logs.forEach((log, i) => {
-				if (i < v) {
-					this.o.put(log.color, log.pos);
-				}
-			});
-			this.$forceUpdate();
-		}
-	},
-
-	created() {
-		this.game = this.initGame;
-
-		this.o = new Othello(this.game.settings.map, {
-			isLlotheo: this.game.settings.isLlotheo,
-			canPutEverywhere: this.game.settings.canPutEverywhere,
-			loopedBoard: this.game.settings.loopedBoard
-		});
-
-		this.game.logs.forEach(log => {
-			this.o.put(log.color, log.pos);
-		});
-
-		this.logs = this.game.logs;
-		this.logPos = this.logs.length;
-
-		// 通信を取りこぼしてもいいように定期的にポーリングさせる
-		if (this.game.isStarted && !this.game.isEnded) {
-			this.pollingClock = setInterval(() => {
-				const crc32 = CRC32.str(this.logs.map(x => x.pos.toString()).join(''));
-				this.connection.send({
-					type: 'check',
-					crc32
-				});
-			}, 3000);
-		}
-	},
-
-	mounted() {
-		this.connection.on('set', this.onSet);
-		this.connection.on('rescue', this.onRescue);
-	},
-
-	beforeDestroy() {
-		this.connection.off('set', this.onSet);
-		this.connection.off('rescue', this.onRescue);
-
-		clearInterval(this.pollingClock);
-	},
-
-	methods: {
-		set(pos) {
-			if (this.game.isEnded) return;
-			if (!this.iAmPlayer) return;
-			if (!this.isMyTurn) return;
-			if (!this.o.canPut(this.myColor, pos)) return;
-
-			this.o.put(this.myColor, pos);
-
-			// サウンドを再生する
-			if (this.$store.state.device.enableSounds) {
-				const sound = new Audio(`${url}/assets/othello-put-me.mp3`);
-				sound.volume = this.$store.state.device.soundVolume;
-				sound.play();
-			}
-
-			this.connection.send({
-				type: 'set',
-				pos
-			});
-
-			this.checkEnd();
-
-			this.$forceUpdate();
-		},
-
-		onSet(x) {
-			this.logs.push(x);
-			this.logPos++;
-			this.o.put(x.color, x.pos);
-			this.checkEnd();
-			this.$forceUpdate();
-
-			// サウンドを再生する
-			if (this.$store.state.device.enableSounds && x.color != this.myColor) {
-				const sound = new Audio(`${url}/assets/othello-put-you.mp3`);
-				sound.volume = this.$store.state.device.soundVolume;
-				sound.play();
-			}
-		},
-
-		checkEnd() {
-			this.game.isEnded = this.o.isEnded;
-			if (this.game.isEnded) {
-				if (this.o.winner === true) {
-					this.game.winnerId = this.game.black == 1 ? this.game.user1Id : this.game.user2Id;
-					this.game.winner = this.game.black == 1 ? this.game.user1 : this.game.user2;
-				} else if (this.o.winner === false) {
-					this.game.winnerId = this.game.black == 1 ? this.game.user2Id : this.game.user1Id;
-					this.game.winner = this.game.black == 1 ? this.game.user2 : this.game.user1;
-				} else {
-					this.game.winnerId = null;
-					this.game.winner = null;
-				}
-			}
-		},
-
-		// 正しいゲーム情報が送られてきたとき
-		onRescue(game) {
-			this.game = game;
-
-			this.o = new Othello(this.game.settings.map, {
-				isLlotheo: this.game.settings.isLlotheo,
-				canPutEverywhere: this.game.settings.canPutEverywhere,
-				loopedBoard: this.game.settings.loopedBoard
-			});
-
-			this.game.logs.forEach(log => {
-				this.o.put(log.color, log.pos, true);
-			});
-
-			this.logs = this.game.logs;
-			this.logPos = this.logs.length;
-
-			this.checkEnd();
-			this.$forceUpdate();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.root
-	text-align center
-
-	> header
-		padding 8px
-		border-bottom dashed 1px #c4cdd4
-
-	> .board
-		display grid
-		grid-gap 4px
-		width 350px
-		height 350px
-		margin 0 auto
-
-		> div
-			background transparent
-			border-radius 6px
-			overflow hidden
-
-			*
-				pointer-events none
-				user-select none
-
-			&.empty
-				border solid 2px #eee
-
-			&.empty.can
-				background #eee
-
-			&.empty.myTurn
-				border-color #ddd
-
-				&.can
-					background #eee
-					cursor pointer
-
-					&:hover
-						border-color darken($theme-color, 10%)
-						background $theme-color
-
-					&:active
-						background darken($theme-color, 10%)
-
-			&.prev
-				box-shadow 0 0 0 4px rgba($theme-color, 0.7)
-
-			&.isEnded
-				border-color #ddd
-
-			&.none
-				border-color transparent !important
-
-			> img
-				display block
-				width 100%
-				height 100%
-
-	> .graph
-		display grid
-		grid-template-columns repeat(61, 1fr)
-		width 300px
-		height 38px
-		margin 0 auto 16px auto
-
-		> div
-			&:not(:empty)
-				background #ccc
-
-			> div:first-child
-				background #333
-
-			> div:last-child
-				background #ccc
-
-	> .status
-		margin 0
-		padding 16px 0
-
-	> .player
-		padding-bottom 32px
-
-		> span
-			display inline-block
-			margin 0 8px
-			min-width 70px
-</style>
diff --git a/src/client/app/common/views/components/othello.gameroom.vue b/src/client/app/common/views/components/othello.gameroom.vue
deleted file mode 100644
index 2dbd04ce49..0000000000
--- a/src/client/app/common/views/components/othello.gameroom.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-<div>
-	<x-room v-if="!g.isStarted" :game="g" :connection="connection"/>
-	<x-game v-else :init-game="g" :connection="connection"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XGame from './othello.game.vue';
-import XRoom from './othello.room.vue';
-import { OthelloGameStream } from '../../scripts/streaming/othello-game';
-
-export default Vue.extend({
-	components: {
-		XGame,
-		XRoom
-	},
-	props: ['game'],
-	data() {
-		return {
-			connection: null,
-			g: null
-		};
-	},
-	created() {
-		this.g = this.game;
-		this.connection = new OthelloGameStream((this as any).os, this.$store.state.i, this.game);
-		this.connection.on('started', this.onStarted);
-	},
-	beforeDestroy() {
-		this.connection.off('started', this.onStarted);
-		this.connection.close();
-	},
-	methods: {
-		onStarted(game) {
-			Object.assign(this.g, game);
-			this.$forceUpdate();
-		}
-	}
-});
-</script>
diff --git a/src/client/app/common/views/components/othello.room.vue b/src/client/app/common/views/components/othello.room.vue
deleted file mode 100644
index dcf41f2e04..0000000000
--- a/src/client/app/common/views/components/othello.room.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<template>
-<div class="root">
-	<header><b>{{ game.user1.name }}</b> vs <b>{{ game.user2.name }}</b></header>
-
-	<div>
-		<p>ゲームの設定</p>
-
-		<el-card class="map">
-			<div slot="header">
-				<el-select :class="$style.mapSelect" v-model="mapName" placeholder="マップを選択" @change="onMapChange">
-					<el-option label="ランダム" :value="null"/>
-					<el-option-group v-for="c in mapCategories" :key="c" :label="c">
-						<el-option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name">
-							<span style="float: left">{{ m.name }}</span>
-							<span style="float: right; color: #8492a6; font-size: 13px" v-if="m.author">(by <i>{{ m.author }}</i>)</span>
-						</el-option>
-					</el-option-group>
-				</el-select>
-			</div>
-			<div :class="$style.board" v-if="game.settings.map != null" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
-				<div v-for="(x, i) in game.settings.map.join('')"
-					:data-none="x == ' '"
-					@click="onPixelClick(i, x)"
-				>
-					<template v-if="x == 'b'">%fa:circle%</template>
-					<template v-if="x == 'w'">%fa:circle R%</template>
-				</div>
-			</div>
-		</el-card>
-
-		<el-card class="bw">
-			<div slot="header">
-				<span>先手/後手</span>
-			</div>
-			<el-radio v-model="game.settings.bw" label="random" @change="updateSettings">ランダム</el-radio>
-			<el-radio v-model="game.settings.bw" :label="1" @change="updateSettings">{{ game.user1.name }}が黒</el-radio>
-			<el-radio v-model="game.settings.bw" :label="2" @change="updateSettings">{{ game.user2.name }}が黒</el-radio>
-		</el-card>
-
-		<el-card class="rules">
-			<div slot="header">
-				<span>ルール</span>
-			</div>
-			<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="石の少ない方が勝ち(ロセオ)"/>
-			<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="ループマップ"/>
-			<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="どこでも置けるモード"/>
-		</el-card>
-
-		<el-card class="bot-form" v-if="form">
-			<div slot="header">
-				<span>Botの設定</span>
-			</div>
-			<el-alert v-for="message in messages"
-				:title="message.text"
-				:type="message.type"
-				:key="message.id"
-			/>
-			<template v-for="item in form">
-				<mk-switch v-if="item.type == 'button'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm($event, item)">{{ item.desc || '' }}</mk-switch>
-
-				<el-card v-if="item.type == 'radio'" :key="item.id">
-					<div slot="header">
-						<span>{{ item.label }}</span>
-					</div>
-					<el-radio v-for="(r, i) in item.items" :key="item.id + ':' + i" v-model="item.value" :label="r.value" @change="onChangeForm($event, item)">{{ r.label }}</el-radio>
-				</el-card>
-
-				<el-card v-if="item.type == 'textbox'" :key="item.id">
-					<div slot="header">
-						<span>{{ item.label }}</span>
-					</div>
-					<el-input v-model="item.value" @change="onChangeForm($event, item)"/>
-				</el-card>
-			</template>
-		</el-card>
-	</div>
-
-	<footer>
-		<p class="status">
-			<template v-if="isAccepted && isOpAccepted">ゲームは数秒後に開始されます<mk-ellipsis/></template>
-			<template v-if="isAccepted && !isOpAccepted">相手の準備が完了するのを待っています<mk-ellipsis/></template>
-			<template v-if="!isAccepted && isOpAccepted">あなたの準備が完了するのを待っています</template>
-			<template v-if="!isAccepted && !isOpAccepted">準備中<mk-ellipsis/></template>
-		</p>
-
-		<div class="actions">
-			<el-button @click="exit">キャンセル</el-button>
-			<el-button type="primary" @click="accept" v-if="!isAccepted">準備完了</el-button>
-			<el-button type="primary" @click="cancel" v-if="isAccepted">準備続行</el-button>
-		</div>
-	</footer>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as maps from '../../../../../othello/maps';
-
-export default Vue.extend({
-	props: ['game', 'connection'],
-
-	data() {
-		return {
-			o: null,
-			isLlotheo: false,
-			mapName: maps.eighteight.name,
-			maps: maps,
-			form: null,
-			messages: []
-		};
-	},
-
-	computed: {
-		mapCategories(): string[] {
-			const categories = Object.entries(maps).map(x => x[1].category);
-			return categories.filter((item, pos) => categories.indexOf(item) == pos);
-		},
-		isAccepted(): boolean {
-			if (this.game.user1Id == this.$store.state.i.id && this.game.user1Accepted) return true;
-			if (this.game.user2Id == this.$store.state.i.id && this.game.user2Accepted) return true;
-			return false;
-		},
-		isOpAccepted(): boolean {
-			if (this.game.user1Id != this.$store.state.i.id && this.game.user1Accepted) return true;
-			if (this.game.user2Id != this.$store.state.i.id && this.game.user2Accepted) return true;
-			return false;
-		}
-	},
-
-	created() {
-		this.connection.on('change-accepts', this.onChangeAccepts);
-		this.connection.on('update-settings', this.onUpdateSettings);
-		this.connection.on('init-form', this.onInitForm);
-		this.connection.on('message', this.onMessage);
-
-		if (this.game.user1Id != this.$store.state.i.id && this.game.settings.form1) this.form = this.game.settings.form1;
-		if (this.game.user2Id != this.$store.state.i.id && this.game.settings.form2) this.form = this.game.settings.form2;
-	},
-
-	beforeDestroy() {
-		this.connection.off('change-accepts', this.onChangeAccepts);
-		this.connection.off('update-settings', this.onUpdateSettings);
-		this.connection.off('init-form', this.onInitForm);
-		this.connection.off('message', this.onMessage);
-	},
-
-	methods: {
-		exit() {
-
-		},
-
-		accept() {
-			this.connection.send({
-				type: 'accept'
-			});
-		},
-
-		cancel() {
-			this.connection.send({
-				type: 'cancel-accept'
-			});
-		},
-
-		onChangeAccepts(accepts) {
-			this.game.user1Accepted = accepts.user1;
-			this.game.user2Accepted = accepts.user2;
-			this.$forceUpdate();
-		},
-
-		updateSettings() {
-			this.connection.send({
-				type: 'update-settings',
-				settings: this.game.settings
-			});
-		},
-
-		onUpdateSettings(settings) {
-			this.game.settings = settings;
-			if (this.game.settings.map == null) {
-				this.mapName = null;
-			} else {
-				const foundMap = Object.entries(maps).find(x => x[1].data.join('') == this.game.settings.map.join(''));
-				this.mapName = foundMap ? foundMap[1].name : '-Custom-';
-			}
-		},
-
-		onInitForm(x) {
-			if (x.userId == this.$store.state.i.id) return;
-			this.form = x.form;
-		},
-
-		onMessage(x) {
-			if (x.userId == this.$store.state.i.id) return;
-			this.messages.unshift(x.message);
-		},
-
-		onChangeForm(v, item) {
-			this.connection.send({
-				type: 'update-form',
-				id: item.id,
-				value: v
-			});
-		},
-
-		onMapChange(v) {
-			if (v == null) {
-				this.game.settings.map = null;
-			} else {
-				this.game.settings.map = Object.entries(maps).find(x => x[1].name == v)[1].data;
-			}
-			this.$forceUpdate();
-			this.updateSettings();
-		},
-
-		onPixelClick(pos, pixel) {
-			const x = pos % this.game.settings.map[0].length;
-			const y = Math.floor(pos / this.game.settings.map[0].length);
-			const newPixel =
-				pixel == ' ' ? '-' :
-				pixel == '-' ? 'b' :
-				pixel == 'b' ? 'w' :
-				' ';
-			const line = this.game.settings.map[y].split('');
-			line[x] = newPixel;
-			this.$set(this.game.settings.map, y, line.join(''));
-			this.$forceUpdate();
-			this.updateSettings();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.root
-	text-align center
-	background #f9f9f9
-
-	> header
-		padding 8px
-		border-bottom dashed 1px #c4cdd4
-
-	> div
-		padding 0 16px
-
-		> .map
-		> .bw
-		> .rules
-		> .bot-form
-			max-width 400px
-			margin 0 auto 16px auto
-
-	> footer
-		position sticky
-		bottom 0
-		padding 16px
-		background rgba(255, 255, 255, 0.9)
-		border-top solid 1px #c4cdd4
-
-		> .status
-			margin 0 0 16px 0
-</style>
-
-<style lang="stylus" module>
-.mapSelect
-	width 100%
-
-.board
-	display grid
-	grid-gap 4px
-	width 300px
-	height 300px
-	margin 0 auto
-
-	> div
-		background transparent
-		border solid 2px #ddd
-		border-radius 6px
-		overflow hidden
-		cursor pointer
-
-		*
-			pointer-events none
-			user-select none
-			width 100%
-			height 100%
-
-		&[data-none]
-			border-color transparent
-
-</style>
-
-<style lang="stylus">
-.el-alert__content
-	position initial !important
-</style>
diff --git a/src/client/app/common/views/components/othello.vue b/src/client/app/common/views/components/othello.vue
deleted file mode 100644
index a0971c45b4..0000000000
--- a/src/client/app/common/views/components/othello.vue
+++ /dev/null
@@ -1,313 +0,0 @@
-<template>
-<div class="mk-othello">
-	<div v-if="game">
-		<x-gameroom :game="game"/>
-	</div>
-	<div class="matching" v-else-if="matching">
-		<h1><b>{{ matching.name }}</b>を待っています<mk-ellipsis/></h1>
-		<div class="cancel">
-			<el-button round @click="cancel">キャンセル</el-button>
-		</div>
-	</div>
-	<div class="index" v-else>
-		<h1>Misskey %fa:circle%thell%fa:circle R%</h1>
-		<p>他のMisskeyユーザーとオセロで対戦しよう</p>
-		<div class="play">
-			<el-button round>フリーマッチ(準備中)</el-button>
-			<el-button type="primary" round @click="match">指名</el-button>
-			<details>
-				<summary>遊び方</summary>
-				<div>
-					<p>オセロは、相手と交互に石をボードに置いてゆき、相手の石を挟んでひっくり返しながら、最終的に残った石が多い方が勝ちというボードゲームです。</p>
-					<dl>
-						<dt><b>フリーマッチ</b></dt>
-						<dd>ランダムなユーザーと対戦するモードです。</dd>
-						<dt><b>指名</b></dt>
-						<dd>指定したユーザーと対戦するモードです。</dd>
-					</dl>
-				</div>
-			</details>
-		</div>
-		<section v-if="invitations.length > 0">
-			<h2>対局の招待があります！:</h2>
-			<div class="invitation" v-for="i in invitations" tabindex="-1" @click="accept(i)">
-				<mk-avatar class="avatar" :user="i.parent"/>
-				<span class="name"><b>{{ i.parent.name }}</b></span>
-				<span class="username">@{{ i.parent.username }}</span>
-				<mk-time :time="i.createdAt"/>
-			</div>
-		</section>
-		<section v-if="myGames.length > 0">
-			<h2>自分の対局</h2>
-			<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`">
-				<mk-avatar class="avatar" :user="g.user1"/>
-				<mk-avatar class="avatar" :user="g.user2"/>
-				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
-				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
-			</a>
-		</section>
-		<section v-if="games.length > 0">
-			<h2>みんなの対局</h2>
-			<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`">
-				<mk-avatar class="avatar" :user="g.user1"/>
-				<mk-avatar class="avatar" :user="g.user2"/>
-				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
-				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
-			</a>
-		</section>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XGameroom from './othello.gameroom.vue';
-
-export default Vue.extend({
-	components: {
-		XGameroom
-	},
-	props: ['initGame'],
-	data() {
-		return {
-			game: null,
-			games: [],
-			gamesFetching: true,
-			gamesMoreFetching: false,
-			myGames: [],
-			matching: null,
-			invitations: [],
-			connection: null,
-			connectionId: null,
-			pingClock: null
-		};
-	},
-	watch: {
-		game(g) {
-			this.$emit('gamed', g);
-		}
-	},
-	created() {
-		if (this.initGame) {
-			this.game = this.initGame;
-		}
-	},
-	mounted() {
-		this.connection = (this as any).os.streams.othelloStream.getConnection();
-		this.connectionId = (this as any).os.streams.othelloStream.use();
-
-		this.connection.on('matched', this.onMatched);
-		this.connection.on('invited', this.onInvited);
-
-		(this as any).api('othello/games', {
-			my: true
-		}).then(games => {
-			this.myGames = games;
-		});
-
-		(this as any).api('othello/games').then(games => {
-			this.games = games;
-			this.gamesFetching = false;
-		});
-
-		(this as any).api('othello/invitations').then(invitations => {
-			this.invitations = this.invitations.concat(invitations);
-		});
-
-		this.pingClock = setInterval(() => {
-			if (this.matching) {
-				this.connection.send({
-					type: 'ping',
-					id: this.matching.id
-				});
-			}
-		}, 3000);
-	},
-	beforeDestroy() {
-		this.connection.off('matched', this.onMatched);
-		this.connection.off('invited', this.onInvited);
-		(this as any).os.streams.othelloStream.dispose(this.connectionId);
-
-		clearInterval(this.pingClock);
-	},
-	methods: {
-		go(game) {
-			(this as any).api('othello/games/show', {
-				gameId: game.id
-			}).then(game => {
-				this.matching = null;
-				this.game = game;
-			});
-		},
-		match() {
-			(this as any).apis.input({
-				title: 'ユーザー名を入力してください'
-			}).then(username => {
-				(this as any).api('users/show', {
-					username
-				}).then(user => {
-					(this as any).api('othello/match', {
-						userId: user.id
-					}).then(res => {
-						if (res == null) {
-							this.matching = user;
-						} else {
-							this.game = res;
-						}
-					});
-				});
-			});
-		},
-		cancel() {
-			this.matching = null;
-			(this as any).api('othello/match/cancel');
-		},
-		accept(invitation) {
-			(this as any).api('othello/match', {
-				userId: invitation.parent.id
-			}).then(game => {
-				if (game) {
-					this.matching = null;
-					this.game = game;
-				}
-			});
-		},
-		onMatched(game) {
-			this.matching = null;
-			this.game = game;
-		},
-		onInvited(invite) {
-			this.invitations.unshift(invite);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.mk-othello
-	color #677f84
-	background #fff
-
-	> .matching
-		> h1
-			margin 0
-			padding 24px
-			font-size 20px
-			text-align center
-			font-weight normal
-
-		> .cancel
-			margin 0 auto
-			padding 24px 0 0 0
-			max-width 200px
-			text-align center
-			border-top dashed 1px #c4cdd4
-
-	> .index
-		> h1
-			margin 0
-			padding 24px
-			font-size 24px
-			text-align center
-			font-weight normal
-			color #fff
-			background linear-gradient(to bottom, #8bca3e, #d6cf31)
-
-			& + p
-				margin 0
-				padding 12px
-				margin-bottom 12px
-				text-align center
-				font-size 14px
-				border-bottom solid 1px #d3d9dc
-
-		> .play
-			margin 0 auto
-			padding 0 16px
-			max-width 500px
-			text-align center
-
-			> details
-				margin 8px 0
-
-				> div
-					padding 16px
-					font-size 14px
-					text-align left
-					background #f5f5f5
-					border-radius 8px
-
-		> section
-			margin 0 auto
-			padding 0 16px 16px 16px
-			max-width 500px
-			border-top solid 1px #d3d9dc
-
-			> h2
-				margin 0
-				padding 16px 0 8px 0
-				font-size 16px
-				font-weight bold
-
-	.invitation
-		margin 8px 0
-		padding 8px
-		border solid 1px #e1e5e8
-		border-radius 6px
-		cursor pointer
-
-		*
-			pointer-events none
-			user-select none
-
-		&:focus
-			border-color $theme-color
-
-		&:hover
-			background #f5f5f5
-
-		&:active
-			background #eee
-
-		> .avatar
-			width 32px
-			height 32px
-			border-radius 100%
-
-		> span
-			margin 0 8px
-			line-height 32px
-
-	.game
-		display block
-		margin 8px 0
-		padding 8px
-		color #677f84
-		border solid 1px #e1e5e8
-		border-radius 6px
-		cursor pointer
-
-		*
-			pointer-events none
-			user-select none
-
-		&:focus
-			border-color $theme-color
-
-		&:hover
-			background #f5f5f5
-
-		&:active
-			background #eee
-
-		> .avatar
-			width 32px
-			height 32px
-			border-radius 100%
-
-		> span
-			margin 0 8px
-			line-height 32px
-</style>
diff --git a/src/client/app/common/views/components/reversi.game.vue b/src/client/app/common/views/components/reversi.game.vue
new file mode 100644
index 0000000000..dc79c95bb8
--- /dev/null
+++ b/src/client/app/common/views/components/reversi.game.vue
@@ -0,0 +1,324 @@
+<template>
+<div class="root">
+	<header><b>{{ blackUser.name }}</b>(黒) vs <b>{{ whiteUser.name }}</b>(白)</header>
+
+	<div style="overflow: hidden">
+		<p class="turn" v-if="!iAmPlayer && !game.isEnded">{{ turnUser.name }}のターンです<mk-ellipsis/></p>
+		<p class="turn" v-if="logPos != logs.length">{{ turnUser.name }}のターン</p>
+		<p class="turn1" v-if="iAmPlayer && !game.isEnded && !isMyTurn">相手のターンです<mk-ellipsis/></p>
+		<p class="turn2" v-if="iAmPlayer && !game.isEnded && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">あなたのターンです</p>
+		<p class="result" v-if="game.isEnded && logPos == logs.length">
+			<template v-if="game.winner"><b>{{ game.winner.name }}</b>の勝ち{{ game.settings.isLlotheo ? ' (ロセオ)' : '' }}</template>
+			<template v-else>引き分け</template>
+		</p>
+	</div>
+
+	<div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
+		<div v-for="(stone, i) in o.board"
+			:class="{ empty: stone == null, none: o.map[i] == 'null', isEnded: game.isEnded, myTurn: !game.isEnded && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id, i) : null, prev: o.prevPos == i }"
+			@click="set(i)"
+			:title="'[' + (o.transformPosToXy(i)[0] + 1) + ', ' + (o.transformPosToXy(i)[1] + 1) + '] (' + i + ')'"
+		>
+			<img v-if="stone === true" :src="`${blackUser.avatarUrl}?thumbnail&size=128`" alt="">
+			<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
+		</div>
+	</div>
+
+	<p class="status"><b>{{ logPos }}ターン目</b> 黒:{{ o.blackCount }} 白:{{ o.whiteCount }} 合計:{{ o.blackCount + o.whiteCount }}</p>
+
+	<div class="player" v-if="game.isEnded">
+		<el-button-group>
+			<el-button type="primary" @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</el-button>
+			<el-button type="primary" @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</el-button>
+		</el-button-group>
+		<span>{{ logPos }} / {{ logs.length }}</span>
+		<el-button-group>
+			<el-button type="primary" @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</el-button>
+			<el-button type="primary" @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</el-button>
+		</el-button-group>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as CRC32 from 'crc-32';
+import Reversi, { Color } from '../../../../../reversi/core';
+import { url } from '../../../config';
+
+export default Vue.extend({
+	props: ['initGame', 'connection'],
+
+	data() {
+		return {
+			game: null,
+			o: null as Reversi,
+			logs: [],
+			logPos: 0,
+			pollingClock: null
+		};
+	},
+
+	computed: {
+		iAmPlayer(): boolean {
+			if (!this.$store.getters.isSignedIn) return false;
+			return this.game.user1Id == this.$store.state.i.id || this.game.user2Id == this.$store.state.i.id;
+		},
+		myColor(): Color {
+			if (!this.iAmPlayer) return null;
+			if (this.game.user1Id == this.$store.state.i.id && this.game.black == 1) return true;
+			if (this.game.user2Id == this.$store.state.i.id && this.game.black == 2) return true;
+			return false;
+		},
+		opColor(): Color {
+			if (!this.iAmPlayer) return null;
+			return this.myColor === true ? false : true;
+		},
+		blackUser(): any {
+			return this.game.black == 1 ? this.game.user1 : this.game.user2;
+		},
+		whiteUser(): any {
+			return this.game.black == 1 ? this.game.user2 : this.game.user1;
+		},
+		turnUser(): any {
+			if (this.o.turn === true) {
+				return this.game.black == 1 ? this.game.user1 : this.game.user2;
+			} else if (this.o.turn === false) {
+				return this.game.black == 1 ? this.game.user2 : this.game.user1;
+			} else {
+				return null;
+			}
+		},
+		isMyTurn(): boolean {
+			if (this.turnUser == null) return null;
+			return this.turnUser.id == this.$store.state.i.id;
+		}
+	},
+
+	watch: {
+		logPos(v) {
+			if (!this.game.isEnded) return;
+			this.o = new Reversi(this.game.settings.map, {
+				isLlotheo: this.game.settings.isLlotheo,
+				canPutEverywhere: this.game.settings.canPutEverywhere,
+				loopedBoard: this.game.settings.loopedBoard
+			});
+			this.logs.forEach((log, i) => {
+				if (i < v) {
+					this.o.put(log.color, log.pos);
+				}
+			});
+			this.$forceUpdate();
+		}
+	},
+
+	created() {
+		this.game = this.initGame;
+
+		this.o = new Reversi(this.game.settings.map, {
+			isLlotheo: this.game.settings.isLlotheo,
+			canPutEverywhere: this.game.settings.canPutEverywhere,
+			loopedBoard: this.game.settings.loopedBoard
+		});
+
+		this.game.logs.forEach(log => {
+			this.o.put(log.color, log.pos);
+		});
+
+		this.logs = this.game.logs;
+		this.logPos = this.logs.length;
+
+		// 通信を取りこぼしてもいいように定期的にポーリングさせる
+		if (this.game.isStarted && !this.game.isEnded) {
+			this.pollingClock = setInterval(() => {
+				const crc32 = CRC32.str(this.logs.map(x => x.pos.toString()).join(''));
+				this.connection.send({
+					type: 'check',
+					crc32
+				});
+			}, 3000);
+		}
+	},
+
+	mounted() {
+		this.connection.on('set', this.onSet);
+		this.connection.on('rescue', this.onRescue);
+	},
+
+	beforeDestroy() {
+		this.connection.off('set', this.onSet);
+		this.connection.off('rescue', this.onRescue);
+
+		clearInterval(this.pollingClock);
+	},
+
+	methods: {
+		set(pos) {
+			if (this.game.isEnded) return;
+			if (!this.iAmPlayer) return;
+			if (!this.isMyTurn) return;
+			if (!this.o.canPut(this.myColor, pos)) return;
+
+			this.o.put(this.myColor, pos);
+
+			// サウンドを再生する
+			if (this.$store.state.device.enableSounds) {
+				const sound = new Audio(`${url}/assets/reversi-put-me.mp3`);
+				sound.volume = this.$store.state.device.soundVolume;
+				sound.play();
+			}
+
+			this.connection.send({
+				type: 'set',
+				pos
+			});
+
+			this.checkEnd();
+
+			this.$forceUpdate();
+		},
+
+		onSet(x) {
+			this.logs.push(x);
+			this.logPos++;
+			this.o.put(x.color, x.pos);
+			this.checkEnd();
+			this.$forceUpdate();
+
+			// サウンドを再生する
+			if (this.$store.state.device.enableSounds && x.color != this.myColor) {
+				const sound = new Audio(`${url}/assets/reversi-put-you.mp3`);
+				sound.volume = this.$store.state.device.soundVolume;
+				sound.play();
+			}
+		},
+
+		checkEnd() {
+			this.game.isEnded = this.o.isEnded;
+			if (this.game.isEnded) {
+				if (this.o.winner === true) {
+					this.game.winnerId = this.game.black == 1 ? this.game.user1Id : this.game.user2Id;
+					this.game.winner = this.game.black == 1 ? this.game.user1 : this.game.user2;
+				} else if (this.o.winner === false) {
+					this.game.winnerId = this.game.black == 1 ? this.game.user2Id : this.game.user1Id;
+					this.game.winner = this.game.black == 1 ? this.game.user2 : this.game.user1;
+				} else {
+					this.game.winnerId = null;
+					this.game.winner = null;
+				}
+			}
+		},
+
+		// 正しいゲーム情報が送られてきたとき
+		onRescue(game) {
+			this.game = game;
+
+			this.o = new Reversi(this.game.settings.map, {
+				isLlotheo: this.game.settings.isLlotheo,
+				canPutEverywhere: this.game.settings.canPutEverywhere,
+				loopedBoard: this.game.settings.loopedBoard
+			});
+
+			this.game.logs.forEach(log => {
+				this.o.put(log.color, log.pos, true);
+			});
+
+			this.logs = this.game.logs;
+			this.logPos = this.logs.length;
+
+			this.checkEnd();
+			this.$forceUpdate();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.root
+	text-align center
+
+	> header
+		padding 8px
+		border-bottom dashed 1px #c4cdd4
+
+	> .board
+		display grid
+		grid-gap 4px
+		width 350px
+		height 350px
+		margin 0 auto
+
+		> div
+			background transparent
+			border-radius 6px
+			overflow hidden
+
+			*
+				pointer-events none
+				user-select none
+
+			&.empty
+				border solid 2px #eee
+
+			&.empty.can
+				background #eee
+
+			&.empty.myTurn
+				border-color #ddd
+
+				&.can
+					background #eee
+					cursor pointer
+
+					&:hover
+						border-color darken($theme-color, 10%)
+						background $theme-color
+
+					&:active
+						background darken($theme-color, 10%)
+
+			&.prev
+				box-shadow 0 0 0 4px rgba($theme-color, 0.7)
+
+			&.isEnded
+				border-color #ddd
+
+			&.none
+				border-color transparent !important
+
+			> img
+				display block
+				width 100%
+				height 100%
+
+	> .graph
+		display grid
+		grid-template-columns repeat(61, 1fr)
+		width 300px
+		height 38px
+		margin 0 auto 16px auto
+
+		> div
+			&:not(:empty)
+				background #ccc
+
+			> div:first-child
+				background #333
+
+			> div:last-child
+				background #ccc
+
+	> .status
+		margin 0
+		padding 16px 0
+
+	> .player
+		padding-bottom 32px
+
+		> span
+			display inline-block
+			margin 0 8px
+			min-width 70px
+</style>
diff --git a/src/client/app/common/views/components/reversi.gameroom.vue b/src/client/app/common/views/components/reversi.gameroom.vue
new file mode 100644
index 0000000000..7ce0112451
--- /dev/null
+++ b/src/client/app/common/views/components/reversi.gameroom.vue
@@ -0,0 +1,42 @@
+<template>
+<div>
+	<x-room v-if="!g.isStarted" :game="g" :connection="connection"/>
+	<x-game v-else :init-game="g" :connection="connection"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XGame from './reversi.game.vue';
+import XRoom from './reversi.room.vue';
+import { ReversiGameStream } from '../../scripts/streaming/reversi-game';
+
+export default Vue.extend({
+	components: {
+		XGame,
+		XRoom
+	},
+	props: ['game'],
+	data() {
+		return {
+			connection: null,
+			g: null
+		};
+	},
+	created() {
+		this.g = this.game;
+		this.connection = new ReversiGameStream((this as any).os, this.$store.state.i, this.game);
+		this.connection.on('started', this.onStarted);
+	},
+	beforeDestroy() {
+		this.connection.off('started', this.onStarted);
+		this.connection.close();
+	},
+	methods: {
+		onStarted(game) {
+			Object.assign(this.g, game);
+			this.$forceUpdate();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/common/views/components/reversi.room.vue b/src/client/app/common/views/components/reversi.room.vue
new file mode 100644
index 0000000000..5074845758
--- /dev/null
+++ b/src/client/app/common/views/components/reversi.room.vue
@@ -0,0 +1,297 @@
+<template>
+<div class="root">
+	<header><b>{{ game.user1.name }}</b> vs <b>{{ game.user2.name }}</b></header>
+
+	<div>
+		<p>ゲームの設定</p>
+
+		<el-card class="map">
+			<div slot="header">
+				<el-select :class="$style.mapSelect" v-model="mapName" placeholder="マップを選択" @change="onMapChange">
+					<el-option label="ランダム" :value="null"/>
+					<el-option-group v-for="c in mapCategories" :key="c" :label="c">
+						<el-option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name">
+							<span style="float: left">{{ m.name }}</span>
+							<span style="float: right; color: #8492a6; font-size: 13px" v-if="m.author">(by <i>{{ m.author }}</i>)</span>
+						</el-option>
+					</el-option-group>
+				</el-select>
+			</div>
+			<div :class="$style.board" v-if="game.settings.map != null" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
+				<div v-for="(x, i) in game.settings.map.join('')"
+					:data-none="x == ' '"
+					@click="onPixelClick(i, x)"
+				>
+					<template v-if="x == 'b'">%fa:circle%</template>
+					<template v-if="x == 'w'">%fa:circle R%</template>
+				</div>
+			</div>
+		</el-card>
+
+		<el-card class="bw">
+			<div slot="header">
+				<span>先手/後手</span>
+			</div>
+			<el-radio v-model="game.settings.bw" label="random" @change="updateSettings">ランダム</el-radio>
+			<el-radio v-model="game.settings.bw" :label="1" @change="updateSettings">{{ game.user1.name }}が黒</el-radio>
+			<el-radio v-model="game.settings.bw" :label="2" @change="updateSettings">{{ game.user2.name }}が黒</el-radio>
+		</el-card>
+
+		<el-card class="rules">
+			<div slot="header">
+				<span>ルール</span>
+			</div>
+			<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="石の少ない方が勝ち(ロセオ)"/>
+			<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="ループマップ"/>
+			<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="どこでも置けるモード"/>
+		</el-card>
+
+		<el-card class="bot-form" v-if="form">
+			<div slot="header">
+				<span>Botの設定</span>
+			</div>
+			<el-alert v-for="message in messages"
+				:title="message.text"
+				:type="message.type"
+				:key="message.id"
+			/>
+			<template v-for="item in form">
+				<mk-switch v-if="item.type == 'button'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm($event, item)">{{ item.desc || '' }}</mk-switch>
+
+				<el-card v-if="item.type == 'radio'" :key="item.id">
+					<div slot="header">
+						<span>{{ item.label }}</span>
+					</div>
+					<el-radio v-for="(r, i) in item.items" :key="item.id + ':' + i" v-model="item.value" :label="r.value" @change="onChangeForm($event, item)">{{ r.label }}</el-radio>
+				</el-card>
+
+				<el-card v-if="item.type == 'textbox'" :key="item.id">
+					<div slot="header">
+						<span>{{ item.label }}</span>
+					</div>
+					<el-input v-model="item.value" @change="onChangeForm($event, item)"/>
+				</el-card>
+			</template>
+		</el-card>
+	</div>
+
+	<footer>
+		<p class="status">
+			<template v-if="isAccepted && isOpAccepted">ゲームは数秒後に開始されます<mk-ellipsis/></template>
+			<template v-if="isAccepted && !isOpAccepted">相手の準備が完了するのを待っています<mk-ellipsis/></template>
+			<template v-if="!isAccepted && isOpAccepted">あなたの準備が完了するのを待っています</template>
+			<template v-if="!isAccepted && !isOpAccepted">準備中<mk-ellipsis/></template>
+		</p>
+
+		<div class="actions">
+			<el-button @click="exit">キャンセル</el-button>
+			<el-button type="primary" @click="accept" v-if="!isAccepted">準備完了</el-button>
+			<el-button type="primary" @click="cancel" v-if="isAccepted">準備続行</el-button>
+		</div>
+	</footer>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as maps from '../../../../../reversi/maps';
+
+export default Vue.extend({
+	props: ['game', 'connection'],
+
+	data() {
+		return {
+			o: null,
+			isLlotheo: false,
+			mapName: maps.eighteight.name,
+			maps: maps,
+			form: null,
+			messages: []
+		};
+	},
+
+	computed: {
+		mapCategories(): string[] {
+			const categories = Object.entries(maps).map(x => x[1].category);
+			return categories.filter((item, pos) => categories.indexOf(item) == pos);
+		},
+		isAccepted(): boolean {
+			if (this.game.user1Id == this.$store.state.i.id && this.game.user1Accepted) return true;
+			if (this.game.user2Id == this.$store.state.i.id && this.game.user2Accepted) return true;
+			return false;
+		},
+		isOpAccepted(): boolean {
+			if (this.game.user1Id != this.$store.state.i.id && this.game.user1Accepted) return true;
+			if (this.game.user2Id != this.$store.state.i.id && this.game.user2Accepted) return true;
+			return false;
+		}
+	},
+
+	created() {
+		this.connection.on('change-accepts', this.onChangeAccepts);
+		this.connection.on('update-settings', this.onUpdateSettings);
+		this.connection.on('init-form', this.onInitForm);
+		this.connection.on('message', this.onMessage);
+
+		if (this.game.user1Id != this.$store.state.i.id && this.game.settings.form1) this.form = this.game.settings.form1;
+		if (this.game.user2Id != this.$store.state.i.id && this.game.settings.form2) this.form = this.game.settings.form2;
+	},
+
+	beforeDestroy() {
+		this.connection.off('change-accepts', this.onChangeAccepts);
+		this.connection.off('update-settings', this.onUpdateSettings);
+		this.connection.off('init-form', this.onInitForm);
+		this.connection.off('message', this.onMessage);
+	},
+
+	methods: {
+		exit() {
+
+		},
+
+		accept() {
+			this.connection.send({
+				type: 'accept'
+			});
+		},
+
+		cancel() {
+			this.connection.send({
+				type: 'cancel-accept'
+			});
+		},
+
+		onChangeAccepts(accepts) {
+			this.game.user1Accepted = accepts.user1;
+			this.game.user2Accepted = accepts.user2;
+			this.$forceUpdate();
+		},
+
+		updateSettings() {
+			this.connection.send({
+				type: 'update-settings',
+				settings: this.game.settings
+			});
+		},
+
+		onUpdateSettings(settings) {
+			this.game.settings = settings;
+			if (this.game.settings.map == null) {
+				this.mapName = null;
+			} else {
+				const foundMap = Object.entries(maps).find(x => x[1].data.join('') == this.game.settings.map.join(''));
+				this.mapName = foundMap ? foundMap[1].name : '-Custom-';
+			}
+		},
+
+		onInitForm(x) {
+			if (x.userId == this.$store.state.i.id) return;
+			this.form = x.form;
+		},
+
+		onMessage(x) {
+			if (x.userId == this.$store.state.i.id) return;
+			this.messages.unshift(x.message);
+		},
+
+		onChangeForm(v, item) {
+			this.connection.send({
+				type: 'update-form',
+				id: item.id,
+				value: v
+			});
+		},
+
+		onMapChange(v) {
+			if (v == null) {
+				this.game.settings.map = null;
+			} else {
+				this.game.settings.map = Object.entries(maps).find(x => x[1].name == v)[1].data;
+			}
+			this.$forceUpdate();
+			this.updateSettings();
+		},
+
+		onPixelClick(pos, pixel) {
+			const x = pos % this.game.settings.map[0].length;
+			const y = Math.floor(pos / this.game.settings.map[0].length);
+			const newPixel =
+				pixel == ' ' ? '-' :
+				pixel == '-' ? 'b' :
+				pixel == 'b' ? 'w' :
+				' ';
+			const line = this.game.settings.map[y].split('');
+			line[x] = newPixel;
+			this.$set(this.game.settings.map, y, line.join(''));
+			this.$forceUpdate();
+			this.updateSettings();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.root
+	text-align center
+	background #f9f9f9
+
+	> header
+		padding 8px
+		border-bottom dashed 1px #c4cdd4
+
+	> div
+		padding 0 16px
+
+		> .map
+		> .bw
+		> .rules
+		> .bot-form
+			max-width 400px
+			margin 0 auto 16px auto
+
+	> footer
+		position sticky
+		bottom 0
+		padding 16px
+		background rgba(255, 255, 255, 0.9)
+		border-top solid 1px #c4cdd4
+
+		> .status
+			margin 0 0 16px 0
+</style>
+
+<style lang="stylus" module>
+.mapSelect
+	width 100%
+
+.board
+	display grid
+	grid-gap 4px
+	width 300px
+	height 300px
+	margin 0 auto
+
+	> div
+		background transparent
+		border solid 2px #ddd
+		border-radius 6px
+		overflow hidden
+		cursor pointer
+
+		*
+			pointer-events none
+			user-select none
+			width 100%
+			height 100%
+
+		&[data-none]
+			border-color transparent
+
+</style>
+
+<style lang="stylus">
+.el-alert__content
+	position initial !important
+</style>
diff --git a/src/client/app/common/views/components/reversi.vue b/src/client/app/common/views/components/reversi.vue
new file mode 100644
index 0000000000..e4d7740bde
--- /dev/null
+++ b/src/client/app/common/views/components/reversi.vue
@@ -0,0 +1,313 @@
+<template>
+<div class="mk-reversi">
+	<div v-if="game">
+		<x-gameroom :game="game"/>
+	</div>
+	<div class="matching" v-else-if="matching">
+		<h1><b>{{ matching.name }}</b>を待っています<mk-ellipsis/></h1>
+		<div class="cancel">
+			<el-button round @click="cancel">キャンセル</el-button>
+		</div>
+	</div>
+	<div class="index" v-else>
+		<h1>Misskey %fa:circle%thell%fa:circle R%</h1>
+		<p>他のMisskeyユーザーとリバーシで対戦しよう</p>
+		<div class="play">
+			<el-button round>フリーマッチ(準備中)</el-button>
+			<el-button type="primary" round @click="match">指名</el-button>
+			<details>
+				<summary>遊び方</summary>
+				<div>
+					<p>リバーシは、相手と交互に石をボードに置いてゆき、相手の石を挟んでひっくり返しながら、最終的に残った石が多い方が勝ちというボードゲームです。</p>
+					<dl>
+						<dt><b>フリーマッチ</b></dt>
+						<dd>ランダムなユーザーと対戦するモードです。</dd>
+						<dt><b>指名</b></dt>
+						<dd>指定したユーザーと対戦するモードです。</dd>
+					</dl>
+				</div>
+			</details>
+		</div>
+		<section v-if="invitations.length > 0">
+			<h2>対局の招待があります！:</h2>
+			<div class="invitation" v-for="i in invitations" tabindex="-1" @click="accept(i)">
+				<mk-avatar class="avatar" :user="i.parent"/>
+				<span class="name"><b>{{ i.parent.name }}</b></span>
+				<span class="username">@{{ i.parent.username }}</span>
+				<mk-time :time="i.createdAt"/>
+			</div>
+		</section>
+		<section v-if="myGames.length > 0">
+			<h2>自分の対局</h2>
+			<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
+				<mk-avatar class="avatar" :user="g.user1"/>
+				<mk-avatar class="avatar" :user="g.user2"/>
+				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
+				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
+			</a>
+		</section>
+		<section v-if="games.length > 0">
+			<h2>みんなの対局</h2>
+			<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
+				<mk-avatar class="avatar" :user="g.user1"/>
+				<mk-avatar class="avatar" :user="g.user2"/>
+				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
+				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
+			</a>
+		</section>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XGameroom from './reversi.gameroom.vue';
+
+export default Vue.extend({
+	components: {
+		XGameroom
+	},
+	props: ['initGame'],
+	data() {
+		return {
+			game: null,
+			games: [],
+			gamesFetching: true,
+			gamesMoreFetching: false,
+			myGames: [],
+			matching: null,
+			invitations: [],
+			connection: null,
+			connectionId: null,
+			pingClock: null
+		};
+	},
+	watch: {
+		game(g) {
+			this.$emit('gamed', g);
+		}
+	},
+	created() {
+		if (this.initGame) {
+			this.game = this.initGame;
+		}
+	},
+	mounted() {
+		this.connection = (this as any).os.streams.reversiStream.getConnection();
+		this.connectionId = (this as any).os.streams.reversiStream.use();
+
+		this.connection.on('matched', this.onMatched);
+		this.connection.on('invited', this.onInvited);
+
+		(this as any).api('reversi/games', {
+			my: true
+		}).then(games => {
+			this.myGames = games;
+		});
+
+		(this as any).api('reversi/games').then(games => {
+			this.games = games;
+			this.gamesFetching = false;
+		});
+
+		(this as any).api('reversi/invitations').then(invitations => {
+			this.invitations = this.invitations.concat(invitations);
+		});
+
+		this.pingClock = setInterval(() => {
+			if (this.matching) {
+				this.connection.send({
+					type: 'ping',
+					id: this.matching.id
+				});
+			}
+		}, 3000);
+	},
+	beforeDestroy() {
+		this.connection.off('matched', this.onMatched);
+		this.connection.off('invited', this.onInvited);
+		(this as any).os.streams.reversiStream.dispose(this.connectionId);
+
+		clearInterval(this.pingClock);
+	},
+	methods: {
+		go(game) {
+			(this as any).api('reversi/games/show', {
+				gameId: game.id
+			}).then(game => {
+				this.matching = null;
+				this.game = game;
+			});
+		},
+		match() {
+			(this as any).apis.input({
+				title: 'ユーザー名を入力してください'
+			}).then(username => {
+				(this as any).api('users/show', {
+					username
+				}).then(user => {
+					(this as any).api('reversi/match', {
+						userId: user.id
+					}).then(res => {
+						if (res == null) {
+							this.matching = user;
+						} else {
+							this.game = res;
+						}
+					});
+				});
+			});
+		},
+		cancel() {
+			this.matching = null;
+			(this as any).api('reversi/match/cancel');
+		},
+		accept(invitation) {
+			(this as any).api('reversi/match', {
+				userId: invitation.parent.id
+			}).then(game => {
+				if (game) {
+					this.matching = null;
+					this.game = game;
+				}
+			});
+		},
+		onMatched(game) {
+			this.matching = null;
+			this.game = game;
+		},
+		onInvited(invite) {
+			this.invitations.unshift(invite);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-reversi
+	color #677f84
+	background #fff
+
+	> .matching
+		> h1
+			margin 0
+			padding 24px
+			font-size 20px
+			text-align center
+			font-weight normal
+
+		> .cancel
+			margin 0 auto
+			padding 24px 0 0 0
+			max-width 200px
+			text-align center
+			border-top dashed 1px #c4cdd4
+
+	> .index
+		> h1
+			margin 0
+			padding 24px
+			font-size 24px
+			text-align center
+			font-weight normal
+			color #fff
+			background linear-gradient(to bottom, #8bca3e, #d6cf31)
+
+			& + p
+				margin 0
+				padding 12px
+				margin-bottom 12px
+				text-align center
+				font-size 14px
+				border-bottom solid 1px #d3d9dc
+
+		> .play
+			margin 0 auto
+			padding 0 16px
+			max-width 500px
+			text-align center
+
+			> details
+				margin 8px 0
+
+				> div
+					padding 16px
+					font-size 14px
+					text-align left
+					background #f5f5f5
+					border-radius 8px
+
+		> section
+			margin 0 auto
+			padding 0 16px 16px 16px
+			max-width 500px
+			border-top solid 1px #d3d9dc
+
+			> h2
+				margin 0
+				padding 16px 0 8px 0
+				font-size 16px
+				font-weight bold
+
+	.invitation
+		margin 8px 0
+		padding 8px
+		border solid 1px #e1e5e8
+		border-radius 6px
+		cursor pointer
+
+		*
+			pointer-events none
+			user-select none
+
+		&:focus
+			border-color $theme-color
+
+		&:hover
+			background #f5f5f5
+
+		&:active
+			background #eee
+
+		> .avatar
+			width 32px
+			height 32px
+			border-radius 100%
+
+		> span
+			margin 0 8px
+			line-height 32px
+
+	.game
+		display block
+		margin 8px 0
+		padding 8px
+		color #677f84
+		border solid 1px #e1e5e8
+		border-radius 6px
+		cursor pointer
+
+		*
+			pointer-events none
+			user-select none
+
+		&:focus
+			border-color $theme-color
+
+		&:hover
+			background #f5f5f5
+
+		&:active
+			background #eee
+
+		> .avatar
+			width 32px
+			height 32px
+			border-radius 100%
+
+		> span
+			margin 0 8px
+			line-height 32px
+</style>
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 076d532d6d..201ab0a83d 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -34,7 +34,7 @@ import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
 import MkTag from './views/pages/tag.vue';
-import MkOthello from './views/pages/othello.vue';
+import MkReversi from './views/pages/reversi.vue';
 import MkShare from './views/pages/share.vue';
 
 /**
@@ -64,8 +64,8 @@ init(async (launch) => {
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },
 			{ path: '/share', component: MkShare },
-			{ path: '/othello', component: MkOthello },
-			{ path: '/othello/:game', component: MkOthello },
+			{ path: '/reversi', component: MkReversi },
+			{ path: '/reversi/:game', component: MkReversi },
 			{ path: '/@:user', component: MkUser },
 			{ path: '/notes/:note', component: MkNote }
 		]
@@ -166,8 +166,8 @@ function registerNotifications(stream: HomeStreamManager) {
 			setTimeout(n.close.bind(n), 7000);
 		});
 
-		connection.on('othello_invited', matching => {
-			const _n = composeNotification('othello_invited', matching);
+		connection.on('reversi_invited', matching => {
+			const _n = composeNotification('reversi_invited', matching);
 			const n = new Notification(_n.title, {
 				body: _n.body,
 				icon: _n.icon
diff --git a/src/client/app/desktop/views/components/game-window.vue b/src/client/app/desktop/views/components/game-window.vue
index c3c0f90075..7c6cb9cd40 100644
--- a/src/client/app/desktop/views/components/game-window.vue
+++ b/src/client/app/desktop/views/components/game-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
 	<span slot="header" :class="$style.header">%fa:gamepad%%i18n:@game%</span>
-	<mk-othello :class="$style.content" @gamed="g => game = g"/>
+	<mk-reversi :class="$style.content" @gamed="g => game = g"/>
 </mk-window>
 </template>
 
@@ -18,8 +18,8 @@ export default Vue.extend({
 	computed: {
 		popout(): string {
 			return this.game
-				? `${url}/othello/${this.game.id}`
-				: `${url}/othello`;
+				? `${url}/reversi/${this.game.id}`
+				: `${url}/reversi`;
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index fe2637cec3..42211b57fe 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -56,23 +56,23 @@ export default Vue.extend({
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 
-			this.connection.on('othello_invited', this.onOthelloInvited);
-			this.connection.on('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.on('reversi_invited', this.onReversiInvited);
+			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 		}
 	},
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('othello_invited', this.onOthelloInvited);
-			this.connection.off('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.off('reversi_invited', this.onReversiInvited);
+			this.connection.off('reversi_no_invites', this.onReversiNoInvites);
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {
-		onOthelloInvited() {
+		onReversiInvited() {
 			this.hasGameInvitations = true;
 		},
 
-		onOthelloNoInvites() {
+		onReversiNoInvites() {
 			this.hasGameInvitations = false;
 		},
 
diff --git a/src/client/app/desktop/views/pages/othello.vue b/src/client/app/desktop/views/pages/othello.vue
deleted file mode 100644
index 0d8e987dd9..0000000000
--- a/src/client/app/desktop/views/pages/othello.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-<component :is="ui ? 'mk-ui' : 'div'">
-	<mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
-</component>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import Progress from '../../../common/scripts/loading';
-
-export default Vue.extend({
-	props: {
-		ui: {
-			default: false
-		}
-	},
-	data() {
-		return {
-			fetching: false,
-			game: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			if (this.$route.params.game == null) return;
-
-			Progress.start();
-			this.fetching = true;
-
-			(this as any).api('othello/games/show', {
-				gameId: this.$route.params.game
-			}).then(game => {
-				this.game = game;
-				this.fetching = false;
-
-				Progress.done();
-			});
-		},
-		onGamed(game) {
-			history.pushState(null, null, '/othello/' + game.id);
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/pages/reversi.vue b/src/client/app/desktop/views/pages/reversi.vue
new file mode 100644
index 0000000000..098fc41f1c
--- /dev/null
+++ b/src/client/app/desktop/views/pages/reversi.vue
@@ -0,0 +1,50 @@
+<template>
+<component :is="ui ? 'mk-ui' : 'div'">
+	<mk-reversi v-if="!fetching" :init-game="game" @gamed="onGamed"/>
+</component>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	props: {
+		ui: {
+			default: false
+		}
+	},
+	data() {
+		return {
+			fetching: false,
+			game: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			if (this.$route.params.game == null) return;
+
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('reversi/games/show', {
+				gameId: this.$route.params.game
+			}).then(game => {
+				this.game = game;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+		onGamed(game) {
+			history.pushState(null, null, '/reversi/' + game.id);
+		}
+	}
+});
+</script>
diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts
index ba3f967a23..9a8d19adbd 100644
--- a/src/client/app/mios.ts
+++ b/src/client/app/mios.ts
@@ -11,7 +11,7 @@ import { DriveStreamManager } from './common/scripts/streaming/drive';
 import { ServerStatsStreamManager } from './common/scripts/streaming/server-stats';
 import { NotesStatsStreamManager } from './common/scripts/streaming/notes-stats';
 import { MessagingIndexStreamManager } from './common/scripts/streaming/messaging-index';
-import { OthelloStreamManager } from './common/scripts/streaming/othello';
+import { ReversiStreamManager } from './common/scripts/streaming/reversi';
 
 import Err from './common/views/components/connect-failed.vue';
 import { LocalTimelineStreamManager } from './common/scripts/streaming/local-timeline';
@@ -108,7 +108,7 @@ export default class MiOS extends EventEmitter {
 		serverStatsStream: ServerStatsStreamManager;
 		notesStatsStream: NotesStatsStreamManager;
 		messagingIndexStream: MessagingIndexStreamManager;
-		othelloStream: OthelloStreamManager;
+		reversiStream: ReversiStreamManager;
 	} = {
 		localTimelineStream: null,
 		globalTimelineStream: null,
@@ -116,7 +116,7 @@ export default class MiOS extends EventEmitter {
 		serverStatsStream: null,
 		notesStatsStream: null,
 		messagingIndexStream: null,
-		othelloStream: null
+		reversiStream: null
 	};
 
 	/**
@@ -233,7 +233,7 @@ export default class MiOS extends EventEmitter {
 			this.streams.globalTimelineStream = new GlobalTimelineStreamManager(this, this.store.state.i);
 			this.streams.driveStream = new DriveStreamManager(this, this.store.state.i);
 			this.streams.messagingIndexStream = new MessagingIndexStreamManager(this, this.store.state.i);
-			this.streams.othelloStream = new OthelloStreamManager(this, this.store.state.i);
+			this.streams.reversiStream = new ReversiStreamManager(this, this.store.state.i);
 		});
 		//#endregion
 
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 1572fd73ed..cc0a8331ba 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -35,7 +35,7 @@ import MkFavorites from './views/pages/favorites.vue';
 import MkUserLists from './views/pages/user-lists.vue';
 import MkUserList from './views/pages/user-list.vue';
 import MkSettings from './views/pages/settings.vue';
-import MkOthello from './views/pages/othello.vue';
+import MkReversi from './views/pages/reversi.vue';
 import MkTag from './views/pages/tag.vue';
 import MkShare from './views/pages/share.vue';
 
@@ -75,8 +75,8 @@ init((launch) => {
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },
 			{ path: '/share', component: MkShare },
-			{ path: '/othello', name: 'othello', component: MkOthello },
-			{ path: '/othello/:game', component: MkOthello },
+			{ path: '/reversi', name: 'reversi', component: MkReversi },
+			{ path: '/reversi/:game', component: MkReversi },
 			{ path: '/@:user', component: MkUser },
 			{ path: '/@:user/followers', component: MkFollowers },
 			{ path: '/@:user/following', component: MkFollowing },
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index c72b15fb8b..c1ee70d105 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -45,8 +45,8 @@ export default Vue.extend({
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 
-			this.connection.on('othello_invited', this.onOthelloInvited);
-			this.connection.on('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.on('reversi_invited', this.onReversiInvited);
+			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 
 			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
 			const isHisasiburi = ago >= 3600;
@@ -98,16 +98,16 @@ export default Vue.extend({
 	},
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('othello_invited', this.onOthelloInvited);
-			this.connection.off('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.off('reversi_invited', this.onReversiInvited);
+			this.connection.off('reversi_no_invites', this.onReversiNoInvites);
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {
-		onOthelloInvited() {
+		onReversiInvited() {
 			this.hasGameInvitation = true;
 		},
-		onOthelloNoInvites() {
+		onReversiNoInvites() {
 			this.hasGameInvitation = false;
 		}
 	}
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 80f60e4232..bb7a2f558c 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -19,7 +19,7 @@
 					<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotification">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li v-if="$store.getters.isSignedIn && $store.state.i.isLocked"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'">%fa:R envelope%%i18n:@follow-requests%<template v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount">%fa:circle%</template>%fa:angle-right%</router-link></li>
-					<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%%i18n:@game%<template v-if="hasGameInvitation">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li><router-link to="/reversi" :data-active="$route.name == 'reversi'">%fa:gamepad%%i18n:@game%<template v-if="hasGameInvitation">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
 					<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'">%fa:R calendar-alt%%i18n:@widgets%%fa:angle-right%</router-link></li>
@@ -66,14 +66,14 @@ export default Vue.extend({
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 
-			this.connection.on('othello_invited', this.onOthelloInvited);
-			this.connection.on('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.on('reversi_invited', this.onReversiInvited);
+			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 		}
 	},
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('othello_invited', this.onOthelloInvited);
-			this.connection.off('othello_no_invites', this.onOthelloNoInvites);
+			this.connection.off('reversi_invited', this.onReversiInvited);
+			this.connection.off('reversi_no_invites', this.onReversiNoInvites);
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
@@ -83,10 +83,10 @@ export default Vue.extend({
 			if (query == null || query == '') return;
 			this.$router.push('/search?q=' + encodeURIComponent(query));
 		},
-		onOthelloInvited() {
+		onReversiInvited() {
 			this.hasGameInvitation = true;
 		},
-		onOthelloNoInvites() {
+		onReversiNoInvites() {
 			this.hasGameInvitation = false;
 		},
 		dark() {
diff --git a/src/client/app/mobile/views/pages/othello.vue b/src/client/app/mobile/views/pages/othello.vue
deleted file mode 100644
index e04e583c20..0000000000
--- a/src/client/app/mobile/views/pages/othello.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-<mk-ui>
-	<span slot="header">%fa:gamepad%オセロ</span>
-	<mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import Progress from '../../../common/scripts/loading';
-
-export default Vue.extend({
-	data() {
-		return {
-			fetching: false,
-			game: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	mounted() {
-		document.title = 'Misskey オセロ';
-		document.documentElement.style.background = '#fff';
-	},
-	methods: {
-		fetch() {
-			if (this.$route.params.game == null) return;
-
-			Progress.start();
-			this.fetching = true;
-
-			(this as any).api('othello/games/show', {
-				gameId: this.$route.params.game
-			}).then(game => {
-				this.game = game;
-				this.fetching = false;
-
-				Progress.done();
-			});
-		},
-		onGamed(game) {
-			history.pushState(null, null, '/othello/' + game.id);
-		}
-	}
-});
-</script>
diff --git a/src/client/app/mobile/views/pages/reversi.vue b/src/client/app/mobile/views/pages/reversi.vue
new file mode 100644
index 0000000000..e2f0db6d87
--- /dev/null
+++ b/src/client/app/mobile/views/pages/reversi.vue
@@ -0,0 +1,50 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:gamepad%リバーシ</span>
+	<mk-reversi v-if="!fetching" :init-game="game" @gamed="onGamed"/>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: false,
+			game: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	mounted() {
+		document.title = 'Misskey リバーシ';
+		document.documentElement.style.background = '#fff';
+	},
+	methods: {
+		fetch() {
+			if (this.$route.params.game == null) return;
+
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('reversi/games/show', {
+				gameId: this.$route.params.game
+			}).then(game => {
+				this.game = game;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+		onGamed(game) {
+			history.pushState(null, null, '/reversi/' + game.id);
+		}
+	}
+});
+</script>
diff --git a/src/client/assets/othello-put-me.mp3 b/src/client/assets/othello-put-me.mp3
deleted file mode 100644
index 4e0e72091c..0000000000
Binary files a/src/client/assets/othello-put-me.mp3 and /dev/null differ
diff --git a/src/client/assets/othello-put-you.mp3 b/src/client/assets/othello-put-you.mp3
deleted file mode 100644
index 9244189c2d..0000000000
Binary files a/src/client/assets/othello-put-you.mp3 and /dev/null differ
diff --git a/src/client/assets/reversi-put-me.mp3 b/src/client/assets/reversi-put-me.mp3
new file mode 100644
index 0000000000..4e0e72091c
Binary files /dev/null and b/src/client/assets/reversi-put-me.mp3 differ
diff --git a/src/client/assets/reversi-put-you.mp3 b/src/client/assets/reversi-put-you.mp3
new file mode 100644
index 0000000000..9244189c2d
Binary files /dev/null and b/src/client/assets/reversi-put-you.mp3 differ
-- 
cgit v1.2.3-freya