enhance(reversi): 開始時に対局をシェアできるように

This commit is contained in:
syuilo 2024-01-24 10:36:02 +09:00
parent 547be1973d
commit 645f5e8633
4 changed files with 42 additions and 16 deletions

8
locales/index.d.ts vendored
View file

@ -9583,6 +9583,14 @@ export interface Locale extends ILocale {
* *
*/ */
"gameCanceled": string; "gameCanceled": string;
/**
* 稿
*/
"shareToTlTheGameWhenStart": string;
/**
* #MisskeyReversi
*/
"iStartedAGame": string;
}; };
"_offlineScreen": { "_offlineScreen": {
/** /**

View file

@ -2553,6 +2553,8 @@ _reversi:
freeMatch: "フリーマッチ" freeMatch: "フリーマッチ"
lookingForPlayer: "対戦相手を探しています" lookingForPlayer: "対戦相手を探しています"
gameCanceled: "対局がキャンセルされました" gameCanceled: "対局がキャンセルされました"
shareToTlTheGameWhenStart: "開始時に対局をタイムラインに投稿"
iStartedAGame: "対局を開始しました! #MisskeyReversi"
_offlineScreen: _offlineScreen:
title: "オフライン - サーバーに接続できません" title: "オフライン - サーバーに接続できません"

View file

@ -81,7 +81,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #footer> <template #footer>
<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; margin-bottom: 10px;"> <div style="text-align: center;" class="_gaps_s">
<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>
<template v-if="!isReady && isOpReady">{{ i18n.ts._reversi.waitingForMe }}</template> <template v-if="!isReady && isOpReady">{{ i18n.ts._reversi.waitingForMe }}</template>
@ -92,6 +93,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton v-if="!isReady" rounded primary @click="ready">{{ i18n.ts._reversi.ready }}</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> <MkButton v-if="isReady" rounded @click="unready">{{ i18n.ts._reversi.cancelReady }}</MkButton>
</div> </div>
<div>
<MkSwitch v-model="shareWhenStart">{{ i18n.ts._reversi.shareToTlTheGameWhenStart }}</MkSwitch>
</div>
</div>
</MkSpacer> </MkSpacer>
</div> </div>
</template> </template>
@ -124,6 +129,8 @@ const props = defineProps<{
connection: Misskey.ChannelConnection; connection: Misskey.ChannelConnection;
}>(); }>();
const shareWhenStart = defineModel<boolean>('shareWhenStart', { default: false });
const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game)); const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game));
const mapName = computed(() => { const mapName = computed(() => {

View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div v-if="game == null || (!game.isEnded && connection == null)"><MkLoading/></div> <div v-if="game == null || (!game.isEnded && connection == null)"><MkLoading/></div>
<GameSetting v-else-if="!game.isStarted" :game="game" :connection="connection!"/> <GameSetting v-else-if="!game.isStarted" v-model:shareWhenStart="shareWhenStart" :game="game" :connection="connection!"/>
<GameBoard v-else :game="game" :connection="connection"/> <GameBoard v-else :game="game" :connection="connection"/>
</template> </template>
@ -32,17 +32,30 @@ const props = defineProps<{
const game = shallowRef<Misskey.entities.ReversiGameDetailed | null>(null); const game = shallowRef<Misskey.entities.ReversiGameDetailed | null>(null);
const connection = shallowRef<Misskey.ChannelConnection | null>(null); const connection = shallowRef<Misskey.ChannelConnection | null>(null);
const shareWhenStart = ref(false);
watch(() => props.gameId, () => { watch(() => props.gameId, () => {
fetchGame(); fetchGame();
}); });
function start(_game: Misskey.entities.ReversiGameDetailed) {
if (shareWhenStart.value) {
misskeyApi('notes/create', {
text: i18n.ts._reversi.iStartedAGame + '\n' + location.href,
visibility: 'home',
});
}
game.value = _game;
}
async function fetchGame() { async function fetchGame() {
const _game = await misskeyApi('reversi/show-game', { const _game = await misskeyApi('reversi/show-game', {
gameId: props.gameId, gameId: props.gameId,
}); });
game.value = _game; game.value = _game;
shareWhenStart.value = false;
if (connection.value) { if (connection.value) {
connection.value.dispose(); connection.value.dispose();
@ -52,7 +65,7 @@ async function fetchGame() {
gameId: game.value.id, gameId: game.value.id,
}); });
connection.value.on('started', x => { connection.value.on('started', x => {
game.value = x.game; start(x.game);
}); });
connection.value.on('canceled', x => { connection.value.on('canceled', x => {
connection.value?.dispose(); connection.value?.dispose();
@ -78,10 +91,6 @@ onUnmounted(() => {
} }
}); });
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(computed(() => ({ definePageMetadata(computed(() => ({
title: 'Reversi', title: 'Reversi',
icon: 'ti ti-device-gamepad', icon: 'ti ti-device-gamepad',