From 645f5e86337a92b99e5a6887b1c8d2e1f2c115ef Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 24 Jan 2024 10:36:02 +0900
Subject: [PATCH] =?UTF-8?q?enhance(reversi):=20=E9=96=8B=E5=A7=8B=E6=99=82?=
 =?UTF-8?q?=E3=81=AB=E5=AF=BE=E5=B1=80=E3=82=92=E3=82=B7=E3=82=A7=E3=82=A2?=
 =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  8 ++++++
 locales/ja-JP.yml                             |  2 ++
 .../src/pages/reversi/game.setting.vue        | 27 ++++++++++++-------
 packages/frontend/src/pages/reversi/game.vue  | 21 ++++++++++-----
 4 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index e0924eb02..236f6c52d 100644
--- 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
index 913e67748..55139ca17 100644
--- 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
index d69176e25..d8d5254e1 100644
--- 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
index d1e410391..85ad58ac6 100644
--- 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',