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

2 files changed, 32 insertions, 16 deletions

diff --git a/packages/frontend/src/pages/reversi/game.setting.vue b/packages/frontend/src/pages/reversi/game.setting.vue
index d69176e25a..d8d5254e1e 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 d1e4103919..85ad58ac6a 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',