enhance(reversi): improve game setting flow

3 files changed, 13 insertions, 0 deletions

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 236f6c52de..63d13f61db 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -9591,6 +9591,10 @@ export interface Locale extends ILocale {
          * 対局を開始しました！ #MisskeyReversi
          */
         "iStartedAGame": string;
+        /**
+         * 相手が設定を変更しました
+         */
+        "opponentHasSettingsChanged": string;
     };
     "_offlineScreen": {
         /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 55139ca17b..9f17de4232 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2555,6 +2555,7 @@ _reversi:
   gameCanceled: "対局がキャンセルされました"
   shareToTlTheGameWhenStart: "開始時に対局をタイムラインに投稿"
   iStartedAGame: "対局を開始しました！ #MisskeyReversi"
+  opponentHasSettingsChanged: "相手が設定を変更しました"
 
 _offlineScreen:
   title: "オフライン - サーバーに接続できません"
diff --git a/packages/frontend/src/pages/reversi/game.setting.vue b/packages/frontend/src/pages/reversi/game.setting.vue
index d8d5254e1e..b1e66e4fdd 100644
--- a/packages/frontend/src/pages/reversi/game.setting.vue
+++ b/packages/frontend/src/pages/reversi/game.setting.vue
@@ -82,6 +82,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.footer">
 			<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
 				<div style="text-align: center;" class="_gaps_s">
+					<div v-if="opponentHasSettingsChanged" style="color: var(--warn);">{{ i18n.ts._reversi.opponentHasSettingsChanged }}</div>
 					<div>
 						<template v-if="isReady && isOpReady">{{ i18n.ts._reversi.thisGameIsStartedSoon }}<MkEllipsis/></template>
 						<template v-if="isReady && !isOpReady">{{ i18n.ts._reversi.waitingForOther }}<MkEllipsis/></template>
@@ -149,6 +150,8 @@ const isOpReady = computed(() => {
 	return false;
 });
 
+const opponentHasSettingsChanged = ref(false);
+
 watch(() => game.value.bw, () => {
 	updateSettings('bw');
 });
@@ -197,6 +200,7 @@ async function cancel() {
 
 function ready() {
 	props.connection.send('ready', true);
+	opponentHasSettingsChanged.value = false;
 }
 
 function unready() {
@@ -219,6 +223,10 @@ function onUpdateSettings({ userId, key, value }: { userId: string; key: keyof M
 	if (userId === $i.id) return;
 	if (game.value[key] === value) return;
 	game.value[key] = value;
+	if (isReady.value) {
+		opponentHasSettingsChanged.value = true;
+		unready();
+	}
 }
 
 function onMapCellClick(pos: number, pixel: string) {