enhance(reversi): tweak reversi

packages/frontend/src/pages/reversi/game.setting.vue

@@ -86,7 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template v-if="!isReady && !isOpReady">{{ i18n.ts._reversi.waitingBoth }}<MkEllipsis/></template>
 				</div>
 				<div class="_buttonsCenter">
-					<MkButton rounded danger @click="exit">{{ i18n.ts.cancel }}</MkButton>
+					<MkButton rounded danger @click="cancel">{{ i18n.ts.cancel }}</MkButton>
 					<MkButton v-if="!isReady" rounded primary @click="ready">{{ i18n.ts._reversi.ready }}</MkButton>
 					<MkButton v-if="isReady" rounded @click="unready">{{ i18n.ts._reversi.cancelReady }}</MkButton>
 				</div>
@@ -109,9 +109,12 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import * as os from '@/os.js';
 import { MenuItem } from '@/types/menu.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const $i = signinRequired();
 
+const router = useRouter();
+
 const mapCategories = Array.from(new Set(Object.values(Reversi.maps).map(x => x.category)));
 
 const props = defineProps<{
@@ -171,8 +174,16 @@ function chooseMap(ev: MouseEvent) {
 	os.popupMenu(menu, ev.currentTarget ?? ev.target);
 }
 
-function exit() {
-	props.connection.send('exit', {});
+async function cancel() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.areYouSure,
+	});
+	if (canceled) return;
+
+	props.connection.send('cancel', {});
+
+	router.push('/reversi');
 }
 
 function ready() {

packages/frontend/src/pages/reversi/game.vue

@@ -17,6 +17,14 @@ import GameBoard from './game.board.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useStream } from '@/stream.js';
+import { signinRequired } from '@/account.js';
+import { useRouter } from '@/global/router/supplier.js';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+
+const $i = signinRequired();
+
+const router = useRouter();
 
 const props = defineProps<{
 	gameId: string;
@@ -45,6 +53,17 @@ async function fetchGame() {
 	connection.value.on('started', x => {
 		game.value = x.game;
 	});
+	connection.value.on('canceled', x => {
+		connection.value?.dispose();
+
+		if (x.userId !== $i.id) {
+			os.alert({
+				type: 'warning',
+				text: i18n.ts._reversi.gameCanceled,
+			});
+			router.push('/reversi');
+		}
+	});
 }
 
 onMounted(() => {