enhance(reversi): improve game setting flow

This commit is contained in:
syuilo 2024-01-24 13:17:34 +09:00
parent d060bb44e1
commit a3ba315dc6
3 changed files with 13 additions and 0 deletions

4
locales/index.d.ts vendored
View file

@ -9591,6 +9591,10 @@ export interface Locale extends ILocale {
* #MisskeyReversi * #MisskeyReversi
*/ */
"iStartedAGame": string; "iStartedAGame": string;
/**
*
*/
"opponentHasSettingsChanged": string;
}; };
"_offlineScreen": { "_offlineScreen": {
/** /**

View file

@ -2555,6 +2555,7 @@ _reversi:
gameCanceled: "対局がキャンセルされました" gameCanceled: "対局がキャンセルされました"
shareToTlTheGameWhenStart: "開始時に対局をタイムラインに投稿" shareToTlTheGameWhenStart: "開始時に対局をタイムラインに投稿"
iStartedAGame: "対局を開始しました! #MisskeyReversi" iStartedAGame: "対局を開始しました! #MisskeyReversi"
opponentHasSettingsChanged: "相手が設定を変更しました"
_offlineScreen: _offlineScreen:
title: "オフライン - サーバーに接続できません" title: "オフライン - サーバーに接続できません"

View file

@ -82,6 +82,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.footer"> <div :class="$style.footer">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16"> <MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<div style="text-align: center;" class="_gaps_s"> <div style="text-align: center;" class="_gaps_s">
<div v-if="opponentHasSettingsChanged" style="color: var(--warn);">{{ i18n.ts._reversi.opponentHasSettingsChanged }}</div>
<div> <div>
<template v-if="isReady && isOpReady">{{ i18n.ts._reversi.thisGameIsStartedSoon }}<MkEllipsis/></template> <template v-if="isReady && isOpReady">{{ i18n.ts._reversi.thisGameIsStartedSoon }}<MkEllipsis/></template>
<template v-if="isReady && !isOpReady">{{ i18n.ts._reversi.waitingForOther }}<MkEllipsis/></template> <template v-if="isReady && !isOpReady">{{ i18n.ts._reversi.waitingForOther }}<MkEllipsis/></template>
@ -149,6 +150,8 @@ const isOpReady = computed(() => {
return false; return false;
}); });
const opponentHasSettingsChanged = ref(false);
watch(() => game.value.bw, () => { watch(() => game.value.bw, () => {
updateSettings('bw'); updateSettings('bw');
}); });
@ -197,6 +200,7 @@ async function cancel() {
function ready() { function ready() {
props.connection.send('ready', true); props.connection.send('ready', true);
opponentHasSettingsChanged.value = false;
} }
function unready() { function unready() {
@ -219,6 +223,10 @@ function onUpdateSettings({ userId, key, value }: { userId: string; key: keyof M
if (userId === $i.id) return; if (userId === $i.id) return;
if (game.value[key] === value) return; if (game.value[key] === value) return;
game.value[key] = value; game.value[key] = value;
if (isReady.value) {
opponentHasSettingsChanged.value = true;
unready();
}
} }
function onMapCellClick(pos: number, pixel: string) { function onMapCellClick(pos: number, pixel: string) {