From 4f95b8d9d2dec6dd1e9069372abd7cf605e63d9a Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Mon, 22 Jan 2024 09:20:56 +0900 Subject: fix(frontend/pizzax): デフォルト値が適用できないことがあるのを修正 (#13057) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend/pizzax): デフォルト値が適用できないことがあるのを修正 * fix * いらんプロパティをけす --- packages/frontend/src/pages/timeline.vue | 20 ++++++++------------ packages/frontend/src/pizzax.ts | 19 ++++++++++++++++--- 2 files changed, 24 insertions(+), 15 deletions(-) (limited to 'packages/frontend/src') diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index 3481113f87..5a71b18afe 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -71,9 +71,8 @@ const src = computed({ set: (x) => saveSrc(x), }); const withRenotes = computed({ - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - get: () => (defaultStore.reactiveState.tl.value.filter?.withRenotes ?? saveTlFilter('withRenotes', true)), - set: (x) => saveTlFilter('withRenotes', x), + get: () => defaultStore.reactiveState.tl.value.filter.withRenotes, + set: (x: boolean) => saveTlFilter('withRenotes', x), }); const withReplies = computed({ get: () => { @@ -81,27 +80,24 @@ const withReplies = computed({ if (['local', 'social'].includes(src.value) && onlyFiles.value) { return false; } else { - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - return defaultStore.reactiveState.tl.value.filter?.withReplies ?? saveTlFilter('withReplies', true); + return defaultStore.reactiveState.tl.value.filter.withReplies; } }, - set: (x) => saveTlFilter('withReplies', x), + set: (x: boolean) => saveTlFilter('withReplies', x), }); const onlyFiles = computed({ get: () => { if (['local', 'social'].includes(src.value) && withReplies.value) { return false; } else { - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - return defaultStore.reactiveState.tl.value.filter?.onlyFiles ?? saveTlFilter('onlyFiles', false); + return defaultStore.reactiveState.tl.value.filter.onlyFiles; } }, - set: (x) => saveTlFilter('onlyFiles', x), + set: (x: boolean) => saveTlFilter('onlyFiles', x), }); const withSensitive = computed({ - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - get: () => (defaultStore.reactiveState.tl.value.filter?.withSensitive ?? saveTlFilter('withSensitive', true)), - set: (x) => { + get: () => defaultStore.reactiveState.tl.value.filter.withSensitive, + set: (x: boolean) => { saveTlFilter('withSensitive', x); // これだけはクライアント側で完結する処理なので手動でリロード diff --git a/packages/frontend/src/pizzax.ts b/packages/frontend/src/pizzax.ts index 8723110b08..b3d2374899 100644 --- a/packages/frontend/src/pizzax.ts +++ b/packages/frontend/src/pizzax.ts @@ -7,6 +7,7 @@ import { onUnmounted, Ref, ref, watch } from 'vue'; import { BroadcastChannel } from 'broadcast-channel'; +import { defu } from 'defu'; import { $i } from '@/account.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { get, set } from '@/scripts/idb-proxy.js'; @@ -80,6 +81,18 @@ export class Storage { this.loaded = this.ready.then(() => this.load()); } + private isPureObject(value: unknown): value is Record { + return typeof value === 'object' && value !== null && !Array.isArray(value); + } + + private mergeState(value: T, def: T): T { + if (this.isPureObject(value) && this.isPureObject(def)) { + if (_DEV_) console.log('Merging state. Incoming: ', value, ' Default: ', def); + return defu(value, def) as T; + } + return value; + } + private async init(): Promise { await this.migrate(); @@ -89,11 +102,11 @@ export class Storage { for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) { if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) { - this.reactiveState[k].value = this.state[k] = deviceState[k]; + this.reactiveState[k].value = this.state[k] = this.mergeState(deviceState[k], v.default); } else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) { - this.reactiveState[k].value = this.state[k] = registryCache[k]; + this.reactiveState[k].value = this.state[k] = this.mergeState(registryCache[k], v.default); } else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) { - this.reactiveState[k].value = this.state[k] = deviceAccountState[k]; + this.reactiveState[k].value = this.state[k] = this.mergeState(deviceAccountState[k], v.default); } else { this.reactiveState[k].value = this.state[k] = v.default; if (_DEV_) console.log('Use default value', k, v.default); -- cgit v1.2.3-freya From 259992c65f008c3df474970f087aba9716d3465c Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 22 Jan 2024 12:03:32 +0900 Subject: enhance(reversi): some tweaks --- .../src/server/api/stream/channels/reversi-game.ts | 8 +- packages/frontend/src/pages/reversi/game.board.vue | 96 +++++++++++++--------- packages/frontend/src/pages/reversi/game.vue | 40 ++++----- 3 files changed, 83 insertions(+), 61 deletions(-) (limited to 'packages/frontend/src') diff --git a/packages/backend/src/server/api/stream/channels/reversi-game.ts b/packages/backend/src/server/api/stream/channels/reversi-game.ts index df92137f51..820c80006b 100644 --- a/packages/backend/src/server/api/stream/channels/reversi-game.ts +++ b/packages/backend/src/server/api/stream/channels/reversi-game.ts @@ -42,7 +42,7 @@ class ReversiGameChannel extends Channel { case 'updateSettings': this.updateSettings(body.key, body.value); break; case 'cancel': this.cancelGame(); break; case 'putStone': this.putStone(body.pos, body.id); break; - case 'checkState': this.checkState(body.crc32); break; + case 'resync': this.resync(body.crc32); break; case 'claimTimeIsUp': this.claimTimeIsUp(); break; } } @@ -76,12 +76,10 @@ class ReversiGameChannel extends Channel { } @bindThis - private async checkState(crc32: string | number) { - if (crc32 != null) return; - + private async resync(crc32: string | number) { const game = await this.reversiService.checkCrc(this.gameId!, crc32); if (game) { - this.send('rescue', game); + this.send('resynced', game); } } diff --git a/packages/frontend/src/pages/reversi/game.board.vue b/packages/frontend/src/pages/reversi/game.board.vue index 4d4450ed7d..d492296c16 100644 --- a/packages/frontend/src/pages/reversi/game.board.vue +++ b/packages/frontend/src/pages/reversi/game.board.vue @@ -163,7 +163,7 @@ const $i = signinRequired(); const props = defineProps<{ game: Misskey.entities.ReversiGameDetailed; - connection: Misskey.ChannelConnection; + connection?: Misskey.ChannelConnection | null; }>(); const showBoardLabels = ref(false); @@ -240,10 +240,10 @@ watch(logPos, (v) => { if (game.value.isStarted && !game.value.isEnded) { useInterval(() => { - if (game.value.isEnded) return; + if (game.value.isEnded || props.connection == null) return; const crc32 = CRC32.str(JSON.stringify(game.value.logs)).toString(); if (_DEV_) console.log('crc32', crc32); - props.connection.send('checkState', { + props.connection.send('resync', { crc32: crc32, }); }, 10000, { immediate: false, afterMounted: true }); @@ -267,7 +267,7 @@ function putStone(pos) { }); const id = Math.random().toString(36).slice(2); - props.connection.send('putStone', { + props.connection!.send('putStone', { pos: pos, id, }); @@ -283,22 +283,24 @@ const myTurnTimerRmain = ref(game.value.timeLimitForEachTurn); const opTurnTimerRmain = ref(game.value.timeLimitForEachTurn); const TIMER_INTERVAL_SEC = 3; -useInterval(() => { - if (myTurnTimerRmain.value > 0) { - myTurnTimerRmain.value = Math.max(0, myTurnTimerRmain.value - TIMER_INTERVAL_SEC); - } - if (opTurnTimerRmain.value > 0) { - opTurnTimerRmain.value = Math.max(0, opTurnTimerRmain.value - TIMER_INTERVAL_SEC); - } +if (!props.game.isEnded) { + useInterval(() => { + if (myTurnTimerRmain.value > 0) { + myTurnTimerRmain.value = Math.max(0, myTurnTimerRmain.value - TIMER_INTERVAL_SEC); + } + if (opTurnTimerRmain.value > 0) { + opTurnTimerRmain.value = Math.max(0, opTurnTimerRmain.value - TIMER_INTERVAL_SEC); + } - if (iAmPlayer.value) { - if ((isMyTurn.value && myTurnTimerRmain.value === 0) || (!isMyTurn.value && opTurnTimerRmain.value === 0)) { - props.connection.send('claimTimeIsUp', {}); + if (iAmPlayer.value) { + if ((isMyTurn.value && myTurnTimerRmain.value === 0) || (!isMyTurn.value && opTurnTimerRmain.value === 0)) { + props.connection!.send('claimTimeIsUp', {}); + } } - } -}, TIMER_INTERVAL_SEC * 1000, { immediate: false, afterMounted: true }); + }, TIMER_INTERVAL_SEC * 1000, { immediate: false, afterMounted: true }); +} -function onStreamLog(log: Reversi.Serializer.Log & { id: string | null }) { +async function onStreamLog(log: Reversi.Serializer.Log & { id: string | null }) { game.value.logs = Reversi.Serializer.serializeLogs([ ...Reversi.Serializer.deserializeLogs(game.value.logs), log, @@ -309,17 +311,25 @@ function onStreamLog(log: Reversi.Serializer.Log & { id: string | null }) { if (log.id == null || !appliedOps.includes(log.id)) { switch (log.operation) { case 'put': { + sound.playUrl('/client-assets/reversi/put.mp3', { + volume: 1, + playbackRate: 1, + }); + + if (log.player !== engine.value.turn) { // = desyncが発生している + const _game = await misskeyApi('reversi/show-game', { + gameId: props.game.id, + }); + restoreGame(_game); + return; + } + engine.value.putStone(log.pos); triggerRef(engine); myTurnTimerRmain.value = game.value.timeLimitForEachTurn; opTurnTimerRmain.value = game.value.timeLimitForEachTurn; - sound.playUrl('/client-assets/reversi/put.mp3', { - volume: 1, - playbackRate: 1, - }); - checkEnd(); break; } @@ -366,9 +376,7 @@ function checkEnd() { } } -function onStreamRescue(_game) { - console.log('rescue'); - +function restoreGame(_game) { game.value = deepClone(_game); engine.value = Reversi.Serializer.restoreGame({ @@ -384,6 +392,12 @@ function onStreamRescue(_game) { checkEnd(); } +function onStreamResynced(_game) { + console.log('resynced'); + + restoreGame(_game); +} + async function surrender() { const { canceled } = await os.confirm({ type: 'warning', @@ -434,27 +448,35 @@ function share() { } onMounted(() => { - props.connection.on('log', onStreamLog); - props.connection.on('rescue', onStreamRescue); - props.connection.on('ended', onStreamEnded); + if (props.connection != null) { + props.connection.on('log', onStreamLog); + props.connection.on('resynced', onStreamResynced); + props.connection.on('ended', onStreamEnded); + } }); onActivated(() => { - props.connection.on('log', onStreamLog); - props.connection.on('rescue', onStreamRescue); - props.connection.on('ended', onStreamEnded); + if (props.connection != null) { + props.connection.on('log', onStreamLog); + props.connection.on('resynced', onStreamResynced); + props.connection.on('ended', onStreamEnded); + } }); onDeactivated(() => { - props.connection.off('log', onStreamLog); - props.connection.off('rescue', onStreamRescue); - props.connection.off('ended', onStreamEnded); + if (props.connection != null) { + props.connection.off('log', onStreamLog); + props.connection.off('resynced', onStreamResynced); + props.connection.off('ended', onStreamEnded); + } }); onUnmounted(() => { - props.connection.off('log', onStreamLog); - props.connection.off('rescue', onStreamRescue); - props.connection.off('ended', onStreamEnded); + if (props.connection != null) { + props.connection.off('log', onStreamLog); + props.connection.off('resynced', onStreamResynced); + props.connection.off('ended', onStreamEnded); + } }); diff --git a/packages/frontend/src/pages/reversi/game.vue b/packages/frontend/src/pages/reversi/game.vue index 0bdbfbcf54..d1e4103919 100644 --- a/packages/frontend/src/pages/reversi/game.vue +++ b/packages/frontend/src/pages/reversi/game.vue @@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only --> @@ -47,23 +47,25 @@ async function fetchGame() { if (connection.value) { connection.value.dispose(); } - connection.value = useStream().useChannel('reversiGame', { - gameId: game.value.id, - }); - 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'); - } - }); + if (!game.value.isEnded) { + connection.value = useStream().useChannel('reversiGame', { + gameId: game.value.id, + }); + 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(() => { -- cgit v1.2.3-freya