wip

packages/frontend/src/pages/drop-and-fusion.vue

@@ -123,7 +123,7 @@ function onGameEnd() {
 
 definePageMetadata({
 	title: i18n.ts.bubbleGame,
-	icon: 'ti ti-apple',
+	icon: 'ti ti-device-gamepad',
 });
 </script>
 

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

@@ -0,0 +1,68 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="game == null"><MkLoading/></div>
+<GameSetting v-else-if="!game.isStarted" :initGame="game" :connection="connection"/>
+<GameBoard v-else :initGame="game" :connection="connection"/>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import GameSetting from './game.setting.vue';
+import GameBoard from './game.board.vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { useStream } from '@/stream.js';
+
+const props = defineProps<{
+	gameId: string;
+}>();
+
+const game = shallowRef<Misskey.entities.ReversiGame | null>(null);
+const connection = shallowRef<Misskey.ChannelConnection | null>(null);
+
+watch(() => props.gameId, () => {
+	fetchGame();
+});
+
+async function fetchGame() {
+	const _game = await misskeyApi('reversi/show-game', {
+		gameId: props.gameId,
+	});
+
+	game.value = _game;
+
+	if (connection.value) {
+		connection.value.dispose();
+	}
+	connection.value = useStream().useChannel('reversiGame', {
+		gameId: game.value.id,
+	});
+	connection.value.on('started', g => {
+		game.value = g;
+	});
+}
+
+onMounted(() => {
+	fetchGame();
+});
+
+onUnmounted(() => {
+	if (connection.value) {
+		connection.value.dispose();
+	}
+});
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: 'Reversi',
+	icon: 'ti ti-device-gamepad',
+})));
+</script>