From 06eabcbc636800c551e4ba602325d227ca463460 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 7 Mar 2018 01:54:56 +0900
Subject: [PATCH 1/7] wip

---
 src/api/endpoints/othello/sessions/create.ts  | 18 ++++++++++
 src/api/endpoints/othello/sessions/in.ts      | 34 +++++++++++++++++++
 src/api/models/othello-game.ts                | 33 ++++++++++++++++++
 src/api/models/othello-session.ts             | 29 ++++++++++++++++
 src/web/app/common/views/components/index.ts  |  2 ++
 .../app/common/views/components/othello.vue   | 32 +++++++++++++++++
 6 files changed, 148 insertions(+)
 create mode 100644 src/api/endpoints/othello/sessions/create.ts
 create mode 100644 src/api/endpoints/othello/sessions/in.ts
 create mode 100644 src/api/models/othello-game.ts
 create mode 100644 src/api/models/othello-session.ts
 create mode 100644 src/web/app/common/views/components/othello.vue

diff --git a/src/api/endpoints/othello/sessions/create.ts b/src/api/endpoints/othello/sessions/create.ts
new file mode 100644
index 0000000000..09c3cff62b
--- /dev/null
+++ b/src/api/endpoints/othello/sessions/create.ts
@@ -0,0 +1,18 @@
+import rndstr from 'rndstr';
+import Session, { pack } from '../../../models/othello-session';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// 以前のセッションはすべて削除しておく
+	await Session.remove({
+		user_id: user._id
+	});
+
+	// セッションを作成
+	const session = await Session.insert({
+		user_id: user._id,
+		code: rndstr('a-z0-9', 3)
+	});
+
+	// Reponse
+	res(await pack(session));
+});
diff --git a/src/api/endpoints/othello/sessions/in.ts b/src/api/endpoints/othello/sessions/in.ts
new file mode 100644
index 0000000000..d4b95bc4f9
--- /dev/null
+++ b/src/api/endpoints/othello/sessions/in.ts
@@ -0,0 +1,34 @@
+import $ from 'cafy';
+import Session from '../../../models/othello-session';
+import Game, { pack } from '../../../models/othello-game';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'code' parameter
+	const [code, codeErr] = $(params.code).string().$;
+	if (codeErr) return rej('invalid code param');
+
+	// Fetch session
+	const session = await Session.findOne({ code });
+
+	if (session == null) {
+		return rej('session not found');
+	}
+
+	// Destroy session
+	Session.remove({
+		_id: session._id
+	});
+
+	const parentIsBlack = Math.random() > 0.5;
+
+	// Start game
+	const game = await Game.insert({
+		created_at: new Date(),
+		black_user_id: parentIsBlack ? session.user_id : user._id,
+		white_user_id: parentIsBlack ? user._id : session.user_id,
+		logs: []
+	});
+
+	// Reponse
+	res(await pack(game));
+});
diff --git a/src/api/models/othello-game.ts b/src/api/models/othello-game.ts
new file mode 100644
index 0000000000..a6beaaf9c7
--- /dev/null
+++ b/src/api/models/othello-game.ts
@@ -0,0 +1,33 @@
+import * as mongo from 'mongodb';
+import deepcopy = require('deepcopy');
+import db from '../../db/mongodb';
+
+const Game = db.get<IGame>('othello_games');
+export default Game;
+
+export interface IGame {
+	_id: mongo.ObjectID;
+	created_at: Date;
+	black_user_id: mongo.ObjectID;
+	white_user_id: mongo.ObjectID;
+	logs: any[];
+}
+
+/**
+ * Pack an othello game for API response
+ *
+ * @param {any} game
+ * @return {Promise<any>}
+ */
+export const pack = (
+	game: any
+) => new Promise<any>(async (resolve, reject) => {
+
+	const _game = deepcopy(game);
+
+	// Rename _id to id
+	_game.id = _game._id;
+	delete _game._id;
+
+	resolve(_game);
+});
diff --git a/src/api/models/othello-session.ts b/src/api/models/othello-session.ts
new file mode 100644
index 0000000000..0aa1d01e54
--- /dev/null
+++ b/src/api/models/othello-session.ts
@@ -0,0 +1,29 @@
+import * as mongo from 'mongodb';
+import deepcopy = require('deepcopy');
+import db from '../../db/mongodb';
+
+const Session = db.get<ISession>('othello_sessions');
+export default Session;
+
+export interface ISession {
+	_id: mongo.ObjectID;
+	code: string;
+	user_id: mongo.ObjectID;
+}
+
+/**
+ * Pack an othello session for API response
+ *
+ * @param {any} session
+ * @return {Promise<any>}
+ */
+export const pack = (
+	session: any
+) => new Promise<any>(async (resolve, reject) => {
+
+	const _session = deepcopy(session);
+
+	delete _session._id;
+
+	resolve(_session);
+});
diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts
index 5274920228..98fc2352f2 100644
--- a/src/web/app/common/views/components/index.ts
+++ b/src/web/app/common/views/components/index.ts
@@ -21,6 +21,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';
 
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
@@ -43,3 +44,4 @@ 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);
diff --git a/src/web/app/common/views/components/othello.vue b/src/web/app/common/views/components/othello.vue
new file mode 100644
index 0000000000..136046db24
--- /dev/null
+++ b/src/web/app/common/views/components/othello.vue
@@ -0,0 +1,32 @@
+<template>
+<div>
+	<div v-if="session">
+		<h1>相手を待っています<mk-ellipsis/></h1>
+		<p>セッションID:<code>{{ session.code }}</code></p>
+		<p>対戦したい相手に上記のセッションIDを伝えてください。相手が「セッションイン」でセッションIDを入力すると、対局が開始されます。</p>
+	</div>
+	<div v-else>
+		<h1>Misskey Othello</h1>
+		<p>他のMisskeyユーザーとオセロで対戦しよう。</p>
+		<button>フリーマッチ(準備中)</button>
+		<button @click="inSession">セッションイン</button>
+		<button @click="createSession">セッションを作成する</button>
+		<section>
+			<h2>過去の対局</h2>
+		</section>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	methods: {
+		createSession() {
+			(this as any).api('othello/sessions/create');
+
+		}
+	}
+});
+</script>
+

From 6c495268aec2d2fa02ac16dbc119fb9c4e34cdae Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 7 Mar 2018 11:40:40 +0900
Subject: [PATCH 2/7] wip

---
 src/api/endpoints/othello/match.ts            | 80 ++++++++++++++++++
 src/api/endpoints/othello/sessions/create.ts  | 18 ----
 src/api/endpoints/othello/sessions/in.ts      | 34 --------
 src/api/event.ts                              |  6 ++
 src/api/models/othello-matching.ts            | 11 +++
 src/api/models/othello-session.ts             | 29 -------
 src/api/stream/messaging.ts                   |  2 +-
 src/api/stream/othello-game.ts                | 12 +++
 src/api/stream/othello-matching.ts            | 12 +++
 src/api/stream/requests.ts                    |  2 +-
 src/api/stream/server.ts                      |  2 +-
 src/api/streaming.ts                          |  4 +
 .../app/common/views/components/messaging.vue |  2 +-
 .../common/views/components/othello.game.vue  | 29 +++++++
 .../app/common/views/components/othello.vue   | 82 ++++++++++++++++---
 15 files changed, 230 insertions(+), 95 deletions(-)
 create mode 100644 src/api/endpoints/othello/match.ts
 delete mode 100644 src/api/endpoints/othello/sessions/create.ts
 delete mode 100644 src/api/endpoints/othello/sessions/in.ts
 create mode 100644 src/api/models/othello-matching.ts
 delete mode 100644 src/api/models/othello-session.ts
 create mode 100644 src/api/stream/othello-game.ts
 create mode 100644 src/api/stream/othello-matching.ts
 create mode 100644 src/web/app/common/views/components/othello.game.vue

diff --git a/src/api/endpoints/othello/match.ts b/src/api/endpoints/othello/match.ts
new file mode 100644
index 0000000000..2dc22d11f9
--- /dev/null
+++ b/src/api/endpoints/othello/match.ts
@@ -0,0 +1,80 @@
+import $ from 'cafy';
+import Matching from '../../models/othello-matchig';
+import Game, { pack } from '../../models/othello-game';
+import User from '../../models/user';
+import { publishOthelloStream } from '../../event';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'user_id' parameter
+	const [childId, childIdErr] = $(params.user_id).id().$;
+	if (childIdErr) return rej('invalid user_id param');
+
+	// Myself
+	if (childId.equals(user._id)) {
+		return rej('invalid user_id param');
+	}
+
+	// Find session
+	const exist = await Matching.findOne({
+		parent_id: childId,
+		child_id: user._id
+	});
+
+	if (exist) {
+		// Destroy session
+		Matching.remove({
+			_id: exist._id
+		});
+
+		const parentIsBlack = Math.random() > 0.5;
+
+		// Start game
+		const game = await Game.insert({
+			created_at: new Date(),
+			black_user_id: parentIsBlack ? exist.parent_id : user._id,
+			white_user_id: parentIsBlack ? user._id : exist.parent_id,
+			logs: []
+		});
+
+		const packedGame = await pack(game);
+
+		// Reponse
+		res(packedGame);
+
+		publishOthelloStream(exist.parent_id, 'matched', {
+			game
+		});
+	} else {
+		// Fetch child
+		const child = await User.findOne({
+			_id: childId
+		}, {
+			fields: {
+				_id: true
+			}
+		});
+
+		if (child === null) {
+			return rej('user not found');
+		}
+
+		// 以前のセッションはすべて削除しておく
+		await Matching.remove({
+			parent_id: user._id
+		});
+
+		// セッションを作成
+		await Matching.insert({
+			parent_id: user._id,
+			child_id: child._id
+		});
+
+		// Reponse
+		res(204);
+
+		// 招待
+		publishOthelloStream(child._id, 'invited', {
+			user_id: user._id
+		});
+	}
+});
diff --git a/src/api/endpoints/othello/sessions/create.ts b/src/api/endpoints/othello/sessions/create.ts
deleted file mode 100644
index 09c3cff62b..0000000000
--- a/src/api/endpoints/othello/sessions/create.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import rndstr from 'rndstr';
-import Session, { pack } from '../../../models/othello-session';
-
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// 以前のセッションはすべて削除しておく
-	await Session.remove({
-		user_id: user._id
-	});
-
-	// セッションを作成
-	const session = await Session.insert({
-		user_id: user._id,
-		code: rndstr('a-z0-9', 3)
-	});
-
-	// Reponse
-	res(await pack(session));
-});
diff --git a/src/api/endpoints/othello/sessions/in.ts b/src/api/endpoints/othello/sessions/in.ts
deleted file mode 100644
index d4b95bc4f9..0000000000
--- a/src/api/endpoints/othello/sessions/in.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import $ from 'cafy';
-import Session from '../../../models/othello-session';
-import Game, { pack } from '../../../models/othello-game';
-
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'code' parameter
-	const [code, codeErr] = $(params.code).string().$;
-	if (codeErr) return rej('invalid code param');
-
-	// Fetch session
-	const session = await Session.findOne({ code });
-
-	if (session == null) {
-		return rej('session not found');
-	}
-
-	// Destroy session
-	Session.remove({
-		_id: session._id
-	});
-
-	const parentIsBlack = Math.random() > 0.5;
-
-	// Start game
-	const game = await Game.insert({
-		created_at: new Date(),
-		black_user_id: parentIsBlack ? session.user_id : user._id,
-		white_user_id: parentIsBlack ? user._id : session.user_id,
-		logs: []
-	});
-
-	// Reponse
-	res(await pack(game));
-});
diff --git a/src/api/event.ts b/src/api/event.ts
index 4a2e4e453d..e68082f0a9 100644
--- a/src/api/event.ts
+++ b/src/api/event.ts
@@ -38,6 +38,10 @@ 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 publishChannelStream(channelId: ID, type: string, value?: any): void {
 		this.publish(`channel-stream:${channelId}`, type, typeof value === 'undefined' ? null : value);
 	}
@@ -65,4 +69,6 @@ export const publishMessagingStream = ev.publishMessagingStream.bind(ev);
 
 export const publishMessagingIndexStream = ev.publishMessagingIndexStream.bind(ev);
 
+export const publishOthelloStream = ev.publishOthelloStream.bind(ev);
+
 export const publishChannelStream = ev.publishChannelStream.bind(ev);
diff --git a/src/api/models/othello-matching.ts b/src/api/models/othello-matching.ts
new file mode 100644
index 0000000000..bd7aeef3cf
--- /dev/null
+++ b/src/api/models/othello-matching.ts
@@ -0,0 +1,11 @@
+import * as mongo from 'mongodb';
+import db from '../../db/mongodb';
+
+const Matching = db.get<IMatching>('othello_matchings');
+export default Matching;
+
+export interface IMatching {
+	_id: mongo.ObjectID;
+	parent_id: mongo.ObjectID;
+	child_id: mongo.ObjectID;
+}
diff --git a/src/api/models/othello-session.ts b/src/api/models/othello-session.ts
deleted file mode 100644
index 0aa1d01e54..0000000000
--- a/src/api/models/othello-session.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as mongo from 'mongodb';
-import deepcopy = require('deepcopy');
-import db from '../../db/mongodb';
-
-const Session = db.get<ISession>('othello_sessions');
-export default Session;
-
-export interface ISession {
-	_id: mongo.ObjectID;
-	code: string;
-	user_id: mongo.ObjectID;
-}
-
-/**
- * Pack an othello session for API response
- *
- * @param {any} session
- * @return {Promise<any>}
- */
-export const pack = (
-	session: any
-) => new Promise<any>(async (resolve, reject) => {
-
-	const _session = deepcopy(session);
-
-	delete _session._id;
-
-	resolve(_session);
-});
diff --git a/src/api/stream/messaging.ts b/src/api/stream/messaging.ts
index 3f505cfafa..a4a12426a3 100644
--- a/src/api/stream/messaging.ts
+++ b/src/api/stream/messaging.ts
@@ -2,7 +2,7 @@ import * as websocket from 'websocket';
 import * as redis from 'redis';
 import read from '../common/read-messaging-message';
 
-export default function messagingStream(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
+export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
 	const otherparty = request.resourceURL.query.otherparty;
 
 	// Subscribe messaging stream
diff --git a/src/api/stream/othello-game.ts b/src/api/stream/othello-game.ts
new file mode 100644
index 0000000000..ab91ef6422
--- /dev/null
+++ b/src/api/stream/othello-game.ts
@@ -0,0 +1,12 @@
+import * as websocket from 'websocket';
+import * as redis from 'redis';
+
+export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient): void {
+	const game = request.resourceURL.query.game;
+
+	// Subscribe game stream
+	subscriber.subscribe(`misskey:othello-game-stream:${game}`);
+	subscriber.on('message', (_, data) => {
+		connection.send(data);
+	});
+}
diff --git a/src/api/stream/othello-matching.ts b/src/api/stream/othello-matching.ts
new file mode 100644
index 0000000000..f30ce6eb0a
--- /dev/null
+++ b/src/api/stream/othello-matching.ts
@@ -0,0 +1,12 @@
+import * as websocket from 'websocket';
+import * as redis from 'redis';
+
+export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
+	const otherparty = request.resourceURL.query.otherparty;
+
+	// Subscribe matching stream
+	subscriber.subscribe(`misskey:othello-matching:${user._id}-${otherparty}`);
+	subscriber.on('message', (_, data) => {
+		connection.send(data);
+	});
+}
diff --git a/src/api/stream/requests.ts b/src/api/stream/requests.ts
index 2c36e58b6e..d7bb5e6c5c 100644
--- a/src/api/stream/requests.ts
+++ b/src/api/stream/requests.ts
@@ -3,7 +3,7 @@ import Xev from 'xev';
 
 const ev = new Xev();
 
-export default function homeStream(request: websocket.request, connection: websocket.connection): void {
+export default function(request: websocket.request, connection: websocket.connection): void {
 	const onRequest = request => {
 		connection.send(JSON.stringify({
 			type: 'request',
diff --git a/src/api/stream/server.ts b/src/api/stream/server.ts
index 0db6643d40..4ca2ad1b10 100644
--- a/src/api/stream/server.ts
+++ b/src/api/stream/server.ts
@@ -3,7 +3,7 @@ import Xev from 'xev';
 
 const ev = new Xev();
 
-export default function homeStream(request: websocket.request, connection: websocket.connection): void {
+export default function(request: websocket.request, connection: websocket.connection): void {
 	const onStats = stats => {
 		connection.send(JSON.stringify({
 			type: 'stats',
diff --git a/src/api/streaming.ts b/src/api/streaming.ts
index c06d64c245..66c2e0cec0 100644
--- a/src/api/streaming.ts
+++ b/src/api/streaming.ts
@@ -10,6 +10,8 @@ import homeStream from './stream/home';
 import driveStream from './stream/drive';
 import messagingStream from './stream/messaging';
 import messagingIndexStream from './stream/messaging-index';
+import othelloGameStream from './stream/othello-game';
+import othelloMatchingStream from './stream/othello-matching';
 import serverStream from './stream/server';
 import requestsStream from './stream/requests';
 import channelStream from './stream/channel';
@@ -62,6 +64,8 @@ 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-game' ? othelloGameStream :
+			request.resourceURL.pathname === '/othello-matching' ? othelloMatchingStream :
 			null;
 
 		if (channel !== null) {
diff --git a/src/web/app/common/views/components/messaging.vue b/src/web/app/common/views/components/messaging.vue
index a94a996685..2ec488c247 100644
--- a/src/web/app/common/views/components/messaging.vue
+++ b/src/web/app/common/views/components/messaging.vue
@@ -89,7 +89,7 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.off('message', this.onMessage);
 		this.connection.off('read', this.onRead);
-		(this as any).os.stream.dispose(this.connectionId);
+		(this as any).streams.messagingIndexStream.dispose(this.connectionId);
 	},
 	methods: {
 		isMe(message) {
diff --git a/src/web/app/common/views/components/othello.game.vue b/src/web/app/common/views/components/othello.game.vue
new file mode 100644
index 0000000000..3d3ffb2c07
--- /dev/null
+++ b/src/web/app/common/views/components/othello.game.vue
@@ -0,0 +1,29 @@
+<template>
+<div>
+	<header>黒:{{ game.black_user.name }} 白:{{ game.white_user.name }}</header>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['game'],
+	data() {
+		return {
+			game: null,
+			connection: null,
+			connectionId: null
+		};
+	},
+	mounted() {
+		this.connection = (this as any).os.streams.othelloGameStream.getConnection();
+		this.connectionId = (this as any).os.streams.othelloGameStream.use();
+
+		this.connection.on('set', this.onSet);
+	},
+	beforeDestroy() {
+		this.connection.off('set', this.onSet);
+		(this as any).streams.othelloGameStream.dispose(this.connectionId);
+	},
+});
+</script>
diff --git a/src/web/app/common/views/components/othello.vue b/src/web/app/common/views/components/othello.vue
index 136046db24..f5abcfb103 100644
--- a/src/web/app/common/views/components/othello.vue
+++ b/src/web/app/common/views/components/othello.vue
@@ -1,16 +1,19 @@
 <template>
 <div>
-	<div v-if="session">
-		<h1>相手を待っています<mk-ellipsis/></h1>
-		<p>セッションID:<code>{{ session.code }}</code></p>
-		<p>対戦したい相手に上記のセッションIDを伝えてください。相手が「セッションイン」でセッションIDを入力すると、対局が開始されます。</p>
+	<div v-if="game">
+		<x-game :game="game"/>
+	</div>
+	<div v-if="matching">
+		<h1><b>{{ matching.name }}</b>を待っています<mk-ellipsis/></h1>
 	</div>
 	<div v-else>
 		<h1>Misskey Othello</h1>
 		<p>他のMisskeyユーザーとオセロで対戦しよう。</p>
 		<button>フリーマッチ(準備中)</button>
-		<button @click="inSession">セッションイン</button>
-		<button @click="createSession">セッションを作成する</button>
+		<button @click="match">指名</button>
+		<section>
+			<h2>対局の招待があります:</h2>
+		</section>
 		<section>
 			<h2>過去の対局</h2>
 		</section>
@@ -20,11 +23,70 @@
 
 <script lang="ts">
 import Vue from 'vue';
-export default Vue.extend({
-	methods: {
-		createSession() {
-			(this as any).api('othello/sessions/create');
+import XGame from './othello.game.vue';
 
+export default Vue.extend({
+	components: {
+		XGame
+	},
+	data() {
+		return {
+			game: null,
+			games: [],
+			gamesFetching: true,
+			gamesMoreFetching: false,
+			matching: false,
+			invitations: [],
+			connection: null,
+			connectionId: null
+		};
+	},
+	mounted() {
+		this.connection = (this as any).os.streams.othelloStream.getConnection();
+		this.connectionId = (this as any).os.streams.othelloStream.use();
+
+		this.connection.on('macthed', this.onMatched);
+		this.connection.on('invited', this.onInvited);
+
+		(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);
+		});
+	},
+	beforeDestroy() {
+		this.connection.off('macthed', this.onMatched);
+		this.connection.off('invited', this.onInvited);
+		(this as any).streams.othelloStream.dispose(this.connectionId);
+	},
+	methods: {
+		match() {
+			(this as any).apis.input({
+				title: 'ユーザー名を入力してください'
+			}).then(username => {
+				(this as any).api('users/show', {
+					username
+				}).then(user => {
+					(this as any).api('othello/match', {
+						user_id: user.id
+					}).then(res => {
+						if (res == null) {
+							this.matching = user;
+						} else {
+							this.game = res;
+						}
+					});
+				});
+			});
+		},
+		onMatched(game) {
+			this.game = game;
+		},
+		onInvited(invite) {
+			this.invitations.unshift(invite);
 		}
 	}
 });

From 161fd4afab323ca6bf491def473f84bb7557b481 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 7 Mar 2018 17:48:32 +0900
Subject: [PATCH 3/7] wip

---
 src/api/endpoints.ts                          |  20 ++
 src/api/endpoints/othello/games.ts            |  22 ++
 src/api/endpoints/othello/invitations.ts      |  11 +
 src/api/endpoints/othello/match.ts            |  22 +-
 src/api/endpoints/othello/match/cancel.ts     |   9 +
 src/api/event.ts                              |   6 +
 src/api/models/othello-game.ts                |  20 +-
 src/api/models/othello-matching.ts            |  31 +++
 src/api/stream/othello-game.ts                |  63 +++++-
 .../{othello-matching.ts => othello.ts}       |   6 +-
 src/api/streaming.ts                          |   4 +-
 src/common/othello.ts                         |  66 ++++--
 src/web/app/common/mios.ts                    |  16 +-
 .../{channel-stream.ts => channel.ts}         |   0
 .../scripts/streaming/drive-stream-manager.ts |  20 --
 .../common/scripts/streaming/drive-stream.ts  |  12 --
 src/web/app/common/scripts/streaming/drive.ts |  31 +++
 .../scripts/streaming/home-stream-manager.ts  |  23 --
 .../streaming/{home-stream.ts => home.ts}     |  23 +-
 .../messaging-index-stream-manager.ts         |  20 --
 .../streaming/messaging-index-stream.ts       |  12 --
 .../scripts/streaming/messaging-index.ts      |  31 +++
 .../{messaging-stream.ts => messaging.ts}     |   2 +-
 .../common/scripts/streaming/othello-game.ts  |  10 +
 .../app/common/scripts/streaming/othello.ts   |  28 +++
 .../streaming/requests-stream-manager.ts      |  12 --
 .../scripts/streaming/requests-stream.ts      |  10 -
 .../app/common/scripts/streaming/requests.ts  |  21 ++
 .../streaming/server-stream-manager.ts        |  12 --
 .../common/scripts/streaming/server-stream.ts |  10 -
 .../app/common/scripts/streaming/server.ts    |  21 ++
 .../views/components/messaging-room.vue       |   4 +-
 .../common/views/components/othello.game.vue  | 120 ++++++++++-
 .../app/common/views/components/othello.vue   | 203 ++++++++++++++++--
 .../desktop/views/components/game-window.vue  |  24 +++
 .../views/components/ui.header.nav.vue        |  19 +-
 .../desktop/views/widgets/channel.channel.vue |   2 +-
 37 files changed, 747 insertions(+), 219 deletions(-)
 create mode 100644 src/api/endpoints/othello/games.ts
 create mode 100644 src/api/endpoints/othello/invitations.ts
 create mode 100644 src/api/endpoints/othello/match/cancel.ts
 rename src/api/stream/{othello-matching.ts => othello.ts} (62%)
 rename src/web/app/common/scripts/streaming/{channel-stream.ts => channel.ts} (100%)
 delete mode 100644 src/web/app/common/scripts/streaming/drive-stream-manager.ts
 delete mode 100644 src/web/app/common/scripts/streaming/drive-stream.ts
 create mode 100644 src/web/app/common/scripts/streaming/drive.ts
 delete mode 100644 src/web/app/common/scripts/streaming/home-stream-manager.ts
 rename src/web/app/common/scripts/streaming/{home-stream.ts => home.ts} (66%)
 delete mode 100644 src/web/app/common/scripts/streaming/messaging-index-stream-manager.ts
 delete mode 100644 src/web/app/common/scripts/streaming/messaging-index-stream.ts
 create mode 100644 src/web/app/common/scripts/streaming/messaging-index.ts
 rename src/web/app/common/scripts/streaming/{messaging-stream.ts => messaging.ts} (83%)
 create mode 100644 src/web/app/common/scripts/streaming/othello-game.ts
 create mode 100644 src/web/app/common/scripts/streaming/othello.ts
 delete mode 100644 src/web/app/common/scripts/streaming/requests-stream-manager.ts
 delete mode 100644 src/web/app/common/scripts/streaming/requests-stream.ts
 create mode 100644 src/web/app/common/scripts/streaming/requests.ts
 delete mode 100644 src/web/app/common/scripts/streaming/server-stream-manager.ts
 delete mode 100644 src/web/app/common/scripts/streaming/server-stream.ts
 create mode 100644 src/web/app/common/scripts/streaming/server.ts
 create mode 100644 src/web/app/desktop/views/components/game-window.vue

diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts
index cbc016f20f..fad6667111 100644
--- a/src/api/endpoints.ts
+++ b/src/api/endpoints.ts
@@ -233,6 +233,26 @@ const endpoints: Endpoint[] = [
 		kind: 'notification-read'
 	},
 
+	{
+		name: 'othello/match',
+		withCredential: true
+	},
+
+	{
+		name: 'othello/match/cancel',
+		withCredential: true
+	},
+
+	{
+		name: 'othello/invitations',
+		withCredential: true
+	},
+
+	{
+		name: 'othello/games',
+		withCredential: true
+	},
+
 	{
 		name: 'mute/create',
 		withCredential: true,
diff --git a/src/api/endpoints/othello/games.ts b/src/api/endpoints/othello/games.ts
new file mode 100644
index 0000000000..62388b01d4
--- /dev/null
+++ b/src/api/endpoints/othello/games.ts
@@ -0,0 +1,22 @@
+import $ from 'cafy';
+import Game, { pack } from '../../models/othello-game';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'my' parameter
+	const [my = false, myErr] = $(params.my).boolean().$;
+	if (myErr) return rej('invalid my param');
+
+	const q = my ? {
+		$or: [{
+			black_user_id: user._id
+		}, {
+			white_user_id: user._id
+		}]
+	} : {};
+
+	// Fetch games
+	const games = await Game.find(q);
+
+	// Reponse
+	res(Promise.all(games.map(async (g) => await pack(g, user))));
+});
diff --git a/src/api/endpoints/othello/invitations.ts b/src/api/endpoints/othello/invitations.ts
new file mode 100644
index 0000000000..f462ef0bf9
--- /dev/null
+++ b/src/api/endpoints/othello/invitations.ts
@@ -0,0 +1,11 @@
+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({
+		child_id: user._id
+	});
+
+	// Reponse
+	res(Promise.all(invitations.map(async (i) => await packMatching(i, user))));
+});
diff --git a/src/api/endpoints/othello/match.ts b/src/api/endpoints/othello/match.ts
index 2dc22d11f9..65243a5571 100644
--- a/src/api/endpoints/othello/match.ts
+++ b/src/api/endpoints/othello/match.ts
@@ -1,6 +1,6 @@
 import $ from 'cafy';
-import Matching from '../../models/othello-matchig';
-import Game, { pack } from '../../models/othello-game';
+import Matching, { pack as packMatching } from '../../models/othello-matching';
+import Game, { pack as packGame } from '../../models/othello-game';
 import User from '../../models/user';
 import { publishOthelloStream } from '../../event';
 
@@ -33,17 +33,14 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 			created_at: new Date(),
 			black_user_id: parentIsBlack ? exist.parent_id : user._id,
 			white_user_id: parentIsBlack ? user._id : exist.parent_id,
+			turn_user_id: parentIsBlack ? exist.parent_id : user._id,
 			logs: []
 		});
 
-		const packedGame = await pack(game);
-
 		// Reponse
-		res(packedGame);
+		res(await packGame(game, user));
 
-		publishOthelloStream(exist.parent_id, 'matched', {
-			game
-		});
+		publishOthelloStream(exist.parent_id, 'matched', await packGame(game, exist.parent_id));
 	} else {
 		// Fetch child
 		const child = await User.findOne({
@@ -64,17 +61,16 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		});
 
 		// セッションを作成
-		await Matching.insert({
+		const matching = await Matching.insert({
+			created_at: new Date(),
 			parent_id: user._id,
 			child_id: child._id
 		});
 
 		// Reponse
-		res(204);
+		res();
 
 		// 招待
-		publishOthelloStream(child._id, 'invited', {
-			user_id: user._id
-		});
+		publishOthelloStream(child._id, 'invited', await packMatching(matching, child));
 	}
 });
diff --git a/src/api/endpoints/othello/match/cancel.ts b/src/api/endpoints/othello/match/cancel.ts
new file mode 100644
index 0000000000..6f751ef835
--- /dev/null
+++ b/src/api/endpoints/othello/match/cancel.ts
@@ -0,0 +1,9 @@
+import Matching from '../../../models/othello-matching';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	await Matching.remove({
+		parent_id: user._id
+	});
+
+	res();
+});
diff --git a/src/api/event.ts b/src/api/event.ts
index e68082f0a9..4c9cc18e4d 100644
--- a/src/api/event.ts
+++ b/src/api/event.ts
@@ -42,6 +42,10 @@ class MisskeyEvent {
 		this.publish(`othello-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 publishChannelStream(channelId: ID, type: string, value?: any): void {
 		this.publish(`channel-stream:${channelId}`, type, typeof value === 'undefined' ? null : value);
 	}
@@ -71,4 +75,6 @@ export const publishMessagingIndexStream = ev.publishMessagingIndexStream.bind(e
 
 export const publishOthelloStream = ev.publishOthelloStream.bind(ev);
 
+export const publishOthelloGameStream = ev.publishOthelloGameStream.bind(ev);
+
 export const publishChannelStream = ev.publishChannelStream.bind(ev);
diff --git a/src/api/models/othello-game.ts b/src/api/models/othello-game.ts
index a6beaaf9c7..b9fd94ebc0 100644
--- a/src/api/models/othello-game.ts
+++ b/src/api/models/othello-game.ts
@@ -1,6 +1,7 @@
 import * as mongo from 'mongodb';
 import deepcopy = require('deepcopy');
 import db from '../../db/mongodb';
+import { IUser, pack as packUser } from './user';
 
 const Game = db.get<IGame>('othello_games');
 export default Game;
@@ -15,19 +16,30 @@ export interface IGame {
 
 /**
  * Pack an othello game for API response
- *
- * @param {any} game
- * @return {Promise<any>}
  */
 export const pack = (
-	game: any
+	game: 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 _game = deepcopy(game);
 
 	// Rename _id to id
 	_game.id = _game._id;
 	delete _game._id;
 
+	// Populate user
+	_game.black_user = await packUser(_game.black_user_id, meId);
+	_game.white_user = await packUser(_game.white_user_id, meId);
+
 	resolve(_game);
 });
diff --git a/src/api/models/othello-matching.ts b/src/api/models/othello-matching.ts
index bd7aeef3cf..89fcd6df6a 100644
--- a/src/api/models/othello-matching.ts
+++ b/src/api/models/othello-matching.ts
@@ -1,11 +1,42 @@
 import * as mongo from 'mongodb';
+import deepcopy = require('deepcopy');
 import db from '../../db/mongodb';
+import { IUser, pack as packUser } from './user';
 
 const Matching = db.get<IMatching>('othello_matchings');
 export default Matching;
 
 export interface IMatching {
 	_id: mongo.ObjectID;
+	created_at: Date;
 	parent_id: mongo.ObjectID;
 	child_id: 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);
+
+	delete _matching._id;
+
+	// Populate user
+	_matching.parent = await packUser(_matching.parent_id, meId);
+	_matching.child = await packUser(_matching.child_id, meId);
+
+	resolve(_matching);
+});
diff --git a/src/api/stream/othello-game.ts b/src/api/stream/othello-game.ts
index ab91ef6422..17cdd3a9e7 100644
--- a/src/api/stream/othello-game.ts
+++ b/src/api/stream/othello-game.ts
@@ -1,12 +1,69 @@
 import * as websocket from 'websocket';
 import * as redis from 'redis';
+import Game from '../models/othello-game';
+import { publishOthelloGameStream } from '../event';
+import Othello from '../../common/othello';
 
-export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient): void {
-	const game = request.resourceURL.query.game;
+export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
+	const gameId = request.resourceURL.query.game;
 
 	// Subscribe game stream
-	subscriber.subscribe(`misskey:othello-game-stream:${game}`);
+	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 'set':
+				if (msg.pos == null) return;
+				const pos = msg.pos;
+
+				const game = await Game.findOne({ _id: gameId });
+
+				const o = new Othello();
+
+				game.logs.forEach(log => {
+					o.set(log.color, log.pos);
+				});
+
+				const myColor = game.black_user_id.equals(user._id) ? 'black' : 'white';
+				const opColor = myColor == 'black' ? 'white' : 'black';
+
+				if (!o.canReverse(myColor, pos)) return;
+				o.set(myColor, pos);
+
+				let turn;
+				if (o.getPattern(opColor).length > 0) {
+					turn = myColor == 'black' ? game.white_user_id : game.black_user_id;
+				} else {
+					turn = myColor == 'black' ? game.black_user_id : game.white_user_id;
+				}
+
+				const log = {
+					at: new Date(),
+					color: myColor,
+					pos
+				};
+
+				await Game.update({
+					_id: gameId
+				}, {
+					$set: {
+						turn_user_id: turn
+					},
+					$push: {
+						logs: log
+					}
+				});
+
+				publishOthelloGameStream(gameId, 'set', {
+					color: myColor,
+					pos
+				});
+				break;
+		}
+	});
 }
diff --git a/src/api/stream/othello-matching.ts b/src/api/stream/othello.ts
similarity index 62%
rename from src/api/stream/othello-matching.ts
rename to src/api/stream/othello.ts
index f30ce6eb0a..5056eb535c 100644
--- a/src/api/stream/othello-matching.ts
+++ b/src/api/stream/othello.ts
@@ -2,10 +2,8 @@ import * as websocket from 'websocket';
 import * as redis from 'redis';
 
 export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
-	const otherparty = request.resourceURL.query.otherparty;
-
-	// Subscribe matching stream
-	subscriber.subscribe(`misskey:othello-matching:${user._id}-${otherparty}`);
+	// Subscribe othello stream
+	subscriber.subscribe(`misskey:othello-stream:${user._id}`);
 	subscriber.on('message', (_, data) => {
 		connection.send(data);
 	});
diff --git a/src/api/streaming.ts b/src/api/streaming.ts
index 66c2e0cec0..7d67ba9574 100644
--- a/src/api/streaming.ts
+++ b/src/api/streaming.ts
@@ -11,7 +11,7 @@ import driveStream from './stream/drive';
 import messagingStream from './stream/messaging';
 import messagingIndexStream from './stream/messaging-index';
 import othelloGameStream from './stream/othello-game';
-import othelloMatchingStream from './stream/othello-matching';
+import othelloStream from './stream/othello';
 import serverStream from './stream/server';
 import requestsStream from './stream/requests';
 import channelStream from './stream/channel';
@@ -65,7 +65,7 @@ module.exports = (server: http.Server) => {
 			request.resourceURL.pathname === '/messaging' ? messagingStream :
 			request.resourceURL.pathname === '/messaging-index' ? messagingIndexStream :
 			request.resourceURL.pathname === '/othello-game' ? othelloGameStream :
-			request.resourceURL.pathname === '/othello-matching' ? othelloMatchingStream :
+			request.resourceURL.pathname === '/othello' ? othelloStream :
 			null;
 
 		if (channel !== null) {
diff --git a/src/common/othello.ts b/src/common/othello.ts
index 858fc33158..fc27d72dcd 100644
--- a/src/common/othello.ts
+++ b/src/common/othello.ts
@@ -1,37 +1,38 @@
 const BOARD_SIZE = 8;
 
 export default class Othello {
-	public board: Array<Array<'black' | 'white'>>;
+	public board: Array<'black' | 'white'>;
 
 	/**
 	 * ゲームを初期化します
 	 */
 	constructor() {
 		this.board = [
-			[null, null, null, null, null, null, null, null],
-			[null, null, null, null, null, null, null, null],
-			[null, null, null, null, null, null, null, null],
-			[null, null, null, 'black', 'white', null, null, null],
-			[null, null, null, 'white', 'black', null, null, null],
-			[null, null, null, null, null, null, null, null],
-			[null, null, null, null, null, null, null, null],
-			[null, null, null, null, null, null, null, null]
+			null, null, null, null, null, null, null, null,
+			null, null, null, null, null, null, null, null,
+			null, null, null, null, null, null, null, null,
+			null, null, null, 'white', 'black', null, null, null,
+			null, null, null, 'black', 'white', null, null, null,
+			null, null, null, null, null, null, null, null,
+			null, null, null, null, null, null, null, null,
+			null, null, null, null, null, null, null, null
 		];
 	}
 
 	public setByNumber(color, n) {
 		const ps = this.getPattern(color);
-		this.set(color, ps[n][0], ps[n][1]);
+		this.set2(color, ps[n][0], ps[n][1]);
 	}
 
 	private write(color, x, y) {
-		this.board[y][x] = color;
+		const pos = x + (y * 8);
+		this.board[pos] = color;
 	}
 
 	/**
 	 * 石を配置します
 	 */
-	public set(color, x, y) {
+	public set2(color, x, y) {
 		this.write(color, x, y);
 
 		const reverses = this.getReverse(color, x, y);
@@ -89,24 +90,42 @@ export default class Othello {
 		});
 	}
 
+	public set(color, pos) {
+		const x = pos % BOARD_SIZE;
+		const y = Math.floor(pos / BOARD_SIZE);
+		this.set2(color, x, y);
+	}
+
+	public get(x, y) {
+		const pos = x + (y * 8);
+		return this.board[pos];
+	}
+
 	/**
 	 * 打つことができる場所を取得します
 	 */
 	public getPattern(myColor): number[][] {
 		const result = [];
-		this.board.forEach((stones, y) => stones.forEach((stone, x) => {
+		this.board.forEach((stone, i) => {
 			if (stone != null) return;
-			if (this.canReverse(myColor, x, y)) result.push([x, y]);
-		}));
+			const x = i % BOARD_SIZE;
+			const y = Math.floor(i / BOARD_SIZE);
+			if (this.canReverse2(myColor, x, y)) result.push([x, y]);
+		});
 		return result;
 	}
 
 	/**
 	 * 指定の位置に石を打つことができるかどうか(相手の石を1つでも反転させられるか)を取得します
 	 */
-	public canReverse(myColor, targetx, targety): boolean {
+	public canReverse2(myColor, targetx, targety): boolean {
 		return this.getReverse(myColor, targetx, targety) !== null;
 	}
+	public canReverse(myColor, pos): boolean {
+		const x = pos % BOARD_SIZE;
+		const y = Math.floor(pos / BOARD_SIZE);
+		return this.getReverse(myColor, x, y) !== null;
+	}
 
 	private getReverse(myColor, targetx, targety): number[] {
 		const opponentColor = myColor == 'black' ? 'white' : 'black';
@@ -117,11 +136,11 @@ export default class Othello {
 			return (x, y): any => {
 				if (breaked) {
 					return;
-				} else if (this.board[y][x] == myColor && opponentStoneFound) {
+				} else if (this.get(x, y) == myColor && opponentStoneFound) {
 					return true;
-				} else if (this.board[y][x] == myColor && !opponentStoneFound) {
+				} else if (this.get(x, y) == myColor && !opponentStoneFound) {
 					breaked = true;
-				} else if (this.board[y][x] == opponentColor) {
+				} else if (this.get(x, y) == opponentColor) {
 					opponentStoneFound = true;
 				} else {
 					breaked = true;
@@ -210,12 +229,13 @@ export default class Othello {
 
 	public toString(): string {
 		//return this.board.map(row => row.map(state => state === 'black' ? '●' : state === 'white' ? '○' : '┼').join('')).join('\n');
-		return this.board.map(row => row.map(state => state === 'black' ? '⚫️' : state === 'white' ? '⚪️' : '🔹').join('')).join('\n');
+		//return this.board.map(row => row.map(state => state === 'black' ? '⚫️' : state === 'white' ? '⚪️' : '🔹').join('')).join('\n');
+		return 'wip';
 	}
 
 	public toPatternString(color): string {
 		//const num = ['０', '１', '２', '３', '４', '５', '６', '７', '８', '９'];
-		const num = ['0️⃣', '1️⃣', '2️⃣', '3️⃣', '4️⃣', '5️⃣', '6️⃣', '7️⃣', '8️⃣', '9️⃣', '🔟', '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🍍'];
+		/*const num = ['0️⃣', '1️⃣', '2️⃣', '3️⃣', '4️⃣', '5️⃣', '6️⃣', '7️⃣', '8️⃣', '9️⃣', '🔟', '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🍍'];
 
 		const pattern = this.getPattern(color);
 
@@ -223,7 +243,9 @@ export default class Othello {
 			const i = pattern.findIndex(p => p[0] == x && p[1] == y);
 			//return state === 'black' ? '●' : state === 'white' ? '○' : i != -1 ? num[i] : '┼';
 			return state === 'black' ? '⚫️' : state === 'white' ? '⚪️' : i != -1 ? num[i] : '🔹';
-		}).join('')).join('\n');
+		}).join('')).join('\n');*/
+
+		return 'wip';
 	}
 }
 
diff --git a/src/web/app/common/mios.ts b/src/web/app/common/mios.ts
index cbb4400a73..3690d3171d 100644
--- a/src/web/app/common/mios.ts
+++ b/src/web/app/common/mios.ts
@@ -4,11 +4,12 @@ import * as merge from 'object-assign-deep';
 
 import { host, apiUrl, swPublickey, version, lang, googleMapsApiKey } from '../config';
 import Progress from './scripts/loading';
-import HomeStreamManager from './scripts/streaming/home-stream-manager';
-import DriveStreamManager from './scripts/streaming/drive-stream-manager';
-import ServerStreamManager from './scripts/streaming/server-stream-manager';
-import RequestsStreamManager from './scripts/streaming/requests-stream-manager';
-import MessagingIndexStreamManager from './scripts/streaming/messaging-index-stream-manager';
+import { HomeStreamManager } from './scripts/streaming/home';
+import { DriveStreamManager } from './scripts/streaming/drive';
+import { ServerStreamManager } from './scripts/streaming/server';
+import { RequestsStreamManager } from './scripts/streaming/requests';
+import { MessagingIndexStreamManager } from './scripts/streaming/messaging-index';
+import { OthelloStreamManager } from './scripts/streaming/othello';
 
 import Err from '../common/views/components/connect-failed.vue';
 
@@ -117,11 +118,13 @@ export default class MiOS extends EventEmitter {
 		serverStream: ServerStreamManager;
 		requestsStream: RequestsStreamManager;
 		messagingIndexStream: MessagingIndexStreamManager;
+		othelloStream: OthelloStreamManager;
 	} = {
 		driveStream: null,
 		serverStream: null,
 		requestsStream: null,
-		messagingIndexStream: null
+		messagingIndexStream: null,
+		othelloStream: null
 	};
 
 	/**
@@ -169,6 +172,7 @@ export default class MiOS extends EventEmitter {
 			// Init other stream manager
 			this.streams.driveStream = new DriveStreamManager(this.i);
 			this.streams.messagingIndexStream = new MessagingIndexStreamManager(this.i);
+			this.streams.othelloStream = new OthelloStreamManager(this.i);
 		});
 
 		if (this.debug) {
diff --git a/src/web/app/common/scripts/streaming/channel-stream.ts b/src/web/app/common/scripts/streaming/channel.ts
similarity index 100%
rename from src/web/app/common/scripts/streaming/channel-stream.ts
rename to src/web/app/common/scripts/streaming/channel.ts
diff --git a/src/web/app/common/scripts/streaming/drive-stream-manager.ts b/src/web/app/common/scripts/streaming/drive-stream-manager.ts
deleted file mode 100644
index 8acdd7cbba..0000000000
--- a/src/web/app/common/scripts/streaming/drive-stream-manager.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import StreamManager from './stream-manager';
-import Connection from './drive-stream';
-
-export default class DriveStreamManager extends StreamManager<Connection> {
-	private me;
-
-	constructor(me) {
-		super();
-
-		this.me = me;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new Connection(this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/web/app/common/scripts/streaming/drive-stream.ts b/src/web/app/common/scripts/streaming/drive-stream.ts
deleted file mode 100644
index 0da3f12554..0000000000
--- a/src/web/app/common/scripts/streaming/drive-stream.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import Stream from './stream';
-
-/**
- * Drive stream connection
- */
-export default class Connection extends Stream {
-	constructor(me) {
-		super('drive', {
-			i: me.token
-		});
-	}
-}
diff --git a/src/web/app/common/scripts/streaming/drive.ts b/src/web/app/common/scripts/streaming/drive.ts
new file mode 100644
index 0000000000..5805e58033
--- /dev/null
+++ b/src/web/app/common/scripts/streaming/drive.ts
@@ -0,0 +1,31 @@
+import Stream from './stream';
+import StreamManager from './stream-manager';
+
+/**
+ * Drive stream connection
+ */
+export class DriveStream extends Stream {
+	constructor(me) {
+		super('drive', {
+			i: me.token
+		});
+	}
+}
+
+export class DriveStreamManager extends StreamManager<DriveStream> {
+	private me;
+
+	constructor(me) {
+		super();
+
+		this.me = me;
+	}
+
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new DriveStream(this.me);
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/web/app/common/scripts/streaming/home-stream-manager.ts b/src/web/app/common/scripts/streaming/home-stream-manager.ts
deleted file mode 100644
index ab56d5a73a..0000000000
--- a/src/web/app/common/scripts/streaming/home-stream-manager.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import StreamManager from './stream-manager';
-import Connection from './home-stream';
-import MiOS from '../../mios';
-
-export default class HomeStreamManager extends StreamManager<Connection> {
-	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 Connection(this.os, this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/web/app/common/scripts/streaming/home-stream.ts b/src/web/app/common/scripts/streaming/home.ts
similarity index 66%
rename from src/web/app/common/scripts/streaming/home-stream.ts
rename to src/web/app/common/scripts/streaming/home.ts
index 3516705e22..1f110bfd3b 100644
--- a/src/web/app/common/scripts/streaming/home-stream.ts
+++ b/src/web/app/common/scripts/streaming/home.ts
@@ -1,12 +1,13 @@
 import * as merge from 'object-assign-deep';
 
 import Stream from './stream';
+import StreamManager from './stream-manager';
 import MiOS from '../../mios';
 
 /**
  * Home stream connection
  */
-export default class Connection extends Stream {
+export class HomeStream extends Stream {
 	constructor(os: MiOS, me) {
 		super('', {
 			i: me.token
@@ -34,3 +35,23 @@ export default class Connection extends Stream {
 		});
 	}
 }
+
+export class HomeStreamManager extends StreamManager<HomeStream> {
+	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 HomeStream(this.os, this.me);
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/web/app/common/scripts/streaming/messaging-index-stream-manager.ts b/src/web/app/common/scripts/streaming/messaging-index-stream-manager.ts
deleted file mode 100644
index 0f08b01481..0000000000
--- a/src/web/app/common/scripts/streaming/messaging-index-stream-manager.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import StreamManager from './stream-manager';
-import Connection from './messaging-index-stream';
-
-export default class MessagingIndexStreamManager extends StreamManager<Connection> {
-	private me;
-
-	constructor(me) {
-		super();
-
-		this.me = me;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new Connection(this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/web/app/common/scripts/streaming/messaging-index-stream.ts b/src/web/app/common/scripts/streaming/messaging-index-stream.ts
deleted file mode 100644
index 8015c840b4..0000000000
--- a/src/web/app/common/scripts/streaming/messaging-index-stream.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import Stream from './stream';
-
-/**
- * Messaging index stream connection
- */
-export default class Connection extends Stream {
-	constructor(me) {
-		super('messaging-index', {
-			i: me.token
-		});
-	}
-}
diff --git a/src/web/app/common/scripts/streaming/messaging-index.ts b/src/web/app/common/scripts/streaming/messaging-index.ts
new file mode 100644
index 0000000000..69758416dc
--- /dev/null
+++ b/src/web/app/common/scripts/streaming/messaging-index.ts
@@ -0,0 +1,31 @@
+import Stream from './stream';
+import StreamManager from './stream-manager';
+
+/**
+ * Messaging index stream connection
+ */
+export class MessagingIndexStream extends Stream {
+	constructor(me) {
+		super('messaging-index', {
+			i: me.token
+		});
+	}
+}
+
+export class MessagingIndexStreamManager extends StreamManager<MessagingIndexStream> {
+	private me;
+
+	constructor(me) {
+		super();
+
+		this.me = me;
+	}
+
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new MessagingIndexStream(this.me);
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/web/app/common/scripts/streaming/messaging-stream.ts b/src/web/app/common/scripts/streaming/messaging.ts
similarity index 83%
rename from src/web/app/common/scripts/streaming/messaging-stream.ts
rename to src/web/app/common/scripts/streaming/messaging.ts
index 68dfc5ec09..1fff2286b3 100644
--- a/src/web/app/common/scripts/streaming/messaging-stream.ts
+++ b/src/web/app/common/scripts/streaming/messaging.ts
@@ -3,7 +3,7 @@ import Stream from './stream';
 /**
  * Messaging stream connection
  */
-export default class Connection extends Stream {
+export class MessagingStream extends Stream {
 	constructor(me, otherparty) {
 		super('messaging', {
 			i: me.token,
diff --git a/src/web/app/common/scripts/streaming/othello-game.ts b/src/web/app/common/scripts/streaming/othello-game.ts
new file mode 100644
index 0000000000..51a435541a
--- /dev/null
+++ b/src/web/app/common/scripts/streaming/othello-game.ts
@@ -0,0 +1,10 @@
+import Stream from './stream';
+
+export class OthelloGameStream extends Stream {
+	constructor(me, game) {
+		super('othello-game', {
+			i: me.token,
+			game: game.id
+		});
+	}
+}
diff --git a/src/web/app/common/scripts/streaming/othello.ts b/src/web/app/common/scripts/streaming/othello.ts
new file mode 100644
index 0000000000..febc5d498a
--- /dev/null
+++ b/src/web/app/common/scripts/streaming/othello.ts
@@ -0,0 +1,28 @@
+import StreamManager from './stream-manager';
+import Stream from './stream';
+
+export class OthelloStream extends Stream {
+	constructor(me) {
+		super('othello', {
+			i: me.token
+		});
+	}
+}
+
+export class OthelloStreamManager extends StreamManager<OthelloStream> {
+	private me;
+
+	constructor(me) {
+		super();
+
+		this.me = me;
+	}
+
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new OthelloStream(this.me);
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/web/app/common/scripts/streaming/requests-stream-manager.ts b/src/web/app/common/scripts/streaming/requests-stream-manager.ts
deleted file mode 100644
index 44db913e78..0000000000
--- a/src/web/app/common/scripts/streaming/requests-stream-manager.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import StreamManager from './stream-manager';
-import Connection from './requests-stream';
-
-export default class RequestsStreamManager extends StreamManager<Connection> {
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new Connection();
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/web/app/common/scripts/streaming/requests-stream.ts b/src/web/app/common/scripts/streaming/requests-stream.ts
deleted file mode 100644
index 22ecea6c07..0000000000
--- a/src/web/app/common/scripts/streaming/requests-stream.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import Stream from './stream';
-
-/**
- * Requests stream connection
- */
-export default class Connection extends Stream {
-	constructor() {
-		super('requests');
-	}
-}
diff --git a/src/web/app/common/scripts/streaming/requests.ts b/src/web/app/common/scripts/streaming/requests.ts
new file mode 100644
index 0000000000..5d199a0742
--- /dev/null
+++ b/src/web/app/common/scripts/streaming/requests.ts
@@ -0,0 +1,21 @@
+import Stream from './stream';
+import StreamManager from './stream-manager';
+
+/**
+ * Requests stream connection
+ */
+export class RequestsStream extends Stream {
+	constructor() {
+		super('requests');
+	}
+}
+
+export class RequestsStreamManager extends StreamManager<RequestsStream> {
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new RequestsStream();
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/web/app/common/scripts/streaming/server-stream-manager.ts b/src/web/app/common/scripts/streaming/server-stream-manager.ts
deleted file mode 100644
index a170daebb9..0000000000
--- a/src/web/app/common/scripts/streaming/server-stream-manager.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import StreamManager from './stream-manager';
-import Connection from './server-stream';
-
-export default class ServerStreamManager extends StreamManager<Connection> {
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new Connection();
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/web/app/common/scripts/streaming/server-stream.ts b/src/web/app/common/scripts/streaming/server-stream.ts
deleted file mode 100644
index b9e0684465..0000000000
--- a/src/web/app/common/scripts/streaming/server-stream.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import Stream from './stream';
-
-/**
- * Server stream connection
- */
-export default class Connection extends Stream {
-	constructor() {
-		super('server');
-	}
-}
diff --git a/src/web/app/common/scripts/streaming/server.ts b/src/web/app/common/scripts/streaming/server.ts
new file mode 100644
index 0000000000..b12198d2fd
--- /dev/null
+++ b/src/web/app/common/scripts/streaming/server.ts
@@ -0,0 +1,21 @@
+import Stream from './stream';
+import StreamManager from './stream-manager';
+
+/**
+ * Server stream connection
+ */
+export class ServerStream extends Stream {
+	constructor() {
+		super('server');
+	}
+}
+
+export class ServerStreamManager extends StreamManager<ServerStream> {
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new ServerStream();
+		}
+
+		return this.connection;
+	}
+}
diff --git a/src/web/app/common/views/components/messaging-room.vue b/src/web/app/common/views/components/messaging-room.vue
index 637fa9cd60..547e9494e5 100644
--- a/src/web/app/common/views/components/messaging-room.vue
+++ b/src/web/app/common/views/components/messaging-room.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import MessagingStreamConnection from '../../scripts/streaming/messaging-stream';
+import { MessagingStream } from '../../scripts/streaming/messaging';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import { url } from '../../../config';
@@ -66,7 +66,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = new MessagingStreamConnection((this as any).os.i, this.user.id);
+		this.connection = new MessagingStream((this as any).os.i, this.user.id);
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
diff --git a/src/web/app/common/views/components/othello.game.vue b/src/web/app/common/views/components/othello.game.vue
index 3d3ffb2c07..cb006a289b 100644
--- a/src/web/app/common/views/components/othello.game.vue
+++ b/src/web/app/common/views/components/othello.game.vue
@@ -1,29 +1,131 @@
 <template>
-<div>
-	<header>黒:{{ game.black_user.name }} 白:{{ game.white_user.name }}</header>
+<div class="root">
+	<header><b>{{ game.black_user.name }}</b>(黒) vs <b>{{ game.white_user.name }}</b>(白)</header>
+	<p class="turn">{{ turn ? 'あなたのターンです' : '相手のターンです' }}<mk-ellipsis v-if="!turn"/></p>
+	<div>
+		<div v-for="(stone, i) in o.board"
+			:class="{ empty: stone == null, myTurn: turn, can: o.canReverse(turn ? myColor : opColor, i) }"
+			@click="set(i)"
+		>
+			<img v-if="stone == 'black'" :src="`${game.black_user.avatar_url}?thumbnail&size=64`" alt="">
+			<img v-if="stone == 'white'" :src="`${game.white_user.avatar_url}?thumbnail&size=64`" alt="">
+		</div>
+	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { OthelloGameStream } from '../../scripts/streaming/othello-game';
+import Othello from '../../../../../common/othello';
+
 export default Vue.extend({
 	props: ['game'],
 	data() {
 		return {
-			game: null,
-			connection: null,
-			connectionId: null
+			o: new Othello(),
+			turn: null,
+			connection: null
 		};
 	},
-	mounted() {
-		this.connection = (this as any).os.streams.othelloGameStream.getConnection();
-		this.connectionId = (this as any).os.streams.othelloGameStream.use();
+	computed: {
+		myColor(): string {
+			return this.game.black_user_id == (this as any).os.i.id ? 'black' : 'white';
+		},
+		opColor(): string {
+			return this.myColor == 'black' ? 'white' : 'black';
+		}
+	},
+	created() {
+		this.game.logs.forEach(log => {
+			this.o.set(log.color, log.pos);
+		});
 
+		this.turn = this.game.turn_user_id == (this as any).os.i.id;
+	},
+	mounted() {
+		this.connection = new OthelloGameStream((this as any).os.i, this.game);
 		this.connection.on('set', this.onSet);
 	},
 	beforeDestroy() {
 		this.connection.off('set', this.onSet);
-		(this as any).streams.othelloGameStream.dispose(this.connectionId);
+		this.connection.close();
 	},
+	methods: {
+		set(pos) {
+			if (!this.turn) return;
+			if (!this.o.canReverse(this.myColor, pos)) return;
+			this.o.set(this.myColor, pos);
+			if (this.o.getPattern(this.opColor).length > 0) {
+				this.turn = !this.turn;
+			}
+			this.connection.send({
+				type: 'set',
+				pos
+			});
+			this.$forceUpdate();
+		},
+		onSet(x) {
+			this.o.set(x.color, x.pos);
+			if (this.o.getPattern(this.myColor).length > 0) {
+				this.turn = true;
+			}
+			this.$forceUpdate();
+		}
+	}
 });
 </script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.root
+	text-align center
+
+	> header
+		padding 8px
+		border-bottom dashed 1px #c4cdd4
+
+	> div
+		display grid
+		grid-template-rows repeat(8, 1fr)
+		grid-template-columns repeat(8, 1fr)
+		grid-gap 4px
+		width 300px
+		height 300px
+		margin 0 auto
+
+		> div
+			background transparent
+			border-radius 6px
+			overflow hidden
+
+			*
+				pointer-events none
+				user-select none
+
+			&.empty
+				border solid 2px #f5f5f5
+
+			&.empty.can
+				background #f5f5f5
+
+			&.empty.myTurn
+				border-color #eee
+
+				&.can
+					background #eee
+					cursor pointer
+
+					&:hover
+						border-color darken($theme-color, 10%)
+						background $theme-color
+
+					&:active
+						background darken($theme-color, 10%)
+
+			> img
+				display block
+				width 100%
+				height 100%
+</style>
diff --git a/src/web/app/common/views/components/othello.vue b/src/web/app/common/views/components/othello.vue
index f5abcfb103..f409f162f6 100644
--- a/src/web/app/common/views/components/othello.vue
+++ b/src/web/app/common/views/components/othello.vue
@@ -1,21 +1,53 @@
 <template>
-<div>
+<div class="mk-othello">
 	<div v-if="game">
 		<x-game :game="game"/>
 	</div>
-	<div v-if="matching">
+	<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 v-else>
-		<h1>Misskey Othello</h1>
-		<p>他のMisskeyユーザーとオセロで対戦しよう。</p>
-		<button>フリーマッチ(準備中)</button>
-		<button @click="match">指名</button>
-		<section>
-			<h2>対局の招待があります:</h2>
+	<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)">
+				<img :src="`${i.parent.avatar_url}?thumbnail&size=32`" alt="">
+				<span class="name"><b>{{ i.parent.name }}</b></span>
+				<span class="username">@{{ i.parent.username }}</span>
+				<mk-time :time="i.created_at"/>
+			</div>
+		</section>
+		<section v-if="myGames.length > 0">
+			<h2>自分の対局</h2>
+			<div class="game" v-for="g in myGames" tabindex="-1" @click="game = g">
+				<img :src="`${g.black_user.avatar_url}?thumbnail&size=32`" alt="">
+				<img :src="`${g.white_user.avatar_url}?thumbnail&size=32`" alt="">
+				<span><b>{{ g.black_user.name }}</b> vs <b>{{ g.white_user.name }}</b></span>
+				<span class="state">{{ g.winner ? '終了' : '進行中' }}</span>
+			</div>
 		</section>
 		<section>
-			<h2>過去の対局</h2>
+			<h2>みんなの対局</h2>
 		</section>
 	</div>
 </div>
@@ -35,7 +67,8 @@ export default Vue.extend({
 			games: [],
 			gamesFetching: true,
 			gamesMoreFetching: false,
-			matching: false,
+			myGames: [],
+			matching: null,
 			invitations: [],
 			connection: null,
 			connectionId: null
@@ -45,9 +78,15 @@ export default Vue.extend({
 		this.connection = (this as any).os.streams.othelloStream.getConnection();
 		this.connectionId = (this as any).os.streams.othelloStream.use();
 
-		this.connection.on('macthed', this.onMatched);
+		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;
@@ -58,9 +97,9 @@ export default Vue.extend({
 		});
 	},
 	beforeDestroy() {
-		this.connection.off('macthed', this.onMatched);
+		this.connection.off('matched', this.onMatched);
 		this.connection.off('invited', this.onInvited);
-		(this as any).streams.othelloStream.dispose(this.connectionId);
+		(this as any).os.streams.othelloStream.dispose(this.connectionId);
 	},
 	methods: {
 		match() {
@@ -82,6 +121,19 @@ export default Vue.extend({
 				});
 			});
 		},
+		cancel() {
+			this.matching = null;
+			(this as any).api('othello/match/cancel');
+		},
+		accept(invitation) {
+			(this as any).api('othello/match', {
+				user_id: invitation.parent.id
+			}).then(game => {
+				if (game) {
+					this.game = game;
+				}
+			});
+		},
 		onMatched(game) {
 			this.game = game;
 		},
@@ -92,3 +144,126 @@ export default Vue.extend({
 });
 </script>
 
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-othello
+	color #677f84
+
+	> .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
+
+		> img
+			vertical-align bottom
+			border-radius 100%
+
+		> span
+			margin 0 8px
+			line-height 32px
+
+	.game
+		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
+
+		> img
+			vertical-align bottom
+			border-radius 100%
+
+		> span
+			margin 0 8px
+			line-height 32px
+</style>
diff --git a/src/web/app/desktop/views/components/game-window.vue b/src/web/app/desktop/views/components/game-window.vue
new file mode 100644
index 0000000000..bf339092aa
--- /dev/null
+++ b/src/web/app/desktop/views/components/game-window.vue
@@ -0,0 +1,24 @@
+<template>
+<mk-window ref="window" width="500px" height="560px" @closed="$destroy">
+	<span slot="header" :class="$style.header">%fa:gamepad%オセロ</span>
+	<mk-othello :class="$style.content"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+.content
+	height 100%
+	overflow auto
+
+</style>
diff --git a/src/web/app/desktop/views/components/ui.header.nav.vue b/src/web/app/desktop/views/components/ui.header.nav.vue
index a5b6ecd6fa..54045db8d4 100644
--- a/src/web/app/desktop/views/components/ui.header.nav.vue
+++ b/src/web/app/desktop/views/components/ui.header.nav.vue
@@ -15,6 +15,13 @@
 					<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>
 				</a>
 			</li>
+			<li class="game">
+				<a @click="game">
+					%fa:gamepad%
+					<p>ゲーム</p>
+					<template v-if="hasGameInvitations">%fa:circle%</template>
+				</a>
+			</li>
 		</template>
 		<li class="ch">
 			<a :href="chUrl" target="_blank">
@@ -22,12 +29,6 @@
 				<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
 			</a>
 		</li>
-		<li class="info">
-			<a href="https://twitter.com/misskey_xyz" target="_blank">
-				%fa:info%
-				<p>%i18n:desktop.tags.mk-ui-header-nav.info%</p>
-			</a>
-		</li>
 	</ul>
 </div>
 </template>
@@ -36,11 +37,13 @@
 import Vue from 'vue';
 import { chUrl } from '../../../config';
 import MkMessagingWindow from './messaging-window.vue';
+import MkGameWindow from './game-window.vue';
 
 export default Vue.extend({
 	data() {
 		return {
 			hasUnreadMessagingMessages: false,
+			hasGameInvitations: false,
 			connection: null,
 			connectionId: null,
 			chUrl
@@ -80,6 +83,10 @@ export default Vue.extend({
 
 		messaging() {
 			(this as any).os.new(MkMessagingWindow);
+		},
+
+		game() {
+			(this as any).os.new(MkGameWindow);
 		}
 	}
 });
diff --git a/src/web/app/desktop/views/widgets/channel.channel.vue b/src/web/app/desktop/views/widgets/channel.channel.vue
index 70dac316cf..02cdf6de13 100644
--- a/src/web/app/desktop/views/widgets/channel.channel.vue
+++ b/src/web/app/desktop/views/widgets/channel.channel.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import ChannelStream from '../../../common/scripts/streaming/channel-stream';
+import ChannelStream from '../../../common/scripts/streaming/channel';
 import XForm from './channel.channel.form.vue';
 import XPost from './channel.channel.post.vue';
 

From 0bca0e8a02e005293663abc4a052ad8f8b2078f3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 7 Mar 2018 18:45:16 +0900
Subject: [PATCH 4/7] wip

---
 src/api/bot/core.ts                           |   4 +-
 src/api/endpoints/othello/games.ts            |   2 +-
 src/api/endpoints/othello/match.ts            |   1 +
 src/api/models/othello-game.ts                |   4 +
 src/api/stream/othello-game.ts                | 105 ++++++++++--------
 .../common/views/components/othello.game.vue  |  54 +++++++--
 .../app/common/views/components/othello.vue   |  10 +-
 7 files changed, 124 insertions(+), 56 deletions(-)

diff --git a/src/api/bot/core.ts b/src/api/bot/core.ts
index 0a073a3127..75564b81e8 100644
--- a/src/api/bot/core.ts
+++ b/src/api/bot/core.ts
@@ -475,8 +475,8 @@ class OthelloContext extends Context {
 		othelloAi('white', this.othello);
 		if (this.othello.getPattern('black').length === 0) {
 			this.bot.clearContext();
-			const blackCount = this.othello.board.map(row => row.filter(s => s == 'black').length).reduce((a, b) => a + b);
-			const whiteCount = this.othello.board.map(row => row.filter(s => s == 'white').length).reduce((a, b) => a + b);
+			const blackCount = this.othello.board.filter(s => s == 'black').length;
+			const whiteCount = this.othello.board.filter(s => s == 'white').length;
 			const winner = blackCount == whiteCount ? '引き分け' : blackCount > whiteCount ? '黒の勝ち' : '白の勝ち';
 			return this.othello.toString() + `\n\n～終了～\n\n黒${blackCount}、白${whiteCount}で${winner}です。`;
 		} else {
diff --git a/src/api/endpoints/othello/games.ts b/src/api/endpoints/othello/games.ts
index 62388b01d4..da85de1c1f 100644
--- a/src/api/endpoints/othello/games.ts
+++ b/src/api/endpoints/othello/games.ts
@@ -3,7 +3,7 @@ import Game, { pack } from '../../models/othello-game';
 
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'my' parameter
-	const [my = false, myErr] = $(params.my).boolean().$;
+	const [my = false, myErr] = $(params.my).optional.boolean().$;
 	if (myErr) return rej('invalid my param');
 
 	const q = my ? {
diff --git a/src/api/endpoints/othello/match.ts b/src/api/endpoints/othello/match.ts
index 65243a5571..cb094bbc65 100644
--- a/src/api/endpoints/othello/match.ts
+++ b/src/api/endpoints/othello/match.ts
@@ -34,6 +34,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 			black_user_id: parentIsBlack ? exist.parent_id : user._id,
 			white_user_id: parentIsBlack ? user._id : exist.parent_id,
 			turn_user_id: parentIsBlack ? exist.parent_id : user._id,
+			is_ended: false,
 			logs: []
 		});
 
diff --git a/src/api/models/othello-game.ts b/src/api/models/othello-game.ts
index b9fd94ebc0..d75baf356b 100644
--- a/src/api/models/othello-game.ts
+++ b/src/api/models/othello-game.ts
@@ -11,6 +11,9 @@ export interface IGame {
 	created_at: Date;
 	black_user_id: mongo.ObjectID;
 	white_user_id: mongo.ObjectID;
+	turn_user_id: mongo.ObjectID;
+	is_ended: boolean;
+	winner_id: mongo.ObjectID;
 	logs: any[];
 }
 
@@ -40,6 +43,7 @@ export const pack = (
 	// Populate user
 	_game.black_user = await packUser(_game.black_user_id, meId);
 	_game.white_user = await packUser(_game.white_user_id, meId);
+	_game.winner = await packUser(_game.winner_id, meId);
 
 	resolve(_game);
 });
diff --git a/src/api/stream/othello-game.ts b/src/api/stream/othello-game.ts
index 17cdd3a9e7..59d964777d 100644
--- a/src/api/stream/othello-game.ts
+++ b/src/api/stream/othello-game.ts
@@ -19,51 +19,68 @@ export default function(request: websocket.request, connection: websocket.connec
 		switch (msg.type) {
 			case 'set':
 				if (msg.pos == null) return;
-				const pos = msg.pos;
-
-				const game = await Game.findOne({ _id: gameId });
-
-				const o = new Othello();
-
-				game.logs.forEach(log => {
-					o.set(log.color, log.pos);
-				});
-
-				const myColor = game.black_user_id.equals(user._id) ? 'black' : 'white';
-				const opColor = myColor == 'black' ? 'white' : 'black';
-
-				if (!o.canReverse(myColor, pos)) return;
-				o.set(myColor, pos);
-
-				let turn;
-				if (o.getPattern(opColor).length > 0) {
-					turn = myColor == 'black' ? game.white_user_id : game.black_user_id;
-				} else {
-					turn = myColor == 'black' ? game.black_user_id : game.white_user_id;
-				}
-
-				const log = {
-					at: new Date(),
-					color: myColor,
-					pos
-				};
-
-				await Game.update({
-					_id: gameId
-				}, {
-					$set: {
-						turn_user_id: turn
-					},
-					$push: {
-						logs: log
-					}
-				});
-
-				publishOthelloGameStream(gameId, 'set', {
-					color: myColor,
-					pos
-				});
+				set(msg.pos);
 				break;
 		}
 	});
+
+	async function set(pos) {
+		const game = await Game.findOne({ _id: gameId });
+
+		if (game.is_ended) return;
+
+		const o = new Othello();
+
+		game.logs.forEach(log => {
+			o.set(log.color, log.pos);
+		});
+
+		const myColor = game.black_user_id.equals(user._id) ? 'black' : 'white';
+		const opColor = myColor == 'black' ? 'white' : 'black';
+
+		if (!o.canReverse(myColor, pos)) return;
+		o.set(myColor, pos);
+
+		let turn;
+		if (o.getPattern(opColor).length > 0) {
+			turn = myColor == 'black' ? game.white_user_id : game.black_user_id;
+		} else if (o.getPattern(myColor).length > 0) {
+			turn = myColor == 'black' ? game.black_user_id : game.white_user_id;
+		} else {
+			turn = null;
+		}
+
+		const isEnded = turn === null;
+
+		let winner;
+		if (isEnded) {
+			const blackCount = o.board.filter(s => s == 'black').length;
+			const whiteCount = o.board.filter(s => s == 'white').length;
+			winner = blackCount == whiteCount ? null : blackCount > whiteCount ? game.black_user_id : game.white_user_id;
+		}
+
+		const log = {
+			at: new Date(),
+			color: myColor,
+			pos
+		};
+
+		await Game.update({
+			_id: gameId
+		}, {
+			$set: {
+				turn_user_id: turn,
+				is_ended: isEnded,
+				winner_id: winner
+			},
+			$push: {
+				logs: log
+			}
+		});
+
+		publishOthelloGameStream(gameId, 'set', {
+			color: myColor,
+			pos
+		});
+	}
 }
diff --git a/src/web/app/common/views/components/othello.game.vue b/src/web/app/common/views/components/othello.game.vue
index cb006a289b..b7c23e704e 100644
--- a/src/web/app/common/views/components/othello.game.vue
+++ b/src/web/app/common/views/components/othello.game.vue
@@ -1,10 +1,15 @@
 <template>
 <div class="root">
 	<header><b>{{ game.black_user.name }}</b>(黒) vs <b>{{ game.white_user.name }}</b>(白)</header>
-	<p class="turn">{{ turn ? 'あなたのターンです' : '相手のターンです' }}<mk-ellipsis v-if="!turn"/></p>
+	<p class="turn" v-if="!iAmPlayer && !isEnded">{{ turn.name }}のターンです<mk-ellipsis/></p>
+	<p class="turn" v-if="iAmPlayer && !isEnded">{{ isMyTurn ? 'あなたのターンです' : '相手のターンです' }}<mk-ellipsis v-if="!isMyTurn"/></p>
+	<p class="result" v-if="isEnded">
+		<template v-if="winner"><b>{{ winner.name }}</b>の勝ち</template>
+		<template v-else>引き分け</template>
+	</p>
 	<div>
 		<div v-for="(stone, i) in o.board"
-			:class="{ empty: stone == null, myTurn: turn, can: o.canReverse(turn ? myColor : opColor, i) }"
+			:class="{ empty: stone == null, myTurn: isMyTurn, can: o.canReverse(turn.id == game.black_user.id ? 'black' : 'white', i) }"
 			@click="set(i)"
 		>
 			<img v-if="stone == 'black'" :src="`${game.black_user.avatar_url}?thumbnail&size=64`" alt="">
@@ -25,10 +30,16 @@ export default Vue.extend({
 		return {
 			o: new Othello(),
 			turn: null,
+			isMyTurn: null,
+			isEnded: false,
+			winner: null,
 			connection: null
 		};
 	},
 	computed: {
+		iAmPlayer(): boolean {
+			return this.game.black_user_id == (this as any).os.i.id || this.game.white_user_id == (this as any).os.i.id;
+		},
 		myColor(): string {
 			return this.game.black_user_id == (this as any).os.i.id ? 'black' : 'white';
 		},
@@ -41,7 +52,10 @@ export default Vue.extend({
 			this.o.set(log.color, log.pos);
 		});
 
-		this.turn = this.game.turn_user_id == (this as any).os.i.id;
+		this.turn = this.game.turn_user_id == this.game.black_user_id ? this.game.black_user : this.game.white_user;
+		this.isMyTurn = this.game.turn_user_id == (this as any).os.i.id;
+		this.isEnded = this.game.is_ended;
+		this.winner = this.game.winner;
 	},
 	mounted() {
 		this.connection = new OthelloGameStream((this as any).os.i, this.game);
@@ -53,11 +67,17 @@ export default Vue.extend({
 	},
 	methods: {
 		set(pos) {
-			if (!this.turn) return;
+			if (!this.isMyTurn) return;
 			if (!this.o.canReverse(this.myColor, pos)) return;
 			this.o.set(this.myColor, pos);
 			if (this.o.getPattern(this.opColor).length > 0) {
-				this.turn = !this.turn;
+				this.isMyTurn = !this.isMyTurn;
+				this.turn = this.myColor == 'black' ? this.game.white_user : this.game.black_user;
+			} else if (this.o.getPattern(this.myColor).length == 0) {
+				this.isEnded = true;
+				const blackCount = this.o.board.filter(s => s == 'black').length;
+				const whiteCount = this.o.board.filter(s => s == 'white').length;
+				this.winner = blackCount == whiteCount ? null : blackCount > whiteCount ? this.game.black_user : this.game.white_user;
 			}
 			this.connection.send({
 				type: 'set',
@@ -67,8 +87,28 @@ export default Vue.extend({
 		},
 		onSet(x) {
 			this.o.set(x.color, x.pos);
-			if (this.o.getPattern(this.myColor).length > 0) {
-				this.turn = true;
+			if (this.o.getPattern('black').length == 0 && this.o.getPattern('white').length == 0) {
+				this.isEnded = true;
+				const blackCount = this.o.board.filter(s => s == 'black').length;
+				const whiteCount = this.o.board.filter(s => s == 'white').length;
+				this.winner = blackCount == whiteCount ? null : blackCount > whiteCount ? this.game.black_user : this.game.white_user;
+			} else {
+				if (this.iAmPlayer && this.o.getPattern(this.myColor).length > 0) {
+					this.isMyTurn = true;
+				}
+
+				if (x.color == 'black' && this.o.getPattern('white').length > 0) {
+					this.turn = this.game.white_user;
+				}
+				if (x.color == 'black' && this.o.getPattern('white').length == 0) {
+					this.turn = this.game.black_user;
+				}
+				if (x.color == 'white' && this.o.getPattern('black').length > 0) {
+					this.turn = this.game.black_user;
+				}
+				if (x.color == 'white' && this.o.getPattern('black').length == 0) {
+					this.turn = this.game.white_user;
+				}
 			}
 			this.$forceUpdate();
 		}
diff --git a/src/web/app/common/views/components/othello.vue b/src/web/app/common/views/components/othello.vue
index f409f162f6..326a8d80cc 100644
--- a/src/web/app/common/views/components/othello.vue
+++ b/src/web/app/common/views/components/othello.vue
@@ -43,11 +43,17 @@
 				<img :src="`${g.black_user.avatar_url}?thumbnail&size=32`" alt="">
 				<img :src="`${g.white_user.avatar_url}?thumbnail&size=32`" alt="">
 				<span><b>{{ g.black_user.name }}</b> vs <b>{{ g.white_user.name }}</b></span>
-				<span class="state">{{ g.winner ? '終了' : '進行中' }}</span>
+				<span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span>
 			</div>
 		</section>
-		<section>
+		<section v-if="games.length > 0">
 			<h2>みんなの対局</h2>
+			<div class="game" v-for="g in games" tabindex="-1" @click="game = g">
+				<img :src="`${g.black_user.avatar_url}?thumbnail&size=32`" alt="">
+				<img :src="`${g.white_user.avatar_url}?thumbnail&size=32`" alt="">
+				<span><b>{{ g.black_user.name }}</b> vs <b>{{ g.white_user.name }}</b></span>
+				<span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span>
+			</div>
 		</section>
 	</div>
 </div>

From 7f0b9d933db747d29d033491047fca7ef0d59b97 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 7 Mar 2018 18:55:02 +0900
Subject: [PATCH 5/7] wip

---
 src/api/models/othello-game.ts                 |  6 +++++-
 src/web/app/mobile/api/input.ts                |  5 ++++-
 src/web/app/mobile/script.ts                   |  3 +++
 src/web/app/mobile/views/components/ui.nav.vue |  1 +
 src/web/app/mobile/views/pages/othello.vue     | 16 ++++++++++++++++
 5 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/web/app/mobile/views/pages/othello.vue

diff --git a/src/api/models/othello-game.ts b/src/api/models/othello-game.ts
index d75baf356b..73a5c94b21 100644
--- a/src/api/models/othello-game.ts
+++ b/src/api/models/othello-game.ts
@@ -43,7 +43,11 @@ export const pack = (
 	// Populate user
 	_game.black_user = await packUser(_game.black_user_id, meId);
 	_game.white_user = await packUser(_game.white_user_id, meId);
-	_game.winner = await packUser(_game.winner_id, meId);
+	if (_game.winner_id) {
+		_game.winner = await packUser(_game.winner_id, meId);
+	} else {
+		_game.winner = null;
+	}
 
 	resolve(_game);
 });
diff --git a/src/web/app/mobile/api/input.ts b/src/web/app/mobile/api/input.ts
index fcff68cfb6..38d0fb61eb 100644
--- a/src/web/app/mobile/api/input.ts
+++ b/src/web/app/mobile/api/input.ts
@@ -1,5 +1,8 @@
 export default function(opts) {
 	return new Promise<string>((res, rej) => {
-		alert('input not implemented yet');
+		const x = window.prompt(opts.title);
+		if (x) {
+			res(x);
+		}
 	});
 }
diff --git a/src/web/app/mobile/script.ts b/src/web/app/mobile/script.ts
index eeadfd92b0..27c18c5ae1 100644
--- a/src/web/app/mobile/script.ts
+++ b/src/web/app/mobile/script.ts
@@ -4,6 +4,7 @@
 
 // Style
 import './style.styl';
+import '../../element.scss';
 
 import init from '../init';
 
@@ -28,6 +29,7 @@ import MkFollowers from './views/pages/followers.vue';
 import MkFollowing from './views/pages/following.vue';
 import MkSettings from './views/pages/settings.vue';
 import MkProfileSetting from './views/pages/profile-setting.vue';
+import MkOthello from './views/pages/othello.vue';
 
 /**
  * init
@@ -67,6 +69,7 @@ init((launch) => {
 		{ path: '/i/drive/file/:file', component: MkDrive },
 		{ path: '/selectdrive', component: MkSelectDrive },
 		{ path: '/search', component: MkSearch },
+		{ path: '/game/othello', component: MkOthello },
 		{ path: '/:user', component: MkUser },
 		{ path: '/:user/followers', component: MkFollowers },
 		{ path: '/:user/following', component: MkFollowing },
diff --git a/src/web/app/mobile/views/components/ui.nav.vue b/src/web/app/mobile/views/components/ui.nav.vue
index 62ea83526f..a58225a172 100644
--- a/src/web/app/mobile/views/components/ui.nav.vue
+++ b/src/web/app/mobile/views/components/ui.nav.vue
@@ -18,6 +18,7 @@
 					<li><router-link to="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li><router-link to="/game/othello">%fa:gamepad%ゲーム%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
 					<li><a :href="chUrl" target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li>
diff --git a/src/web/app/mobile/views/pages/othello.vue b/src/web/app/mobile/views/pages/othello.vue
new file mode 100644
index 0000000000..67f4add07f
--- /dev/null
+++ b/src/web/app/mobile/views/pages/othello.vue
@@ -0,0 +1,16 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:gamepad%オセロ</span>
+	<mk-othello/>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	mounted() {
+		document.title = 'Misskey オセロ';
+		document.documentElement.style.background = '#fff';
+	}
+});
+</script>

From a53874edc265f6cd1aab54dbbbfcd996e81aec17 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 7 Mar 2018 18:56:55 +0900
Subject: [PATCH 6/7] wip

---
 src/api/endpoints/othello/games.ts       | 6 +++++-
 src/api/endpoints/othello/invitations.ts | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/api/endpoints/othello/games.ts b/src/api/endpoints/othello/games.ts
index da85de1c1f..39963fcd29 100644
--- a/src/api/endpoints/othello/games.ts
+++ b/src/api/endpoints/othello/games.ts
@@ -15,7 +15,11 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	} : {};
 
 	// Fetch games
-	const games = await Game.find(q);
+	const games = await Game.find(q, {
+		sort: {
+			_id: -1
+		}
+	});
 
 	// Reponse
 	res(Promise.all(games.map(async (g) => await pack(g, user))));
diff --git a/src/api/endpoints/othello/invitations.ts b/src/api/endpoints/othello/invitations.ts
index f462ef0bf9..02fb421fbc 100644
--- a/src/api/endpoints/othello/invitations.ts
+++ b/src/api/endpoints/othello/invitations.ts
@@ -4,6 +4,10 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Find session
 	const invitations = await Matching.find({
 		child_id: user._id
+	}, {
+		sort: {
+			_id: -1
+		}
 	});
 
 	// Reponse

From d6594b6e65f3b5f88e2181489b4e2d2ec6ce70cb Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 7 Mar 2018 18:58:19 +0900
Subject: [PATCH 7/7] oops

---
 src/web/app/common/views/components/messaging.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web/app/common/views/components/messaging.vue b/src/web/app/common/views/components/messaging.vue
index 2ec488c247..db60e9259a 100644
--- a/src/web/app/common/views/components/messaging.vue
+++ b/src/web/app/common/views/components/messaging.vue
@@ -89,7 +89,7 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.off('message', this.onMessage);
 		this.connection.off('read', this.onRead);
-		(this as any).streams.messagingIndexStream.dispose(this.connectionId);
+		(this as any).os.streams.messagingIndexStream.dispose(this.connectionId);
 	},
 	methods: {
 		isMe(message) {