heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
locales/index.d.ts vendored
View File

@ -9583,6 +9583,14 @@ export interface Locale extends ILocale {
* 対局がキャンセルされました
*/
"gameCanceled": string;
/**
* 開始時に対局をタイムラインに投稿
*/
"shareToTlTheGameWhenStart": string;
/**
* 対局を開始しました！ #MisskeyReversi
*/
"iStartedAGame": string;
};
"_offlineScreen": {
/**

2
locales/ja-JP.yml
View File

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

27
packages/frontend/src/pages/reversi/game.setting.vue
View File

@ -81,16 +81,21 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #footer>
<div :class="$style.footer">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<div style="text-align: center; margin-bottom: 10px;">
<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.waitingForMe }}</template>
<template v-if="!isReady && !isOpReady">{{ i18n.ts._reversi.waitingBoth }}<MkEllipsis/></template>
</div>
<div class="_buttonsCenter">
<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 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.waitingForOther }}<MkEllipsis/></template>
<template v-if="!isReady && isOpReady">{{ i18n.ts._reversi.waitingForMe }}</template>
<template v-if="!isReady && !isOpReady">{{ i18n.ts._reversi.waitingBoth }}<MkEllipsis/></template>
</div>
<div class="_buttonsCenter">
<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>
<div>
<MkSwitch v-model="shareWhenStart">{{ i18n.ts._reversi.shareToTlTheGameWhenStart }}</MkSwitch>
</div>
</div>
</MkSpacer>
</div>
@ -124,6 +129,8 @@ const props = defineProps<{
connection: Misskey.ChannelConnection;
}>();
const shareWhenStart = defineModel<boolean>('shareWhenStart', { default: false });
const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game));
const mapName = computed(() => {

21
packages/frontend/src/pages/reversi/game.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<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"/>
</template>
@ -32,17 +32,30 @@ const props = defineProps<{
const game = shallowRef<Misskey.entities.ReversiGameDetailed | null>(null);
const connection = shallowRef<Misskey.ChannelConnection | null>(null);
const shareWhenStart = ref(false);
watch(() => props.gameId, () => {
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() {
const _game = await misskeyApi('reversi/show-game', {
gameId: props.gameId,
});
game.value = _game;
shareWhenStart.value = false;
if (connection.value) {
connection.value.dispose();
@ -52,7 +65,7 @@ async function fetchGame() {
gameId: game.value.id,
});
connection.value.on('started', x => {
game.value = x.game;
start(x.game);
});
connection.value.on('canceled', x => {
connection.value?.dispose();
@ -78,10 +91,6 @@ onUnmounted(() => {
}
});
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(computed(() => ({
title: 'Reversi',
icon: 'ti ti-device-gamepad',