3 files changed, 101 insertions, 10 deletions

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';
+import XGame from './othello.game.vue';
+
 export default Vue.extend({
-	methods: {
-		createSession() {
-			(this as any).api('othello/sessions/create');
+	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);
 		}
 	}
 });