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

misskey-dev · Jan 24, 2024 · 645f5e8 · 645f5e8
1 parent 547be19
commit 645f5e8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 16 deletions.
diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -9583,6 +9583,14 @@ export interface Locale extends ILocale {
          * 対局がキャンセルされました
          */
         "gameCanceled": string;
+        /**
+         * 開始時に対局をタイムラインに投稿
+         */
+        "shareToTlTheGameWhenStart": string;
+        /**
+         * 対局を開始しました！ #MisskeyReversi
+         */
+        "iStartedAGame": string;
     };
     "_offlineScreen": {
         /**

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

diff --git a/packages/frontend/src/pages/reversi/game.setting.vue b/packages/frontend/src/pages/reversi/game.setting.vue
@@ -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(() => {

diff --git a/packages/frontend/src/pages/reversi/game.vue b/packages/frontend/src/pages/reversi/game.vue
@@ -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',