Merge remote-tracking branch 'misskey-dev/develop' into io

packages/frontend/src/pages/reversi/game.vue

@@ -5,12 +5,12 @@ 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>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted, shallowRef, onUnmounted } from 'vue';
+import { computed, watch, onMounted, ref, shallowRef, onUnmounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import GameSetting from './game.setting.vue';
 import GameBoard from './game.board.vue';
@@ -21,6 +21,7 @@ import { signinRequired } from '@/account.js';
 import { useRouter } from '@/global/router/supplier.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
+import { useInterval } from '@/scripts/use-interval.js';
 
 const $i = signinRequired();
 
@@ -32,17 +33,32 @@ 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 (game.value?.isStarted) return;
+
+	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 +68,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();
@@ -68,6 +84,25 @@ async function fetchGame() {
 	}
 }
 
+// 通信を取りこぼした場合の救済
+useInterval(async () => {
+	if (game.value == null) return;
+	if (game.value.isStarted) return;
+
+	const _game = await misskeyApi('reversi/show-game', {
+		gameId: props.gameId,
+	});
+
+	if (_game.isStarted) {
+		start(_game);
+	} else {
+		game.value = _game;
+	}
+}, 1000 * 10, {
+	immediate: false,
+	afterMounted: true,
+});
+
 onMounted(() => {
 	fetchGame();
 });
@@ -78,10 +113,6 @@ onUnmounted(() => {
 	}
 });
 
-const headerActions = computed(() => []);
-
-const headerTabs = computed(() => []);
-
 definePageMetadata(computed(() => ({
 	title: 'Reversi',
 	icon: 'ti ti-device-gamepad',