From d5f92eed8c4b1a42e0b05f9da2fa86dbc17922f4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 27 May 2018 13:49:09 +0900
Subject: Refactor

---
 src/client/app/common/scripts/streaming/home.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src/client/app/common/scripts')

diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index 44d07e331a..2715b9e0e9 100644
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -24,10 +24,8 @@ export class HomeStream extends Stream {
 			if (os.debug) {
 				console.log('I updated:', i);
 			}
-			merge(me, i);
 
-			// キャッシュ更新
-			os.bakeMe();
+			os.store.dispatch('mergeMe', i);
 		});
 
 		this.on('clientSettingUpdated', x => {
-- 
cgit v1.2.3-freya


From ab16fb3a3fff96a4fa2bc1fc0e56a87c129a4625 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 29 May 2018 01:22:39 +0900
Subject: #1634

---
 src/client/app/common/scripts/streaming/home.ts    | 24 ++++++++++
 .../views/components/ui.header.notifications.vue   | 39 +++-------------
 .../app/mobile/views/components/ui.header.vue      | 52 +++++-----------------
 src/client/app/mobile/views/components/ui.nav.vue  | 52 +++++-----------------
 src/publishers/notify.ts                           |  8 ++++
 src/server/api/common/read-messaging-message.ts    |  8 ++++
 src/server/api/common/read-notification.ts         |  8 ++++
 src/server/api/endpoints.ts                        | 10 -----
 src/server/api/endpoints/messaging/messages.ts     |  7 ---
 .../api/endpoints/messaging/messages/create.ts     |  7 +++
 src/server/api/endpoints/messaging/unread.ts       | 29 ------------
 .../endpoints/notifications/get_unread_count.ts    | 28 ------------
 .../endpoints/notifications/mark_as_read_all.ts    | 11 +++--
 13 files changed, 92 insertions(+), 191 deletions(-)
 delete mode 100644 src/server/api/endpoints/messaging/unread.ts
 delete mode 100644 src/server/api/endpoints/notifications/get_unread_count.ts

(limited to 'src/client/app/common/scripts')

diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index 2715b9e0e9..50bbb56896 100644
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -28,6 +28,30 @@ export class HomeStream extends Stream {
 			os.store.dispatch('mergeMe', i);
 		});
 
+		this.on('read_all_notifications', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadNotification: false
+			});
+		});
+
+		this.on('unread_notification', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadNotification: true
+			});
+		});
+
+		this.on('read_all_messaging_messages', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadMessagingMessage: false
+			});
+		});
+
+		this.on('unread_messaging_message', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadMessagingMessage: true
+			});
+		});
+
 		this.on('clientSettingUpdated', x => {
 			os.store.commit('settings/set', {
 				key: x.key,
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index 9eaaa62c61..59a16df9ec 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="notifications">
 	<button :data-active="isOpen" @click="toggle" title="%i18n:@title%">
-		%fa:R bell%<template v-if="hasUnreadNotifications">%fa:circle%</template>
+		%fa:R bell%<template v-if="hasUnreadNotification">%fa:circle%</template>
 	</button>
 	<div class="pop" v-if="isOpen">
 		<mk-notifications/>
@@ -16,44 +16,15 @@ import contains from '../../../common/scripts/contains';
 export default Vue.extend({
 	data() {
 		return {
-			isOpen: false,
-			hasUnreadNotifications: false,
-			connection: null,
-			connectionId: null
+			isOpen: false
 		};
 	},
-	mounted() {
-		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-
-			this.connection.on('read_all_notifications', this.onReadAllNotifications);
-			this.connection.on('unread_notification', this.onUnreadNotification);
-
-			// Fetch count of unread notifications
-			(this as any).api('notifications/get_unread_count').then(res => {
-				if (res.count > 0) {
-					this.hasUnreadNotifications = true;
-				}
-			});
-		}
-	},
-	beforeDestroy() {
-		if (this.$store.getters.isSignedIn) {
-			this.connection.off('read_all_notifications', this.onReadAllNotifications);
-			this.connection.off('unread_notification', this.onUnreadNotification);
-			(this as any).os.stream.dispose(this.connectionId);
+	computed: {
+		hasUnreadNotification(): boolean {
+			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
 		}
 	},
 	methods: {
-		onReadAllNotifications() {
-			this.hasUnreadNotifications = false;
-		},
-
-		onUnreadNotification() {
-			this.hasUnreadNotifications = true;
-		},
-
 		toggle() {
 			this.isOpen ? this.close() : this.open();
 		},
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 09aa18f769..c72b15fb8b 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -6,7 +6,7 @@
 		<p ref="welcomeback" v-if="$store.getters.isSignedIn">おかえりなさい、<b>{{ $store.state.i | userName }}</b>さん</p>
 		<div class="content" ref="mainContainer">
 			<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
-			<template v-if="hasUnreadNotifications || hasUnreadMessagingMessages || hasGameInvitations">%fa:circle%</template>
+			<template v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation">%fa:circle%</template>
 			<h1>
 				<slot>Misskey</slot>
 			</h1>
@@ -25,13 +25,19 @@ export default Vue.extend({
 	props: ['func'],
 	data() {
 		return {
-			hasUnreadNotifications: false,
-			hasUnreadMessagingMessages: false,
-			hasGameInvitations: false,
+			hasGameInvitation: false,
 			connection: null,
 			connectionId: null
 		};
 	},
+	computed: {
+		hasUnreadNotification(): boolean {
+			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
+		},
+		hasUnreadMessagingMessage(): boolean {
+			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
+		}
+	},
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', 48);
 
@@ -39,27 +45,9 @@ export default Vue.extend({
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 
-			this.connection.on('read_all_notifications', this.onReadAllNotifications);
-			this.connection.on('unread_notification', this.onUnreadNotification);
-			this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
-			this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
 			this.connection.on('othello_invited', this.onOthelloInvited);
 			this.connection.on('othello_no_invites', this.onOthelloNoInvites);
 
-			// Fetch count of unread notifications
-			(this as any).api('notifications/get_unread_count').then(res => {
-				if (res.count > 0) {
-					this.hasUnreadNotifications = true;
-				}
-			});
-
-			// Fetch count of unread messaging messages
-			(this as any).api('messaging/unread').then(res => {
-				if (res.count > 0) {
-					this.hasUnreadMessagingMessages = true;
-				}
-			});
-
 			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
 			const isHisasiburi = ago >= 3600;
 			this.$store.state.i.lastUsedAt = new Date();
@@ -110,33 +98,17 @@ export default Vue.extend({
 	},
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('read_all_notifications', this.onReadAllNotifications);
-			this.connection.off('unread_notification', this.onUnreadNotification);
-			this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
-			this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
 			this.connection.off('othello_invited', this.onOthelloInvited);
 			this.connection.off('othello_no_invites', this.onOthelloNoInvites);
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
 	methods: {
-		onReadAllNotifications() {
-			this.hasUnreadNotifications = false;
-		},
-		onUnreadNotification() {
-			this.hasUnreadNotifications = true;
-		},
-		onReadAllMessagingMessages() {
-			this.hasUnreadMessagingMessages = false;
-		},
-		onUnreadMessagingMessage() {
-			this.hasUnreadMessagingMessages = true;
-		},
 		onOthelloInvited() {
-			this.hasGameInvitations = true;
+			this.hasGameInvitation = true;
 		},
 		onOthelloNoInvites() {
-			this.hasGameInvitations = false;
+			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 5f0cc831cc..de8c21e795 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -16,7 +16,7 @@
 			<div class="links">
 				<ul>
 					<li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li>
-					<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<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="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
@@ -46,47 +46,31 @@ export default Vue.extend({
 	props: ['isOpen'],
 	data() {
 		return {
-			hasUnreadNotifications: false,
-			hasUnreadMessagingMessages: false,
-			hasGameInvitations: false,
+			hasGameInvitation: false,
 			connection: null,
 			connectionId: null,
 			aboutUrl: `${docsUrl}/${lang}/about`
 		};
 	},
+	computed: {
+		hasUnreadNotification(): boolean {
+			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
+		},
+		hasUnreadMessagingMessage(): boolean {
+			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
+		}
+	},
 	mounted() {
 		if (this.$store.getters.isSignedIn) {
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 
-			this.connection.on('read_all_notifications', this.onReadAllNotifications);
-			this.connection.on('unread_notification', this.onUnreadNotification);
-			this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
-			this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
 			this.connection.on('othello_invited', this.onOthelloInvited);
 			this.connection.on('othello_no_invites', this.onOthelloNoInvites);
-
-			// Fetch count of unread notifications
-			(this as any).api('notifications/get_unread_count').then(res => {
-				if (res.count > 0) {
-					this.hasUnreadNotifications = true;
-				}
-			});
-
-			// Fetch count of unread messaging messages
-			(this as any).api('messaging/unread').then(res => {
-				if (res.count > 0) {
-					this.hasUnreadMessagingMessages = true;
-				}
-			});
 		}
 	},
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('read_all_notifications', this.onReadAllNotifications);
-			this.connection.off('unread_notification', this.onUnreadNotification);
-			this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
-			this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
 			this.connection.off('othello_invited', this.onOthelloInvited);
 			this.connection.off('othello_no_invites', this.onOthelloNoInvites);
 			(this as any).os.stream.dispose(this.connectionId);
@@ -98,23 +82,11 @@ export default Vue.extend({
 			if (query == null || query == '') return;
 			this.$router.push('/search?q=' + encodeURIComponent(query));
 		},
-		onReadAllNotifications() {
-			this.hasUnreadNotifications = false;
-		},
-		onUnreadNotification() {
-			this.hasUnreadNotifications = true;
-		},
-		onReadAllMessagingMessages() {
-			this.hasUnreadMessagingMessages = false;
-		},
-		onUnreadMessagingMessage() {
-			this.hasUnreadMessagingMessages = true;
-		},
 		onOthelloInvited() {
-			this.hasGameInvitations = true;
+			this.hasGameInvitation = true;
 		},
 		onOthelloNoInvites() {
-			this.hasGameInvitations = false;
+			this.hasGameInvitation = false;
 		},
 		dark() {
 			this.$store.commit('device/set', {
diff --git a/src/publishers/notify.ts b/src/publishers/notify.ts
index 2b89515d42..0e480ef010 100644
--- a/src/publishers/notify.ts
+++ b/src/publishers/notify.ts
@@ -3,6 +3,7 @@ import Notification from '../models/notification';
 import Mute from '../models/mute';
 import { pack } from '../models/notification';
 import stream from './stream';
+import User from '../models/user';
 
 export default (
 	notifiee: mongo.ObjectID,
@@ -29,6 +30,13 @@ export default (
 	stream(notifiee, 'notification',
 		await pack(notification));
 
+	// Update flag
+	User.update({ _id: notifiee }, {
+		$set: {
+			hasUnreadNotification: true
+		}
+	});
+
 	// 3秒経っても(今回作成した)通知が既読にならなかったら「未読の通知がありますよ」イベントを発行する
 	setTimeout(async () => {
 		const fresh = await Notification.findOne({ _id: notification._id }, { isRead: true });
diff --git a/src/server/api/common/read-messaging-message.ts b/src/server/api/common/read-messaging-message.ts
index 28854e186e..fd5e9f242c 100644
--- a/src/server/api/common/read-messaging-message.ts
+++ b/src/server/api/common/read-messaging-message.ts
@@ -4,6 +4,7 @@ import { IMessagingMessage as IMessage } from '../../../models/messaging-message
 import publishUserStream from '../../../publishers/stream';
 import { publishMessagingStream } from '../../../publishers/stream';
 import { publishMessagingIndexStream } from '../../../publishers/stream';
+import User from '../../../models/user';
 
 /**
  * Mark as read message(s)
@@ -62,6 +63,13 @@ export default (
 		});
 
 	if (count == 0) {
+		// Update flag
+		User.update({ _id: userId }, {
+			$set: {
+				hasUnreadMessagingMessage: false
+			}
+		});
+
 		// 全ての(いままで未読だった)自分宛てのメッセージを(これで)読みましたよというイベントを発行
 		publishUserStream(userId, 'read_all_messaging_messages');
 	}
diff --git a/src/server/api/common/read-notification.ts b/src/server/api/common/read-notification.ts
index cdb87a4114..6505c58c39 100644
--- a/src/server/api/common/read-notification.ts
+++ b/src/server/api/common/read-notification.ts
@@ -2,6 +2,7 @@ import * as mongo from 'mongodb';
 import { default as Notification, INotification } from '../../../models/notification';
 import publishUserStream from '../../../publishers/stream';
 import Mute from '../../../models/mute';
+import User from '../../../models/user';
 
 /**
  * Mark as read notification(s)
@@ -57,6 +58,13 @@ export default (
 		});
 
 	if (count == 0) {
+		// Update flag
+		User.update({ _id: userId }, {
+			$set: {
+				hasUnreadNotification: false
+			}
+		});
+
 		// 全ての(いままで未読だった)通知を(これで)読みましたよというイベントを発行
 		publishUserStream(userId, 'read_all_notifications');
 	}
diff --git a/src/server/api/endpoints.ts b/src/server/api/endpoints.ts
index c1ac4777b6..b4ab65eb16 100644
--- a/src/server/api/endpoints.ts
+++ b/src/server/api/endpoints.ts
@@ -279,11 +279,6 @@ const endpoints: Endpoint[] = [
 		kind: 'account/read'
 	},
 
-	{
-		name: 'notifications/get_unread_count',
-		withCredential: true,
-		kind: 'notification-read'
-	},
 	{
 		name: 'notifications/delete',
 		withCredential: true,
@@ -610,11 +605,6 @@ const endpoints: Endpoint[] = [
 		withCredential: true,
 		kind: 'messaging-read'
 	},
-	{
-		name: 'messaging/unread',
-		withCredential: true,
-		kind: 'messaging-read'
-	},
 	{
 		name: 'messaging/messages',
 		withCredential: true,
diff --git a/src/server/api/endpoints/messaging/messages.ts b/src/server/api/endpoints/messaging/messages.ts
index 0338aba68a..9c3a48334b 100644
--- a/src/server/api/endpoints/messaging/messages.ts
+++ b/src/server/api/endpoints/messaging/messages.ts
@@ -1,6 +1,3 @@
-/**
- * Module dependencies
- */
 import $ from 'cafy'; import ID from '../../../../cafy-id';
 import Message from '../../../../models/messaging-message';
 import User from '../../../../models/user';
@@ -9,10 +6,6 @@ import read from '../../common/read-messaging-message';
 
 /**
  * Get messages
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'userId' parameter
diff --git a/src/server/api/endpoints/messaging/messages/create.ts b/src/server/api/endpoints/messaging/messages/create.ts
index db471839e7..41238de1e1 100644
--- a/src/server/api/endpoints/messaging/messages/create.ts
+++ b/src/server/api/endpoints/messaging/messages/create.ts
@@ -91,6 +91,13 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	publishMessagingIndexStream(message.recipientId, 'message', messageObj);
 	publishUserStream(message.recipientId, 'messaging_message', messageObj);
 
+	// Update flag
+	User.update({ _id: recipient._id }, {
+		$set: {
+			hasUnreadMessagingMessage: true
+		}
+	});
+
 	// 3秒経っても(今回作成した)メッセージが既読にならなかったら「未読のメッセージがありますよ」イベントを発行する
 	setTimeout(async () => {
 		const freshMessage = await Message.findOne({ _id: message._id }, { isRead: true });
diff --git a/src/server/api/endpoints/messaging/unread.ts b/src/server/api/endpoints/messaging/unread.ts
deleted file mode 100644
index 1d83af501d..0000000000
--- a/src/server/api/endpoints/messaging/unread.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Module dependencies
- */
-import Message from '../../../../models/messaging-message';
-import Mute from '../../../../models/mute';
-
-/**
- * Get count of unread messages
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	const mute = await Mute.find({
-		muterId: user._id,
-		deletedAt: { $exists: false }
-	});
-	const mutedUserIds = mute.map(m => m.muteeId);
-
-	const count = await Message
-		.count({
-			userId: {
-				$nin: mutedUserIds
-			},
-			recipientId: user._id,
-			isRead: false
-		});
-
-	res({
-		count: count
-	});
-});
diff --git a/src/server/api/endpoints/notifications/get_unread_count.ts b/src/server/api/endpoints/notifications/get_unread_count.ts
deleted file mode 100644
index 9766366ff1..0000000000
--- a/src/server/api/endpoints/notifications/get_unread_count.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Module dependencies
- */
-import Notification from '../../../../models/notification';
-import Mute from '../../../../models/mute';
-
-/**
- * Get count of unread notifications
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	const mute = await Mute.find({
-		muterId: user._id
-	});
-	const mutedUserIds = mute.map(m => m.muteeId);
-
-	const count = await Notification
-		.count({
-			notifieeId: user._id,
-			notifierId: {
-				$nin: mutedUserIds
-			},
-			isRead: false
-		});
-
-	res({
-		count: count
-	});
-});
diff --git a/src/server/api/endpoints/notifications/mark_as_read_all.ts b/src/server/api/endpoints/notifications/mark_as_read_all.ts
index dce3cb4663..7a48ca3e62 100644
--- a/src/server/api/endpoints/notifications/mark_as_read_all.ts
+++ b/src/server/api/endpoints/notifications/mark_as_read_all.ts
@@ -1,8 +1,6 @@
-/**
- * Module dependencies
- */
 import Notification from '../../../../models/notification';
 import event from '../../../../publishers/stream';
+import User from '../../../../models/user';
 
 /**
  * Mark as read all notifications
@@ -23,6 +21,13 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Response
 	res();
 
+	// Update flag
+	User.update({ _id: user._id }, {
+		$set: {
+			hasUnreadNotification: false
+		}
+	});
+
 	// 全ての通知を読みましたよというイベントを発行
 	event(user._id, 'read_all_notifications');
 });
-- 
cgit v1.2.3-freya


From 9e8cfd76c849a236d3e1b5f8ae9b05aa9364ef99 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 2 Jun 2018 13:40:28 +0900
Subject: wip

---
 src/client/app/common/scripts/streaming/home.ts | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src/client/app/common/scripts')

diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index 50bbb56896..c5189ddc7a 100644
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -28,6 +28,12 @@ export class HomeStream extends Stream {
 			os.store.dispatch('mergeMe', i);
 		});
 
+		this.on('reciveFollowRequest', () => {
+			os.store.dispatch('mergeMe', {
+				pendingReceivedFollowRequestsCount: (os.store.state.i.pendingReceivedFollowRequestsCount || 0) + 1
+			});
+		});
+
 		this.on('read_all_notifications', () => {
 			os.store.dispatch('mergeMe', {
 				hasUnreadNotification: false
-- 
cgit v1.2.3-freya


From 4feff8835cfa80529c14fcbb7a138eeb0a951650 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 2 Jun 2018 16:01:32 +0900
Subject: wip

---
 src/client/app/common/scripts/streaming/home.ts |  8 +-------
 src/server/api/endpoints/i/update.ts            |  2 +-
 src/server/api/service/twitter.ts               |  4 ++--
 src/services/following/requests/accept.ts       | 14 ++++++++++----
 src/services/following/requests/cancel.ts       |  9 +++++++--
 src/services/following/requests/create.ts       |  8 ++++++--
 6 files changed, 27 insertions(+), 18 deletions(-)

(limited to 'src/client/app/common/scripts')

diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index c5189ddc7a..f07d0289f6 100644
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -20,7 +20,7 @@ export class HomeStream extends Stream {
 		}, 1000 * 60);
 
 		// 自分の情報が更新されたとき
-		this.on('i_updated', i => {
+		this.on('meUpdated', i => {
 			if (os.debug) {
 				console.log('I updated:', i);
 			}
@@ -28,12 +28,6 @@ export class HomeStream extends Stream {
 			os.store.dispatch('mergeMe', i);
 		});
 
-		this.on('reciveFollowRequest', () => {
-			os.store.dispatch('mergeMe', {
-				pendingReceivedFollowRequestsCount: (os.store.state.i.pendingReceivedFollowRequestsCount || 0) + 1
-			});
-		});
-
 		this.on('read_all_notifications', () => {
 			os.store.dispatch('mergeMe', {
 				hasUnreadNotification: false
diff --git a/src/server/api/endpoints/i/update.ts b/src/server/api/endpoints/i/update.ts
index 8ee3c84861..5aff6da103 100644
--- a/src/server/api/endpoints/i/update.ts
+++ b/src/server/api/endpoints/i/update.ts
@@ -99,7 +99,7 @@ module.exports = async (params, user, app) => new Promise(async (res, rej) => {
 	res(iObj);
 
 	// Publish i updated event
-	event(user._id, 'i_updated', iObj);
+	event(user._id, 'meUpdated', iObj);
 
 	// 鍵垢を解除したとき、溜まっていたフォローリクエストがあるならすべて承認
 	if (user.isLocked && isLocked === false) {
diff --git a/src/server/api/service/twitter.ts b/src/server/api/service/twitter.ts
index 284ae7ee22..8c35509cce 100644
--- a/src/server/api/service/twitter.ts
+++ b/src/server/api/service/twitter.ts
@@ -49,7 +49,7 @@ router.get('/disconnect/twitter', async ctx => {
 	ctx.body = `Twitterの連携を解除しました :v:`;
 
 	// Publish i updated event
-	event(user._id, 'i_updated', await pack(user, user, {
+	event(user._id, 'meUpdated', await pack(user, user, {
 		detail: true,
 		includeSecrets: true
 	}));
@@ -174,7 +174,7 @@ if (config.twitter == null) {
 			ctx.body = `Twitter: @${result.screenName} を、Misskey: @${user.username} に接続しました！`;
 
 			// Publish i updated event
-			event(user._id, 'i_updated', await pack(user, user, {
+			event(user._id, 'meUpdated', await pack(user, user, {
 				detail: true,
 				includeSecrets: true
 			}));
diff --git a/src/services/following/requests/accept.ts b/src/services/following/requests/accept.ts
index 2dff9b01fe..1b89cdb981 100644
--- a/src/services/following/requests/accept.ts
+++ b/src/services/following/requests/accept.ts
@@ -1,4 +1,4 @@
-import User, { IUser, isRemoteUser, ILocalUser } from "../../../models/user";
+import User, { IUser, isRemoteUser, ILocalUser, pack as packUser } from "../../../models/user";
 import FollowRequest from "../../../models/follow-request";
 import pack from '../../../remote/activitypub/renderer';
 import renderFollow from '../../../remote/activitypub/renderer/follow';
@@ -7,6 +7,7 @@ import { deliver } from '../../../queue';
 import Following from "../../../models/following";
 import FollowingLog from "../../../models/following-log";
 import FollowedLog from "../../../models/followed-log";
+import event from '../../../publishers/stream';
 
 export default async function(followee: IUser, follower: IUser) {
 	const following = await Following.insert({
@@ -30,13 +31,13 @@ export default async function(followee: IUser, follower: IUser) {
 		deliver(followee as ILocalUser, content, follower.inbox);
 	}
 
-	FollowRequest.remove({
+	await FollowRequest.remove({
 		followeeId: followee._id,
 		followerId: follower._id
 	});
 
 	//#region Increment following count
-	User.update({ _id: follower._id }, {
+	await User.update({ _id: follower._id }, {
 		$inc: {
 			followingCount: 1
 		}
@@ -50,15 +51,20 @@ export default async function(followee: IUser, follower: IUser) {
 	//#endregion
 
 	//#region Increment followers count
-	User.update({ _id: followee._id }, {
+	await User.update({ _id: followee._id }, {
 		$inc: {
 			followersCount: 1
 		}
 	});
+
 	FollowedLog.insert({
 		createdAt: following.createdAt,
 		userId: followee._id,
 		count: followee.followersCount + 1
 	});
 	//#endregion
+
+	packUser(followee, followee, {
+		detail: true
+	}).then(packed => event(followee._id, 'meUpdated', packed));
 }
diff --git a/src/services/following/requests/cancel.ts b/src/services/following/requests/cancel.ts
index 840f70264c..50c95de0eb 100644
--- a/src/services/following/requests/cancel.ts
+++ b/src/services/following/requests/cancel.ts
@@ -1,9 +1,10 @@
-import User, { IUser, isRemoteUser, ILocalUser } from "../../../models/user";
+import User, { IUser, isRemoteUser, ILocalUser, pack as packUser } from "../../../models/user";
 import FollowRequest from "../../../models/follow-request";
 import pack from '../../../remote/activitypub/renderer';
 import renderFollow from '../../../remote/activitypub/renderer/follow';
 import renderUndo from '../../../remote/activitypub/renderer/undo';
 import { deliver } from '../../../queue';
+import event from '../../../publishers/stream';
 
 export default async function(followee: IUser, follower: IUser) {
 	if (isRemoteUser(followee)) {
@@ -16,9 +17,13 @@ export default async function(followee: IUser, follower: IUser) {
 		followerId: follower._id
 	});
 
-	User.update({ _id: followee._id }, {
+	await User.update({ _id: followee._id }, {
 		$inc: {
 			pendingReceivedFollowRequestsCount: -1
 		}
 	});
+
+	packUser(followee, followee, {
+		detail: true
+	}).then(packed => event(followee._id, 'meUpdated', packed));
 }
diff --git a/src/services/following/requests/create.ts b/src/services/following/requests/create.ts
index b69eb5acb0..836d85090d 100644
--- a/src/services/following/requests/create.ts
+++ b/src/services/following/requests/create.ts
@@ -25,7 +25,7 @@ export default async function(follower: IUser, followee: IUser) {
 		}
 	});
 
-	User.update({ _id: followee._id }, {
+	await User.update({ _id: followee._id }, {
 		$inc: {
 			pendingReceivedFollowRequestsCount: 1
 		}
@@ -33,7 +33,11 @@ export default async function(follower: IUser, followee: IUser) {
 
 	// Publish reciveRequest event
 	if (isLocalUser(followee)) {
-		packUser(follower, followee).then(packed => event(followee._id, 'reciveFollowRequest', packed)),
+		packUser(follower, followee).then(packed => event(followee._id, 'reciveFollowRequest', packed));
+
+		packUser(followee, followee, {
+			detail: true
+		}).then(packed => event(followee._id, 'meUpdated', packed));
 
 		// 通知を作成
 		notify(followee._id, follower._id, 'reciveFollowRequest');
-- 
cgit v1.2.3-freya


From d8cd24fab0bd454bd543200e71a17601afbb9f87 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 6 Jun 2018 03:03:56 +0900
Subject: wip

---
 src/client/app/common/scripts/streaming/home.ts  | 2 --
 src/client/app/desktop/views/components/home.vue | 6 ++++--
 src/client/app/store.ts                          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/client/app/common/scripts')

diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index f07d0289f6..a27c55a60d 100644
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -1,5 +1,3 @@
-import * as merge from 'object-assign-deep';
-
 import Stream from './stream';
 import StreamManager from './stream-manager';
 import MiOS from '../../../mios';
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index d3ba84a4b3..c30ca68210 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -147,7 +147,7 @@ export default Vue.extend({
 
 	computed: {
 		home(): any[] {
-			return this.$store.state.settings.home;
+			return this.$store.state.settings.home || [];
 		},
 		left(): any[] {
 			return this.home.filter(w => w.place == 'left');
@@ -164,9 +164,11 @@ export default Vue.extend({
 	},
 
 	created() {
-		if (this.$store.state.i.clientSettings == null || this.$store.state.i.clientSettings.home == null) {
+		if (this.$store.state.settings.home == null) {
 			this.api('i/update_home', {
 				home: _defaultDesktopHomeWidgets
+			}).then(() => {
+				this.$store.commit('settings/setHome', _defaultDesktopHomeWidgets);
 			});
 		}
 	},
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 00cae3b857..135fbe51f5 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -5,7 +5,7 @@ import MiOS from './mios';
 import { hostname } from './config';
 
 const defaultSettings = {
-	home: [],
+	home: null,
 	mobileHome: [],
 	deck: {
 		columns: [/*{
-- 
cgit v1.2.3-freya


From b0f989dbacbdbdd091b0d220496d22f47c795576 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 6 Jun 2018 19:22:45 +0900
Subject: Deckにウィジェットを置けるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/define-widget.ts             |  21 +--
 src/client/app/common/scripts/streaming/home.ts    |  25 ++--
 src/client/app/common/views/components/menu.vue    |  10 +-
 src/client/app/common/views/widgets/broadcast.vue  |   2 +-
 src/client/app/common/views/widgets/calendar.vue   |   4 +-
 src/client/app/common/views/widgets/donation.vue   |   2 +-
 src/client/app/common/views/widgets/rss.vue        |   2 +-
 src/client/app/common/views/widgets/slideshow.vue  |   2 +-
 src/client/app/desktop/views/components/home.vue   |   4 +-
 .../desktop/views/components/widget-container.vue  |   2 +-
 .../app/desktop/views/pages/deck/deck.column.vue   |  74 +++++++---
 .../views/pages/deck/deck.notifications-column.vue |   2 +-
 src/client/app/desktop/views/pages/deck/deck.vue   |  14 +-
 .../views/pages/deck/deck.widgets-column.vue       | 152 +++++++++++++++++++++
 src/client/app/mobile/views/pages/widgets.vue      |   4 +-
 src/client/app/store.ts                            |  89 ++++++++----
 src/server/api/endpoints.ts                        |   5 +
 src/server/api/endpoints/i/update_home.ts          |  51 +------
 src/server/api/endpoints/i/update_mobile_home.ts   |  52 ++-----
 src/server/api/endpoints/i/update_widget.ts        |  79 +++++++++++
 20 files changed, 417 insertions(+), 179 deletions(-)
 create mode 100644 src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
 create mode 100644 src/server/api/endpoints/i/update_widget.ts

(limited to 'src/client/app/common/scripts')

diff --git a/src/client/app/common/define-widget.ts b/src/client/app/common/define-widget.ts
index 0b2bc36566..2fae28be72 100644
--- a/src/client/app/common/define-widget.ts
+++ b/src/client/app/common/define-widget.ts
@@ -9,9 +9,9 @@ export default function<T extends object>(data: {
 			widget: {
 				type: Object
 			},
-			isMobile: {
-				type: Boolean,
-				default: false
+			platform: {
+				type: String,
+				required: true
 			},
 			isCustomizeMode: {
 				type: Boolean,
@@ -66,17 +66,10 @@ export default function<T extends object>(data: {
 
 				this.bakeProps();
 
-				if (this.isMobile) {
-					(this as any).api('i/update_mobile_home', {
-						id: this.id,
-						data: this.props
-					});
-				} else {
-					(this as any).api('i/update_home', {
-						id: this.id,
-						data: this.props
-					});
-				}
+				(this as any).api('i/update_widget', {
+					id: this.id,
+					data: this.props
+				});
 			}
 		}
 	});
diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index a27c55a60d..dd18c70d70 100644
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -58,25 +58,18 @@ export class HomeStream extends Stream {
 		});
 
 		this.on('home_updated', x => {
-			if (x.home) {
-				os.store.commit('settings/setHome', x.home);
-			} else {
-				os.store.commit('settings/setHomeWidget', {
-					id: x.id,
-					data: x.data
-				});
-			}
+			os.store.commit('settings/setHome', x);
 		});
 
 		this.on('mobile_home_updated', x => {
-			if (x.home) {
-				os.store.commit('settings/setMobileHome', x.home);
-			} else {
-				os.store.commit('settings/setMobileHomeWidget', {
-					id: x.id,
-					data: x.data
-				});
-			}
+			os.store.commit('settings/setMobileHome', x);
+		});
+
+		this.on('widgetUpdated', x => {
+			os.store.commit('settings/setWidget', {
+				id: x.id,
+				data: x.data
+			});
 		});
 
 		// トークンが再生成されたとき
diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index e5df8345b9..73c8403ad3 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -2,7 +2,10 @@
 <div class="mk-menu">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ compact }" ref="popover">
-		<button v-for="item in items" @click="clicked(item.onClick)" v-html="item.content"></button>
+		<template v-for="item in items">
+			<div v-if="item == null"></div>
+			<button v-else @click="clicked(item.onClick)" v-html="item.content"></button>
+		</template>
 	</div>
 </div>
 </template>
@@ -150,4 +153,9 @@ $border-color = rgba(27, 31, 35, 0.15)
 				color $theme-color-foreground
 				background darken($theme-color, 10%)
 
+		> div
+			margin 8px 0
+			height 1px
+			background #eee
+
 </style>
diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index f337cec853..69b2a54fe9 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -2,7 +2,7 @@
 <div class="mkw-broadcast"
 	:data-found="broadcasts.length != 0"
 	:data-melt="props.design == 1"
-	:data-mobile="isMobile"
+	:data-mobile="platform == 'mobile'"
 >
 	<div class="icon">
 		<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index 0e9714960a..333b56f629 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mkw-calendar" :data-special="special" :data-mobile="isMobile">
+<div class="mkw-calendar" :data-special="special" :data-mobile="platform == 'mobile'">
 	<mk-widget-container :naked="props.design == 1" :show-header="false">
 		<div class="mkw-calendar--body">
 			<div class="calendar" :data-is-holiday="isHoliday">
@@ -67,7 +67,7 @@ export default define({
 	},
 	methods: {
 		func() {
-			if (this.isMobile) return;
+			if (this.platform == 'mobile') return;
 			if (this.props.design == 2) {
 				this.props.design = 0;
 			} else {
diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue
index 75f5db808a..470576d5e6 100644
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mkw-donation" :data-mobile="isMobile">
+<div class="mkw-donation" :data-mobile="platform == 'mobile'">
 	<article>
 		<h1>%fa:heart%%i18n:@title%</h1>
 		<p>
diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue
index 7ac453e450..a777388cdb 100644
--- a/src/client/app/common/views/widgets/rss.vue
+++ b/src/client/app/common/views/widgets/rss.vue
@@ -4,7 +4,7 @@
 		<template slot="header">%fa:rss-square%RSS</template>
 		<button slot="func" title="設定" @click="setting">%fa:cog%</button>
 
-		<div class="mkw-rss--body" :data-mobile="isMobile">
+		<div class="mkw-rss--body" :data-mobile="platform == 'mobile'">
 			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 			<div class="feed" v-else>
 				<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
diff --git a/src/client/app/common/views/widgets/slideshow.vue b/src/client/app/common/views/widgets/slideshow.vue
index 459b24a32f..e1c28f5115 100644
--- a/src/client/app/common/views/widgets/slideshow.vue
+++ b/src/client/app/common/views/widgets/slideshow.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mkw-slideshow" :data-mobile="isMobile">
+<div class="mkw-slideshow" :data-mobile="platform == 'mobile'">
 	<div @click="choose">
 		<p v-if="props.folder === undefined">
 			<template v-if="isCustomizeMode">フォルダを指定するには、カスタマイズモードを終了してください</template>
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index c30ca68210..826753c169 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -47,7 +47,7 @@
 				:key="place"
 			>
 				<div v-for="widget in widgets[place]" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
-					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true"/>
+					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="desktop"/>
 				</div>
 			</x-draggable>
 			<div class="main">
@@ -60,7 +60,7 @@
 		</template>
 		<template v-else>
 			<div v-for="place in ['left', 'right']" :class="place">
-				<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" @chosen="warp"/>
+				<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" @chosen="warp" platform="desktop"/>
 			</div>
 			<div class="main">
 				<mk-post-form class="form" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index 488e9cb249..7cfcd68eba 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, 0.075)
+	border solid 1px rgba(#000, isDark ? 0.2 : 0.075)
 	border-radius 6px
 	overflow hidden
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 3dc2da1c77..e9f013734a 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -1,8 +1,8 @@
 <template>
-<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs">
+<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow }">
 	<header :class="{ indicate }">
 		<slot name="header"></slot>
-		<button ref="menu" @click="menu">%fa:caret-down%</button>
+		<button ref="menu" @click="showMenu">%fa:caret-down%</button>
 	</header>
 	<div ref="body">
 		<slot></slot>
@@ -19,6 +19,20 @@ export default Vue.extend({
 		id: {
 			type: String,
 			required: false
+		},
+		menu: {
+			type: Array,
+			required: false
+		},
+		naked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		narrow: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 
@@ -59,26 +73,33 @@ export default Vue.extend({
 			}
 		},
 
-		menu() {
+		showMenu() {
+			const items = [{
+				content: '%fa:arrow-left% %i18n:@swap-left%',
+				onClick: () => {
+					this.$store.dispatch('settings/swapLeftDeckColumn', this.id);
+				}
+			}, {
+				content: '%fa:arrow-right% %i18n:@swap-right%',
+				onClick: () => {
+					this.$store.dispatch('settings/swapRightDeckColumn', this.id);
+				}
+			}, {
+				content: '%fa:trash-alt R% %i18n:@remove%',
+				onClick: () => {
+					this.$store.dispatch('settings/removeDeckColumn', this.id);
+				}
+			}];
+
+			if (this.menu) {
+				items.unshift(null);
+				this.menu.reverse().forEach(i => items.unshift(i));
+			}
+
 			this.os.new(Menu, {
 				source: this.$refs.menu,
 				compact: false,
-				items: [{
-					content: '%fa:arrow-left% %i18n:@swap-left%',
-					onClick: () => {
-						this.$store.dispatch('settings/swapLeftDeckColumn', this.id);
-					}
-				}, {
-					content: '%fa:arrow-right% %i18n:@swap-right%',
-					onClick: () => {
-						this.$store.dispatch('settings/swapRightDeckColumn', this.id);
-					}
-				}, {
-					content: '%fa:trash-alt R% %i18n:@remove%',
-					onClick: () => {
-						this.$store.dispatch('settings/removeDeckColumn', this.id);
-					}
-				}]
+				items
 			});
 		}
 	}
@@ -100,6 +121,21 @@ root(isDark)
 	box-shadow 0 2px 16px rgba(#000, 0.1)
 	overflow hidden
 
+	&.narrow
+		min-width 285px
+		max-width 285px
+
+	&.naked
+		background rgba(#000, isDark ? 0.25 : 0.1)
+
+		> header
+			background transparent
+			box-shadow none
+
+			if !isDark
+				> button
+					color #bbb
+
 	> header
 		z-index 1
 		line-height $header-height
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue b/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
index bfc2af1935..b92614314c 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<x-column :id="id">
-		<span slot="header">%fa:bell R% %i18n:@notifications%</span>
+		<span slot="header">%fa:bell R%%i18n:@notifications%</span>
 
 		<x-notifications/>
 	</x-column>
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index ebec4f096c..4935d9a5bd 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -2,6 +2,7 @@
 <mk-ui :class="$style.root">
 	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-darkmode="$store.state.device.darkmode">
 		<template v-for="column in columns">
+			<x-widgets-column v-if="column.type == 'widgets'" :key="column.id" :column="column"/>
 			<x-notifications-column v-if="column.type == 'notifications'" :key="column.id" :id="column.id"/>
 			<x-tl-column v-if="column.type == 'home'" :key="column.id" :column="column"/>
 			<x-tl-column v-if="column.type == 'local'" :key="column.id" :column="column"/>
@@ -17,6 +18,7 @@
 import Vue from 'vue';
 import XTlColumn from './deck.tl-column.vue';
 import XNotificationsColumn from './deck.notifications-column.vue';
+import XWidgetsColumn from './deck.widgets-column.vue';
 import Menu from '../../../../common/views/components/menu.vue';
 import MkUserListsWindow from '../../components/user-lists-window.vue';
 import * as uuid from 'uuid';
@@ -24,7 +26,8 @@ import * as uuid from 'uuid';
 export default Vue.extend({
 	components: {
 		XTlColumn,
-		XNotificationsColumn
+		XNotificationsColumn,
+		XWidgetsColumn
 	},
 	computed: {
 		columns() {
@@ -110,6 +113,15 @@ export default Vue.extend({
 							type: 'notifications'
 						});
 					}
+				}, {
+					content: '%i18n:@widgets%',
+					onClick: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'widgets',
+							widgets: []
+						});
+					}
 				}]
 			});
 		}
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
new file mode 100644
index 0000000000..0b2cc305f4
--- /dev/null
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -0,0 +1,152 @@
+<template>
+<div class="wtdtxvecapixsepjtcupubtsmometobz">
+	<x-column :id="column.id" :menu="menu" :naked="true" :narrow="true">
+		<span slot="header">%fa:calculator%%i18n:@widgets%</span>
+
+		<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
+			<template v-if="edit">
+				<header>
+					<select v-model="widgetAdderSelected">
+						<option value="profile">%i18n:common.widgets.profile%</option>
+						<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
+						<option value="calendar">%i18n:common.widgets.calendar%</option>
+						<option value="timemachine">%i18n:common.widgets.timemachine%</option>
+						<option value="activity">%i18n:common.widgets.activity%</option>
+						<option value="rss">%i18n:common.widgets.rss%</option>
+						<option value="trends">%i18n:common.widgets.trends%</option>
+						<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
+						<option value="slideshow">%i18n:common.widgets.slideshow%</option>
+						<option value="version">%i18n:common.widgets.version%</option>
+						<option value="broadcast">%i18n:common.widgets.broadcast%</option>
+						<option value="notifications">%i18n:common.widgets.notifications%</option>
+						<option value="users">%i18n:common.widgets.users%</option>
+						<option value="polls">%i18n:common.widgets.polls%</option>
+						<option value="post-form">%i18n:common.widgets.post-form%</option>
+						<option value="messaging">%i18n:common.widgets.messaging%</option>
+						<option value="memo">%i18n:common.widgets.memo%</option>
+						<option value="server">%i18n:common.widgets.server%</option>
+						<option value="donation">%i18n:common.widgets.donation%</option>
+						<option value="nav">%i18n:common.widgets.nav%</option>
+						<option value="tips">%i18n:common.widgets.tips%</option>
+					</select>
+					<button @click="addWidget">追加</button>
+				</header>
+				<x-draggable
+					:list="column.widgets"
+					:options="{ handle: '.handle', animation: 150 }"
+					@sort="onWidgetSort"
+				>
+					<div v-for="widget in column.widgets" class="customize-container" :key="widget.id">
+						<header>
+							<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
+						</header>
+						<div @click="widgetFunc(widget.id)">
+							<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
+						</div>
+					</div>
+				</x-draggable>
+			</template>
+			<template v-else>
+				<component class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="deck"/>
+			</template>
+		</div>
+	</x-column>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XColumn from './deck.column.vue';
+import * as XDraggable from 'vuedraggable';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XDraggable
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			edit: false,
+			menu: null,
+			widgetAdderSelected: null
+		}
+	},
+
+	created() {
+		this.menu = [{
+			content: '%fa:cog% %i18n:@edit%',
+			onClick: () => {
+				this.edit = !this.edit;
+			}
+		}];
+	},
+
+	methods: {
+		widgetFunc(id) {
+			const w = this.$refs[id][0];
+			if (w.func) w.func();
+		},
+
+		onWidgetSort() {
+			this.saveWidgets();
+		},
+
+		addWidget() {
+			this.$store.dispatch('settings/addDeckWidget', {
+				id: this.column.id,
+				widget: {
+					name: this.widgetAdderSelected,
+					id: uuid(),
+					data: {}
+				}
+			});
+		},
+
+		removeWidget(widget) {
+			this.$store.dispatch('settings/removeDeckWidget', {
+				id: this.column.id,
+				widget
+			});
+		},
+
+		saveWidgets() {
+			this.$store.dispatch('settings/saveDeck');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark)
+	.gqpwvtwtprsbmnssnbicggtwqhmylhnq
+		.widget, .customize-container
+			margin 8px
+
+			&:first-of-type
+				margin-top 0
+
+		.customize-container
+			background #fff
+
+		> header
+			color isDark ? #fff : #000
+
+.wtdtxvecapixsepjtcupubtsmometobz[data-darkmode]
+	root(true)
+
+.wtdtxvecapixsepjtcupubtsmometobz:not([data-darkmode])
+	root(false)
+
+</style>
+
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index a0893770e8..eab0ca6a38 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -35,13 +35,13 @@
 						<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
 					</header>
 					<div @click="widgetFunc(widget.id)">
-						<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :is-mobile="true"/>
+						<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="mobile"/>
 					</div>
 				</div>
 			</x-draggable>
 		</template>
 		<template v-else>
-			<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true"/>
+			<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="mobile"/>
 		</template>
 	</main>
 </mk-ui>
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 17faeb97e5..5582ff6c57 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -124,13 +124,6 @@ export default (os: MiOS) => new Vuex.Store({
 					state.home = data;
 				},
 
-				setHomeWidget(state, x) {
-					const w = state.home.find(w => w.id == x.id);
-					if (w) {
-						w.data = x.data;
-					}
-				},
-
 				addHomeWidget(state, widget) {
 					state.home.unshift(widget);
 				},
@@ -139,11 +132,36 @@ export default (os: MiOS) => new Vuex.Store({
 					state.mobileHome = data;
 				},
 
-				setMobileHomeWidget(state, x) {
-					const w = state.mobileHome.find(w => w.id == x.id);
-					if (w) {
-						w.data = x.data;
+				setWidget(state, x) {
+					let w;
+
+					//#region Decktop home
+					if (state.home) {
+						w = state.home.find(w => w.id == x.id);
+						if (w) {
+							w.data = x.data;
+						}
+					}
+					//#endregion
+
+					//#region Mobile home
+					if (state.mobileHome) {
+						w = state.mobileHome.find(w => w.id == x.id);
+						if (w) {
+							w.data = x.data;
+						}
+					}
+					//#endregion
+
+					//#region Deck
+					if (state.deck && state.deck.columns) {
+						state.deck.columns.filter(c => c.type == 'widgets').forEach(c => {
+							c.widgets.forEach(w => {
+								if (w.id == x.id) w.data = x.data;
+							});
+						});
 					}
+					//#endregion
 				},
 
 				addMobileHomeWidget(state, widget) {
@@ -190,6 +208,20 @@ export default (os: MiOS) => new Vuex.Store({
 							return true;
 						}
 					});
+				},
+
+				addDeckWidget(state, x) {
+					if (state.deck.columns == null) return;
+					const column = state.deck.columns.find(c => c.id == x.id);
+					if (column == null) return;
+					column.widgets.unshift(x.widget);
+				},
+
+				removeDeckWidget(state, x) {
+					if (state.deck.columns == null) return;
+					const column = state.deck.columns.find(c => c.id == x.id);
+					if (column == null) return;
+					column.widgets = column.widgets.filter(w => w.id != x.widget.id);
 				}
 			},
 
@@ -212,40 +244,41 @@ export default (os: MiOS) => new Vuex.Store({
 					}
 				},
 
-				addDeckColumn(ctx, column) {
-					ctx.commit('addDeckColumn', column);
-
+				saveDeck(ctx) {
 					os.api('i/update_client_setting', {
 						name: 'deck',
 						value: ctx.state.deck
 					});
 				},
 
+				addDeckColumn(ctx, column) {
+					ctx.commit('addDeckColumn', column);
+					ctx.dispatch('saveDeck');
+				},
+
 				removeDeckColumn(ctx, id) {
 					ctx.commit('removeDeckColumn', id);
-
-					os.api('i/update_client_setting', {
-						name: 'deck',
-						value: ctx.state.deck
-					});
+					ctx.dispatch('saveDeck');
 				},
 
 				swapLeftDeckColumn(ctx, id) {
 					ctx.commit('swapLeftDeckColumn', id);
-
-					os.api('i/update_client_setting', {
-						name: 'deck',
-						value: ctx.state.deck
-					});
+					ctx.dispatch('saveDeck');
 				},
 
 				swapRightDeckColumn(ctx, id) {
 					ctx.commit('swapRightDeckColumn', id);
+					ctx.dispatch('saveDeck');
+				},
 
-					os.api('i/update_client_setting', {
-						name: 'deck',
-						value: ctx.state.deck
-					});
+				addDeckWidget(ctx, x) {
+					ctx.commit('addDeckWidget', x);
+					ctx.dispatch('saveDeck');
+				},
+
+				removeDeckWidget(ctx, x) {
+					ctx.commit('removeDeckWidget', x);
+					ctx.dispatch('saveDeck');
 				},
 
 				addHomeWidget(ctx, widget) {
diff --git a/src/server/api/endpoints.ts b/src/server/api/endpoints.ts
index e9392d236b..94e649d29b 100644
--- a/src/server/api/endpoints.ts
+++ b/src/server/api/endpoints.ts
@@ -189,6 +189,11 @@ const endpoints: Endpoint[] = [
 		withCredential: true,
 		secure: true
 	},
+	{
+		name: 'i/update_widget',
+		withCredential: true,
+		secure: true
+	},
 	{
 		name: 'i/change_password',
 		withCredential: true,
diff --git a/src/server/api/endpoints/i/update_home.ts b/src/server/api/endpoints/i/update_home.ts
index 8ce551957e..48f6dbbb7a 100644
--- a/src/server/api/endpoints/i/update_home.ts
+++ b/src/server/api/endpoints/i/update_home.ts
@@ -1,6 +1,3 @@
-/**
- * Module dependencies
- */
 import $ from 'cafy';
 import User from '../../../../models/user';
 import event from '../../../../publishers/stream';
@@ -13,50 +10,16 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 			.have('id', $.str)
 			.have('place', $.str)
 			.have('data', $.obj))
-		.optional()
 		.get(params.home);
 	if (homeErr) return rej('invalid home param');
 
-	// Get 'id' parameter
-	const [id, idErr] = $.str.optional().get(params.id);
-	if (idErr) return rej('invalid id param');
+	await User.update(user._id, {
+		$set: {
+			'clientSettings.home': home
+		}
+	});
 
-	// Get 'data' parameter
-	const [data, dataErr] = $.obj.optional().get(params.data);
-	if (dataErr) return rej('invalid data param');
+	res();
 
-	if (home) {
-		await User.update(user._id, {
-			$set: {
-				'clientSettings.home': home
-			}
-		});
-
-		res();
-
-		event(user._id, 'home_updated', {
-			home
-		});
-	} else {
-		if (id == null && data == null) return rej('you need to set id and data params if home param unset');
-
-		const _home = user.clientSettings.home;
-		const widget = _home.find(w => w.id == id);
-
-		if (widget == null) return rej('widget not found');
-
-		widget.data = data;
-
-		await User.update(user._id, {
-			$set: {
-				'clientSettings.home': _home
-			}
-		});
-
-		res();
-
-		event(user._id, 'home_updated', {
-			id, data
-		});
-	}
+	event(user._id, 'home_updated', home);
 });
diff --git a/src/server/api/endpoints/i/update_mobile_home.ts b/src/server/api/endpoints/i/update_mobile_home.ts
index d79a77072b..d285a0a72d 100644
--- a/src/server/api/endpoints/i/update_mobile_home.ts
+++ b/src/server/api/endpoints/i/update_mobile_home.ts
@@ -1,6 +1,3 @@
-/**
- * Module dependencies
- */
 import $ from 'cafy';
 import User from '../../../../models/user';
 import event from '../../../../publishers/stream';
@@ -12,49 +9,16 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 			.have('name', $.str)
 			.have('id', $.str)
 			.have('data', $.obj))
-		.optional().get(params.home);
+		.get(params.home);
 	if (homeErr) return rej('invalid home param');
 
-	// Get 'id' parameter
-	const [id, idErr] = $.str.optional().get(params.id);
-	if (idErr) return rej('invalid id param');
+	await User.update(user._id, {
+		$set: {
+			'clientSettings.mobileHome': home
+		}
+	});
 
-	// Get 'data' parameter
-	const [data, dataErr] = $.obj.optional().get(params.data);
-	if (dataErr) return rej('invalid data param');
+	res();
 
-	if (home) {
-		await User.update(user._id, {
-			$set: {
-				'clientSettings.mobileHome': home
-			}
-		});
-
-		res();
-
-		event(user._id, 'mobile_home_updated', {
-			home
-		});
-	} else {
-		if (id == null && data == null) return rej('you need to set id and data params if home param unset');
-
-		const _home = user.clientSettings.mobileHome || [];
-		const widget = _home.find(w => w.id == id);
-
-		if (widget == null) return rej('widget not found');
-
-		widget.data = data;
-
-		await User.update(user._id, {
-			$set: {
-				'clientSettings.mobileHome': _home
-			}
-		});
-
-		res();
-
-		event(user._id, 'mobile_home_updated', {
-			id, data
-		});
-	}
+	event(user._id, 'mobile_home_updated', home);
 });
diff --git a/src/server/api/endpoints/i/update_widget.ts b/src/server/api/endpoints/i/update_widget.ts
new file mode 100644
index 0000000000..b37761bde1
--- /dev/null
+++ b/src/server/api/endpoints/i/update_widget.ts
@@ -0,0 +1,79 @@
+import $ from 'cafy';
+import User from '../../../../models/user';
+import event from '../../../../publishers/stream';
+
+module.exports = async (params, user) => new Promise(async (res, rej) => {
+	// Get 'id' parameter
+	const [id, idErr] = $.str.get(params.id);
+	if (idErr) return rej('invalid id param');
+
+	// Get 'data' parameter
+	const [data, dataErr] = $.obj.get(params.data);
+	if (dataErr) return rej('invalid data param');
+
+	if (id == null && data == null) return rej('you need to set id and data params if home param unset');
+
+	let widget;
+
+	//#region Desktop home
+	if (widget == null && user.clientSettings.home) {
+		const desktopHome = user.clientSettings.home;
+		widget = desktopHome.find(w => w.id == id);
+		if (widget) {
+				widget.data = data;
+
+			await User.update(user._id, {
+				$set: {
+					'clientSettings.home': desktopHome
+				}
+			});
+		}
+	}
+	//#endregion
+
+	//#region Mobile home
+	if (widget == null && user.clientSettings.mobileHome) {
+		const mobileHome = user.clientSettings.mobileHome;
+		widget = mobileHome.find(w => w.id == id);
+		if (widget) {
+				widget.data = data;
+
+			await User.update(user._id, {
+				$set: {
+					'clientSettings.mobileHome': mobileHome
+				}
+			});
+		}
+	}
+	//#endregion
+
+	//#region Deck
+	if (widget == null && user.clientSettings.deck && user.clientSettings.deck.columns) {
+		const deck = user.clientSettings.deck;
+		deck.columns.filter(c => c.type == 'widgets').forEach(c => {
+			c.widgets.forEach(w => {
+				if (w.id == id) widget = w;
+			});
+		});
+		if (widget) {
+				widget.data = data;
+
+			await User.update(user._id, {
+				$set: {
+					'clientSettings.deck': deck
+				}
+			});
+		}
+	}
+	//#endregion
+
+	if (widget) {
+		event(user._id, 'widgetUpdated', {
+			id, data
+		});
+
+		res();
+	} else {
+		rej('widget not found');
+	}
+});
-- 
cgit v1.2.3-freya


From c78945436e39121f46e083eac7a6572ca2efe2d2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Jun 2018 04:14:26 +0900
Subject: #1686

---
 locales/ja.yml                                     |   5 +
 package.json                                       |   2 +-
 .../app/common/scripts/streaming/notes-stats.ts    |  30 ++++
 .../app/common/scripts/streaming/server-stats.ts   |  30 ++++
 src/client/app/common/scripts/streaming/server.ts  |  30 ----
 src/client/app/common/views/widgets/index.ts       |   2 +
 .../app/common/views/widgets/posts-monitor.vue     | 182 +++++++++++++++++++++
 src/client/app/common/views/widgets/server.vue     |   6 +-
 src/client/app/desktop/views/components/home.vue   |   1 +
 .../views/pages/deck/deck.widgets-column.vue       |   1 +
 src/client/app/mios.ts                             |  12 +-
 src/client/app/mobile/views/pages/widgets.vue      |   1 +
 src/db/mongodb.ts                                  |   5 +-
 src/index.ts                                       |   2 +
 src/models/note.ts                                 |   3 +
 src/notes-stats-child.ts                           |  20 +++
 src/notes-stats.ts                                 |  20 +++
 src/server-stats.ts                                |   2 +-
 src/server/api/stream/notes-stats.ts               |  35 ++++
 src/server/api/stream/server-stats.ts              |  35 ++++
 src/server/api/stream/server.ts                    |  35 ----
 src/server/api/streaming.ts                        |  12 +-
 22 files changed, 393 insertions(+), 78 deletions(-)
 create mode 100644 src/client/app/common/scripts/streaming/notes-stats.ts
 create mode 100644 src/client/app/common/scripts/streaming/server-stats.ts
 delete mode 100644 src/client/app/common/scripts/streaming/server.ts
 create mode 100644 src/client/app/common/views/widgets/posts-monitor.vue
 create mode 100644 src/notes-stats-child.ts
 create mode 100644 src/notes-stats.ts
 create mode 100644 src/server/api/stream/notes-stats.ts
 create mode 100644 src/server/api/stream/server-stats.ts
 delete mode 100644 src/server/api/stream/server.ts

(limited to 'src/client/app/common/scripts')

diff --git a/locales/ja.yml b/locales/ja.yml
index 120ccc7998..212ba90b69 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -63,6 +63,7 @@ common:
     memo: "メモ"
     trends: "トレンド"
     photo-stream: "フォトストリーム"
+    posts-monitor: "投稿チャート"
     slideshow: "スライドショー"
     version: "バージョン"
     broadcast: "ブロードキャスト"
@@ -249,6 +250,10 @@ common/views/widgets/photo-stream.vue:
   title: "フォトストリーム"
   no-photos: "写真はありません"
 
+common/views/widgets/posts-monitor.vue:
+  title: "投稿チャート"
+  toggle: "表示を切り替え"
+
 common/views/widgets/server.vue:
   title: "サーバー情報"
   toggle: "表示を切り替え"
diff --git a/package.json b/package.json
index b0ad03aa6e..a18f37e0a2 100644
--- a/package.json
+++ b/package.json
@@ -152,7 +152,7 @@
 		"mkdirp": "0.5.1",
 		"mocha": "5.2.0",
 		"moji": "0.5.1",
-		"mongodb": "3.0.8",
+		"mongodb": "3.0.10",
 		"monk": "6.0.6",
 		"ms": "2.1.1",
 		"nan": "2.10.0",
diff --git a/src/client/app/common/scripts/streaming/notes-stats.ts b/src/client/app/common/scripts/streaming/notes-stats.ts
new file mode 100644
index 0000000000..9e3e78a709
--- /dev/null
+++ b/src/client/app/common/scripts/streaming/notes-stats.ts
@@ -0,0 +1,30 @@
+import Stream from './stream';
+import StreamManager from './stream-manager';
+import MiOS from '../../../mios';
+
+/**
+ * Notes stats stream connection
+ */
+export class NotesStatsStream extends Stream {
+	constructor(os: MiOS) {
+		super(os, 'notes-stats');
+	}
+}
+
+export class NotesStatsStreamManager extends StreamManager<NotesStatsStream> {
+	private os: MiOS;
+
+	constructor(os: MiOS) {
+		super();
+
+		this.os = os;
+	}
+
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new NotesStatsStream(this.os);
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/client/app/common/scripts/streaming/server-stats.ts b/src/client/app/common/scripts/streaming/server-stats.ts
new file mode 100644
index 0000000000..9983dfcaf0
--- /dev/null
+++ b/src/client/app/common/scripts/streaming/server-stats.ts
@@ -0,0 +1,30 @@
+import Stream from './stream';
+import StreamManager from './stream-manager';
+import MiOS from '../../../mios';
+
+/**
+ * Server stats stream connection
+ */
+export class ServerStatsStream extends Stream {
+	constructor(os: MiOS) {
+		super(os, 'server-stats');
+	}
+}
+
+export class ServerStatsStreamManager extends StreamManager<ServerStatsStream> {
+	private os: MiOS;
+
+	constructor(os: MiOS) {
+		super();
+
+		this.os = os;
+	}
+
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new ServerStatsStream(this.os);
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/client/app/common/scripts/streaming/server.ts b/src/client/app/common/scripts/streaming/server.ts
deleted file mode 100644
index 2ea4239288..0000000000
--- a/src/client/app/common/scripts/streaming/server.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import Stream from './stream';
-import StreamManager from './stream-manager';
-import MiOS from '../../../mios';
-
-/**
- * Server stream connection
- */
-export class ServerStream extends Stream {
-	constructor(os: MiOS) {
-		super(os, 'server');
-	}
-}
-
-export class ServerStreamManager extends StreamManager<ServerStream> {
-	private os: MiOS;
-
-	constructor(os: MiOS) {
-		super();
-
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new ServerStream(this.os);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/views/widgets/index.ts b/src/client/app/common/views/widgets/index.ts
index a4cabc43ba..0190393ba7 100644
--- a/src/client/app/common/views/widgets/index.ts
+++ b/src/client/app/common/views/widgets/index.ts
@@ -4,6 +4,7 @@ import wAnalogClock from './analog-clock.vue';
 import wVersion from './version.vue';
 import wRss from './rss.vue';
 import wServer from './server.vue';
+import wPostsMonitor from './posts-monitor.vue';
 import wMemo from './memo.vue';
 import wBroadcast from './broadcast.vue';
 import wCalendar from './calendar.vue';
@@ -22,6 +23,7 @@ Vue.component('mkw-tips', wTips);
 Vue.component('mkw-donation', wDonation);
 Vue.component('mkw-broadcast', wBroadcast);
 Vue.component('mkw-server', wServer);
+Vue.component('mkw-posts-monitor', wPostsMonitor);
 Vue.component('mkw-memo', wMemo);
 Vue.component('mkw-rss', wRss);
 Vue.component('mkw-version', wVersion);
diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue
new file mode 100644
index 0000000000..bdf811bad0
--- /dev/null
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -0,0 +1,182 @@
+<template>
+<div class="mkw-posts-monitor">
+	<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
+		<template slot="header">%fa:chart-line%%i18n:@title%</template>
+		<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
+
+		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode">
+			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" preserveAspectRatio="none" v-show="props.view != 2">
+				<defs>
+					<linearGradient :id="fediGradientId" x1="0" x2="0" y1="1" y2="0">
+						<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
+						<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
+					</linearGradient>
+					<mask :id="fediMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
+						<polyline
+							:points="fediPolylinePoints"
+							fill="none"
+							stroke="#fff"
+							stroke-width="1"/>
+					</mask>
+				</defs>
+				<rect
+					x="-1" y="-1"
+					:width="viewBoxX + 2" :height="viewBoxY + 2"
+					:style="`stroke: none; fill: url(#${ fediGradientId }); mask: url(#${ fediMaskId })`"/>
+				<text x="1" y="5">Fedi</text>
+			</svg>
+			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" preserveAspectRatio="none" v-show="props.view != 1">
+				<defs>
+					<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
+						<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
+						<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
+					</linearGradient>
+					<mask :id="localMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
+						<polyline
+							:points="localPolylinePoints"
+							fill="none"
+							stroke="#fff"
+							stroke-width="1"/>
+					</mask>
+				</defs>
+				<rect
+					x="-1" y="-1"
+					:width="viewBoxX + 2" :height="viewBoxY + 2"
+					:style="`stroke: none; fill: url(#${ localGradientId }); mask: url(#${ localMaskId })`"/>
+				<text x="1" y="5">Local</text>
+			</svg>
+		</div>
+	</mk-widget-container>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+import * as uuid from 'uuid';
+
+export default define({
+	name: 'server',
+	props: () => ({
+		design: 0,
+		view: 0
+	})
+}).extend({
+	data() {
+		return {
+			connection: null,
+			connectionId: null,
+			viewBoxY: 30,
+			stats: [],
+			fediGradientId: uuid(),
+			fediMaskId: uuid(),
+			localGradientId: uuid(),
+			localMaskId: uuid(),
+			fediPolylinePoints: '',
+			localPolylinePoints: '',
+			fediPolygonPoints: '',
+			localPolygonPoints: ''
+		};
+	},
+	computed: {
+		viewBoxX(): number {
+			return this.props.view == 0 ? 50 : 100;
+		}
+	},
+	watch: {
+		viewBoxX() {
+			this.draw();
+		}
+	},
+	mounted() {
+		this.connection = (this as any).os.streams.notesStatsStream.getConnection();
+		this.connectionId = (this as any).os.streams.notesStatsStream.use();
+
+		this.connection.on('stats', this.onStats);
+		this.connection.on('statsLog', this.onStatsLog);
+		this.connection.send({
+			type: 'requestLog',
+			id: Math.random().toString()
+		});
+	},
+	beforeDestroy() {
+		this.connection.off('stats', this.onStats);
+		this.connection.off('statsLog', this.onStatsLog);
+		(this as any).os.streams.notesStatsStream.dispose(this.connectionId);
+	},
+	methods: {
+		toggle() {
+			if (this.props.view == 2) {
+				this.props.view = 0;
+			} else {
+				this.props.view++;
+			}
+			this.save();
+		},
+		func() {
+			if (this.props.design == 2) {
+				this.props.design = 0;
+			} else {
+				this.props.design++;
+			}
+			this.save();
+		},
+		draw() {
+			const stats = this.props.view == 0 ? this.stats.slice(0, 50) : this.stats;
+			const fediPeak = Math.max.apply(null, this.stats.map(x => x.all)) || 1;
+			const localPeak = Math.max.apply(null, this.stats.map(x => x.local)) || 1;
+
+			this.fediPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - (s.all / fediPeak)) * this.viewBoxY}`).join(' ');
+			this.localPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - (s.local / localPeak)) * this.viewBoxY}`).join(' ');
+
+			this.fediPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ this.fediPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+			this.localPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ this.localPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+		},
+		onStats(stats) {
+			this.stats.push(stats);
+			if (this.stats.length > 100) this.stats.shift();
+			this.draw();
+		},
+		onStatsLog(statsLog) {
+			statsLog.forEach(stats => this.onStats(stats));
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	&.dual
+		> svg
+			width 50%
+			float left
+
+			&:first-child
+				padding-right 5px
+
+			&:last-child
+				padding-left 5px
+
+	> svg
+		display block
+		padding 10px
+		width 100%
+
+		> text
+			font-size 5px
+			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+
+			> tspan
+				opacity 0.5
+
+	&:after
+		content ""
+		display block
+		clear both
+
+.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
+	root(true)
+
+.qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/common/views/widgets/server.vue b/src/client/app/common/views/widgets/server.vue
index 2fdd60499b..d796a3ae05 100644
--- a/src/client/app/common/views/widgets/server.vue
+++ b/src/client/app/common/views/widgets/server.vue
@@ -55,11 +55,11 @@ export default define({
 			this.fetching = false;
 		});
 
-		this.connection = (this as any).os.streams.serverStream.getConnection();
-		this.connectionId = (this as any).os.streams.serverStream.use();
+		this.connection = (this as any).os.streams.serverStatsStream.getConnection();
+		this.connectionId = (this as any).os.streams.serverStatsStream.use();
 	},
 	beforeDestroy() {
-		(this as any).os.streams.serverStream.dispose(this.connectionId);
+		(this as any).os.streams.serverStatsStream.dispose(this.connectionId);
 	},
 	methods: {
 		toggle() {
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 826753c169..cac1fd935b 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -23,6 +23,7 @@
 					<option value="post-form">%i18n:common.widgets.post-form%</option>
 					<option value="messaging">%i18n:common.widgets.messaging%</option>
 					<option value="memo">%i18n:common.widgets.memo%</option>
+					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
 					<option value="server">%i18n:common.widgets.server%</option>
 					<option value="donation">%i18n:common.widgets.donation%</option>
 					<option value="nav">%i18n:common.widgets.nav%</option>
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index 098a580405..2a3a2472dc 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -23,6 +23,7 @@
 					<option value="post-form">%i18n:common.widgets.post-form%</option>
 					<option value="messaging">%i18n:common.widgets.messaging%</option>
 					<option value="memo">%i18n:common.widgets.memo%</option>
+					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
 					<option value="server">%i18n:common.widgets.server%</option>
 					<option value="donation">%i18n:common.widgets.donation%</option>
 					<option value="nav">%i18n:common.widgets.nav%</option>
diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts
index c644e22087..ba3f967a23 100644
--- a/src/client/app/mios.ts
+++ b/src/client/app/mios.ts
@@ -8,7 +8,8 @@ import Progress from './common/scripts/loading';
 import Connection from './common/scripts/streaming/stream';
 import { HomeStreamManager } from './common/scripts/streaming/home';
 import { DriveStreamManager } from './common/scripts/streaming/drive';
-import { ServerStreamManager } from './common/scripts/streaming/server';
+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';
 
@@ -104,14 +105,16 @@ export default class MiOS extends EventEmitter {
 		localTimelineStream: LocalTimelineStreamManager;
 		globalTimelineStream: GlobalTimelineStreamManager;
 		driveStream: DriveStreamManager;
-		serverStream: ServerStreamManager;
+		serverStatsStream: ServerStatsStreamManager;
+		notesStatsStream: NotesStatsStreamManager;
 		messagingIndexStream: MessagingIndexStreamManager;
 		othelloStream: OthelloStreamManager;
 	} = {
 		localTimelineStream: null,
 		globalTimelineStream: null,
 		driveStream: null,
-		serverStream: null,
+		serverStatsStream: null,
+		notesStatsStream: null,
 		messagingIndexStream: null,
 		othelloStream: null
 	};
@@ -218,7 +221,8 @@ export default class MiOS extends EventEmitter {
 		this.store = initStore(this);
 
 		//#region Init stream managers
-		this.streams.serverStream = new ServerStreamManager(this);
+		this.streams.serverStatsStream = new ServerStatsStreamManager(this);
+		this.streams.notesStatsStream = new NotesStatsStreamManager(this);
 
 		this.once('signedin', () => {
 			// Init home stream manager
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index eab0ca6a38..ea8580b4d0 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -15,6 +15,7 @@
 					<option value="rss">%i18n:common.widgets.rss%</option>
 					<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
 					<option value="slideshow">%i18n:common.widgets.slideshow%</option>
+					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
 					<option value="version">%i18n:common.widgets.version%</option>
 					<option value="server">%i18n:common.widgets.server%</option>
 					<option value="memo">%i18n:common.widgets.memo%</option>
diff --git a/src/db/mongodb.ts b/src/db/mongodb.ts
index 05bb72bfde..0f6d27ca15 100644
--- a/src/db/mongodb.ts
+++ b/src/db/mongodb.ts
@@ -12,7 +12,10 @@ const uri = u && p
  */
 import mongo from 'monk';
 
-const db = mongo(uri);
+const db = mongo(uri, {
+	poolSize: 16,
+	keepAlive: 1
+});
 
 export default db;
 
diff --git a/src/index.ts b/src/index.ts
index 42a4f484e6..4a98b7564c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,6 +18,7 @@ import EnvironmentInfo from './utils/environmentInfo';
 import MachineInfo from './utils/machineInfo';
 import DependencyInfo from './utils/dependencyInfo';
 import serverStats from './server-stats';
+import notesStats from './notes-stats';
 
 import loadConfig from './config/load';
 import { Config } from './config/types';
@@ -50,6 +51,7 @@ function main() {
 
 		ev.mount();
 		serverStats();
+		notesStats();
 	} else {
 		workerMain(opt);
 	}
diff --git a/src/models/note.ts b/src/models/note.ts
index ad8c1565f0..d4681b7b70 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -16,6 +16,9 @@ import Following from './following';
 const Note = db.get<INote>('notes');
 Note.createIndex('uri', { sparse: true, unique: true });
 Note.createIndex('userId');
+Note.createIndex({
+	createdAt: -1
+});
 export default Note;
 
 export function isValidText(text: string): boolean {
diff --git a/src/notes-stats-child.ts b/src/notes-stats-child.ts
new file mode 100644
index 0000000000..0e0f14eaf1
--- /dev/null
+++ b/src/notes-stats-child.ts
@@ -0,0 +1,20 @@
+import Note from './models/note';
+
+setInterval(async () => {
+	const [all, local] = await Promise.all([Note.count({
+		createdAt: {
+			$gte: new Date(Date.now() - 3000)
+		}
+	}), Note.count({
+		createdAt: {
+			$gte: new Date(Date.now() - 3000)
+		},
+		'_user.host': null
+	})]);
+
+	const stats = {
+		all, local
+	};
+
+	process.send(stats);
+}, 3000);
diff --git a/src/notes-stats.ts b/src/notes-stats.ts
new file mode 100644
index 0000000000..3094c34af0
--- /dev/null
+++ b/src/notes-stats.ts
@@ -0,0 +1,20 @@
+import * as childProcess from 'child_process';
+import Xev from 'xev';
+
+const ev = new Xev();
+
+export default function() {
+	const log = [];
+
+	const p = childProcess.fork(__dirname + '/notes-stats-child.js');
+
+	p.on('message', stats => {
+		ev.emit('notesStats', stats);
+		log.push(stats);
+		if (log.length > 100) log.shift();
+	});
+
+	ev.on('requestNotesStatsLog', id => {
+		ev.emit('notesStatsLog:' + id, log);
+	});
+}
diff --git a/src/server-stats.ts b/src/server-stats.ts
index 85aa85b682..7b0d4a8576 100644
--- a/src/server-stats.ts
+++ b/src/server-stats.ts
@@ -6,7 +6,7 @@ import Xev from 'xev';
 const ev = new Xev();
 
 /**
- * Report stats regularly
+ * Report server stats regularly
  */
 export default function() {
 	const log = [];
diff --git a/src/server/api/stream/notes-stats.ts b/src/server/api/stream/notes-stats.ts
new file mode 100644
index 0000000000..739b325848
--- /dev/null
+++ b/src/server/api/stream/notes-stats.ts
@@ -0,0 +1,35 @@
+import * as websocket from 'websocket';
+import Xev from 'xev';
+
+const ev = new Xev();
+
+export default function(request: websocket.request, connection: websocket.connection): void {
+	const onStats = stats => {
+		connection.send(JSON.stringify({
+			type: 'stats',
+			body: stats
+		}));
+	};
+
+	connection.on('message', async data => {
+		const msg = JSON.parse(data.utf8Data);
+
+		switch (msg.type) {
+			case 'requestLog':
+				ev.once('notesStatsLog:' + msg.id, statsLog => {
+					connection.send(JSON.stringify({
+						type: 'statsLog',
+						body: statsLog
+					}));
+				});
+				ev.emit('requestNotesStatsLog', msg.id);
+				break;
+		}
+	});
+
+	ev.addListener('notesStats', onStats);
+
+	connection.on('close', () => {
+		ev.removeListener('notesStats', onStats);
+	});
+}
diff --git a/src/server/api/stream/server-stats.ts b/src/server/api/stream/server-stats.ts
new file mode 100644
index 0000000000..342170a21e
--- /dev/null
+++ b/src/server/api/stream/server-stats.ts
@@ -0,0 +1,35 @@
+import * as websocket from 'websocket';
+import Xev from 'xev';
+
+const ev = new Xev();
+
+export default function(request: websocket.request, connection: websocket.connection): void {
+	const onStats = stats => {
+		connection.send(JSON.stringify({
+			type: 'stats',
+			body: stats
+		}));
+	};
+
+	connection.on('message', async data => {
+		const msg = JSON.parse(data.utf8Data);
+
+		switch (msg.type) {
+			case 'requestLog':
+				ev.once('serverStatsLog:' + msg.id, statsLog => {
+					connection.send(JSON.stringify({
+						type: 'statsLog',
+						body: statsLog
+					}));
+				});
+				ev.emit('requestServerStatsLog', msg.id);
+				break;
+		}
+	});
+
+	ev.addListener('serverStats', onStats);
+
+	connection.on('close', () => {
+		ev.removeListener('serverStats', onStats);
+	});
+}
diff --git a/src/server/api/stream/server.ts b/src/server/api/stream/server.ts
deleted file mode 100644
index 342170a21e..0000000000
--- a/src/server/api/stream/server.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-
-const ev = new Xev();
-
-export default function(request: websocket.request, connection: websocket.connection): void {
-	const onStats = stats => {
-		connection.send(JSON.stringify({
-			type: 'stats',
-			body: stats
-		}));
-	};
-
-	connection.on('message', async data => {
-		const msg = JSON.parse(data.utf8Data);
-
-		switch (msg.type) {
-			case 'requestLog':
-				ev.once('serverStatsLog:' + msg.id, statsLog => {
-					connection.send(JSON.stringify({
-						type: 'statsLog',
-						body: statsLog
-					}));
-				});
-				ev.emit('requestServerStatsLog', msg.id);
-				break;
-		}
-	});
-
-	ev.addListener('serverStats', onStats);
-
-	connection.on('close', () => {
-		ev.removeListener('serverStats', onStats);
-	});
-}
diff --git a/src/server/api/streaming.ts b/src/server/api/streaming.ts
index 6825b6336a..2d4cfc108f 100644
--- a/src/server/api/streaming.ts
+++ b/src/server/api/streaming.ts
@@ -12,7 +12,8 @@ import messagingStream from './stream/messaging';
 import messagingIndexStream from './stream/messaging-index';
 import othelloGameStream from './stream/othello-game';
 import othelloStream from './stream/othello';
-import serverStream from './stream/server';
+import serverStatsStream from './stream/server-stats';
+import notesStatsStream from './stream/notes-stats';
 import requestsStream from './stream/requests';
 import { ParsedUrlQuery } from 'querystring';
 import authenticate from './authenticate';
@@ -28,8 +29,13 @@ module.exports = (server: http.Server) => {
 	ws.on('request', async (request) => {
 		const connection = request.accept();
 
-		if (request.resourceURL.pathname === '/server') {
-			serverStream(request, connection);
+		if (request.resourceURL.pathname === '/server-stats') {
+			serverStatsStream(request, connection);
+			return;
+		}
+
+		if (request.resourceURL.pathname === '/notes-stats') {
+			notesStatsStream(request, connection);
 			return;
 		}
 
-- 
cgit v1.2.3-freya


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:

---
 locales/de.yml                                     |   2 +-
 locales/en.yml                                     |   4 +-
 locales/es.yml                                     |   2 +-
 locales/fr.yml                                     |   2 +-
 locales/it.yml                                     |   2 +-
 locales/ja.yml                                     |   2 +-
 locales/ko.yml                                     |   2 +-
 locales/pl.yml                                     |   2 +-
 locales/pt.yml                                     |   2 +-
 locales/ru.yml                                     |   2 +-
 locales/zh.yml                                     |   2 +-
 .../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
 src/config/types.ts                                |   2 +-
 src/models/othello-game.ts                         | 109 ---
 src/models/othello-matching.ts                     |  44 -
 src/models/reversi-game.ts                         | 109 +++
 src/models/reversi-matching.ts                     |  44 +
 src/othello/ai/back.ts                             | 377 ---------
 src/othello/ai/front.ts                            | 233 ------
 src/othello/ai/index.ts                            |   1 -
 src/othello/core.ts                                | 340 --------
 src/othello/maps.ts                                | 911 ---------------------
 src/publishers/stream.ts                           |  12 +-
 src/reversi/ai/back.ts                             | 377 +++++++++
 src/reversi/ai/front.ts                            | 233 ++++++
 src/reversi/ai/index.ts                            |   1 +
 src/reversi/core.ts                                | 340 ++++++++
 src/reversi/maps.ts                                | 911 +++++++++++++++++++++
 src/server/api/endpoints.ts                        |  10 +-
 src/server/api/endpoints/othello/games.ts          |  62 --
 src/server/api/endpoints/othello/games/show.ts     |  32 -
 src/server/api/endpoints/othello/invitations.ts    |  15 -
 src/server/api/endpoints/othello/match.ts          |  95 ---
 src/server/api/endpoints/othello/match/cancel.ts   |   9 -
 src/server/api/endpoints/reversi/games.ts          |  62 ++
 src/server/api/endpoints/reversi/games/show.ts     |  32 +
 src/server/api/endpoints/reversi/invitations.ts    |  15 +
 src/server/api/endpoints/reversi/match.ts          |  95 +++
 src/server/api/endpoints/reversi/match/cancel.ts   |   9 +
 src/server/api/stream/othello-game.ts              | 333 --------
 src/server/api/stream/othello.ts                   |  29 -
 src/server/api/stream/reversi-game.ts              | 333 ++++++++
 src/server/api/stream/reversi.ts                   |  29 +
 src/server/api/streaming.ts                        |  10 +-
 72 files changed, 3774 insertions(+), 3774 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
 delete mode 100644 src/models/othello-game.ts
 delete mode 100644 src/models/othello-matching.ts
 create mode 100644 src/models/reversi-game.ts
 create mode 100644 src/models/reversi-matching.ts
 delete mode 100644 src/othello/ai/back.ts
 delete mode 100644 src/othello/ai/front.ts
 delete mode 100644 src/othello/ai/index.ts
 delete mode 100644 src/othello/core.ts
 delete mode 100644 src/othello/maps.ts
 create mode 100644 src/reversi/ai/back.ts
 create mode 100644 src/reversi/ai/front.ts
 create mode 100644 src/reversi/ai/index.ts
 create mode 100644 src/reversi/core.ts
 create mode 100644 src/reversi/maps.ts
 delete mode 100644 src/server/api/endpoints/othello/games.ts
 delete mode 100644 src/server/api/endpoints/othello/games/show.ts
 delete mode 100644 src/server/api/endpoints/othello/invitations.ts
 delete mode 100644 src/server/api/endpoints/othello/match.ts
 delete mode 100644 src/server/api/endpoints/othello/match/cancel.ts
 create mode 100644 src/server/api/endpoints/reversi/games.ts
 create mode 100644 src/server/api/endpoints/reversi/games/show.ts
 create mode 100644 src/server/api/endpoints/reversi/invitations.ts
 create mode 100644 src/server/api/endpoints/reversi/match.ts
 create mode 100644 src/server/api/endpoints/reversi/match/cancel.ts
 delete mode 100644 src/server/api/stream/othello-game.ts
 delete mode 100644 src/server/api/stream/othello.ts
 create mode 100644 src/server/api/stream/reversi-game.ts
 create mode 100644 src/server/api/stream/reversi.ts

(limited to 'src/client/app/common/scripts')

diff --git a/locales/de.yml b/locales/de.yml
index 0a53d74651..dd6deed0f2 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "Mehr"
   close: "Schließen"
 desktop/views/components/game-window.vue:
-  game: "Othello"
+  game: "Reversi"
 desktop/views/components/home.vue:
   done: "Verbunden"
   add-widget: "Widget hinzufügen:"
diff --git a/locales/en.yml b/locales/en.yml
index 9d2e2e76be..4a452dc129 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "More"
   close: "Close"
 desktop/views/components/game-window.vue:
-  game: "Othello"
+  game: "Reversi"
 desktop/views/components/home.vue:
   done: "Submit"
   add-widget: "Add widget:"
@@ -549,7 +549,7 @@ desktop/views/components/ui.header.nav.vue:
   home: "Home"
   deck: "Deck"
   messaging: "Messages"
-  game: "Play Othello"
+  game: "Play Reversi"
 desktop/views/components/ui.header.notifications.vue:
   title: "Notifications"
 desktop/views/components/ui.header.post.vue:
diff --git a/locales/es.yml b/locales/es.yml
index 4d6b348658..add3258292 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"
diff --git a/locales/fr.yml b/locales/fr.yml
index e618a876c5..0af534bc61 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "Plus"
   close: "Fermer"
 desktop/views/components/game-window.vue:
-  game: "Othello"
+  game: "Reversi"
 desktop/views/components/home.vue:
   done: "Envoyer"
   add-widget: "Ajouter un widget"
diff --git a/locales/it.yml b/locales/it.yml
index 4d6b348658..add3258292 100644
--- a/locales/it.yml
+++ b/locales/it.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"
diff --git a/locales/ja.yml b/locales/ja.yml
index 86b16adaad..29decefe68 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -384,7 +384,7 @@ desktop/views/components/friends-maker.vue:
   close: "閉じる"
 
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 
 desktop/views/components/home.vue:
   done: "完了"
diff --git a/locales/ko.yml b/locales/ko.yml
index 4d6b348658..add3258292 100644
--- a/locales/ko.yml
+++ b/locales/ko.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"
diff --git a/locales/pl.yml b/locales/pl.yml
index 7c0d41e693..8febac051c 100644
--- a/locales/pl.yml
+++ b/locales/pl.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "Więcej"
   close: "Zamknij"
 desktop/views/components/game-window.vue:
-  game: "Othello"
+  game: "Reversi"
 desktop/views/components/home.vue:
   done: "Wyślij"
   add-widget: "Dodaj widżet:"
diff --git a/locales/pt.yml b/locales/pt.yml
index 141209396f..a195c4d9b5 100644
--- a/locales/pt.yml
+++ b/locales/pt.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"
diff --git a/locales/ru.yml b/locales/ru.yml
index 57d9f905d0..05992e9310 100644
--- a/locales/ru.yml
+++ b/locales/ru.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"
diff --git a/locales/zh.yml b/locales/zh.yml
index 655d7e9fe6..cec6ff64a7 100644
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -333,7 +333,7 @@ desktop/views/components/friends-maker.vue:
   refresh: "もっと見る"
   close: "閉じる"
 desktop/views/components/game-window.vue:
-  game: "オセロ"
+  game: "リバーシ"
 desktop/views/components/home.vue:
   done: "完了"
   add-widget: "ウィジェットを追加:"
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
diff --git a/src/config/types.ts b/src/config/types.ts
index 62f63d4a3c..49eeac508b 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -60,7 +60,7 @@ export type Source = {
 		hook_secret: string;
 		username: string;
 	};
-	othello_ai?: {
+	reversi_ai?: {
 		id: string;
 		i: string;
 	};
diff --git a/src/models/othello-game.ts b/src/models/othello-game.ts
deleted file mode 100644
index 1dd375d2e5..0000000000
--- a/src/models/othello-game.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import * as mongo from 'mongodb';
-import * as deepcopy from 'deepcopy';
-import db from '../db/mongodb';
-import { IUser, pack as packUser } from './user';
-
-const OthelloGame = db.get<IOthelloGame>('othelloGames');
-export default OthelloGame;
-
-export interface IOthelloGame {
-	_id: mongo.ObjectID;
-	createdAt: Date;
-	startedAt: Date;
-	user1Id: mongo.ObjectID;
-	user2Id: mongo.ObjectID;
-	user1Accepted: boolean;
-	user2Accepted: boolean;
-
-	/**
-	 * どちらのプレイヤーが先行(黒)か
-	 * 1 ... user1
-	 * 2 ... user2
-	 */
-	black: number;
-
-	isStarted: boolean;
-	isEnded: boolean;
-	winnerId: mongo.ObjectID;
-	logs: Array<{
-		at: Date;
-		color: boolean;
-		pos: number;
-	}>;
-	settings: {
-		map: string[];
-		bw: string | number;
-		isLlotheo: boolean;
-		canPutEverywhere: boolean;
-		loopedBoard: boolean;
-	};
-	form1: any;
-	form2: any;
-
-	// ログのposを文字列としてすべて連結したもののCRC32値
-	crc32: string;
-}
-
-/**
- * Pack an othello game for API response
- */
-export const pack = (
-	game: any,
-	me?: string | mongo.ObjectID | IUser,
-	options?: {
-		detail?: boolean
-	}
-) => new Promise<any>(async (resolve, reject) => {
-	const opts = Object.assign({
-		detail: true
-	}, options);
-
-	let _game: any;
-
-	// Populate the game if 'game' is ID
-	if (mongo.ObjectID.prototype.isPrototypeOf(game)) {
-		_game = await OthelloGame.findOne({
-			_id: game
-		});
-	} else if (typeof game === 'string') {
-		_game = await OthelloGame.findOne({
-			_id: new mongo.ObjectID(game)
-		});
-	} else {
-		_game = deepcopy(game);
-	}
-
-	// Me
-	const meId: mongo.ObjectID = me
-		? mongo.ObjectID.prototype.isPrototypeOf(me)
-			? me as mongo.ObjectID
-			: typeof me === 'string'
-				? new mongo.ObjectID(me)
-				: (me as IUser)._id
-		: null;
-
-	// Rename _id to id
-	_game.id = _game._id;
-	delete _game._id;
-
-	if (opts.detail === false) {
-		delete _game.logs;
-		delete _game.settings.map;
-	} else {
-		// 互換性のため
-		if (_game.settings.map.hasOwnProperty('size')) {
-			_game.settings.map = _game.settings.map.data.match(new RegExp(`.{1,${_game.settings.map.size}}`, 'g'));
-		}
-	}
-
-	// Populate user
-	_game.user1 = await packUser(_game.user1Id, meId);
-	_game.user2 = await packUser(_game.user2Id, meId);
-	if (_game.winnerId) {
-		_game.winner = await packUser(_game.winnerId, meId);
-	} else {
-		_game.winner = null;
-	}
-
-	resolve(_game);
-});
diff --git a/src/models/othello-matching.ts b/src/models/othello-matching.ts
deleted file mode 100644
index 0efba3ae5d..0000000000
--- a/src/models/othello-matching.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as mongo from 'mongodb';
-import * as deepcopy from 'deepcopy';
-import db from '../db/mongodb';
-import { IUser, pack as packUser } from './user';
-
-const Matching = db.get<IMatching>('othelloMatchings');
-export default Matching;
-
-export interface IMatching {
-	_id: mongo.ObjectID;
-	createdAt: Date;
-	parentId: mongo.ObjectID;
-	childId: mongo.ObjectID;
-}
-
-/**
- * Pack an othello matching for API response
- */
-export const pack = (
-	matching: any,
-	me?: string | mongo.ObjectID | IUser
-) => new Promise<any>(async (resolve, reject) => {
-
-	// Me
-	const meId: mongo.ObjectID = me
-		? mongo.ObjectID.prototype.isPrototypeOf(me)
-			? me as mongo.ObjectID
-			: typeof me === 'string'
-				? new mongo.ObjectID(me)
-				: (me as IUser)._id
-		: null;
-
-	const _matching = deepcopy(matching);
-
-	// Rename _id to id
-	_matching.id = _matching._id;
-	delete _matching._id;
-
-	// Populate user
-	_matching.parent = await packUser(_matching.parentId, meId);
-	_matching.child = await packUser(_matching.childId, meId);
-
-	resolve(_matching);
-});
diff --git a/src/models/reversi-game.ts b/src/models/reversi-game.ts
new file mode 100644
index 0000000000..16b9ab0d4e
--- /dev/null
+++ b/src/models/reversi-game.ts
@@ -0,0 +1,109 @@
+import * as mongo from 'mongodb';
+import * as deepcopy from 'deepcopy';
+import db from '../db/mongodb';
+import { IUser, pack as packUser } from './user';
+
+const ReversiGame = db.get<IReversiGame>('reversiGames');
+export default ReversiGame;
+
+export interface IReversiGame {
+	_id: mongo.ObjectID;
+	createdAt: Date;
+	startedAt: Date;
+	user1Id: mongo.ObjectID;
+	user2Id: mongo.ObjectID;
+	user1Accepted: boolean;
+	user2Accepted: boolean;
+
+	/**
+	 * どちらのプレイヤーが先行(黒)か
+	 * 1 ... user1
+	 * 2 ... user2
+	 */
+	black: number;
+
+	isStarted: boolean;
+	isEnded: boolean;
+	winnerId: mongo.ObjectID;
+	logs: Array<{
+		at: Date;
+		color: boolean;
+		pos: number;
+	}>;
+	settings: {
+		map: string[];
+		bw: string | number;
+		isLlotheo: boolean;
+		canPutEverywhere: boolean;
+		loopedBoard: boolean;
+	};
+	form1: any;
+	form2: any;
+
+	// ログのposを文字列としてすべて連結したもののCRC32値
+	crc32: string;
+}
+
+/**
+ * Pack an reversi game for API response
+ */
+export const pack = (
+	game: any,
+	me?: string | mongo.ObjectID | IUser,
+	options?: {
+		detail?: boolean
+	}
+) => new Promise<any>(async (resolve, reject) => {
+	const opts = Object.assign({
+		detail: true
+	}, options);
+
+	let _game: any;
+
+	// Populate the game if 'game' is ID
+	if (mongo.ObjectID.prototype.isPrototypeOf(game)) {
+		_game = await ReversiGame.findOne({
+			_id: game
+		});
+	} else if (typeof game === 'string') {
+		_game = await ReversiGame.findOne({
+			_id: new mongo.ObjectID(game)
+		});
+	} else {
+		_game = deepcopy(game);
+	}
+
+	// Me
+	const meId: mongo.ObjectID = me
+		? mongo.ObjectID.prototype.isPrototypeOf(me)
+			? me as mongo.ObjectID
+			: typeof me === 'string'
+				? new mongo.ObjectID(me)
+				: (me as IUser)._id
+		: null;
+
+	// Rename _id to id
+	_game.id = _game._id;
+	delete _game._id;
+
+	if (opts.detail === false) {
+		delete _game.logs;
+		delete _game.settings.map;
+	} else {
+		// 互換性のため
+		if (_game.settings.map.hasOwnProperty('size')) {
+			_game.settings.map = _game.settings.map.data.match(new RegExp(`.{1,${_game.settings.map.size}}`, 'g'));
+		}
+	}
+
+	// Populate user
+	_game.user1 = await packUser(_game.user1Id, meId);
+	_game.user2 = await packUser(_game.user2Id, meId);
+	if (_game.winnerId) {
+		_game.winner = await packUser(_game.winnerId, meId);
+	} else {
+		_game.winner = null;
+	}
+
+	resolve(_game);
+});
diff --git a/src/models/reversi-matching.ts b/src/models/reversi-matching.ts
new file mode 100644
index 0000000000..5efa5d76ad
--- /dev/null
+++ b/src/models/reversi-matching.ts
@@ -0,0 +1,44 @@
+import * as mongo from 'mongodb';
+import * as deepcopy from 'deepcopy';
+import db from '../db/mongodb';
+import { IUser, pack as packUser } from './user';
+
+const Matching = db.get<IMatching>('reversiMatchings');
+export default Matching;
+
+export interface IMatching {
+	_id: mongo.ObjectID;
+	createdAt: Date;
+	parentId: mongo.ObjectID;
+	childId: mongo.ObjectID;
+}
+
+/**
+ * Pack an reversi matching for API response
+ */
+export const pack = (
+	matching: any,
+	me?: string | mongo.ObjectID | IUser
+) => new Promise<any>(async (resolve, reject) => {
+
+	// Me
+	const meId: mongo.ObjectID = me
+		? mongo.ObjectID.prototype.isPrototypeOf(me)
+			? me as mongo.ObjectID
+			: typeof me === 'string'
+				? new mongo.ObjectID(me)
+				: (me as IUser)._id
+		: null;
+
+	const _matching = deepcopy(matching);
+
+	// Rename _id to id
+	_matching.id = _matching._id;
+	delete _matching._id;
+
+	// Populate user
+	_matching.parent = await packUser(_matching.parentId, meId);
+	_matching.child = await packUser(_matching.childId, meId);
+
+	resolve(_matching);
+});
diff --git a/src/othello/ai/back.ts b/src/othello/ai/back.ts
deleted file mode 100644
index e4d0cfdd33..0000000000
--- a/src/othello/ai/back.ts
+++ /dev/null
@@ -1,377 +0,0 @@
-/**
- * -AI-
- * Botのバックエンド(思考を担当)
- *
- * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
- * 切断されてしまうので、別々のプロセスで行うようにします
- */
-
-import * as request from 'request-promise-native';
-import Othello, { Color } from '../core';
-import conf from '../../config';
-import getUserName from '../../renderers/get-user-name';
-
-let game;
-let form;
-
-/**
- * BotアカウントのユーザーID
- */
-const id = conf.othello_ai.id;
-
-/**
- * BotアカウントのAPIキー
- */
-const i = conf.othello_ai.i;
-
-let note;
-
-process.on('message', async msg => {
-	// 親プロセスからデータをもらう
-	if (msg.type == '_init_') {
-		game = msg.game;
-		form = msg.form;
-	}
-
-	// フォームが更新されたとき
-	if (msg.type == 'update-form') {
-		form.find(i => i.id == msg.body.id).value = msg.body.value;
-	}
-
-	// ゲームが始まったとき
-	if (msg.type == 'started') {
-		onGameStarted(msg.body);
-
-		//#region TLに投稿する
-		const game = msg.body;
-		const url = `${conf.url}/othello/${game.id}`;
-		const user = game.user1Id == id ? game.user2 : game.user1;
-		const isSettai = form[0].value === 0;
-		const text = isSettai
-			? `?[${getUserName(user)}](${conf.url}/@${user.username})さんの接待を始めました！`
-			: `対局を?[${getUserName(user)}](${conf.url}/@${user.username})さんと始めました！ (強さ${form[0].value})`;
-
-		const res = await request.post(`${conf.api_url}/notes/create`, {
-			json: { i,
-				text: `${text}\n→[観戦する](${url})`
-			}
-		});
-
-		note = res.createdNote;
-		//#endregion
-	}
-
-	// ゲームが終了したとき
-	if (msg.type == 'ended') {
-		// ストリームから切断
-		process.send({
-			type: 'close'
-		});
-
-		//#region TLに投稿する
-		const user = game.user1Id == id ? game.user2 : game.user1;
-		const isSettai = form[0].value === 0;
-		const text = isSettai
-			? msg.body.winnerId === null
-				? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに接待で引き分けました...`
-				: msg.body.winnerId == id
-					? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに接待で勝ってしまいました...`
-					: `?[${getUserName(user)}](${conf.url}/@${user.username})さんに接待で負けてあげました♪`
-			: msg.body.winnerId === null
-				? `?[${getUserName(user)}](${conf.url}/@${user.username})さんと引き分けました～`
-				: msg.body.winnerId == id
-					? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに勝ちました♪`
-					: `?[${getUserName(user)}](${conf.url}/@${user.username})さんに負けました...`;
-
-		await request.post(`${conf.api_url}/notes/create`, {
-			json: { i,
-				renoteId: note.id,
-				text: text
-			}
-		});
-		//#endregion
-
-		process.exit();
-	}
-
-	// 打たれたとき
-	if (msg.type == 'set') {
-		onSet(msg.body);
-	}
-});
-
-let o: Othello;
-let botColor: Color;
-
-// 各マスの強さ
-let cellWeights;
-
-/**
- * ゲーム開始時
- * @param g ゲーム情報
- */
-function onGameStarted(g) {
-	game = g;
-
-	// オセロエンジン初期化
-	o = new Othello(game.settings.map, {
-		isLlotheo: game.settings.isLlotheo,
-		canPutEverywhere: game.settings.canPutEverywhere,
-		loopedBoard: game.settings.loopedBoard
-	});
-
-	// 各マスの価値を計算しておく
-	cellWeights = o.map.map((pix, i) => {
-		if (pix == 'null') return 0;
-		const [x, y] = o.transformPosToXy(i);
-		let count = 0;
-		const get = (x, y) => {
-			if (x < 0 || y < 0 || x >= o.mapWidth || y >= o.mapHeight) return 'null';
-			return o.mapDataGet(o.transformXyToPos(x, y));
-		};
-
-		if (get(x    , y - 1) == 'null') count++;
-		if (get(x + 1, y - 1) == 'null') count++;
-		if (get(x + 1, y    ) == 'null') count++;
-		if (get(x + 1, y + 1) == 'null') count++;
-		if (get(x    , y + 1) == 'null') count++;
-		if (get(x - 1, y + 1) == 'null') count++;
-		if (get(x - 1, y    ) == 'null') count++;
-		if (get(x - 1, y - 1) == 'null') count++;
-		//return Math.pow(count, 3);
-		return count >= 4 ? 1 : 0;
-	});
-
-	botColor = game.user1Id == id && game.black == 1 || game.user2Id == id && game.black == 2;
-
-	if (botColor) {
-		think();
-	}
-}
-
-function onSet(x) {
-	o.put(x.color, x.pos);
-
-	if (x.next === botColor) {
-		think();
-	}
-}
-
-const db = {};
-
-function think() {
-	console.log('Thinking...');
-	console.time('think');
-
-	const isSettai = form[0].value === 0;
-
-	// 接待モードのときは、全力(5手先読みくらい)で負けるようにする
-	const maxDepth = isSettai ? 5 : form[0].value;
-
-	/**
-	 * Botにとってある局面がどれだけ有利か取得する
-	 */
-	function staticEval() {
-		let score = o.canPutSomewhere(botColor).length;
-
-		cellWeights.forEach((weight, i) => {
-			// 係数
-			const coefficient = 30;
-			weight = weight * coefficient;
-
-			const stone = o.board[i];
-			if (stone === botColor) {
-				// TODO: 価値のあるマスに設置されている自分の石に縦か横に接するマスは価値があると判断する
-				score += weight;
-			} else if (stone !== null) {
-				score -= weight;
-			}
-		});
-
-		// ロセオならスコアを反転
-		if (game.settings.isLlotheo) score = -score;
-
-		// 接待ならスコアを反転
-		if (isSettai) score = -score;
-
-		return score;
-	}
-
-	/**
-	 * αβ法での探索
-	 */
-	const dive = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
-		// 試し打ち
-		o.put(o.turn, pos);
-
-		const key = o.board.toString();
-		let cache = db[key];
-		if (cache) {
-			if (alpha >= cache.upper) {
-				o.undo();
-				return cache.upper;
-			}
-			if (beta <= cache.lower) {
-				o.undo();
-				return cache.lower;
-			}
-			alpha = Math.max(alpha, cache.lower);
-			beta = Math.min(beta, cache.upper);
-		} else {
-			cache = {
-				upper: Infinity,
-				lower: -Infinity
-			};
-		}
-
-		const isBotTurn = o.turn === botColor;
-
-		// 勝った
-		if (o.turn === null) {
-			const winner = o.winner;
-
-			// 勝つことによる基本スコア
-			const base = 10000;
-
-			let score;
-
-			if (game.settings.isLlotheo) {
-				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
-			} else {
-				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			// 接待なら自分が負けた方が高スコア
-			return isSettai
-				? winner !== botColor ? score : -score
-				: winner === botColor ? score : -score;
-		}
-
-		if (depth === maxDepth) {
-			// 静的に評価
-			const score = staticEval();
-
-			// 巻き戻し
-			o.undo();
-
-			return score;
-		} else {
-			const cans = o.canPutSomewhere(o.turn);
-
-			let value = isBotTurn ? -Infinity : Infinity;
-			let a = alpha;
-			let b = beta;
-
-			// 次のターンのプレイヤーにとって最も良い手を取得
-			for (const p of cans) {
-				if (isBotTurn) {
-					const score = dive(p, a, beta, depth + 1);
-					value = Math.max(value, score);
-					a = Math.max(a, value);
-					if (value >= beta) break;
-				} else {
-					const score = dive(p, alpha, b, depth + 1);
-					value = Math.min(value, score);
-					b = Math.min(b, value);
-					if (value <= alpha) break;
-				}
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			if (value <= alpha) {
-				cache.upper = value;
-			} else if (value >= beta) {
-				cache.lower = value;
-			} else {
-				cache.upper = value;
-				cache.lower = value;
-			}
-
-			db[key] = cache;
-
-			return value;
-		}
-	};
-
-	/**
-	 * αβ法での探索(キャッシュ無し)(デバッグ用)
-	 */
-	const dive2 = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
-		// 試し打ち
-		o.put(o.turn, pos);
-
-		const isBotTurn = o.turn === botColor;
-
-		// 勝った
-		if (o.turn === null) {
-			const winner = o.winner;
-
-			// 勝つことによる基本スコア
-			const base = 10000;
-
-			let score;
-
-			if (game.settings.isLlotheo) {
-				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
-			} else {
-				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			// 接待なら自分が負けた方が高スコア
-			return isSettai
-				? winner !== botColor ? score : -score
-				: winner === botColor ? score : -score;
-		}
-
-		if (depth === maxDepth) {
-			// 静的に評価
-			const score = staticEval();
-
-			// 巻き戻し
-			o.undo();
-
-			return score;
-		} else {
-			const cans = o.canPutSomewhere(o.turn);
-
-			// 次のターンのプレイヤーにとって最も良い手を取得
-			for (const p of cans) {
-				if (isBotTurn) {
-					alpha = Math.max(alpha, dive2(p, alpha, beta, depth + 1));
-				} else {
-					beta = Math.min(beta, dive2(p, alpha, beta, depth + 1));
-				}
-				if (alpha >= beta) break;
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			return isBotTurn ? alpha : beta;
-		}
-	};
-
-	const cans = o.canPutSomewhere(botColor);
-	const scores = cans.map(p => dive(p));
-	const pos = cans[scores.indexOf(Math.max(...scores))];
-
-	console.log('Thinked:', pos);
-	console.timeEnd('think');
-
-	process.send({
-		type: 'put',
-		pos
-	});
-}
diff --git a/src/othello/ai/front.ts b/src/othello/ai/front.ts
deleted file mode 100644
index ff74b7216e..0000000000
--- a/src/othello/ai/front.ts
+++ /dev/null
@@ -1,233 +0,0 @@
-/**
- * -AI-
- * Botのフロントエンド(ストリームとの対話を担当)
- *
- * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
- * 切断されてしまうので、別々のプロセスで行うようにします
- */
-
-import * as childProcess from 'child_process';
-const WebSocket = require('ws');
-import * as ReconnectingWebSocket from 'reconnecting-websocket';
-import * as request from 'request-promise-native';
-import conf from '../../config';
-
-// 設定 ////////////////////////////////////////////////////////
-
-/**
- * BotアカウントのAPIキー
- */
-const i = conf.othello_ai.i;
-
-/**
- * BotアカウントのユーザーID
- */
-const id = conf.othello_ai.id;
-
-////////////////////////////////////////////////////////////////
-
-/**
- * ホームストリーム
- */
-const homeStream = new ReconnectingWebSocket(`${conf.ws_url}/?i=${i}`, undefined, {
-	constructor: WebSocket
-});
-
-homeStream.on('open', () => {
-	console.log('home stream opened');
-});
-
-homeStream.on('close', () => {
-	console.log('home stream closed');
-});
-
-homeStream.on('message', message => {
-	const msg = JSON.parse(message.toString());
-
-	// タイムライン上でなんか言われたまたは返信されたとき
-	if (msg.type == 'mention' || msg.type == 'reply') {
-		const note = msg.body;
-
-		if (note.userId == id) return;
-
-		// リアクションする
-		request.post(`${conf.api_url}/notes/reactions/create`, {
-			json: { i,
-				noteId: note.id,
-				reaction: 'love'
-			}
-		});
-
-		if (note.text) {
-			if (note.text.indexOf('オセロ') > -1) {
-				request.post(`${conf.api_url}/notes/create`, {
-					json: { i,
-						replyId: note.id,
-						text: '良いですよ～'
-					}
-				});
-
-				invite(note.userId);
-			}
-		}
-	}
-
-	// メッセージでなんか言われたとき
-	if (msg.type == 'messaging_message') {
-		const message = msg.body;
-		if (message.text) {
-			if (message.text.indexOf('オセロ') > -1) {
-				request.post(`${conf.api_url}/messaging/messages/create`, {
-					json: { i,
-						userId: message.userId,
-						text: '良いですよ～'
-					}
-				});
-
-				invite(message.userId);
-			}
-		}
-	}
-});
-
-// ユーザーを対局に誘う
-function invite(userId) {
-	request.post(`${conf.api_url}/othello/match`, {
-		json: { i,
-			userId: userId
-		}
-	});
-}
-
-/**
- * オセロストリーム
- */
-const othelloStream = new ReconnectingWebSocket(`${conf.ws_url}/othello?i=${i}`, undefined, {
-	constructor: WebSocket
-});
-
-othelloStream.on('open', () => {
-	console.log('othello stream opened');
-});
-
-othelloStream.on('close', () => {
-	console.log('othello stream closed');
-});
-
-othelloStream.on('message', message => {
-	const msg = JSON.parse(message.toString());
-
-	// 招待されたとき
-	if (msg.type == 'invited') {
-		onInviteMe(msg.body.parent);
-	}
-
-	// マッチしたとき
-	if (msg.type == 'matched') {
-		gameStart(msg.body);
-	}
-});
-
-/**
- * ゲーム開始
- * @param game ゲーム情報
- */
-function gameStart(game) {
-	// ゲームストリームに接続
-	const gw = new ReconnectingWebSocket(`${conf.ws_url}/othello-game?i=${i}&game=${game.id}`, undefined, {
-		constructor: WebSocket
-	});
-
-	gw.on('open', () => {
-		console.log('othello game stream opened');
-
-		// フォーム
-		const form = [{
-			id: 'strength',
-			type: 'radio',
-			label: '強さ',
-			value: 2,
-			items: [{
-				label: '接待',
-				value: 0
-			}, {
-				label: '弱',
-				value: 1
-			}, {
-				label: '中',
-				value: 2
-			}, {
-				label: '強',
-				value: 3
-			}, {
-				label: '最強',
-				value: 5
-			}]
-		}];
-
-		//#region バックエンドプロセス開始
-		const ai = childProcess.fork(__dirname + '/back.js');
-
-		// バックエンドプロセスに情報を渡す
-		ai.send({
-			type: '_init_',
-			game,
-			form
-		});
-
-		ai.on('message', msg => {
-			if (msg.type == 'put') {
-				gw.send(JSON.stringify({
-					type: 'set',
-					pos: msg.pos
-				}));
-			} else if (msg.type == 'close') {
-				gw.close();
-			}
-		});
-
-		// ゲームストリームから情報が流れてきたらそのままバックエンドプロセスに伝える
-		gw.on('message', message => {
-			const msg = JSON.parse(message.toString());
-			ai.send(msg);
-		});
-		//#endregion
-
-		// フォーム初期化
-		setTimeout(() => {
-			gw.send(JSON.stringify({
-				type: 'init-form',
-				body: form
-			}));
-		}, 1000);
-
-		// どんな設定内容の対局でも受け入れる
-		setTimeout(() => {
-			gw.send(JSON.stringify({
-				type: 'accept'
-			}));
-		}, 2000);
-	});
-
-	gw.on('close', () => {
-		console.log('othello game stream closed');
-	});
-}
-
-/**
- * オセロの対局に招待されたとき
- * @param inviter 誘ってきたユーザー
- */
-async function onInviteMe(inviter) {
-	console.log(`Someone invited me: @${inviter.username}`);
-
-	// 承認
-	const game = await request.post(`${conf.api_url}/othello/match`, {
-		json: {
-			i,
-			userId: inviter.id
-		}
-	});
-
-	gameStart(game);
-}
diff --git a/src/othello/ai/index.ts b/src/othello/ai/index.ts
deleted file mode 100644
index 5cd1db82da..0000000000
--- a/src/othello/ai/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-require('./front');
diff --git a/src/othello/core.ts b/src/othello/core.ts
deleted file mode 100644
index 217066d375..0000000000
--- a/src/othello/core.ts
+++ /dev/null
@@ -1,340 +0,0 @@
-/**
- * true ... 黒
- * false ... 白
- */
-export type Color = boolean;
-const BLACK = true;
-const WHITE = false;
-
-export type MapPixel = 'null' | 'empty';
-
-export type Options = {
-	isLlotheo: boolean;
-	canPutEverywhere: boolean;
-	loopedBoard: boolean;
-};
-
-export type Undo = {
-	/**
-	 * 色
-	 */
-	color: Color,
-
-	/**
-	 * どこに打ったか
-	 */
-	pos: number;
-
-	/**
-	 * 反転した石の位置の配列
-	 */
-	effects: number[];
-
-	/**
-	 * ターン
-	 */
-	turn: Color;
-};
-
-/**
- * オセロエンジン
- */
-export default class Othello {
-	public map: MapPixel[];
-	public mapWidth: number;
-	public mapHeight: number;
-	public board: Color[];
-	public turn: Color = BLACK;
-	public opts: Options;
-
-	public prevPos = -1;
-	public prevColor: Color = null;
-
-	private logs: Undo[] = [];
-
-	/**
-	 * ゲームを初期化します
-	 */
-	constructor(map: string[], opts: Options) {
-		//#region binds
-		this.put = this.put.bind(this);
-		//#endregion
-
-		//#region Options
-		this.opts = opts;
-		if (this.opts.isLlotheo == null) this.opts.isLlotheo = false;
-		if (this.opts.canPutEverywhere == null) this.opts.canPutEverywhere = false;
-		if (this.opts.loopedBoard == null) this.opts.loopedBoard = false;
-		//#endregion
-
-		//#region Parse map data
-		this.mapWidth = map[0].length;
-		this.mapHeight = map.length;
-		const mapData = map.join('');
-
-		this.board = mapData.split('').map(d => {
-			if (d == '-') return null;
-			if (d == 'b') return BLACK;
-			if (d == 'w') return WHITE;
-			return undefined;
-		});
-
-		this.map = mapData.split('').map(d => {
-			if (d == '-' || d == 'b' || d == 'w') return 'empty';
-			return 'null';
-		});
-		//#endregion
-
-		// ゲームが始まった時点で片方の色の石しかないか、始まった時点で勝敗が決定するようなマップの場合がある
-		if (this.canPutSomewhere(BLACK).length == 0) {
-			if (this.canPutSomewhere(WHITE).length == 0) {
-				this.turn = null;
-			} else {
-				this.turn = WHITE;
-			}
-		}
-	}
-
-	/**
-	 * 黒石の数
-	 */
-	public get blackCount() {
-		return this.board.filter(x => x === BLACK).length;
-	}
-
-	/**
-	 * 白石の数
-	 */
-	public get whiteCount() {
-		return this.board.filter(x => x === WHITE).length;
-	}
-
-	/**
-	 * 黒石の比率
-	 */
-	public get blackP() {
-		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
-		return this.blackCount / (this.blackCount + this.whiteCount);
-	}
-
-	/**
-	 * 白石の比率
-	 */
-	public get whiteP() {
-		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
-		return this.whiteCount / (this.blackCount + this.whiteCount);
-	}
-
-	public transformPosToXy(pos: number): number[] {
-		const x = pos % this.mapWidth;
-		const y = Math.floor(pos / this.mapWidth);
-		return [x, y];
-	}
-
-	public transformXyToPos(x: number, y: number): number {
-		return x + (y * this.mapWidth);
-	}
-
-	/**
-	 * 指定のマスに石を打ちます
-	 * @param color 石の色
-	 * @param pos 位置
-	 */
-	public put(color: Color, pos: number) {
-		this.prevPos = pos;
-		this.prevColor = color;
-
-		this.board[pos] = color;
-
-		// 反転させられる石を取得
-		const effects = this.effects(color, pos);
-
-		// 反転させる
-		for (const pos of effects) {
-			this.board[pos] = color;
-		}
-
-		const turn = this.turn;
-
-		this.logs.push({
-			color,
-			pos,
-			effects,
-			turn
-		});
-
-		this.calcTurn();
-	}
-
-	private calcTurn() {
-		// ターン計算
-		if (this.canPutSomewhere(!this.prevColor).length > 0) {
-			this.turn = !this.prevColor;
-		} else if (this.canPutSomewhere(this.prevColor).length > 0) {
-			this.turn = this.prevColor;
-		} else {
-			this.turn = null;
-		}
-	}
-
-	public undo() {
-		const undo = this.logs.pop();
-		this.prevColor = undo.color;
-		this.prevPos = undo.pos;
-		this.board[undo.pos] = null;
-		for (const pos of undo.effects) {
-			const color = this.board[pos];
-			this.board[pos] = !color;
-		}
-		this.turn = undo.turn;
-	}
-
-	/**
-	 * 指定した位置のマップデータのマスを取得します
-	 * @param pos 位置
-	 */
-	public mapDataGet(pos: number): MapPixel {
-		const [x, y] = this.transformPosToXy(pos);
-		if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) return 'null';
-		return this.map[pos];
-	}
-
-	/**
-	 * 打つことができる場所を取得します
-	 */
-	public canPutSomewhere(color: Color): number[] {
-		const result = [];
-
-		this.board.forEach((x, i) => {
-			if (this.canPut(color, i)) result.push(i);
-		});
-
-		return result;
-	}
-
-	/**
-	 * 指定のマスに石を打つことができるかどうかを取得します
-	 * @param color 自分の色
-	 * @param pos 位置
-	 */
-	public canPut(color: Color, pos: number): boolean {
-		// 既に石が置いてある場所には打てない
-		if (this.board[pos] !== null) return false;
-
-		if (this.opts.canPutEverywhere) {
-			// 挟んでなくても置けるモード
-			return this.mapDataGet(pos) == 'empty';
-		} else {
-			// 相手の石を1つでも反転させられるか
-			return this.effects(color, pos).length !== 0;
-		}
-	}
-
-	/**
-	 * 指定のマスに石を置いた時の、反転させられる石を取得します
-	 * @param color 自分の色
-	 * @param pos 位置
-	 */
-	public effects(color: Color, pos: number): number[] {
-		const enemyColor = !color;
-
-		// ひっくり返せる石(の位置)リスト
-		let stones = [];
-
-		const initPos = pos;
-
-		// 走査
-		const iterate = (fn: (i: number) => number[]) => {
-			let i = 1;
-			const found = [];
-
-			while (true) {
-				let [x, y] = fn(i);
-
-				// 座標が指し示す位置がボード外に出たとき
-				if (this.opts.loopedBoard) {
-					if (x <  0             ) x = this.mapWidth  - ((-x) % this.mapWidth);
-					if (y <  0             ) y = this.mapHeight - ((-y) % this.mapHeight);
-					if (x >= this.mapWidth ) x = x % this.mapWidth;
-					if (y >= this.mapHeight) y = y % this.mapHeight;
-
-					// for debug
-					//if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) {
-					//	console.log(x, y);
-					//}
-
-					// 一周して自分に帰ってきたら
-					if (this.transformXyToPos(x, y) == initPos) {
-						// ↓のコメントアウトを外すと、「現時点で自分の石が隣接していないが、
-						// そこに置いたとするとループして最終的に挟んだことになる」というケースを有効化します。(Test4のマップで違いが分かります)
-						// このケースを有効にした方が良いのか無効にした方が良いのか判断がつかなかったためとりあえず無効としておきます
-						// (あと無効な方がゲームとしておもしろそうだった)
-						stones = stones.concat(found);
-						break;
-					}
-				} else {
-					if (x == -1 || y == -1 || x == this.mapWidth || y == this.mapHeight) break;
-				}
-
-				const pos = this.transformXyToPos(x, y);
-
-				//#region 「配置不能」マスに当たった場合走査終了
-				const pixel = this.mapDataGet(pos);
-				if (pixel == 'null') break;
-				//#endregion
-
-				// 石取得
-				const stone = this.board[pos];
-
-				// 石が置かれていないマスなら走査終了
-				if (stone === null) break;
-
-				// 相手の石なら「ひっくり返せるかもリスト」に入れておく
-				if (stone === enemyColor) found.push(pos);
-
-				// 自分の石なら「ひっくり返せるかもリスト」を「ひっくり返せるリスト」に入れ、走査終了
-				if (stone === color) {
-					stones = stones.concat(found);
-					break;
-				}
-
-				i++;
-			}
-		};
-
-		const [x, y] = this.transformPosToXy(pos);
-
-		iterate(i => [x    , y - i]); // 上
-		iterate(i => [x + i, y - i]); // 右上
-		iterate(i => [x + i, y    ]); // 右
-		iterate(i => [x + i, y + i]); // 右下
-		iterate(i => [x    , y + i]); // 下
-		iterate(i => [x - i, y + i]); // 左下
-		iterate(i => [x - i, y    ]); // 左
-		iterate(i => [x - i, y - i]); // 左上
-
-		return stones;
-	}
-
-	/**
-	 * ゲームが終了したか否か
-	 */
-	public get isEnded(): boolean {
-		return this.turn === null;
-	}
-
-	/**
-	 * ゲームの勝者 (null = 引き分け)
-	 */
-	public get winner(): Color {
-		if (!this.isEnded) return undefined;
-
-		if (this.blackCount == this.whiteCount) return null;
-
-		if (this.opts.isLlotheo) {
-			return this.blackCount > this.whiteCount ? WHITE : BLACK;
-		} else {
-			return this.blackCount > this.whiteCount ? BLACK : WHITE;
-		}
-	}
-}
diff --git a/src/othello/maps.ts b/src/othello/maps.ts
deleted file mode 100644
index 68e5a446f1..0000000000
--- a/src/othello/maps.ts
+++ /dev/null
@@ -1,911 +0,0 @@
-/**
- * 組み込みマップ定義
- *
- * データ値:
- * (スペース) ... マス無し
- * - ... マス
- * b ... 初期配置される黒石
- * w ... 初期配置される白石
- */
-
-export type Map = {
-	name?: string;
-	category?: string;
-	author?: string;
-	data: string[];
-};
-
-export const fourfour: Map = {
-	name: '4x4',
-	category: '4x4',
-	data: [
-		'----',
-		'-wb-',
-		'-bw-',
-		'----'
-	]
-};
-
-export const sixsix: Map = {
-	name: '6x6',
-	category: '6x6',
-	data: [
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------'
-	]
-};
-
-export const roundedSixsix: Map = {
-	name: '6x6 rounded',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		' ---- ',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		' ---- '
-	]
-};
-
-export const roundedSixsix2: Map = {
-	name: '6x6 rounded 2',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		'  --  ',
-		' ---- ',
-		'--wb--',
-		'--bw--',
-		' ---- ',
-		'  --  '
-	]
-};
-
-export const eighteight: Map = {
-	name: '8x8',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH1: Map = {
-	name: '8x8 handicap 1',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH2: Map = {
-	name: '8x8 handicap 2',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH3: Map = {
-	name: '8x8 handicap 3',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH4: Map = {
-	name: '8x8 handicap 4',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------b'
-	]
-};
-
-export const eighteightH12: Map = {
-	name: '8x8 handicap 12',
-	category: '8x8',
-	data: [
-		'bb----bb',
-		'b------b',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'b------b',
-		'bb----bb'
-	]
-};
-
-export const eighteightH16: Map = {
-	name: '8x8 handicap 16',
-	category: '8x8',
-	data: [
-		'bbb---bb',
-		'b------b',
-		'-------b',
-		'---wb---',
-		'---bw---',
-		'b-------',
-		'b------b',
-		'bb---bbb'
-	]
-};
-
-export const eighteightH20: Map = {
-	name: '8x8 handicap 20',
-	category: '8x8',
-	data: [
-		'bbb--bbb',
-		'b------b',
-		'b------b',
-		'---wb---',
-		'---bw---',
-		'b------b',
-		'b------b',
-		'bbb---bb'
-	]
-};
-
-export const eighteightH28: Map = {
-	name: '8x8 handicap 28',
-	category: '8x8',
-	data: [
-		'bbbbbbbb',
-		'b------b',
-		'b------b',
-		'b--wb--b',
-		'b--bw--b',
-		'b------b',
-		'b------b',
-		'bbbbbbbb'
-	]
-};
-
-export const roundedEighteight: Map = {
-	name: '8x8 rounded',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const roundedEighteight2: Map = {
-	name: '8x8 rounded 2',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'  ----  ',
-		' ------ ',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		' ------ ',
-		'  ----  '
-	]
-};
-
-export const roundedEighteight3: Map = {
-	name: '8x8 rounded 3',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		'  ----  ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		'  ----  ',
-		'   --   '
-	]
-};
-
-export const eighteightWithNotch: Map = {
-	name: '8x8 with notch',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'---  ---',
-		'--------',
-		'--------',
-		' --wb-- ',
-		' --bw-- ',
-		'--------',
-		'--------',
-		'---  ---'
-	]
-};
-
-export const eighteightWithSomeHoles: Map = {
-	name: '8x8 with some holes',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--- ----',
-		'----- --',
-		'-- -----',
-		'---wb---',
-		'---bw- -',
-		' -------',
-		'--- ----',
-		'--------'
-	]
-};
-
-export const circle: Map = {
-	name: 'Circle',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		' ------ ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		' ------ ',
-		'   --   '
-	]
-};
-
-export const smile: Map = {
-	name: 'Smile',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'-- -- --',
-		'---wb---',
-		'-- bw --',
-		'---  ---',
-		'--------',
-		' ------ '
-	]
-};
-
-export const window: Map = {
-	name: 'Window',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-  --  -',
-		'-  --  -',
-		'---wb---',
-		'---bw---',
-		'-  --  -',
-		'-  --  -',
-		'--------'
-	]
-};
-
-export const reserved: Map = {
-	name: 'Reserved',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------w'
-	]
-};
-
-export const x: Map = {
-	name: 'X',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'-w----b-',
-		'--w--b--',
-		'---wb---',
-		'---bw---',
-		'--b--w--',
-		'-b----w-',
-		'b------w'
-	]
-};
-
-export const parallel: Map = {
-	name: 'Parallel',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---bb---',
-		'---ww---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const lackOfBlack: Map = {
-	name: 'Lack of Black',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---w----',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const squareParty: Map = {
-	name: 'Square Party',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-wwwbbb-',
-		'-w-wb-b-',
-		'-wwwbbb-',
-		'-bbbwww-',
-		'-b-bw-w-',
-		'-bbbwww-',
-		'--------'
-	]
-};
-
-export const minesweeper: Map = {
-	name: 'Minesweeper',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'b-b--w-w',
-		'-w-wb-b-',
-		'w-b--w-b',
-		'-b-wb-w-',
-		'-w-bw-b-',
-		'b-w--b-w',
-		'-b-bw-w-',
-		'w-w--b-b'
-	]
-};
-
-export const tenthtenth: Map = {
-	name: '10x10',
-	category: '10x10',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const hole: Map = {
-	name: 'The Hole',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'----------',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----  ----',
-		'----  ----',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----------',
-		'----------'
-	]
-};
-
-export const grid: Map = {
-	name: 'Grid',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----wb----',
-		'----bw----',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----------'
-	]
-};
-
-export const cross: Map = {
-	name: 'Cross',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'   ----   ',
-		'   ----   ',
-		'   ----   ',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'   ----   ',
-		'   ----   ',
-		'   ----   '
-	]
-};
-
-export const charX: Map = {
-	name: 'Char X',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		'----------',
-		'----  ----',
-		'---    ---'
-	]
-};
-
-export const charY: Map = {
-	name: 'Char Y',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  '
-	]
-};
-
-export const walls: Map = {
-	name: 'Walls',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		' bbbbbbbb ',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		'w---wb---w',
-		'w---bw---w',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		' bbbbbbbb '
-	]
-};
-
-export const cpu: Map = {
-	name: 'CPU',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		' b b  b b ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' ---wb--- ',
-		' ---bw--- ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' b b  b b '
-	]
-};
-
-export const checker: Map = {
-	name: 'Checker',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'---wbwb---',
-		'---bwbw---',
-		'---wbwb---',
-		'---bwbw---',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const japaneseCurry: Map = {
-	name: 'Japanese curry',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'w-b-b-b-b-',
-		'-w-b-b-b-b',
-		'w-w-b-b-b-',
-		'-w-w-b-b-b',
-		'w-w-wwb-b-',
-		'-w-wbb-b-b',
-		'w-w-w-b-b-',
-		'-w-w-w-b-b',
-		'w-w-w-w-b-',
-		'-w-w-w-w-b'
-	]
-};
-
-export const mosaic: Map = {
-	name: 'Mosaic',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - - - - ',
-		' - - - - -',
-		'- - - - - ',
-		' - w w - -',
-		'- - b b - ',
-		' - w w - -',
-		'- - b b - ',
-		' - - - - -',
-		'- - - - - ',
-		' - - - - -',
-	]
-};
-
-export const arena: Map = {
-	name: 'Arena',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - -- - -',
-		' - -  - - ',
-		'- ------ -',
-		' -------- ',
-		'- --wb-- -',
-		'- --bw-- -',
-		' -------- ',
-		'- ------ -',
-		' - -  - - ',
-		'- - -- - -'
-	]
-};
-
-export const reactor: Map = {
-	name: 'Reactor',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'-w------b-',
-		'b- -  - -w',
-		'- --wb-- -',
-		'---b  w---',
-		'- b wb w -',
-		'- w bw b -',
-		'---w  b---',
-		'- --bw-- -',
-		'w- -  - -b',
-		'-b------w-'
-	]
-};
-
-export const sixeight: Map = {
-	name: '6x8',
-	category: 'Special',
-	data: [
-		'------',
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------',
-		'------'
-	]
-};
-
-export const spark: Map = {
-	name: 'Spark',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' -      - ',
-		'----------',
-		' -------- ',
-		' -------- ',
-		' ---wb--- ',
-		' ---bw--- ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		' -      - '
-	]
-};
-
-export const islands: Map = {
-	name: 'Islands',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'--------  ',
-		'---wb---  ',
-		'---bw---  ',
-		'--------  ',
-		'  -    -  ',
-		'  -    -  ',
-		'  --------',
-		'  --------',
-		'  --------',
-		'  --------'
-	]
-};
-
-export const galaxy: Map = {
-	name: 'Galaxy',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'   ------   ',
-		'  --www---  ',
-		' ------w--- ',
-		'---bbb--w---',
-		'--b---b-w-b-',
-		'-b--wwb-w-b-',
-		'-b-w-bww--b-',
-		'-b-w-b---b--',
-		'---w--bbb---',
-		' ---w------ ',
-		'  ---www--  ',
-		'   ------   '
-	]
-};
-
-export const triangle: Map = {
-	name: 'Triangle',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'    --    ',
-		'    --    ',
-		'   ----   ',
-		'   ----   ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		'----------'
-	]
-};
-
-export const iphonex: Map = {
-	name: 'iPhone X',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' --  -- ',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const dealWithIt: Map = {
-	name: 'Deal with it!',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'------------',
-		'--w-b-------',
-		' --b-w------',
-		'  --w-b---- ',
-		'   -------  '
-	]
-};
-
-export const experiment: Map = {
-	name: 'Let\'s experiment',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' ------------ ',
-		'------wb------',
-		'------bw------',
-		'--------------',
-		'    -    -    ',
-		'------  ------',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'wwwwww  bbbbbb'
-	]
-};
-
-export const bigBoard: Map = {
-	name: 'Big board',
-	category: 'Special',
-	data: [
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'-------wb-------',
-		'-------bw-------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------'
-	]
-};
-
-export const twoBoard: Map = {
-	name: 'Two board',
-	category: 'Special',
-	author: 'Aya',
-	data: [
-		'-------- --------',
-		'-------- --------',
-		'-------- --------',
-		'---wb--- ---wb---',
-		'---bw--- ---bw---',
-		'-------- --------',
-		'-------- --------',
-		'-------- --------'
-	]
-};
-
-export const test1: Map = {
-	name: 'Test1',
-	category: 'Test',
-	data: [
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------'
-	]
-};
-
-export const test2: Map = {
-	name: 'Test2',
-	category: 'Test',
-	data: [
-		'------',
-		'------',
-		'-b--w-',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-export const test3: Map = {
-	name: 'Test3',
-	category: 'Test',
-	data: [
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'---',
-		'b--',
-	]
-};
-
-export const test4: Map = {
-	name: 'Test4',
-	category: 'Test',
-	data: [
-		'-w--b-',
-		'-w--b-',
-		'------',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-// https://misskey.xyz/othello/5aaabf7fe126e10b5216ea09 64
-export const test5: Map = {
-	name: 'Test5',
-	category: 'Test',
-	data: [
-		'--wwwwww--',
-		'--wwwbwwww',
-		'-bwwbwbwww',
-		'-bwwwbwbww',
-		'-bwwbwbwbw',
-		'-bwbwbwb-w',
-		'bwbwwbbb-w',
-		'w-wbbbbb--',
-		'--w-b-w---',
-		'----------'
-	]
-};
diff --git a/src/publishers/stream.ts b/src/publishers/stream.ts
index 58a6ef49aa..b573b65a65 100644
--- a/src/publishers/stream.ts
+++ b/src/publishers/stream.ts
@@ -37,12 +37,12 @@ class MisskeyEvent {
 		this.publish(`messaging-index-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
-	public publishOthelloStream(userId: ID, type: string, value?: any): void {
-		this.publish(`othello-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	public publishReversiStream(userId: ID, type: string, value?: any): void {
+		this.publish(`reversi-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
-	public publishOthelloGameStream(gameId: ID, type: string, value?: any): void {
-		this.publish(`othello-game-stream:${gameId}`, type, typeof value === 'undefined' ? null : value);
+	public publishReversiGameStream(gameId: ID, type: string, value?: any): void {
+		this.publish(`reversi-game-stream:${gameId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
 	public publishLocalTimelineStream(note: any): void {
@@ -73,5 +73,5 @@ export const publishUserListStream = ev.publishUserListStream.bind(ev);
 export const publishNoteStream = ev.publishNoteStream.bind(ev);
 export const publishMessagingStream = ev.publishMessagingStream.bind(ev);
 export const publishMessagingIndexStream = ev.publishMessagingIndexStream.bind(ev);
-export const publishOthelloStream = ev.publishOthelloStream.bind(ev);
-export const publishOthelloGameStream = ev.publishOthelloGameStream.bind(ev);
+export const publishReversiStream = ev.publishReversiStream.bind(ev);
+export const publishReversiGameStream = ev.publishReversiGameStream.bind(ev);
diff --git a/src/reversi/ai/back.ts b/src/reversi/ai/back.ts
new file mode 100644
index 0000000000..42f1a0f4b8
--- /dev/null
+++ b/src/reversi/ai/back.ts
@@ -0,0 +1,377 @@
+/**
+ * -AI-
+ * Botのバックエンド(思考を担当)
+ *
+ * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
+ * 切断されてしまうので、別々のプロセスで行うようにします
+ */
+
+import * as request from 'request-promise-native';
+import Reversi, { Color } from '../core';
+import conf from '../../config';
+import getUserName from '../../renderers/get-user-name';
+
+let game;
+let form;
+
+/**
+ * BotアカウントのユーザーID
+ */
+const id = conf.reversi_ai.id;
+
+/**
+ * BotアカウントのAPIキー
+ */
+const i = conf.reversi_ai.i;
+
+let note;
+
+process.on('message', async msg => {
+	// 親プロセスからデータをもらう
+	if (msg.type == '_init_') {
+		game = msg.game;
+		form = msg.form;
+	}
+
+	// フォームが更新されたとき
+	if (msg.type == 'update-form') {
+		form.find(i => i.id == msg.body.id).value = msg.body.value;
+	}
+
+	// ゲームが始まったとき
+	if (msg.type == 'started') {
+		onGameStarted(msg.body);
+
+		//#region TLに投稿する
+		const game = msg.body;
+		const url = `${conf.url}/reversi/${game.id}`;
+		const user = game.user1Id == id ? game.user2 : game.user1;
+		const isSettai = form[0].value === 0;
+		const text = isSettai
+			? `?[${getUserName(user)}](${conf.url}/@${user.username})さんの接待を始めました！`
+			: `対局を?[${getUserName(user)}](${conf.url}/@${user.username})さんと始めました！ (強さ${form[0].value})`;
+
+		const res = await request.post(`${conf.api_url}/notes/create`, {
+			json: { i,
+				text: `${text}\n→[観戦する](${url})`
+			}
+		});
+
+		note = res.createdNote;
+		//#endregion
+	}
+
+	// ゲームが終了したとき
+	if (msg.type == 'ended') {
+		// ストリームから切断
+		process.send({
+			type: 'close'
+		});
+
+		//#region TLに投稿する
+		const user = game.user1Id == id ? game.user2 : game.user1;
+		const isSettai = form[0].value === 0;
+		const text = isSettai
+			? msg.body.winnerId === null
+				? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに接待で引き分けました...`
+				: msg.body.winnerId == id
+					? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに接待で勝ってしまいました...`
+					: `?[${getUserName(user)}](${conf.url}/@${user.username})さんに接待で負けてあげました♪`
+			: msg.body.winnerId === null
+				? `?[${getUserName(user)}](${conf.url}/@${user.username})さんと引き分けました～`
+				: msg.body.winnerId == id
+					? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに勝ちました♪`
+					: `?[${getUserName(user)}](${conf.url}/@${user.username})さんに負けました...`;
+
+		await request.post(`${conf.api_url}/notes/create`, {
+			json: { i,
+				renoteId: note.id,
+				text: text
+			}
+		});
+		//#endregion
+
+		process.exit();
+	}
+
+	// 打たれたとき
+	if (msg.type == 'set') {
+		onSet(msg.body);
+	}
+});
+
+let o: Reversi;
+let botColor: Color;
+
+// 各マスの強さ
+let cellWeights;
+
+/**
+ * ゲーム開始時
+ * @param g ゲーム情報
+ */
+function onGameStarted(g) {
+	game = g;
+
+	// リバーシエンジン初期化
+	o = new Reversi(game.settings.map, {
+		isLlotheo: game.settings.isLlotheo,
+		canPutEverywhere: game.settings.canPutEverywhere,
+		loopedBoard: game.settings.loopedBoard
+	});
+
+	// 各マスの価値を計算しておく
+	cellWeights = o.map.map((pix, i) => {
+		if (pix == 'null') return 0;
+		const [x, y] = o.transformPosToXy(i);
+		let count = 0;
+		const get = (x, y) => {
+			if (x < 0 || y < 0 || x >= o.mapWidth || y >= o.mapHeight) return 'null';
+			return o.mapDataGet(o.transformXyToPos(x, y));
+		};
+
+		if (get(x    , y - 1) == 'null') count++;
+		if (get(x + 1, y - 1) == 'null') count++;
+		if (get(x + 1, y    ) == 'null') count++;
+		if (get(x + 1, y + 1) == 'null') count++;
+		if (get(x    , y + 1) == 'null') count++;
+		if (get(x - 1, y + 1) == 'null') count++;
+		if (get(x - 1, y    ) == 'null') count++;
+		if (get(x - 1, y - 1) == 'null') count++;
+		//return Math.pow(count, 3);
+		return count >= 4 ? 1 : 0;
+	});
+
+	botColor = game.user1Id == id && game.black == 1 || game.user2Id == id && game.black == 2;
+
+	if (botColor) {
+		think();
+	}
+}
+
+function onSet(x) {
+	o.put(x.color, x.pos);
+
+	if (x.next === botColor) {
+		think();
+	}
+}
+
+const db = {};
+
+function think() {
+	console.log('Thinking...');
+	console.time('think');
+
+	const isSettai = form[0].value === 0;
+
+	// 接待モードのときは、全力(5手先読みくらい)で負けるようにする
+	const maxDepth = isSettai ? 5 : form[0].value;
+
+	/**
+	 * Botにとってある局面がどれだけ有利か取得する
+	 */
+	function staticEval() {
+		let score = o.canPutSomewhere(botColor).length;
+
+		cellWeights.forEach((weight, i) => {
+			// 係数
+			const coefficient = 30;
+			weight = weight * coefficient;
+
+			const stone = o.board[i];
+			if (stone === botColor) {
+				// TODO: 価値のあるマスに設置されている自分の石に縦か横に接するマスは価値があると判断する
+				score += weight;
+			} else if (stone !== null) {
+				score -= weight;
+			}
+		});
+
+		// ロセオならスコアを反転
+		if (game.settings.isLlotheo) score = -score;
+
+		// 接待ならスコアを反転
+		if (isSettai) score = -score;
+
+		return score;
+	}
+
+	/**
+	 * αβ法での探索
+	 */
+	const dive = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
+		// 試し打ち
+		o.put(o.turn, pos);
+
+		const key = o.board.toString();
+		let cache = db[key];
+		if (cache) {
+			if (alpha >= cache.upper) {
+				o.undo();
+				return cache.upper;
+			}
+			if (beta <= cache.lower) {
+				o.undo();
+				return cache.lower;
+			}
+			alpha = Math.max(alpha, cache.lower);
+			beta = Math.min(beta, cache.upper);
+		} else {
+			cache = {
+				upper: Infinity,
+				lower: -Infinity
+			};
+		}
+
+		const isBotTurn = o.turn === botColor;
+
+		// 勝った
+		if (o.turn === null) {
+			const winner = o.winner;
+
+			// 勝つことによる基本スコア
+			const base = 10000;
+
+			let score;
+
+			if (game.settings.isLlotheo) {
+				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
+			} else {
+				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			// 接待なら自分が負けた方が高スコア
+			return isSettai
+				? winner !== botColor ? score : -score
+				: winner === botColor ? score : -score;
+		}
+
+		if (depth === maxDepth) {
+			// 静的に評価
+			const score = staticEval();
+
+			// 巻き戻し
+			o.undo();
+
+			return score;
+		} else {
+			const cans = o.canPutSomewhere(o.turn);
+
+			let value = isBotTurn ? -Infinity : Infinity;
+			let a = alpha;
+			let b = beta;
+
+			// 次のターンのプレイヤーにとって最も良い手を取得
+			for (const p of cans) {
+				if (isBotTurn) {
+					const score = dive(p, a, beta, depth + 1);
+					value = Math.max(value, score);
+					a = Math.max(a, value);
+					if (value >= beta) break;
+				} else {
+					const score = dive(p, alpha, b, depth + 1);
+					value = Math.min(value, score);
+					b = Math.min(b, value);
+					if (value <= alpha) break;
+				}
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			if (value <= alpha) {
+				cache.upper = value;
+			} else if (value >= beta) {
+				cache.lower = value;
+			} else {
+				cache.upper = value;
+				cache.lower = value;
+			}
+
+			db[key] = cache;
+
+			return value;
+		}
+	};
+
+	/**
+	 * αβ法での探索(キャッシュ無し)(デバッグ用)
+	 */
+	const dive2 = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
+		// 試し打ち
+		o.put(o.turn, pos);
+
+		const isBotTurn = o.turn === botColor;
+
+		// 勝った
+		if (o.turn === null) {
+			const winner = o.winner;
+
+			// 勝つことによる基本スコア
+			const base = 10000;
+
+			let score;
+
+			if (game.settings.isLlotheo) {
+				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
+			} else {
+				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			// 接待なら自分が負けた方が高スコア
+			return isSettai
+				? winner !== botColor ? score : -score
+				: winner === botColor ? score : -score;
+		}
+
+		if (depth === maxDepth) {
+			// 静的に評価
+			const score = staticEval();
+
+			// 巻き戻し
+			o.undo();
+
+			return score;
+		} else {
+			const cans = o.canPutSomewhere(o.turn);
+
+			// 次のターンのプレイヤーにとって最も良い手を取得
+			for (const p of cans) {
+				if (isBotTurn) {
+					alpha = Math.max(alpha, dive2(p, alpha, beta, depth + 1));
+				} else {
+					beta = Math.min(beta, dive2(p, alpha, beta, depth + 1));
+				}
+				if (alpha >= beta) break;
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			return isBotTurn ? alpha : beta;
+		}
+	};
+
+	const cans = o.canPutSomewhere(botColor);
+	const scores = cans.map(p => dive(p));
+	const pos = cans[scores.indexOf(Math.max(...scores))];
+
+	console.log('Thinked:', pos);
+	console.timeEnd('think');
+
+	process.send({
+		type: 'put',
+		pos
+	});
+}
diff --git a/src/reversi/ai/front.ts b/src/reversi/ai/front.ts
new file mode 100644
index 0000000000..25ee43225a
--- /dev/null
+++ b/src/reversi/ai/front.ts
@@ -0,0 +1,233 @@
+/**
+ * -AI-
+ * Botのフロントエンド(ストリームとの対話を担当)
+ *
+ * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
+ * 切断されてしまうので、別々のプロセスで行うようにします
+ */
+
+import * as childProcess from 'child_process';
+const WebSocket = require('ws');
+import * as ReconnectingWebSocket from 'reconnecting-websocket';
+import * as request from 'request-promise-native';
+import conf from '../../config';
+
+// 設定 ////////////////////////////////////////////////////////
+
+/**
+ * BotアカウントのAPIキー
+ */
+const i = conf.reversi_ai.i;
+
+/**
+ * BotアカウントのユーザーID
+ */
+const id = conf.reversi_ai.id;
+
+////////////////////////////////////////////////////////////////
+
+/**
+ * ホームストリーム
+ */
+const homeStream = new ReconnectingWebSocket(`${conf.ws_url}/?i=${i}`, undefined, {
+	constructor: WebSocket
+});
+
+homeStream.on('open', () => {
+	console.log('home stream opened');
+});
+
+homeStream.on('close', () => {
+	console.log('home stream closed');
+});
+
+homeStream.on('message', message => {
+	const msg = JSON.parse(message.toString());
+
+	// タイムライン上でなんか言われたまたは返信されたとき
+	if (msg.type == 'mention' || msg.type == 'reply') {
+		const note = msg.body;
+
+		if (note.userId == id) return;
+
+		// リアクションする
+		request.post(`${conf.api_url}/notes/reactions/create`, {
+			json: { i,
+				noteId: note.id,
+				reaction: 'love'
+			}
+		});
+
+		if (note.text) {
+			if (note.text.indexOf('リバーシ') > -1) {
+				request.post(`${conf.api_url}/notes/create`, {
+					json: { i,
+						replyId: note.id,
+						text: '良いですよ～'
+					}
+				});
+
+				invite(note.userId);
+			}
+		}
+	}
+
+	// メッセージでなんか言われたとき
+	if (msg.type == 'messaging_message') {
+		const message = msg.body;
+		if (message.text) {
+			if (message.text.indexOf('リバーシ') > -1) {
+				request.post(`${conf.api_url}/messaging/messages/create`, {
+					json: { i,
+						userId: message.userId,
+						text: '良いですよ～'
+					}
+				});
+
+				invite(message.userId);
+			}
+		}
+	}
+});
+
+// ユーザーを対局に誘う
+function invite(userId) {
+	request.post(`${conf.api_url}/reversi/match`, {
+		json: { i,
+			userId: userId
+		}
+	});
+}
+
+/**
+ * リバーシストリーム
+ */
+const reversiStream = new ReconnectingWebSocket(`${conf.ws_url}/reversi?i=${i}`, undefined, {
+	constructor: WebSocket
+});
+
+reversiStream.on('open', () => {
+	console.log('reversi stream opened');
+});
+
+reversiStream.on('close', () => {
+	console.log('reversi stream closed');
+});
+
+reversiStream.on('message', message => {
+	const msg = JSON.parse(message.toString());
+
+	// 招待されたとき
+	if (msg.type == 'invited') {
+		onInviteMe(msg.body.parent);
+	}
+
+	// マッチしたとき
+	if (msg.type == 'matched') {
+		gameStart(msg.body);
+	}
+});
+
+/**
+ * ゲーム開始
+ * @param game ゲーム情報
+ */
+function gameStart(game) {
+	// ゲームストリームに接続
+	const gw = new ReconnectingWebSocket(`${conf.ws_url}/reversi-game?i=${i}&game=${game.id}`, undefined, {
+		constructor: WebSocket
+	});
+
+	gw.on('open', () => {
+		console.log('reversi game stream opened');
+
+		// フォーム
+		const form = [{
+			id: 'strength',
+			type: 'radio',
+			label: '強さ',
+			value: 2,
+			items: [{
+				label: '接待',
+				value: 0
+			}, {
+				label: '弱',
+				value: 1
+			}, {
+				label: '中',
+				value: 2
+			}, {
+				label: '強',
+				value: 3
+			}, {
+				label: '最強',
+				value: 5
+			}]
+		}];
+
+		//#region バックエンドプロセス開始
+		const ai = childProcess.fork(__dirname + '/back.js');
+
+		// バックエンドプロセスに情報を渡す
+		ai.send({
+			type: '_init_',
+			game,
+			form
+		});
+
+		ai.on('message', msg => {
+			if (msg.type == 'put') {
+				gw.send(JSON.stringify({
+					type: 'set',
+					pos: msg.pos
+				}));
+			} else if (msg.type == 'close') {
+				gw.close();
+			}
+		});
+
+		// ゲームストリームから情報が流れてきたらそのままバックエンドプロセスに伝える
+		gw.on('message', message => {
+			const msg = JSON.parse(message.toString());
+			ai.send(msg);
+		});
+		//#endregion
+
+		// フォーム初期化
+		setTimeout(() => {
+			gw.send(JSON.stringify({
+				type: 'init-form',
+				body: form
+			}));
+		}, 1000);
+
+		// どんな設定内容の対局でも受け入れる
+		setTimeout(() => {
+			gw.send(JSON.stringify({
+				type: 'accept'
+			}));
+		}, 2000);
+	});
+
+	gw.on('close', () => {
+		console.log('reversi game stream closed');
+	});
+}
+
+/**
+ * リバーシの対局に招待されたとき
+ * @param inviter 誘ってきたユーザー
+ */
+async function onInviteMe(inviter) {
+	console.log(`Someone invited me: @${inviter.username}`);
+
+	// 承認
+	const game = await request.post(`${conf.api_url}/reversi/match`, {
+		json: {
+			i,
+			userId: inviter.id
+		}
+	});
+
+	gameStart(game);
+}
diff --git a/src/reversi/ai/index.ts b/src/reversi/ai/index.ts
new file mode 100644
index 0000000000..5cd1db82da
--- /dev/null
+++ b/src/reversi/ai/index.ts
@@ -0,0 +1 @@
+require('./front');
diff --git a/src/reversi/core.ts b/src/reversi/core.ts
new file mode 100644
index 0000000000..f1f9de1486
--- /dev/null
+++ b/src/reversi/core.ts
@@ -0,0 +1,340 @@
+/**
+ * true ... 黒
+ * false ... 白
+ */
+export type Color = boolean;
+const BLACK = true;
+const WHITE = false;
+
+export type MapPixel = 'null' | 'empty';
+
+export type Options = {
+	isLlotheo: boolean;
+	canPutEverywhere: boolean;
+	loopedBoard: boolean;
+};
+
+export type Undo = {
+	/**
+	 * 色
+	 */
+	color: Color,
+
+	/**
+	 * どこに打ったか
+	 */
+	pos: number;
+
+	/**
+	 * 反転した石の位置の配列
+	 */
+	effects: number[];
+
+	/**
+	 * ターン
+	 */
+	turn: Color;
+};
+
+/**
+ * リバーシエンジン
+ */
+export default class Reversi {
+	public map: MapPixel[];
+	public mapWidth: number;
+	public mapHeight: number;
+	public board: Color[];
+	public turn: Color = BLACK;
+	public opts: Options;
+
+	public prevPos = -1;
+	public prevColor: Color = null;
+
+	private logs: Undo[] = [];
+
+	/**
+	 * ゲームを初期化します
+	 */
+	constructor(map: string[], opts: Options) {
+		//#region binds
+		this.put = this.put.bind(this);
+		//#endregion
+
+		//#region Options
+		this.opts = opts;
+		if (this.opts.isLlotheo == null) this.opts.isLlotheo = false;
+		if (this.opts.canPutEverywhere == null) this.opts.canPutEverywhere = false;
+		if (this.opts.loopedBoard == null) this.opts.loopedBoard = false;
+		//#endregion
+
+		//#region Parse map data
+		this.mapWidth = map[0].length;
+		this.mapHeight = map.length;
+		const mapData = map.join('');
+
+		this.board = mapData.split('').map(d => {
+			if (d == '-') return null;
+			if (d == 'b') return BLACK;
+			if (d == 'w') return WHITE;
+			return undefined;
+		});
+
+		this.map = mapData.split('').map(d => {
+			if (d == '-' || d == 'b' || d == 'w') return 'empty';
+			return 'null';
+		});
+		//#endregion
+
+		// ゲームが始まった時点で片方の色の石しかないか、始まった時点で勝敗が決定するようなマップの場合がある
+		if (this.canPutSomewhere(BLACK).length == 0) {
+			if (this.canPutSomewhere(WHITE).length == 0) {
+				this.turn = null;
+			} else {
+				this.turn = WHITE;
+			}
+		}
+	}
+
+	/**
+	 * 黒石の数
+	 */
+	public get blackCount() {
+		return this.board.filter(x => x === BLACK).length;
+	}
+
+	/**
+	 * 白石の数
+	 */
+	public get whiteCount() {
+		return this.board.filter(x => x === WHITE).length;
+	}
+
+	/**
+	 * 黒石の比率
+	 */
+	public get blackP() {
+		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
+		return this.blackCount / (this.blackCount + this.whiteCount);
+	}
+
+	/**
+	 * 白石の比率
+	 */
+	public get whiteP() {
+		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
+		return this.whiteCount / (this.blackCount + this.whiteCount);
+	}
+
+	public transformPosToXy(pos: number): number[] {
+		const x = pos % this.mapWidth;
+		const y = Math.floor(pos / this.mapWidth);
+		return [x, y];
+	}
+
+	public transformXyToPos(x: number, y: number): number {
+		return x + (y * this.mapWidth);
+	}
+
+	/**
+	 * 指定のマスに石を打ちます
+	 * @param color 石の色
+	 * @param pos 位置
+	 */
+	public put(color: Color, pos: number) {
+		this.prevPos = pos;
+		this.prevColor = color;
+
+		this.board[pos] = color;
+
+		// 反転させられる石を取得
+		const effects = this.effects(color, pos);
+
+		// 反転させる
+		for (const pos of effects) {
+			this.board[pos] = color;
+		}
+
+		const turn = this.turn;
+
+		this.logs.push({
+			color,
+			pos,
+			effects,
+			turn
+		});
+
+		this.calcTurn();
+	}
+
+	private calcTurn() {
+		// ターン計算
+		if (this.canPutSomewhere(!this.prevColor).length > 0) {
+			this.turn = !this.prevColor;
+		} else if (this.canPutSomewhere(this.prevColor).length > 0) {
+			this.turn = this.prevColor;
+		} else {
+			this.turn = null;
+		}
+	}
+
+	public undo() {
+		const undo = this.logs.pop();
+		this.prevColor = undo.color;
+		this.prevPos = undo.pos;
+		this.board[undo.pos] = null;
+		for (const pos of undo.effects) {
+			const color = this.board[pos];
+			this.board[pos] = !color;
+		}
+		this.turn = undo.turn;
+	}
+
+	/**
+	 * 指定した位置のマップデータのマスを取得します
+	 * @param pos 位置
+	 */
+	public mapDataGet(pos: number): MapPixel {
+		const [x, y] = this.transformPosToXy(pos);
+		if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) return 'null';
+		return this.map[pos];
+	}
+
+	/**
+	 * 打つことができる場所を取得します
+	 */
+	public canPutSomewhere(color: Color): number[] {
+		const result = [];
+
+		this.board.forEach((x, i) => {
+			if (this.canPut(color, i)) result.push(i);
+		});
+
+		return result;
+	}
+
+	/**
+	 * 指定のマスに石を打つことができるかどうかを取得します
+	 * @param color 自分の色
+	 * @param pos 位置
+	 */
+	public canPut(color: Color, pos: number): boolean {
+		// 既に石が置いてある場所には打てない
+		if (this.board[pos] !== null) return false;
+
+		if (this.opts.canPutEverywhere) {
+			// 挟んでなくても置けるモード
+			return this.mapDataGet(pos) == 'empty';
+		} else {
+			// 相手の石を1つでも反転させられるか
+			return this.effects(color, pos).length !== 0;
+		}
+	}
+
+	/**
+	 * 指定のマスに石を置いた時の、反転させられる石を取得します
+	 * @param color 自分の色
+	 * @param pos 位置
+	 */
+	public effects(color: Color, pos: number): number[] {
+		const enemyColor = !color;
+
+		// ひっくり返せる石(の位置)リスト
+		let stones = [];
+
+		const initPos = pos;
+
+		// 走査
+		const iterate = (fn: (i: number) => number[]) => {
+			let i = 1;
+			const found = [];
+
+			while (true) {
+				let [x, y] = fn(i);
+
+				// 座標が指し示す位置がボード外に出たとき
+				if (this.opts.loopedBoard) {
+					if (x <  0             ) x = this.mapWidth  - ((-x) % this.mapWidth);
+					if (y <  0             ) y = this.mapHeight - ((-y) % this.mapHeight);
+					if (x >= this.mapWidth ) x = x % this.mapWidth;
+					if (y >= this.mapHeight) y = y % this.mapHeight;
+
+					// for debug
+					//if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) {
+					//	console.log(x, y);
+					//}
+
+					// 一周して自分に帰ってきたら
+					if (this.transformXyToPos(x, y) == initPos) {
+						// ↓のコメントアウトを外すと、「現時点で自分の石が隣接していないが、
+						// そこに置いたとするとループして最終的に挟んだことになる」というケースを有効化します。(Test4のマップで違いが分かります)
+						// このケースを有効にした方が良いのか無効にした方が良いのか判断がつかなかったためとりあえず無効としておきます
+						// (あと無効な方がゲームとしておもしろそうだった)
+						stones = stones.concat(found);
+						break;
+					}
+				} else {
+					if (x == -1 || y == -1 || x == this.mapWidth || y == this.mapHeight) break;
+				}
+
+				const pos = this.transformXyToPos(x, y);
+
+				//#region 「配置不能」マスに当たった場合走査終了
+				const pixel = this.mapDataGet(pos);
+				if (pixel == 'null') break;
+				//#endregion
+
+				// 石取得
+				const stone = this.board[pos];
+
+				// 石が置かれていないマスなら走査終了
+				if (stone === null) break;
+
+				// 相手の石なら「ひっくり返せるかもリスト」に入れておく
+				if (stone === enemyColor) found.push(pos);
+
+				// 自分の石なら「ひっくり返せるかもリスト」を「ひっくり返せるリスト」に入れ、走査終了
+				if (stone === color) {
+					stones = stones.concat(found);
+					break;
+				}
+
+				i++;
+			}
+		};
+
+		const [x, y] = this.transformPosToXy(pos);
+
+		iterate(i => [x    , y - i]); // 上
+		iterate(i => [x + i, y - i]); // 右上
+		iterate(i => [x + i, y    ]); // 右
+		iterate(i => [x + i, y + i]); // 右下
+		iterate(i => [x    , y + i]); // 下
+		iterate(i => [x - i, y + i]); // 左下
+		iterate(i => [x - i, y    ]); // 左
+		iterate(i => [x - i, y - i]); // 左上
+
+		return stones;
+	}
+
+	/**
+	 * ゲームが終了したか否か
+	 */
+	public get isEnded(): boolean {
+		return this.turn === null;
+	}
+
+	/**
+	 * ゲームの勝者 (null = 引き分け)
+	 */
+	public get winner(): Color {
+		if (!this.isEnded) return undefined;
+
+		if (this.blackCount == this.whiteCount) return null;
+
+		if (this.opts.isLlotheo) {
+			return this.blackCount > this.whiteCount ? WHITE : BLACK;
+		} else {
+			return this.blackCount > this.whiteCount ? BLACK : WHITE;
+		}
+	}
+}
diff --git a/src/reversi/maps.ts b/src/reversi/maps.ts
new file mode 100644
index 0000000000..f55cb1d516
--- /dev/null
+++ b/src/reversi/maps.ts
@@ -0,0 +1,911 @@
+/**
+ * 組み込みマップ定義
+ *
+ * データ値:
+ * (スペース) ... マス無し
+ * - ... マス
+ * b ... 初期配置される黒石
+ * w ... 初期配置される白石
+ */
+
+export type Map = {
+	name?: string;
+	category?: string;
+	author?: string;
+	data: string[];
+};
+
+export const fourfour: Map = {
+	name: '4x4',
+	category: '4x4',
+	data: [
+		'----',
+		'-wb-',
+		'-bw-',
+		'----'
+	]
+};
+
+export const sixsix: Map = {
+	name: '6x6',
+	category: '6x6',
+	data: [
+		'------',
+		'------',
+		'--wb--',
+		'--bw--',
+		'------',
+		'------'
+	]
+};
+
+export const roundedSixsix: Map = {
+	name: '6x6 rounded',
+	category: '6x6',
+	author: 'syuilo',
+	data: [
+		' ---- ',
+		'------',
+		'--wb--',
+		'--bw--',
+		'------',
+		' ---- '
+	]
+};
+
+export const roundedSixsix2: Map = {
+	name: '6x6 rounded 2',
+	category: '6x6',
+	author: 'syuilo',
+	data: [
+		'  --  ',
+		' ---- ',
+		'--wb--',
+		'--bw--',
+		' ---- ',
+		'  --  '
+	]
+};
+
+export const eighteight: Map = {
+	name: '8x8',
+	category: '8x8',
+	data: [
+		'--------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const eighteightH1: Map = {
+	name: '8x8 handicap 1',
+	category: '8x8',
+	data: [
+		'b-------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const eighteightH2: Map = {
+	name: '8x8 handicap 2',
+	category: '8x8',
+	data: [
+		'b-------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'-------b'
+	]
+};
+
+export const eighteightH3: Map = {
+	name: '8x8 handicap 3',
+	category: '8x8',
+	data: [
+		'b------b',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'-------b'
+	]
+};
+
+export const eighteightH4: Map = {
+	name: '8x8 handicap 4',
+	category: '8x8',
+	data: [
+		'b------b',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'b------b'
+	]
+};
+
+export const eighteightH12: Map = {
+	name: '8x8 handicap 12',
+	category: '8x8',
+	data: [
+		'bb----bb',
+		'b------b',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'b------b',
+		'bb----bb'
+	]
+};
+
+export const eighteightH16: Map = {
+	name: '8x8 handicap 16',
+	category: '8x8',
+	data: [
+		'bbb---bb',
+		'b------b',
+		'-------b',
+		'---wb---',
+		'---bw---',
+		'b-------',
+		'b------b',
+		'bb---bbb'
+	]
+};
+
+export const eighteightH20: Map = {
+	name: '8x8 handicap 20',
+	category: '8x8',
+	data: [
+		'bbb--bbb',
+		'b------b',
+		'b------b',
+		'---wb---',
+		'---bw---',
+		'b------b',
+		'b------b',
+		'bbb---bb'
+	]
+};
+
+export const eighteightH28: Map = {
+	name: '8x8 handicap 28',
+	category: '8x8',
+	data: [
+		'bbbbbbbb',
+		'b------b',
+		'b------b',
+		'b--wb--b',
+		'b--bw--b',
+		'b------b',
+		'b------b',
+		'bbbbbbbb'
+	]
+};
+
+export const roundedEighteight: Map = {
+	name: '8x8 rounded',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		' ------ ',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		' ------ '
+	]
+};
+
+export const roundedEighteight2: Map = {
+	name: '8x8 rounded 2',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'  ----  ',
+		' ------ ',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		' ------ ',
+		'  ----  '
+	]
+};
+
+export const roundedEighteight3: Map = {
+	name: '8x8 rounded 3',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'   --   ',
+		'  ----  ',
+		' ------ ',
+		'---wb---',
+		'---bw---',
+		' ------ ',
+		'  ----  ',
+		'   --   '
+	]
+};
+
+export const eighteightWithNotch: Map = {
+	name: '8x8 with notch',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'---  ---',
+		'--------',
+		'--------',
+		' --wb-- ',
+		' --bw-- ',
+		'--------',
+		'--------',
+		'---  ---'
+	]
+};
+
+export const eighteightWithSomeHoles: Map = {
+	name: '8x8 with some holes',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'--- ----',
+		'----- --',
+		'-- -----',
+		'---wb---',
+		'---bw- -',
+		' -------',
+		'--- ----',
+		'--------'
+	]
+};
+
+export const circle: Map = {
+	name: 'Circle',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'   --   ',
+		' ------ ',
+		' ------ ',
+		'---wb---',
+		'---bw---',
+		' ------ ',
+		' ------ ',
+		'   --   '
+	]
+};
+
+export const smile: Map = {
+	name: 'Smile',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		' ------ ',
+		'--------',
+		'-- -- --',
+		'---wb---',
+		'-- bw --',
+		'---  ---',
+		'--------',
+		' ------ '
+	]
+};
+
+export const window: Map = {
+	name: 'Window',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'--------',
+		'-  --  -',
+		'-  --  -',
+		'---wb---',
+		'---bw---',
+		'-  --  -',
+		'-  --  -',
+		'--------'
+	]
+};
+
+export const reserved: Map = {
+	name: 'Reserved',
+	category: '8x8',
+	author: 'Aya',
+	data: [
+		'w------b',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'b------w'
+	]
+};
+
+export const x: Map = {
+	name: 'X',
+	category: '8x8',
+	author: 'Aya',
+	data: [
+		'w------b',
+		'-w----b-',
+		'--w--b--',
+		'---wb---',
+		'---bw---',
+		'--b--w--',
+		'-b----w-',
+		'b------w'
+	]
+};
+
+export const parallel: Map = {
+	name: 'Parallel',
+	category: '8x8',
+	author: 'Aya',
+	data: [
+		'--------',
+		'--------',
+		'--------',
+		'---bb---',
+		'---ww---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const lackOfBlack: Map = {
+	name: 'Lack of Black',
+	category: '8x8',
+	data: [
+		'--------',
+		'--------',
+		'--------',
+		'---w----',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const squareParty: Map = {
+	name: 'Square Party',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'--------',
+		'-wwwbbb-',
+		'-w-wb-b-',
+		'-wwwbbb-',
+		'-bbbwww-',
+		'-b-bw-w-',
+		'-bbbwww-',
+		'--------'
+	]
+};
+
+export const minesweeper: Map = {
+	name: 'Minesweeper',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'b-b--w-w',
+		'-w-wb-b-',
+		'w-b--w-b',
+		'-b-wb-w-',
+		'-w-bw-b-',
+		'b-w--b-w',
+		'-b-bw-w-',
+		'w-w--b-b'
+	]
+};
+
+export const tenthtenth: Map = {
+	name: '10x10',
+	category: '10x10',
+	data: [
+		'----------',
+		'----------',
+		'----------',
+		'----------',
+		'----wb----',
+		'----bw----',
+		'----------',
+		'----------',
+		'----------',
+		'----------'
+	]
+};
+
+export const hole: Map = {
+	name: 'The Hole',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'----------',
+		'----------',
+		'--wb--wb--',
+		'--bw--bw--',
+		'----  ----',
+		'----  ----',
+		'--wb--wb--',
+		'--bw--bw--',
+		'----------',
+		'----------'
+	]
+};
+
+export const grid: Map = {
+	name: 'Grid',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'----------',
+		'- - -- - -',
+		'----------',
+		'- - -- - -',
+		'----wb----',
+		'----bw----',
+		'- - -- - -',
+		'----------',
+		'- - -- - -',
+		'----------'
+	]
+};
+
+export const cross: Map = {
+	name: 'Cross',
+	category: '10x10',
+	author: 'Aya',
+	data: [
+		'   ----   ',
+		'   ----   ',
+		'   ----   ',
+		'----------',
+		'----wb----',
+		'----bw----',
+		'----------',
+		'   ----   ',
+		'   ----   ',
+		'   ----   '
+	]
+};
+
+export const charX: Map = {
+	name: 'Char X',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'---    ---',
+		'----  ----',
+		'----------',
+		' -------- ',
+		'  --wb--  ',
+		'  --bw--  ',
+		' -------- ',
+		'----------',
+		'----  ----',
+		'---    ---'
+	]
+};
+
+export const charY: Map = {
+	name: 'Char Y',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'---    ---',
+		'----  ----',
+		'----------',
+		' -------- ',
+		'  --wb--  ',
+		'  --bw--  ',
+		'  ------  ',
+		'  ------  ',
+		'  ------  ',
+		'  ------  '
+	]
+};
+
+export const walls: Map = {
+	name: 'Walls',
+	category: '10x10',
+	author: 'Aya',
+	data: [
+		' bbbbbbbb ',
+		'w--------w',
+		'w--------w',
+		'w--------w',
+		'w---wb---w',
+		'w---bw---w',
+		'w--------w',
+		'w--------w',
+		'w--------w',
+		' bbbbbbbb '
+	]
+};
+
+export const cpu: Map = {
+	name: 'CPU',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		' b b  b b ',
+		'w--------w',
+		' -------- ',
+		'w--------w',
+		' ---wb--- ',
+		' ---bw--- ',
+		'w--------w',
+		' -------- ',
+		'w--------w',
+		' b b  b b '
+	]
+};
+
+export const checker: Map = {
+	name: 'Checker',
+	category: '10x10',
+	author: 'Aya',
+	data: [
+		'----------',
+		'----------',
+		'----------',
+		'---wbwb---',
+		'---bwbw---',
+		'---wbwb---',
+		'---bwbw---',
+		'----------',
+		'----------',
+		'----------'
+	]
+};
+
+export const japaneseCurry: Map = {
+	name: 'Japanese curry',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'w-b-b-b-b-',
+		'-w-b-b-b-b',
+		'w-w-b-b-b-',
+		'-w-w-b-b-b',
+		'w-w-wwb-b-',
+		'-w-wbb-b-b',
+		'w-w-w-b-b-',
+		'-w-w-w-b-b',
+		'w-w-w-w-b-',
+		'-w-w-w-w-b'
+	]
+};
+
+export const mosaic: Map = {
+	name: 'Mosaic',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'- - - - - ',
+		' - - - - -',
+		'- - - - - ',
+		' - w w - -',
+		'- - b b - ',
+		' - w w - -',
+		'- - b b - ',
+		' - - - - -',
+		'- - - - - ',
+		' - - - - -',
+	]
+};
+
+export const arena: Map = {
+	name: 'Arena',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'- - -- - -',
+		' - -  - - ',
+		'- ------ -',
+		' -------- ',
+		'- --wb-- -',
+		'- --bw-- -',
+		' -------- ',
+		'- ------ -',
+		' - -  - - ',
+		'- - -- - -'
+	]
+};
+
+export const reactor: Map = {
+	name: 'Reactor',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'-w------b-',
+		'b- -  - -w',
+		'- --wb-- -',
+		'---b  w---',
+		'- b wb w -',
+		'- w bw b -',
+		'---w  b---',
+		'- --bw-- -',
+		'w- -  - -b',
+		'-b------w-'
+	]
+};
+
+export const sixeight: Map = {
+	name: '6x8',
+	category: 'Special',
+	data: [
+		'------',
+		'------',
+		'------',
+		'--wb--',
+		'--bw--',
+		'------',
+		'------',
+		'------'
+	]
+};
+
+export const spark: Map = {
+	name: 'Spark',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		' -      - ',
+		'----------',
+		' -------- ',
+		' -------- ',
+		' ---wb--- ',
+		' ---bw--- ',
+		' -------- ',
+		' -------- ',
+		'----------',
+		' -      - '
+	]
+};
+
+export const islands: Map = {
+	name: 'Islands',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'--------  ',
+		'---wb---  ',
+		'---bw---  ',
+		'--------  ',
+		'  -    -  ',
+		'  -    -  ',
+		'  --------',
+		'  --------',
+		'  --------',
+		'  --------'
+	]
+};
+
+export const galaxy: Map = {
+	name: 'Galaxy',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'   ------   ',
+		'  --www---  ',
+		' ------w--- ',
+		'---bbb--w---',
+		'--b---b-w-b-',
+		'-b--wwb-w-b-',
+		'-b-w-bww--b-',
+		'-b-w-b---b--',
+		'---w--bbb---',
+		' ---w------ ',
+		'  ---www--  ',
+		'   ------   '
+	]
+};
+
+export const triangle: Map = {
+	name: 'Triangle',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'    --    ',
+		'    --    ',
+		'   ----   ',
+		'   ----   ',
+		'  --wb--  ',
+		'  --bw--  ',
+		' -------- ',
+		' -------- ',
+		'----------',
+		'----------'
+	]
+};
+
+export const iphonex: Map = {
+	name: 'iPhone X',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		' --  -- ',
+		'--------',
+		'--------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------',
+		'--------',
+		' ------ '
+	]
+};
+
+export const dealWithIt: Map = {
+	name: 'Deal with it!',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'------------',
+		'--w-b-------',
+		' --b-w------',
+		'  --w-b---- ',
+		'   -------  '
+	]
+};
+
+export const experiment: Map = {
+	name: 'Let\'s experiment',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		' ------------ ',
+		'------wb------',
+		'------bw------',
+		'--------------',
+		'    -    -    ',
+		'------  ------',
+		'bbbbbb  wwwwww',
+		'bbbbbb  wwwwww',
+		'bbbbbb  wwwwww',
+		'bbbbbb  wwwwww',
+		'wwwwww  bbbbbb'
+	]
+};
+
+export const bigBoard: Map = {
+	name: 'Big board',
+	category: 'Special',
+	data: [
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'-------wb-------',
+		'-------bw-------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------'
+	]
+};
+
+export const twoBoard: Map = {
+	name: 'Two board',
+	category: 'Special',
+	author: 'Aya',
+	data: [
+		'-------- --------',
+		'-------- --------',
+		'-------- --------',
+		'---wb--- ---wb---',
+		'---bw--- ---bw---',
+		'-------- --------',
+		'-------- --------',
+		'-------- --------'
+	]
+};
+
+export const test1: Map = {
+	name: 'Test1',
+	category: 'Test',
+	data: [
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------'
+	]
+};
+
+export const test2: Map = {
+	name: 'Test2',
+	category: 'Test',
+	data: [
+		'------',
+		'------',
+		'-b--w-',
+		'-w--b-',
+		'-w--b-'
+	]
+};
+
+export const test3: Map = {
+	name: 'Test3',
+	category: 'Test',
+	data: [
+		'-w-',
+		'--w',
+		'w--',
+		'-w-',
+		'--w',
+		'w--',
+		'-w-',
+		'--w',
+		'w--',
+		'-w-',
+		'---',
+		'b--',
+	]
+};
+
+export const test4: Map = {
+	name: 'Test4',
+	category: 'Test',
+	data: [
+		'-w--b-',
+		'-w--b-',
+		'------',
+		'-w--b-',
+		'-w--b-'
+	]
+};
+
+// https://misskey.xyz/reversi/5aaabf7fe126e10b5216ea09 64
+export const test5: Map = {
+	name: 'Test5',
+	category: 'Test',
+	data: [
+		'--wwwwww--',
+		'--wwwbwwww',
+		'-bwwbwbwww',
+		'-bwwwbwbww',
+		'-bwwbwbwbw',
+		'-bwbwbwb-w',
+		'bwbwwbbb-w',
+		'w-wbbbbb--',
+		'--w-b-w---',
+		'----------'
+	]
+};
diff --git a/src/server/api/endpoints.ts b/src/server/api/endpoints.ts
index 5f0a020d6f..a5d13b0237 100644
--- a/src/server/api/endpoints.ts
+++ b/src/server/api/endpoints.ts
@@ -245,27 +245,27 @@ const endpoints: Endpoint[] = [
 	},
 
 	{
-		name: 'othello/match',
+		name: 'reversi/match',
 		withCredential: true
 	},
 
 	{
-		name: 'othello/match/cancel',
+		name: 'reversi/match/cancel',
 		withCredential: true
 	},
 
 	{
-		name: 'othello/invitations',
+		name: 'reversi/invitations',
 		withCredential: true
 	},
 
 	{
-		name: 'othello/games',
+		name: 'reversi/games',
 		withCredential: true
 	},
 
 	{
-		name: 'othello/games/show'
+		name: 'reversi/games/show'
 	},
 
 	{
diff --git a/src/server/api/endpoints/othello/games.ts b/src/server/api/endpoints/othello/games.ts
deleted file mode 100644
index 2320a34b04..0000000000
--- a/src/server/api/endpoints/othello/games.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import $ from 'cafy'; import ID from '../../../../cafy-id';
-import OthelloGame, { pack } from '../../../../models/othello-game';
-
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'my' parameter
-	const [my = false, myErr] = $.bool.optional().get(params.my);
-	if (myErr) return rej('invalid my param');
-
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $.num.optional().range(1, 100).get(params.limit);
-	if (limitErr) return rej('invalid limit param');
-
-	// Get 'sinceId' parameter
-	const [sinceId, sinceIdErr] = $.type(ID).optional().get(params.sinceId);
-	if (sinceIdErr) return rej('invalid sinceId param');
-
-	// Get 'untilId' parameter
-	const [untilId, untilIdErr] = $.type(ID).optional().get(params.untilId);
-	if (untilIdErr) return rej('invalid untilId param');
-
-	// Check if both of sinceId and untilId is specified
-	if (sinceId && untilId) {
-		return rej('cannot set sinceId and untilId');
-	}
-
-	const q: any = my ? {
-		isStarted: true,
-		$or: [{
-			user1Id: user._id
-		}, {
-			user2Id: user._id
-		}]
-	} : {
-		isStarted: true
-	};
-
-	const sort = {
-		_id: -1
-	};
-
-	if (sinceId) {
-		sort._id = 1;
-		q._id = {
-			$gt: sinceId
-		};
-	} else if (untilId) {
-		q._id = {
-			$lt: untilId
-		};
-	}
-
-	// Fetch games
-	const games = await OthelloGame.find(q, {
-		sort,
-		limit
-	});
-
-	// Reponse
-	res(Promise.all(games.map(async (g) => await pack(g, user, {
-		detail: false
-	}))));
-});
diff --git a/src/server/api/endpoints/othello/games/show.ts b/src/server/api/endpoints/othello/games/show.ts
deleted file mode 100644
index 6b2f5ce137..0000000000
--- a/src/server/api/endpoints/othello/games/show.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import $ from 'cafy'; import ID from '../../../../../cafy-id';
-import OthelloGame, { pack } from '../../../../../models/othello-game';
-import Othello from '../../../../../othello/core';
-
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'gameId' parameter
-	const [gameId, gameIdErr] = $.type(ID).get(params.gameId);
-	if (gameIdErr) return rej('invalid gameId param');
-
-	const game = await OthelloGame.findOne({ _id: gameId });
-
-	if (game == null) {
-		return rej('game not found');
-	}
-
-	const o = new Othello(game.settings.map, {
-		isLlotheo: game.settings.isLlotheo,
-		canPutEverywhere: game.settings.canPutEverywhere,
-		loopedBoard: game.settings.loopedBoard
-	});
-
-	game.logs.forEach(log => {
-		o.put(log.color, log.pos);
-	});
-
-	const packed = await pack(game, user);
-
-	res(Object.assign({
-		board: o.board,
-		turn: o.turn
-	}, packed));
-});
diff --git a/src/server/api/endpoints/othello/invitations.ts b/src/server/api/endpoints/othello/invitations.ts
deleted file mode 100644
index 4761537614..0000000000
--- a/src/server/api/endpoints/othello/invitations.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import Matching, { pack as packMatching } from '../../../../models/othello-matching';
-
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Find session
-	const invitations = await Matching.find({
-		childId: user._id
-	}, {
-		sort: {
-			_id: -1
-		}
-	});
-
-	// Reponse
-	res(Promise.all(invitations.map(async (i) => await packMatching(i, user))));
-});
diff --git a/src/server/api/endpoints/othello/match.ts b/src/server/api/endpoints/othello/match.ts
deleted file mode 100644
index e70e579755..0000000000
--- a/src/server/api/endpoints/othello/match.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import $ from 'cafy'; import ID from '../../../../cafy-id';
-import Matching, { pack as packMatching } from '../../../../models/othello-matching';
-import OthelloGame, { pack as packGame } from '../../../../models/othello-game';
-import User from '../../../../models/user';
-import publishUserStream, { publishOthelloStream } from '../../../../publishers/stream';
-import { eighteight } from '../../../../othello/maps';
-
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'userId' parameter
-	const [childId, childIdErr] = $.type(ID).get(params.userId);
-	if (childIdErr) return rej('invalid userId param');
-
-	// Myself
-	if (childId.equals(user._id)) {
-		return rej('invalid userId param');
-	}
-
-	// Find session
-	const exist = await Matching.findOne({
-		parentId: childId,
-		childId: user._id
-	});
-
-	if (exist) {
-		// Destroy session
-		Matching.remove({
-			_id: exist._id
-		});
-
-		// Create game
-		const game = await OthelloGame.insert({
-			createdAt: new Date(),
-			user1Id: exist.parentId,
-			user2Id: user._id,
-			user1Accepted: false,
-			user2Accepted: false,
-			isStarted: false,
-			isEnded: false,
-			logs: [],
-			settings: {
-				map: eighteight.data,
-				bw: 'random',
-				isLlotheo: false
-			}
-		});
-
-		// Reponse
-		res(await packGame(game, user));
-
-		publishOthelloStream(exist.parentId, 'matched', await packGame(game, exist.parentId));
-
-		const other = await Matching.count({
-			childId: user._id
-		});
-
-		if (other == 0) {
-			publishUserStream(user._id, 'othello_no_invites');
-		}
-	} else {
-		// Fetch child
-		const child = await User.findOne({
-			_id: childId
-		}, {
-			fields: {
-				_id: true
-			}
-		});
-
-		if (child === null) {
-			return rej('user not found');
-		}
-
-		// 以前のセッションはすべて削除しておく
-		await Matching.remove({
-			parentId: user._id
-		});
-
-		// セッションを作成
-		const matching = await Matching.insert({
-			createdAt: new Date(),
-			parentId: user._id,
-			childId: child._id
-		});
-
-		// Reponse
-		res();
-
-		const packed = await packMatching(matching, child);
-
-		// 招待
-		publishOthelloStream(child._id, 'invited', packed);
-
-		publishUserStream(child._id, 'othello_invited', packed);
-	}
-});
diff --git a/src/server/api/endpoints/othello/match/cancel.ts b/src/server/api/endpoints/othello/match/cancel.ts
deleted file mode 100644
index 562e691061..0000000000
--- a/src/server/api/endpoints/othello/match/cancel.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import Matching from '../../../../../models/othello-matching';
-
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	await Matching.remove({
-		parentId: user._id
-	});
-
-	res();
-});
diff --git a/src/server/api/endpoints/reversi/games.ts b/src/server/api/endpoints/reversi/games.ts
new file mode 100644
index 0000000000..9d879ecf23
--- /dev/null
+++ b/src/server/api/endpoints/reversi/games.ts
@@ -0,0 +1,62 @@
+import $ from 'cafy'; import ID from '../../../../cafy-id';
+import ReversiGame, { pack } from '../../../../models/reversi-game';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'my' parameter
+	const [my = false, myErr] = $.bool.optional().get(params.my);
+	if (myErr) return rej('invalid my param');
+
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $.num.optional().range(1, 100).get(params.limit);
+	if (limitErr) return rej('invalid limit param');
+
+	// Get 'sinceId' parameter
+	const [sinceId, sinceIdErr] = $.type(ID).optional().get(params.sinceId);
+	if (sinceIdErr) return rej('invalid sinceId param');
+
+	// Get 'untilId' parameter
+	const [untilId, untilIdErr] = $.type(ID).optional().get(params.untilId);
+	if (untilIdErr) return rej('invalid untilId param');
+
+	// Check if both of sinceId and untilId is specified
+	if (sinceId && untilId) {
+		return rej('cannot set sinceId and untilId');
+	}
+
+	const q: any = my ? {
+		isStarted: true,
+		$or: [{
+			user1Id: user._id
+		}, {
+			user2Id: user._id
+		}]
+	} : {
+		isStarted: true
+	};
+
+	const sort = {
+		_id: -1
+	};
+
+	if (sinceId) {
+		sort._id = 1;
+		q._id = {
+			$gt: sinceId
+		};
+	} else if (untilId) {
+		q._id = {
+			$lt: untilId
+		};
+	}
+
+	// Fetch games
+	const games = await ReversiGame.find(q, {
+		sort,
+		limit
+	});
+
+	// Reponse
+	res(Promise.all(games.map(async (g) => await pack(g, user, {
+		detail: false
+	}))));
+});
diff --git a/src/server/api/endpoints/reversi/games/show.ts b/src/server/api/endpoints/reversi/games/show.ts
new file mode 100644
index 0000000000..f32eb23513
--- /dev/null
+++ b/src/server/api/endpoints/reversi/games/show.ts
@@ -0,0 +1,32 @@
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
+import ReversiGame, { pack } from '../../../../../models/reversi-game';
+import Reversi from '../../../../../reversi/core';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'gameId' parameter
+	const [gameId, gameIdErr] = $.type(ID).get(params.gameId);
+	if (gameIdErr) return rej('invalid gameId param');
+
+	const game = await ReversiGame.findOne({ _id: gameId });
+
+	if (game == null) {
+		return rej('game not found');
+	}
+
+	const o = new Reversi(game.settings.map, {
+		isLlotheo: game.settings.isLlotheo,
+		canPutEverywhere: game.settings.canPutEverywhere,
+		loopedBoard: game.settings.loopedBoard
+	});
+
+	game.logs.forEach(log => {
+		o.put(log.color, log.pos);
+	});
+
+	const packed = await pack(game, user);
+
+	res(Object.assign({
+		board: o.board,
+		turn: o.turn
+	}, packed));
+});
diff --git a/src/server/api/endpoints/reversi/invitations.ts b/src/server/api/endpoints/reversi/invitations.ts
new file mode 100644
index 0000000000..fc487205a9
--- /dev/null
+++ b/src/server/api/endpoints/reversi/invitations.ts
@@ -0,0 +1,15 @@
+import Matching, { pack as packMatching } from '../../../../models/reversi-matching';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Find session
+	const invitations = await Matching.find({
+		childId: user._id
+	}, {
+		sort: {
+			_id: -1
+		}
+	});
+
+	// Reponse
+	res(Promise.all(invitations.map(async (i) => await packMatching(i, user))));
+});
diff --git a/src/server/api/endpoints/reversi/match.ts b/src/server/api/endpoints/reversi/match.ts
new file mode 100644
index 0000000000..5a699ddbae
--- /dev/null
+++ b/src/server/api/endpoints/reversi/match.ts
@@ -0,0 +1,95 @@
+import $ from 'cafy'; import ID from '../../../../cafy-id';
+import Matching, { pack as packMatching } from '../../../../models/reversi-matching';
+import ReversiGame, { pack as packGame } from '../../../../models/reversi-game';
+import User from '../../../../models/user';
+import publishUserStream, { publishReversiStream } from '../../../../publishers/stream';
+import { eighteight } from '../../../../reversi/maps';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'userId' parameter
+	const [childId, childIdErr] = $.type(ID).get(params.userId);
+	if (childIdErr) return rej('invalid userId param');
+
+	// Myself
+	if (childId.equals(user._id)) {
+		return rej('invalid userId param');
+	}
+
+	// Find session
+	const exist = await Matching.findOne({
+		parentId: childId,
+		childId: user._id
+	});
+
+	if (exist) {
+		// Destroy session
+		Matching.remove({
+			_id: exist._id
+		});
+
+		// Create game
+		const game = await ReversiGame.insert({
+			createdAt: new Date(),
+			user1Id: exist.parentId,
+			user2Id: user._id,
+			user1Accepted: false,
+			user2Accepted: false,
+			isStarted: false,
+			isEnded: false,
+			logs: [],
+			settings: {
+				map: eighteight.data,
+				bw: 'random',
+				isLlotheo: false
+			}
+		});
+
+		// Reponse
+		res(await packGame(game, user));
+
+		publishReversiStream(exist.parentId, 'matched', await packGame(game, exist.parentId));
+
+		const other = await Matching.count({
+			childId: user._id
+		});
+
+		if (other == 0) {
+			publishUserStream(user._id, 'reversi_no_invites');
+		}
+	} else {
+		// Fetch child
+		const child = await User.findOne({
+			_id: childId
+		}, {
+			fields: {
+				_id: true
+			}
+		});
+
+		if (child === null) {
+			return rej('user not found');
+		}
+
+		// 以前のセッションはすべて削除しておく
+		await Matching.remove({
+			parentId: user._id
+		});
+
+		// セッションを作成
+		const matching = await Matching.insert({
+			createdAt: new Date(),
+			parentId: user._id,
+			childId: child._id
+		});
+
+		// Reponse
+		res();
+
+		const packed = await packMatching(matching, child);
+
+		// 招待
+		publishReversiStream(child._id, 'invited', packed);
+
+		publishUserStream(child._id, 'reversi_invited', packed);
+	}
+});
diff --git a/src/server/api/endpoints/reversi/match/cancel.ts b/src/server/api/endpoints/reversi/match/cancel.ts
new file mode 100644
index 0000000000..bc8a4cd640
--- /dev/null
+++ b/src/server/api/endpoints/reversi/match/cancel.ts
@@ -0,0 +1,9 @@
+import Matching from '../../../../../models/reversi-matching';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	await Matching.remove({
+		parentId: user._id
+	});
+
+	res();
+});
diff --git a/src/server/api/stream/othello-game.ts b/src/server/api/stream/othello-game.ts
deleted file mode 100644
index 841e542610..0000000000
--- a/src/server/api/stream/othello-game.ts
+++ /dev/null
@@ -1,333 +0,0 @@
-import * as websocket from 'websocket';
-import * as redis from 'redis';
-import * as CRC32 from 'crc-32';
-import OthelloGame, { pack } from '../../../models/othello-game';
-import { publishOthelloGameStream } from '../../../publishers/stream';
-import Othello from '../../../othello/core';
-import * as maps from '../../../othello/maps';
-import { ParsedUrlQuery } from 'querystring';
-
-export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user?: any): void {
-	const q = request.resourceURL.query as ParsedUrlQuery;
-	const gameId = q.game;
-
-	// Subscribe game stream
-	subscriber.subscribe(`misskey:othello-game-stream:${gameId}`);
-	subscriber.on('message', (_, data) => {
-		connection.send(data);
-	});
-
-	connection.on('message', async (data) => {
-		const msg = JSON.parse(data.utf8Data);
-
-		switch (msg.type) {
-			case 'accept':
-				accept(true);
-				break;
-
-			case 'cancel-accept':
-				accept(false);
-				break;
-
-			case 'update-settings':
-				if (msg.settings == null) return;
-				updateSettings(msg.settings);
-				break;
-
-			case 'init-form':
-				if (msg.body == null) return;
-				initForm(msg.body);
-				break;
-
-			case 'update-form':
-				if (msg.id == null || msg.value === undefined) return;
-				updateForm(msg.id, msg.value);
-				break;
-
-			case 'message':
-				if (msg.body == null) return;
-				message(msg.body);
-				break;
-
-			case 'set':
-				if (msg.pos == null) return;
-				set(msg.pos);
-				break;
-
-			case 'check':
-				if (msg.crc32 == null) return;
-				check(msg.crc32);
-				break;
-		}
-	});
-
-	async function updateSettings(settings) {
-		const game = await OthelloGame.findOne({ _id: gameId });
-
-		if (game.isStarted) return;
-		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
-		if (game.user1Id.equals(user._id) && game.user1Accepted) return;
-		if (game.user2Id.equals(user._id) && game.user2Accepted) return;
-
-		await OthelloGame.update({ _id: gameId }, {
-			$set: {
-				settings
-			}
-		});
-
-		publishOthelloGameStream(gameId, 'update-settings', settings);
-	}
-
-	async function initForm(form) {
-		const game = await OthelloGame.findOne({ _id: gameId });
-
-		if (game.isStarted) return;
-		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
-
-		const set = game.user1Id.equals(user._id) ? {
-			form1: form
-		} : {
-			form2: form
-		};
-
-		await OthelloGame.update({ _id: gameId }, {
-			$set: set
-		});
-
-		publishOthelloGameStream(gameId, 'init-form', {
-			userId: user._id,
-			form
-		});
-	}
-
-	async function updateForm(id, value) {
-		const game = await OthelloGame.findOne({ _id: gameId });
-
-		if (game.isStarted) return;
-		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
-
-		const form = game.user1Id.equals(user._id) ? game.form2 : game.form1;
-
-		const item = form.find(i => i.id == id);
-
-		if (item == null) return;
-
-		item.value = value;
-
-		const set = game.user1Id.equals(user._id) ? {
-			form2: form
-		} : {
-			form1: form
-		};
-
-		await OthelloGame.update({ _id: gameId }, {
-			$set: set
-		});
-
-		publishOthelloGameStream(gameId, 'update-form', {
-			userId: user._id,
-			id,
-			value
-		});
-	}
-
-	async function message(message) {
-		message.id = Math.random();
-		publishOthelloGameStream(gameId, 'message', {
-			userId: user._id,
-			message
-		});
-	}
-
-	async function accept(accept: boolean) {
-		const game = await OthelloGame.findOne({ _id: gameId });
-
-		if (game.isStarted) return;
-
-		let bothAccepted = false;
-
-		if (game.user1Id.equals(user._id)) {
-			await OthelloGame.update({ _id: gameId }, {
-				$set: {
-					user1Accepted: accept
-				}
-			});
-
-			publishOthelloGameStream(gameId, 'change-accepts', {
-				user1: accept,
-				user2: game.user2Accepted
-			});
-
-			if (accept && game.user2Accepted) bothAccepted = true;
-		} else if (game.user2Id.equals(user._id)) {
-			await OthelloGame.update({ _id: gameId }, {
-				$set: {
-					user2Accepted: accept
-				}
-			});
-
-			publishOthelloGameStream(gameId, 'change-accepts', {
-				user1: game.user1Accepted,
-				user2: accept
-			});
-
-			if (accept && game.user1Accepted) bothAccepted = true;
-		} else {
-			return;
-		}
-
-		if (bothAccepted) {
-			// 3秒後、まだacceptされていたらゲーム開始
-			setTimeout(async () => {
-				const freshGame = await OthelloGame.findOne({ _id: gameId });
-				if (freshGame == null || freshGame.isStarted || freshGame.isEnded) return;
-				if (!freshGame.user1Accepted || !freshGame.user2Accepted) return;
-
-				let bw: number;
-				if (freshGame.settings.bw == 'random') {
-					bw = Math.random() > 0.5 ? 1 : 2;
-				} else {
-					bw = freshGame.settings.bw as number;
-				}
-
-				function getRandomMap() {
-					const mapCount = Object.entries(maps).length;
-					const rnd = Math.floor(Math.random() * mapCount);
-					return Object.entries(maps).find((x, i) => i == rnd)[1].data;
-				}
-
-				const map = freshGame.settings.map != null ? freshGame.settings.map : getRandomMap();
-
-				await OthelloGame.update({ _id: gameId }, {
-					$set: {
-						startedAt: new Date(),
-						isStarted: true,
-						black: bw,
-						'settings.map': map
-					}
-				});
-
-				//#region 盤面に最初から石がないなどして始まった瞬間に勝敗が決定する場合があるのでその処理
-				const o = new Othello(map, {
-					isLlotheo: freshGame.settings.isLlotheo,
-					canPutEverywhere: freshGame.settings.canPutEverywhere,
-					loopedBoard: freshGame.settings.loopedBoard
-				});
-
-				if (o.isEnded) {
-					let winner;
-					if (o.winner === true) {
-						winner = freshGame.black == 1 ? freshGame.user1Id : freshGame.user2Id;
-					} else if (o.winner === false) {
-						winner = freshGame.black == 1 ? freshGame.user2Id : freshGame.user1Id;
-					} else {
-						winner = null;
-					}
-
-					await OthelloGame.update({
-						_id: gameId
-					}, {
-						$set: {
-							isEnded: true,
-							winnerId: winner
-						}
-					});
-
-					publishOthelloGameStream(gameId, 'ended', {
-						winnerId: winner,
-						game: await pack(gameId, user)
-					});
-				}
-				//#endregion
-
-				publishOthelloGameStream(gameId, 'started', await pack(gameId, user));
-			}, 3000);
-		}
-	}
-
-	// 石を打つ
-	async function set(pos) {
-		const game = await OthelloGame.findOne({ _id: gameId });
-
-		if (!game.isStarted) return;
-		if (game.isEnded) return;
-		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
-
-		const o = new Othello(game.settings.map, {
-			isLlotheo: game.settings.isLlotheo,
-			canPutEverywhere: game.settings.canPutEverywhere,
-			loopedBoard: game.settings.loopedBoard
-		});
-
-		game.logs.forEach(log => {
-			o.put(log.color, log.pos);
-		});
-
-		const myColor =
-			(game.user1Id.equals(user._id) && game.black == 1) || (game.user2Id.equals(user._id) && game.black == 2)
-				? true
-				: false;
-
-		if (!o.canPut(myColor, pos)) return;
-		o.put(myColor, pos);
-
-		let winner;
-		if (o.isEnded) {
-			if (o.winner === true) {
-				winner = game.black == 1 ? game.user1Id : game.user2Id;
-			} else if (o.winner === false) {
-				winner = game.black == 1 ? game.user2Id : game.user1Id;
-			} else {
-				winner = null;
-			}
-		}
-
-		const log = {
-			at: new Date(),
-			color: myColor,
-			pos
-		};
-
-		const crc32 = CRC32.str(game.logs.map(x => x.pos.toString()).join('') + pos.toString());
-
-		await OthelloGame.update({
-			_id: gameId
-		}, {
-			$set: {
-				crc32,
-				isEnded: o.isEnded,
-				winnerId: winner
-			},
-			$push: {
-				logs: log
-			}
-		});
-
-		publishOthelloGameStream(gameId, 'set', Object.assign(log, {
-			next: o.turn
-		}));
-
-		if (o.isEnded) {
-			publishOthelloGameStream(gameId, 'ended', {
-				winnerId: winner,
-				game: await pack(gameId, user)
-			});
-		}
-	}
-
-	async function check(crc32) {
-		const game = await OthelloGame.findOne({ _id: gameId });
-
-		if (!game.isStarted) return;
-
-		// 互換性のため
-		if (game.crc32 == null) return;
-
-		if (crc32 !== game.crc32) {
-			connection.send(JSON.stringify({
-				type: 'rescue',
-				body: await pack(game, user)
-			}));
-		}
-	}
-}
diff --git a/src/server/api/stream/othello.ts b/src/server/api/stream/othello.ts
deleted file mode 100644
index fa62b05836..0000000000
--- a/src/server/api/stream/othello.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as mongo from 'mongodb';
-import * as websocket from 'websocket';
-import * as redis from 'redis';
-import Matching, { pack } from '../../../models/othello-matching';
-import publishUserStream from '../../../publishers/stream';
-
-export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
-	// Subscribe othello stream
-	subscriber.subscribe(`misskey:othello-stream:${user._id}`);
-	subscriber.on('message', (_, data) => {
-		connection.send(data);
-	});
-
-	connection.on('message', async (data) => {
-		const msg = JSON.parse(data.utf8Data);
-
-		switch (msg.type) {
-			case 'ping':
-				if (msg.id == null) return;
-				const matching = await Matching.findOne({
-					parentId: user._id,
-					childId: new mongo.ObjectID(msg.id)
-				});
-				if (matching == null) return;
-				publishUserStream(matching.childId, 'othello_invited', await pack(matching, matching.childId));
-				break;
-		}
-	});
-}
diff --git a/src/server/api/stream/reversi-game.ts b/src/server/api/stream/reversi-game.ts
new file mode 100644
index 0000000000..63d9b220b0
--- /dev/null
+++ b/src/server/api/stream/reversi-game.ts
@@ -0,0 +1,333 @@
+import * as websocket from 'websocket';
+import * as redis from 'redis';
+import * as CRC32 from 'crc-32';
+import ReversiGame, { pack } from '../../../models/reversi-game';
+import { publishReversiGameStream } from '../../../publishers/stream';
+import Reversi from '../../../reversi/core';
+import * as maps from '../../../reversi/maps';
+import { ParsedUrlQuery } from 'querystring';
+
+export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user?: any): void {
+	const q = request.resourceURL.query as ParsedUrlQuery;
+	const gameId = q.game;
+
+	// Subscribe game stream
+	subscriber.subscribe(`misskey:reversi-game-stream:${gameId}`);
+	subscriber.on('message', (_, data) => {
+		connection.send(data);
+	});
+
+	connection.on('message', async (data) => {
+		const msg = JSON.parse(data.utf8Data);
+
+		switch (msg.type) {
+			case 'accept':
+				accept(true);
+				break;
+
+			case 'cancel-accept':
+				accept(false);
+				break;
+
+			case 'update-settings':
+				if (msg.settings == null) return;
+				updateSettings(msg.settings);
+				break;
+
+			case 'init-form':
+				if (msg.body == null) return;
+				initForm(msg.body);
+				break;
+
+			case 'update-form':
+				if (msg.id == null || msg.value === undefined) return;
+				updateForm(msg.id, msg.value);
+				break;
+
+			case 'message':
+				if (msg.body == null) return;
+				message(msg.body);
+				break;
+
+			case 'set':
+				if (msg.pos == null) return;
+				set(msg.pos);
+				break;
+
+			case 'check':
+				if (msg.crc32 == null) return;
+				check(msg.crc32);
+				break;
+		}
+	});
+
+	async function updateSettings(settings) {
+		const game = await ReversiGame.findOne({ _id: gameId });
+
+		if (game.isStarted) return;
+		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
+		if (game.user1Id.equals(user._id) && game.user1Accepted) return;
+		if (game.user2Id.equals(user._id) && game.user2Accepted) return;
+
+		await ReversiGame.update({ _id: gameId }, {
+			$set: {
+				settings
+			}
+		});
+
+		publishReversiGameStream(gameId, 'update-settings', settings);
+	}
+
+	async function initForm(form) {
+		const game = await ReversiGame.findOne({ _id: gameId });
+
+		if (game.isStarted) return;
+		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
+
+		const set = game.user1Id.equals(user._id) ? {
+			form1: form
+		} : {
+			form2: form
+		};
+
+		await ReversiGame.update({ _id: gameId }, {
+			$set: set
+		});
+
+		publishReversiGameStream(gameId, 'init-form', {
+			userId: user._id,
+			form
+		});
+	}
+
+	async function updateForm(id, value) {
+		const game = await ReversiGame.findOne({ _id: gameId });
+
+		if (game.isStarted) return;
+		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
+
+		const form = game.user1Id.equals(user._id) ? game.form2 : game.form1;
+
+		const item = form.find(i => i.id == id);
+
+		if (item == null) return;
+
+		item.value = value;
+
+		const set = game.user1Id.equals(user._id) ? {
+			form2: form
+		} : {
+			form1: form
+		};
+
+		await ReversiGame.update({ _id: gameId }, {
+			$set: set
+		});
+
+		publishReversiGameStream(gameId, 'update-form', {
+			userId: user._id,
+			id,
+			value
+		});
+	}
+
+	async function message(message) {
+		message.id = Math.random();
+		publishReversiGameStream(gameId, 'message', {
+			userId: user._id,
+			message
+		});
+	}
+
+	async function accept(accept: boolean) {
+		const game = await ReversiGame.findOne({ _id: gameId });
+
+		if (game.isStarted) return;
+
+		let bothAccepted = false;
+
+		if (game.user1Id.equals(user._id)) {
+			await ReversiGame.update({ _id: gameId }, {
+				$set: {
+					user1Accepted: accept
+				}
+			});
+
+			publishReversiGameStream(gameId, 'change-accepts', {
+				user1: accept,
+				user2: game.user2Accepted
+			});
+
+			if (accept && game.user2Accepted) bothAccepted = true;
+		} else if (game.user2Id.equals(user._id)) {
+			await ReversiGame.update({ _id: gameId }, {
+				$set: {
+					user2Accepted: accept
+				}
+			});
+
+			publishReversiGameStream(gameId, 'change-accepts', {
+				user1: game.user1Accepted,
+				user2: accept
+			});
+
+			if (accept && game.user1Accepted) bothAccepted = true;
+		} else {
+			return;
+		}
+
+		if (bothAccepted) {
+			// 3秒後、まだacceptされていたらゲーム開始
+			setTimeout(async () => {
+				const freshGame = await ReversiGame.findOne({ _id: gameId });
+				if (freshGame == null || freshGame.isStarted || freshGame.isEnded) return;
+				if (!freshGame.user1Accepted || !freshGame.user2Accepted) return;
+
+				let bw: number;
+				if (freshGame.settings.bw == 'random') {
+					bw = Math.random() > 0.5 ? 1 : 2;
+				} else {
+					bw = freshGame.settings.bw as number;
+				}
+
+				function getRandomMap() {
+					const mapCount = Object.entries(maps).length;
+					const rnd = Math.floor(Math.random() * mapCount);
+					return Object.entries(maps).find((x, i) => i == rnd)[1].data;
+				}
+
+				const map = freshGame.settings.map != null ? freshGame.settings.map : getRandomMap();
+
+				await ReversiGame.update({ _id: gameId }, {
+					$set: {
+						startedAt: new Date(),
+						isStarted: true,
+						black: bw,
+						'settings.map': map
+					}
+				});
+
+				//#region 盤面に最初から石がないなどして始まった瞬間に勝敗が決定する場合があるのでその処理
+				const o = new Reversi(map, {
+					isLlotheo: freshGame.settings.isLlotheo,
+					canPutEverywhere: freshGame.settings.canPutEverywhere,
+					loopedBoard: freshGame.settings.loopedBoard
+				});
+
+				if (o.isEnded) {
+					let winner;
+					if (o.winner === true) {
+						winner = freshGame.black == 1 ? freshGame.user1Id : freshGame.user2Id;
+					} else if (o.winner === false) {
+						winner = freshGame.black == 1 ? freshGame.user2Id : freshGame.user1Id;
+					} else {
+						winner = null;
+					}
+
+					await ReversiGame.update({
+						_id: gameId
+					}, {
+						$set: {
+							isEnded: true,
+							winnerId: winner
+						}
+					});
+
+					publishReversiGameStream(gameId, 'ended', {
+						winnerId: winner,
+						game: await pack(gameId, user)
+					});
+				}
+				//#endregion
+
+				publishReversiGameStream(gameId, 'started', await pack(gameId, user));
+			}, 3000);
+		}
+	}
+
+	// 石を打つ
+	async function set(pos) {
+		const game = await ReversiGame.findOne({ _id: gameId });
+
+		if (!game.isStarted) return;
+		if (game.isEnded) return;
+		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
+
+		const o = new Reversi(game.settings.map, {
+			isLlotheo: game.settings.isLlotheo,
+			canPutEverywhere: game.settings.canPutEverywhere,
+			loopedBoard: game.settings.loopedBoard
+		});
+
+		game.logs.forEach(log => {
+			o.put(log.color, log.pos);
+		});
+
+		const myColor =
+			(game.user1Id.equals(user._id) && game.black == 1) || (game.user2Id.equals(user._id) && game.black == 2)
+				? true
+				: false;
+
+		if (!o.canPut(myColor, pos)) return;
+		o.put(myColor, pos);
+
+		let winner;
+		if (o.isEnded) {
+			if (o.winner === true) {
+				winner = game.black == 1 ? game.user1Id : game.user2Id;
+			} else if (o.winner === false) {
+				winner = game.black == 1 ? game.user2Id : game.user1Id;
+			} else {
+				winner = null;
+			}
+		}
+
+		const log = {
+			at: new Date(),
+			color: myColor,
+			pos
+		};
+
+		const crc32 = CRC32.str(game.logs.map(x => x.pos.toString()).join('') + pos.toString());
+
+		await ReversiGame.update({
+			_id: gameId
+		}, {
+			$set: {
+				crc32,
+				isEnded: o.isEnded,
+				winnerId: winner
+			},
+			$push: {
+				logs: log
+			}
+		});
+
+		publishReversiGameStream(gameId, 'set', Object.assign(log, {
+			next: o.turn
+		}));
+
+		if (o.isEnded) {
+			publishReversiGameStream(gameId, 'ended', {
+				winnerId: winner,
+				game: await pack(gameId, user)
+			});
+		}
+	}
+
+	async function check(crc32) {
+		const game = await ReversiGame.findOne({ _id: gameId });
+
+		if (!game.isStarted) return;
+
+		// 互換性のため
+		if (game.crc32 == null) return;
+
+		if (crc32 !== game.crc32) {
+			connection.send(JSON.stringify({
+				type: 'rescue',
+				body: await pack(game, user)
+			}));
+		}
+	}
+}
diff --git a/src/server/api/stream/reversi.ts b/src/server/api/stream/reversi.ts
new file mode 100644
index 0000000000..35c6167364
--- /dev/null
+++ b/src/server/api/stream/reversi.ts
@@ -0,0 +1,29 @@
+import * as mongo from 'mongodb';
+import * as websocket from 'websocket';
+import * as redis from 'redis';
+import Matching, { pack } from '../../../models/reversi-matching';
+import publishUserStream from '../../../publishers/stream';
+
+export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
+	// Subscribe reversi stream
+	subscriber.subscribe(`misskey:reversi-stream:${user._id}`);
+	subscriber.on('message', (_, data) => {
+		connection.send(data);
+	});
+
+	connection.on('message', async (data) => {
+		const msg = JSON.parse(data.utf8Data);
+
+		switch (msg.type) {
+			case 'ping':
+				if (msg.id == null) return;
+				const matching = await Matching.findOne({
+					parentId: user._id,
+					childId: new mongo.ObjectID(msg.id)
+				});
+				if (matching == null) return;
+				publishUserStream(matching.childId, 'reversi_invited', await pack(matching, matching.childId));
+				break;
+		}
+	});
+}
diff --git a/src/server/api/streaming.ts b/src/server/api/streaming.ts
index 2d4cfc108f..a3e4ed6f85 100644
--- a/src/server/api/streaming.ts
+++ b/src/server/api/streaming.ts
@@ -10,8 +10,8 @@ import userListStream from './stream/user-list';
 import driveStream from './stream/drive';
 import messagingStream from './stream/messaging';
 import messagingIndexStream from './stream/messaging-index';
-import othelloGameStream from './stream/othello-game';
-import othelloStream from './stream/othello';
+import reversiGameStream from './stream/reversi-game';
+import reversiStream from './stream/reversi';
 import serverStatsStream from './stream/server-stats';
 import notesStatsStream from './stream/notes-stats';
 import requestsStream from './stream/requests';
@@ -56,8 +56,8 @@ module.exports = (server: http.Server) => {
 		const q = request.resourceURL.query as ParsedUrlQuery;
 		const [user, app] = await authenticate(q.i as string);
 
-		if (request.resourceURL.pathname === '/othello-game') {
-			othelloGameStream(request, connection, subscriber, user);
+		if (request.resourceURL.pathname === '/reversi-game') {
+			reversiGameStream(request, connection, subscriber, user);
 			return;
 		}
 
@@ -75,7 +75,7 @@ module.exports = (server: http.Server) => {
 			request.resourceURL.pathname === '/drive' ? driveStream :
 			request.resourceURL.pathname === '/messaging' ? messagingStream :
 			request.resourceURL.pathname === '/messaging-index' ? messagingIndexStream :
-			request.resourceURL.pathname === '/othello' ? othelloStream :
+			request.resourceURL.pathname === '/reversi' ? reversiStream :
 			null;
 
 		if (channel !== null) {
-- 
cgit v1.2.3-freya