wip

packages/frontend/package.json

@@ -41,6 +41,7 @@
 		"chartjs-plugin-zoom": "2.0.1",
 		"chromatic": "10.1.0",
 		"compare-versions": "6.1.0",
+		"crc-32": "^1.2.2",
 		"cropperjs": "2.0.0-beta.4",
 		"date-fns": "2.30.0",
 		"escape-regexp": "0.0.1",

packages/frontend/src/components/MkSelect.vue

@@ -52,7 +52,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'change', _ev: KeyboardEvent): void;
+	(ev: 'changeByUser'): void;
 	(ev: 'update:modelValue', value: string | null): void;
 }>();
 
@@ -77,7 +77,6 @@ const height =
 const focus = () => inputEl.value.focus();
 const onInput = (ev) => {
 	changed.value = true;
-	emit('change', ev);
 };
 
 const updated = () => {
@@ -136,6 +135,7 @@ function show(ev: MouseEvent) {
 			active: computed(() => v.value === option.props.value),
 			action: () => {
 				v.value = option.props.value;
+				emit('changeByUser', v.value);
 			},
 		});
 	};

packages/frontend/src/components/MkUserSelectDialog.vue

@@ -85,7 +85,7 @@ const recentUsers = ref<Misskey.entities.UserDetailed[]>([]);
 const selected = ref<Misskey.entities.UserDetailed | null>(null);
 const dialogEl = ref();
 
-const search = () => {
+function search() {
 	if (username.value === '' && host.value === '') {
 		users.value = [];
 		return;
@@ -98,9 +98,9 @@ const search = () => {
 	}).then(_users => {
 		users.value = _users;
 	});
-};
+}
 
-const ok = () => {
+function ok() {
 	if (selected.value == null) return;
 	emit('ok', selected.value);
 	dialogEl.value.close();
@@ -110,12 +110,12 @@ const ok = () => {
 	recents = recents.filter(x => x !== selected.value.id);
 	recents.unshift(selected.value.id);
 	defaultStore.set('recentlyUsedUsers', recents.splice(0, 16));
-};
+}
 
-const cancel = () => {
+function cancel() {
 	emit('cancel');
 	dialogEl.value.close();
-};
+}
 
 onMounted(() => {
 	misskeyApi('users/show', {

packages/frontend/src/global/router/definition.ts

@@ -15,6 +15,7 @@ const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
 	loadingComponent: MkLoading,
 	errorComponent: MkError,
 });
+
 const routes = [{
 	path: '/@:initUser/pages/:initPageName/view-source',
 	component: page(() => import('@/pages/page-editor/page-editor.vue')),
@@ -523,18 +524,26 @@ const routes = [{
 	path: '/timeline/antenna/:antennaId',
 	component: page(() => import('@/pages/antenna-timeline.vue')),
 	loginRequired: true,
-}, {
-	path: '/games',
-	component: page(() => import('@/pages/games.vue')),
-	loginRequired: true,
 }, {
 	path: '/clicker',
 	component: page(() => import('@/pages/clicker.vue')),
 	loginRequired: true,
+}, {
+	path: '/games',
+	component: page(() => import('@/pages/games.vue')),
+	loginRequired: false,
 }, {
 	path: '/bubble-game',
 	component: page(() => import('@/pages/drop-and-fusion.vue')),
 	loginRequired: true,
+}, {
+	path: '/reversi',
+	component: page(() => import('@/pages/reversi/index.vue')),
+	loginRequired: false,
+}, {
+	path: '/reversi/g/:gameId',
+	component: page(() => import('@/pages/reversi/game.vue')),
+	loginRequired: false,
 }, {
 	path: '/timeline',
 	component: page(() => import('@/pages/timeline.vue')),

packages/frontend/src/os.ts

@@ -419,7 +419,7 @@ export function form(title, form) {
 	});
 }
 
-export async function selectUser(opts: { includeSelf?: boolean } = {}) {
+export async function selectUser(opts: { includeSelf?: boolean } = {}): Promise<Misskey.entities.UserLite> {
 	return new Promise((resolve, reject) => {
 		popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {
 			includeSelf: opts.includeSelf,

packages/frontend/src/pages/games.vue

@@ -7,10 +7,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader/></template>
 	<MkSpacer :contentMax="800">
-		<div class="_panel">
-			<MkA to="/bubble-game">
-				<img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
-			</MkA>
+		<div class="_gaps">
+			<div class="_panel">
+				<MkA to="/bubble-game">
+					<img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
+				</MkA>
+			</div>
+			<div class="_panel">
+				<MkA to="/reversi">
+					<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
+				</MkA>
+			</div>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>

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

@@ -4,490 +4,430 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="xqnhankfuuilcwvhgsopeqncafzsquya">
-	<header><b><MkA :to="userPage(blackUser)"><MkUserName :user="blackUser"/></MkA></b>({{ i18n.ts._reversi.black }}) vs <b><MkA :to="userPage(whiteUser)"><MkUserName :user="whiteUser"/></MkA></b>({{ i18n.ts._reversi.white }})</header>
+<MkSpacer :contentMax="600">
+	<div :class="$style.root">
+		<header><b><MkA :to="userPage(blackUser)"><MkUserName :user="blackUser"/></MkA></b>({{ i18n.ts._reversi.black }}) vs <b><MkA :to="userPage(whiteUser)"><MkUserName :user="whiteUser"/></MkA></b>({{ i18n.ts._reversi.white }})</header>
 
-	<div style="overflow: hidden; line-height: 28px;">
-		<p v-if="!iAmPlayer && !game.isEnded" class="turn">
-			<Mfm :key="'turn:' + turnUser().name" :text="$t('_reversi.turnOf', { name: turnUser().name })" :plain="true" :customEmojis="turnUser().emojis"/>
-			<MkEllipsis/>
-		</p>
-		<p v-if="logPos != logs.length" class="turn">
-			<Mfm :key="'past-turn-of:' + turnUser().name" :text="$t('_reversi.pastTurnOf', { name: turnUser().name })" :plain="true" :customEmojis="turnUser().emojis"/>
-		</p>
-		<p v-if="iAmPlayer && !game.isEnded && !isMyTurn()" class="turn1">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/></p>
-		<p v-if="iAmPlayer && !game.isEnded && isMyTurn()" class="turn2" style="animation: tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</p>
-		<p v-if="game.isEnded && logPos == logs.length" class="result">
-			<template v-if="game.winner">
-				<Mfm :key="'won'" :text="$t('_reversi.won', { name: game.winner.name })" :plain="true" :customEmojis="game.winner.emojis"/>
-				<span v-if="game.surrendered != null"> ({{ i18n.ts._reversi.surrendered }})</span>
-			</template>
-			<template v-else>{{ i18n.ts._reversi.drawn }}</template>
-		</p>
-	</div>
-
-	<div class="board">
-		<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-x">
-			<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
+		<div style="overflow: hidden; line-height: 28px;">
+			<p v-if="!iAmPlayer && !game.isEnded" class="turn">
+				<Mfm :key="'turn:' + turnUser.name" :text="i18n.t('_reversi.turnOf', { name: turnUser.name })" :plain="true" :customEmojis="turnUser.emojis"/>
+				<MkEllipsis/>
+			</p>
+			<p v-if="logPos != logs.length" class="turn">
+				<Mfm :key="'past-turn-of:' + turnUser.name" :text="i18n.t('_reversi.pastTurnOf', { name: turnUser.name })" :plain="true" :customEmojis="turnUser.emojis"/>
+			</p>
+			<p v-if="iAmPlayer && !game.isEnded && !isMyTurn" class="turn1">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/></p>
+			<p v-if="iAmPlayer && !game.isEnded && isMyTurn" class="turn2" style="animation: tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</p>
+			<p v-if="game.isEnded && logPos == logs.length" class="result">
+				<template v-if="game.winner">
+					<Mfm :key="'won'" :text="i18n.t('_reversi.won', { name: game.winner.name })" :plain="true" :customEmojis="game.winner.emojis"/>
+					<span v-if="game.surrendered != null"> ({{ i18n.ts._reversi.surrendered }})</span>
+				</template>
+				<template v-else>{{ i18n.ts._reversi.drawn }}</template>
+			</p>
 		</div>
-		<div class="flex">
-			<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-y">
-				<div v-for="i in game.map.length">{{ i }}</div>
+
+		<div :class="$style.board">
+			<div v-if="showBoardLabels" :class="$style.labelsX">
+				<span v-for="i in game.map[0].length" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
 			</div>
-			<div class="cells" :style="cellsStyle">
-				<div
-					v-for="(stone, i) in o.board"
-					:class="{ empty: stone == null, none: o.map[i] == 'null', isEnded: game.isEnded, myTurn: !game.isEnded && isMyTurn(), can: turnUser() ? o.canPut(turnUser().id == blackUser.id, i) : null, prev: o.prevPos == i }"
-					:title="`${String.fromCharCode(65 + o.transformPosToXy(i)[0])}${o.transformPosToXy(i)[1] + 1}`"
-					@click="set(i)"
-				>
-					<template v-if="$store.state.gamesReversiUseAvatarStones || true">
-						<img v-if="stone === true" :src="blackUser.avatarUrl" alt="black">
-						<img v-if="stone === false" :src="whiteUser.avatarUrl" alt="white">
-					</template>
-					<template v-else>
-						<i v-if="stone === true" class="fas fa-circle"></i>
-						<i v-if="stone === false" class="far fa-circle"></i>
-					</template>
+			<div style="display: flex;">
+				<div v-if="showBoardLabels" :class="$style.labelsY">
+					<div v-for="i in game.map.length" :class="$style.labelsYLabel">{{ i }}</div>
+				</div>
+				<div :class="$style.boardCells" :style="cellsStyle">
+					<div
+						v-for="(stone, i) in engine.board"
+						v-tooltip="`${String.fromCharCode(65 + engine.posToXy(i)[0])}${engine.posToXy(i)[1] + 1}`"
+						:class="[$style.boardCell, {
+							[$style.boardCell_empty]: stone == null,
+							[$style.boardCell_none]: engine.map[i] === 'null',
+							[$style.boardCell_isEnded]: game.isEnded,
+							[$style.boardCell_myTurn]: !game.isEnded && isMyTurn,
+							[$style.boardCell_can]: turnUser ? engine.canPut(turnUser.id === blackUser.id, i) : null,
+							[$style.boardCell_prev]: engine.prevPos === i
+						}]"
+						@click="putStone(i)"
+					>
+						<img v-if="stone === true" style="pointer-events: none; user-select: none; display: block; width: 100%; height: 100%;" :src="blackUser.avatarUrl">
+						<img v-if="stone === false" style="pointer-events: none; user-select: none; display: block; width: 100%; height: 100%;" :src="whiteUser.avatarUrl">
+					</div>
+				</div>
+				<div v-if="showBoardLabels" :class="$style.labelsY">
+					<div v-for="i in game.map.length" :class="$style.labelsYLabel">{{ i }}</div>
 				</div>
 			</div>
-			<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-y">
-				<div v-for="i in game.map.length">{{ i }}</div>
+			<div v-if="showBoardLabels" :class="$style.labelsX">
+				<span v-for="i in game.map[0].length" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
 			</div>
 		</div>
-		<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-x">
-			<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
+
+		<p class="status"><b>{{ i18n.t('_reversi.turnCount', { count: logPos }) }}</b> {{ i18n.ts._reversi.black }}:{{ engine.blackCount }} {{ i18n.ts._reversi.white }}:{{ engine.whiteCount }} {{ i18n.ts._reversi.total }}:{{ engine.blackCount + engine.whiteCount }}</p>
+
+		<div v-if="!game.isEnded && iAmPlayer" class="_buttonsCenter">
+			<MkButton danger @click="surrender">{{ i18n.ts._reversi.surrender }}</MkButton>
+		</div>
+
+		<div v-if="game.isEnded" class="player">
+			<span>{{ logPos }} / {{ logs.length }}</span>
+			<div v-if="!autoplaying" class="buttons">
+				<MkButton inline :disabled="logPos == 0" @click="logPos = 0"><i class="fas fa-angle-double-left"></i></MkButton>
+				<MkButton inline :disabled="logPos == 0" @click="logPos--"><i class="fas fa-angle-left"></i></MkButton>
+				<MkButton inline :disabled="logPos == logs.length" @click="logPos++"><i class="fas fa-angle-right"></i></MkButton>
+				<MkButton inline :disabled="logPos == logs.length" @click="logPos = logs.length"><i class="fas fa-angle-double-right"></i></MkButton>
+			</div>
+			<MkButton :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;" @click="autoplay()"><i class="fas fa-play"></i></MkButton>
+		</div>
+
+		<div class="info">
+			<p v-if="game.isLlotheo">{{ i18n.ts._reversi.isLlotheo }}</p>
+			<p v-if="game.loopedBoard">{{ i18n.ts._reversi.loopedMap }}</p>
+			<p v-if="game.canPutEverywhere">{{ i18n.ts._reversi.canPutEverywhere }}</p>
 		</div>
 	</div>
-
-	<p class="status"><b>{{ $t('_reversi.turnCount', { count: logPos }) }}</b> {{ i18n.ts._reversi.black }}:{{ o.blackCount }} {{ i18n.ts._reversi.white }}:{{ o.whiteCount }} {{ i18n.ts._reversi.total }}:{{ o.blackCount + o.whiteCount }}</p>
-
-	<div v-if="!game.isEnded && iAmPlayer" class="actions">
-		<MkButton inline @click="surrender">{{ i18n.ts._reversi.surrender }}</MkButton>
-	</div>
-
-	<div v-if="game.isEnded" class="player">
-		<span>{{ logPos }} / {{ logs.length }}</span>
-		<div v-if="!autoplaying" class="buttons">
-			<MkButton inline :disabled="logPos == 0" @click="logPos = 0"><i class="fas fa-angle-double-left"></i></MkButton>
-			<MkButton inline :disabled="logPos == 0" @click="logPos--"><i class="fas fa-angle-left"></i></MkButton>
-			<MkButton inline :disabled="logPos == logs.length" @click="logPos++"><i class="fas fa-angle-right"></i></MkButton>
-			<MkButton inline :disabled="logPos == logs.length" @click="logPos = logs.length"><i class="fas fa-angle-double-right"></i></MkButton>
-		</div>
-		<MkButton :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;" @click="autoplay()"><i class="fas fa-play"></i></MkButton>
-	</div>
-
-	<div class="info">
-		<p v-if="game.isLlotheo">{{ i18n.ts._reversi.isLlotheo }}</p>
-		<p v-if="game.loopedBoard">{{ i18n.ts._reversi.loopedMap }}</p>
-		<p v-if="game.canPutEverywhere">{{ i18n.ts._reversi.canPutEverywhere }}</p>
-	</div>
-
-	<div class="watchers">
-		<MkAvatar v-for="user in watchers" :key="user.id" :user="user" class="avatar"/>
-	</div>
-</div>
+</MkSpacer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, shallowRef, triggerRef, watch } from 'vue';
 import * as CRC32 from 'crc-32';
-import Reversi, { Color } from '@/scripts/games/reversi/core';
-import { url } from '@/config';
-import MkButton from '@/components/ui/button.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import * as sound from '@/scripts/sound';
+import * as Misskey from 'misskey-js';
+import * as Reversi from 'misskey-reversi';
+import MkButton from '@/components/MkButton.vue';
+import { deepClone } from '@/scripts/clone.js';
+import { useInterval } from '@/scripts/use-interval.js';
+import { signinRequired } from '@/account.js';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { userPage } from '@/filters/user.js';
 
-export default defineComponent({
-	components: {
-		MkButton,
-	},
+const $i = signinRequired();
 
-	props: {
-		initGame: {
-			type: Object,
-			require: true,
-		},
-		connection: {
-			type: Object,
-			require: true,
-		},
-	},
+const props = defineProps<{
+	game: Misskey.entities.ReversiGameDetailed;
+	connection: Misskey.ChannelConnection;
+}>();
 
-	data() {
-		return {
-			game: JSON.parse(JSON.stringify(this.initGame)),
-			o: null as Reversi,
-			logs: [],
-			logPos: 0,
-			watchers: [],
-			pollingClock: null,
-		};
-	},
+const showBoardLabels = true;
+const autoplaying = ref<boolean>(false);
+const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game));
+const logs = ref<Misskey.entities.ReversiLog[]>(game.value.logs);
+const logPos = ref<number>(logs.value.length);
+const engine = shallowRef<Reversi.Game>(new Reversi.Game(game.value.map, {
+	isLlotheo: game.value.isLlotheo,
+	canPutEverywhere: game.value.canPutEverywhere,
+	loopedBoard: game.value.loopedBoard,
+}));
 
-	computed: {
-		iAmPlayer(): boolean {
-			if (!this.$i) return false;
-			return this.game.user1Id == this.$i.id || this.game.user2Id == this.$i.id;
-		},
+for (const log of game.value.logs) {
+	engine.value.put(log.color, log.pos);
+}
 
-		myColor(): Color {
-			if (!this.iAmPlayer) return null;
-			if (this.game.user1Id == this.$i.id && this.game.black == 1) return true;
-			if (this.game.user2Id == this.$i.id && this.game.black == 2) return true;
-			return false;
-		},
+const iAmPlayer = computed(() => {
+	return game.value.user1Id === $i.id || game.value.user2Id === $i.id;
+});
 
-		opColor(): Color {
-			if (!this.iAmPlayer) return null;
-			return this.myColor === true ? false : true;
-		},
+const myColor = computed(() => {
+	if (!iAmPlayer.value) return null;
+	if (game.value.user1Id === $i.id && game.value.black === 1) return true;
+	if (game.value.user2Id === $i.id && game.value.black === 2) return true;
+	return false;
+});
 
-		blackUser(): any {
-			return this.game.black == 1 ? this.game.user1 : this.game.user2;
-		},
+const opColor = computed(() => {
+	if (!iAmPlayer.value) return null;
+	return !myColor.value;
+});
 
-		whiteUser(): any {
-			return this.game.black == 1 ? this.game.user2 : this.game.user1;
-		},
+const blackUser = computed(() => {
+	return game.value.black === 1 ? game.value.user1 : game.value.user2;
+});
 
-		cellsStyle(): any {
-			return {
-				'grid-template-rows': `repeat(${this.game.map.length}, 1fr)`,
-				'grid-template-columns': `repeat(${this.game.map[0].length}, 1fr)`,
-			};
-		},
-	},
+const whiteUser = computed(() => {
+	return game.value.black === 1 ? game.value.user2 : game.value.user1;
+});
 
-	watch: {
-		logPos(v) {
-			if (!this.game.isEnded) return;
-			const o = new Reversi(this.game.map, {
-				isLlotheo: this.game.isLlotheo,
-				canPutEverywhere: this.game.canPutEverywhere,
-				loopedBoard: this.game.loopedBoard,
-			});
-			for (const log of this.logs.slice(0, v)) {
-				o.put(log.color, log.pos);
-			}
-			this.o = o;
-			//this.$forceUpdate();
-		},
-	},
+const turnUser = computed(() => {
+	if (engine.value.turn === true) {
+		return game.value.black === 1 ? game.value.user1 : game.value.user2;
+	} else if (engine.value.turn === false) {
+		return game.value.black === 1 ? game.value.user2 : game.value.user1;
+	} else {
+		return null;
+	}
+});
 
-	created() {
-		this.o = new Reversi(this.game.map, {
-			isLlotheo: this.game.isLlotheo,
-			canPutEverywhere: this.game.canPutEverywhere,
-			loopedBoard: this.game.loopedBoard,
+const isMyTurn = computed(() => {
+	if (!iAmPlayer.value) return false;
+	const u = turnUser.value;
+	if (u == null) return false;
+	return u.id === $i.id;
+});
+
+const cellsStyle = computed(() => {
+	return {
+		'grid-template-rows': `repeat(${game.value.map.length}, 1fr)`,
+		'grid-template-columns': `repeat(${game.value.map[0].length}, 1fr)`,
+	};
+});
+
+watch(logPos, (v) => {
+	if (!game.value.isEnded) return;
+	const _o = new Reversi.Game(game.value.map, {
+		isLlotheo: game.value.isLlotheo,
+		canPutEverywhere: game.value.canPutEverywhere,
+		loopedBoard: game.value.loopedBoard,
+	});
+	for (const log of logs.value.slice(0, v)) {
+		_o.put(log.color, log.pos);
+	}
+	engine.value = _o;
+});
+
+if (game.value.isStarted && !game.value.isEnded) {
+	useInterval(() => {
+		if (game.value.isEnded) return;
+		const crc32 = CRC32.str(logs.value.map(x => x.pos.toString()).join(''));
+		props.connection.send('syncState', {
+			crc32: crc32,
 		});
+	}, 3000, { immediate: false, afterMounted: true });
+}
 
-		for (const log of this.game.logs) {
-			this.o.put(log.color, log.pos);
+function putStone(pos) {
+	if (game.value.isEnded) return;
+	if (!iAmPlayer.value) return;
+	if (!isMyTurn.value) return;
+	if (!engine.value.canPut(myColor.value!, pos)) return;
+
+	engine.value.put(myColor.value!, pos);
+	triggerRef(engine);
+
+	// サウンドを再生する
+	//sound.play(myColor.value ? 'reversiPutBlack' : 'reversiPutWhite');
+
+	props.connection.send('putStone', {
+		pos: pos,
+	});
+
+	checkEnd();
+}
+
+function onPutStone(x) {
+	logs.value.push(x);
+	logPos.value++;
+	engine.value.put(x.color, x.pos);
+	triggerRef(engine);
+	checkEnd();
+
+	// サウンドを再生する
+	if (x.color !== myColor.value) {
+		//sound.play(x.color ? 'reversiPutBlack' : 'reversiPutWhite');
+	}
+}
+
+function onEnded(x) {
+	game.value = deepClone(x.game);
+}
+
+function checkEnd() {
+	game.value.isEnded = engine.value.isEnded;
+	if (game.value.isEnded) {
+		if (engine.value.winner === true) {
+			game.value.winnerId = game.value.black === 1 ? game.value.user1Id : game.value.user2Id;
+			game.value.winner = game.value.black === 1 ? game.value.user1 : game.value.user2;
+		} else if (engine.value.winner === false) {
+			game.value.winnerId = game.value.black === 1 ? game.value.user2Id : game.value.user1Id;
+			game.value.winner = game.value.black === 1 ? game.value.user2 : game.value.user1;
+		} else {
+			game.value.winnerId = null;
+			game.value.winner = null;
 		}
+	}
+}
 
-		this.logs = this.game.logs;
-		this.logPos = this.logs.length;
+function onRescue(_game) {
+	game.value = deepClone(_game);
 
-		// 通信を取りこぼしてもいいように定期的にポーリングさせる
-		if (this.game.isStarted && !this.game.isEnded) {
-			this.pollingClock = setInterval(() => {
-				if (this.game.isEnded) return;
-				const crc32 = CRC32.str(this.logs.map(x => x.pos.toString()).join(''));
-				this.connection.send('check', {
-					crc32: crc32,
-				});
-			}, 3000);
-		}
-	},
+	engine.value = new Reversi.Game(game.value.map, {
+		isLlotheo: game.value.isLlotheo,
+		canPutEverywhere: game.value.canPutEverywhere,
+		loopedBoard: game.value.loopedBoard,
+	});
 
-	mounted() {
-		this.connection.on('set', this.onSet);
-		this.connection.on('rescue', this.onRescue);
-		this.connection.on('ended', this.onEnded);
-		this.connection.on('watchers', this.onWatchers);
-	},
+	for (const log of game.value.logs) {
+		engine.value.put(log.color, log.pos);
+	}
 
-	beforeUnmount() {
-		this.connection.off('set', this.onSet);
-		this.connection.off('rescue', this.onRescue);
-		this.connection.off('ended', this.onEnded);
-		this.connection.off('watchers', this.onWatchers);
+	triggerRef(engine);
 
-		clearInterval(this.pollingClock);
-	},
+	logs.value = game.value.logs;
+	logPos.value = logs.value.length;
 
-	methods: {
-		userPage,
+	checkEnd();
+}
 
-		// this.o がリアクティブになった折にはcomputedにできる
-		turnUser(): any {
-			if (this.o.turn === true) {
-				return this.game.black == 1 ? this.game.user1 : this.game.user2;
-			} else if (this.o.turn === false) {
-				return this.game.black == 1 ? this.game.user2 : this.game.user1;
-			} else {
-				return null;
-			}
-		},
+function surrender() {
+	misskeyApi('reversi/surrender', {
+		gameId: game.value.id,
+	});
+}
 
-		// this.o がリアクティブになった折にはcomputedにできる
-		isMyTurn(): boolean {
-			if (!this.iAmPlayer) return false;
-			if (this.turnUser() == null) return false;
-			return this.turnUser().id == this.$i.id;
-		},
+function autoplay() {
+	autoplaying.value = true;
+	logPos.value = 0;
 
-		set(pos) {
-			if (this.game.isEnded) return;
-			if (!this.iAmPlayer) return;
-			if (!this.isMyTurn()) return;
-			if (!this.o.canPut(this.myColor, pos)) return;
-
-			this.o.put(this.myColor, pos);
-
-			// サウンドを再生する
-			sound.play(this.myColor ? 'reversiPutBlack' : 'reversiPutWhite');
-
-			this.connection.send('set', {
-				pos: pos,
-			});
-
-			this.checkEnd();
-
-			this.$forceUpdate();
-		},
-
-		onSet(x) {
-			this.logs.push(x);
-			this.logPos++;
-			this.o.put(x.color, x.pos);
-			this.checkEnd();
-			this.$forceUpdate();
-
-			// サウンドを再生する
-			if (x.color !== this.myColor) {
-				sound.play(x.color ? 'reversiPutBlack' : 'reversiPutWhite');
-			}
-		},
-
-		onEnded(x) {
-			this.game = JSON.parse(JSON.stringify(x.game));
-		},
-
-		checkEnd() {
-			this.game.isEnded = this.o.isEnded;
-			if (this.game.isEnded) {
-				if (this.o.winner === true) {
-					this.game.winnerId = this.game.black == 1 ? this.game.user1Id : this.game.user2Id;
-					this.game.winner = this.game.black == 1 ? this.game.user1 : this.game.user2;
-				} else if (this.o.winner === false) {
-					this.game.winnerId = this.game.black == 1 ? this.game.user2Id : this.game.user1Id;
-					this.game.winner = this.game.black == 1 ? this.game.user2 : this.game.user1;
-				} else {
-					this.game.winnerId = null;
-					this.game.winner = null;
-				}
-			}
-		},
-
-		// 正しいゲーム情報が送られてきたとき
-		onRescue(game) {
-			this.game = JSON.parse(JSON.stringify(game));
-
-			this.o = new Reversi(this.game.map, {
-				isLlotheo: this.game.isLlotheo,
-				canPutEverywhere: this.game.canPutEverywhere,
-				loopedBoard: this.game.loopedBoard,
-			});
-
-			for (const log of this.game.logs) {
-				this.o.put(log.color, log.pos, true);
-			}
-
-			this.logs = this.game.logs;
-			this.logPos = this.logs.length;
-
-			this.checkEnd();
-			this.$forceUpdate();
-		},
-
-		onWatchers(users) {
-			this.watchers = users;
-		},
-
-		surrender() {
-			os.api('games/reversi/games/surrender', {
-				gameId: this.game.id,
-			});
-		},
-
-		autoplay() {
-			this.autoplaying = true;
-			this.logPos = 0;
+	window.setTimeout(() => {
+		logPos.value = 1;
 
+		let i = 1;
+		let previousLog = game.value.logs[0];
+		const tick = () => {
+			const log = game.value.logs[i];
+			const time = new Date(log.at).getTime() - new Date(previousLog.at).getTime();
 			setTimeout(() => {
-				this.logPos = 1;
+				i++;
+				logPos.value++;
+				previousLog = log;
 
-				let i = 1;
-				let previousLog = this.game.logs[0];
-				const tick = () => {
-					const log = this.game.logs[i];
-					const time = new Date(log.at).getTime() - new Date(previousLog.at).getTime();
-					setTimeout(() => {
-						i++;
-						this.logPos++;
-						previousLog = log;
+				if (i < game.value.logs.length) {
+					tick();
+				} else {
+					autoplaying.value = false;
+				}
+			}, time);
+		};
 
-						if (i < this.game.logs.length) {
-							tick();
-						} else {
-							this.autoplaying = false;
-						}
-					}, time);
-				};
+		tick();
+	}, 1000);
+}
 
-				tick();
-			}, 1000);
-		},
-	},
+onMounted(() => {
+	props.connection.on('putStone', onPutStone);
+	props.connection.on('rescue', onRescue);
+	props.connection.on('ended', onEnded);
+});
+
+onUnmounted(() => {
+	props.connection.off('putStone', onPutStone);
+	props.connection.off('rescue', onRescue);
+	props.connection.off('ended', onEnded);
 });
 </script>
 
+<style lang="scss" module>
+@use "sass:math";
+
+$label-size: 16px;
+$gap: 4px;
+
+.root {
+	text-align: center;
+}
+
+.board {
+	width: calc(100% - 16px);
+	max-width: 500px;
+	margin: 0 auto;
+}
+
+.labelsX {
+	height: $label-size;
+	padding: 0 $label-size;
+	display: flex;
+}
+
+.labelsXLabel {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.8em;
+
+	&:first-child {
+		margin-left: -(math.div($gap, 2));
+	}
+
+	&:last-child {
+		margin-right: -(math.div($gap, 2));
+	}
+}
+
+.labelsY {
+	width: $label-size;
+	display: flex;
+	flex-direction: column;
+}
+
+.labelsYLabel {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 12px;
+
+	&:first-child {
+		margin-top: -(math.div($gap, 2));
+	}
+
+	&:last-child {
+		margin-bottom: -(math.div($gap, 2));
+	}
+}
+
+.boardCells {
+	flex: 1;
+	display: grid;
+	grid-gap: $gap;
+}
+
+.boardCell {
+	background: transparent;
+	border-radius: 6px;
+	overflow: clip;
+
+	&.boardCell_empty {
+		border: solid 2px var(--divider);
+	}
+
+	&.boardCell_empty.boardCell_can {
+		border-color: var(--accent);
+		opacity: 0.5;
+	}
+
+	&.boardCell_empty.boardCell_myTurn {
+		border-color: var(--divider);
+		opacity: 1;
+
+		&.boardCell_can {
+			border-color: var(--accent);
+			cursor: pointer;
+
+			&:hover {
+				background: var(--accent);
+			}
+		}
+	}
+
+	&.boardCell_prev {
+		box-shadow: 0 0 0 4px var(--accent);
+	}
+
+	&.boardCell_isEnded {
+		border-color: var(--divider);
+	}
+
+	&.boardCell_none {
+		border-color: transparent !important;
+	}
+}
+</style>
+
 	<style lang="scss" scoped>
 
 	@use "sass:math";
 
 	.xqnhankfuuilcwvhgsopeqncafzsquya {
-		text-align: center;
-
-		> .go-index {
-			position: absolute;
-			top: 0;
-			left: 0;
-			z-index: 1;
-			width: 42px;
-			height :42px;
-		}
-
-		> header {
-			padding: 8px;
-			border-bottom: dashed 1px var(--divider);
-		}
-
-		> .board {
-			width: calc(100% - 16px);
-			max-width: 500px;
-			margin: 0 auto;
-
-			$label-size: 16px;
-			$gap: 4px;
-
-			> .labels-x {
-				height: $label-size;
-				padding: 0 $label-size;
-				display: flex;
-
-				> * {
-					flex: 1;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					font-size: 0.8em;
-
-					&:first-child {
-						margin-left: -(math.div($gap, 2));
-					}
-
-					&:last-child {
-						margin-right: -(math.div($gap, 2));
-					}
-				}
-			}
-
-			> .flex {
-				display: flex;
-
-				> .labels-y {
-					width: $label-size;
-					display: flex;
-					flex-direction: column;
-
-					> * {
-						flex: 1;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						font-size: 12px;
-
-						&:first-child {
-							margin-top: -(math.div($gap, 2));
-						}
-
-						&:last-child {
-							margin-bottom: -(math.div($gap, 2));
-						}
-					}
-				}
-
-				> .cells {
-					flex: 1;
-					display: grid;
-					grid-gap: $gap;
-
-					> div {
-						background: transparent;
-						border-radius: 6px;
-						overflow: hidden;
-
-						* {
-							pointer-events: none;
-							user-select: none;
-						}
-
-						&.empty {
-							border: solid 2px var(--divider);
-						}
-
-						&.empty.can {
-							border-color: var(--accent);
-						}
-
-						&.empty.myTurn {
-							border-color: var(--divider);
-
-							&.can {
-								border-color: var(--accent);
-								cursor: pointer;
-
-								&:hover {
-									background: var(--accent);
-								}
-							}
-						}
-
-						&.prev {
-							box-shadow: 0 0 0 4px var(--accent);
-						}
-
-						&.isEnded {
-							border-color: var(--divider);
-						}
-
-						&.none {
-							border-color: transparent !important;
-						}
-
-						> svg, > img {
-							display: block;
-							width: 100%;
-							height: 100%;
-						}
-					}
-				}
-			}
-		}
 
 		> .status {
 			margin: 0;
@@ -517,18 +457,5 @@ export default defineComponent({
 				}
 			}
 		}
-
-		> .watchers {
-			padding: 0 0 16px 0;
-
-			&:empty {
-				display: none;
-			}
-
-			> .avatar {
-				width: 32px;
-				height: 32px;
-			}
-		}
 	}
 	</style>

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

@@ -4,86 +4,82 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="urbixznjwwuukfsckrwzwsqzsxornqij">
-	<header><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></header>
+<MkStickyContainer>
+	<MkSpacer :contentMax="600">
+		<header><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></header>
 
-	<div>
-		<p>{{ i18n.ts._reversi.gameSettings }}</p>
+		<div class="_gaps">
+			<p>{{ i18n.ts._reversi.gameSettings }}</p>
 
-		<div class="card map _panel">
-			<header>
-				<select v-model="mapName" :placeholder="i18n.ts._reversi.chooseBoard" @change="onMapChange">
-					<option v-if="mapName == '-Custom-'" label="-Custom-" :value="mapName"/>
-					<option :label="i18n.ts.random" :value="null"/>
-					<optgroup v-for="c in mapCategories" :key="c" :label="c">
-						<option v-for="m in Object.values(Reversi.maps).filter(m => m.category == c)" :key="m.name" :label="m.name" :value="m.name">{{ m.name }}</option>
-					</optgroup>
-				</select>
-			</header>
+			<div class="_panel">
+				<div style="display: flex; align-items: center; padding: 16px; border-bottom: solid 1px var(--divider);">
+					<div>{{ mapName }}</div>
+					<MkButton style="margin-left: auto;" @click="chooseMap">{{ i18n.ts._reversi.chooseBoard }}</MkButton>
+				</div>
 
-			<div>
-				<div v-if="game.map == null" class="random"><i class="ti ti-dice"></i></div>
-				<div v-else class="board" :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
-					<div v-for="(x, i) in game.map.join('')" :class="{ none: x == ' ' }" @click="onMapCellClick(i, x)">
-						<i v-if="x === 'b'" class="ti ti-circle-filled"></i>
-						<i v-if="x === 'w'" class="ti ti-circle"></i>
+				<div style="padding: 16px;">
+					<div v-if="game.map == null"><i class="ti ti-dice"></i></div>
+					<div v-else :class="$style.board" :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
+						<div v-for="(x, i) in game.map.join('')" :class="[$style.boardCell, { [$style.boardCellNone]: x == ' ' }]" @click="onMapCellClick(i, x)">
+							<i v-if="x === 'b' || x === 'w'" style="pointer-events: none; user-select: none; width: 100%; height: 100%;" :class="x === 'b' ? 'ti ti-circle-filled' : 'ti ti-circle'"></i>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
 
-		<div class="card _panel">
-			<header>
-				<span>{{ i18n.ts._reversi.blackOrWhite }}</span>
-			</header>
+			<div class="_panel" style="padding: 16px;">
+				<header>
+					<span>{{ i18n.ts._reversi.blackOrWhite }}</span>
+				</header>
 
-			<div>
-				<MkRadio v-model="game.bw" value="random" @update:modelValue="updateSettings('bw')">{{ i18n.ts.random }}</MkRadio>
-				<MkRadio v-model="game.bw" :value="'1'" @update:modelValue="updateSettings('bw')">
-					<I18n :src="i18n.ts._reversi.blackIs" tag="span">
-						<template #name>
-							<b><MkUserName :user="game.user1"/></b>
-						</template>
-					</I18n>
-				</MkRadio>
-				<MkRadio v-model="game.bw" :value="'2'" @update:modelValue="updateSettings('bw')">
-					<I18n :src="i18n.ts._reversi.blackIs" tag="span">
-						<template #name>
-							<b><MkUserName :user="game.user2"/></b>
-						</template>
-					</I18n>
-				</MkRadio>
+				<div>
+					<MkRadio v-model="game.bw" value="random" @update:modelValue="updateSettings('bw')">{{ i18n.ts.random }}</MkRadio>
+					<MkRadio v-model="game.bw" :value="'1'" @update:modelValue="updateSettings('bw')">
+						<I18n :src="i18n.ts._reversi.blackIs" tag="span">
+							<template #name>
+								<b><MkUserName :user="game.user1"/></b>
+							</template>
+						</I18n>
+					</MkRadio>
+					<MkRadio v-model="game.bw" :value="'2'" @update:modelValue="updateSettings('bw')">
+						<I18n :src="i18n.ts._reversi.blackIs" tag="span">
+							<template #name>
+								<b><MkUserName :user="game.user2"/></b>
+							</template>
+						</I18n>
+					</MkRadio>
+				</div>
 			</div>
+
+			<MkFolder :defaultOpen="true">
+				<template #label>{{ i18n.ts._reversi.rules }}</template>
+
+				<div class="_gaps_s">
+					<MkSwitch v-model="game.isLlotheo" @update:modelValue="updateSettings('isLlotheo')">{{ i18n.ts._reversi.isLlotheo }}</MkSwitch>
+					<MkSwitch v-model="game.loopedBoard" @update:modelValue="updateSettings('loopedBoard')">{{ i18n.ts._reversi.loopedMap }}</MkSwitch>
+					<MkSwitch v-model="game.canPutEverywhere" @update:modelValue="updateSettings('canPutEverywhere')">{{ i18n.ts._reversi.canPutEverywhere }}</MkSwitch>
+				</div>
+			</MkFolder>
 		</div>
-
-		<div class="card _panel">
-			<header>
-				<span>{{ i18n.ts._reversi.rules }}</span>
-			</header>
-
-			<div>
-				<MkSwitch v-model="game.isLlotheo" @update:modelValue="updateSettings('isLlotheo')">{{ i18n.ts._reversi.isLlotheo }}</MkSwitch>
-				<MkSwitch v-model="game.loopedBoard" @update:modelValue="updateSettings('loopedBoard')">{{ i18n.ts._reversi.loopedMap }}</MkSwitch>
-				<MkSwitch v-model="game.canPutEverywhere" @update:modelValue="updateSettings('canPutEverywhere')">{{ i18n.ts._reversi.canPutEverywhere }}</MkSwitch>
-			</div>
+	</MkSpacer>
+	<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="exit">{{ 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>
+			</MkSpacer>
 		</div>
-	</div>
-
-	<footer class="_acrylic">
-		<p class="status">
-			<template v-if="isAccepted && isOpAccepted">{{ i18n.ts._reversi.thisGameIsStartedSoon }}<MkEllipsis/></template>
-			<template v-if="isAccepted && !isOpAccepted">{{ i18n.ts._reversi.waitingForOther }}<MkEllipsis/></template>
-			<template v-if="!isAccepted && isOpAccepted">{{ i18n.ts._reversi.waitingForMe }}</template>
-			<template v-if="!isAccepted && !isOpAccepted">{{ i18n.ts._reversi.waitingBoth }}<MkEllipsis/></template>
-		</p>
-
-		<div class="actions">
-			<MkButton inline @click="exit">{{ i18n.ts.cancel }}</MkButton>
-			<MkButton v-if="!isAccepted" inline primary @click="accept">{{ i18n.ts._reversi.ready }}</MkButton>
-			<MkButton v-if="isAccepted" inline primary @click="cancel">{{ i18n.ts._reversi.cancelReady }}</MkButton>
-		</div>
-	</footer>
-</div>
+	</template>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -94,45 +90,90 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { signinRequired } from '@/account.js';
+import { deepClone } from '@/scripts/clone.js';
+import MkButton from '@/components/MkButton.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import MkRadio from '@/components/MkRadio.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import * as os from '@/os.js';
+import { MenuItem } from '@/types/menu.js';
 
 const $i = signinRequired();
 
 const mapCategories = Array.from(new Set(Object.values(Reversi.maps).map(x => x.category)));
 
 const props = defineProps<{
-		game: Misskey.entities.ReversiGameDetailed;
-		connection: Misskey.ChannelConnection;
-	}>();
+	game: Misskey.entities.ReversiGameDetailed;
+	connection: Misskey.ChannelConnection;
+}>();
 
-const game = ref<Misskey.entities.ReversiGameDetailed>(props.game);
+const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game));
 const isLlotheo = ref<boolean>(false);
-const mapName = ref<string>(Reversi.maps.eighteight.name!);
-const isAccepted = computed(() => {
-	if (game.value.user1Id === $i.id && game.value.user1Accepted) return true;
-	if (game.value.user2Id === $i.id && game.value.user2Accepted) return true;
+const mapName = computed(() => {
+	if (game.value.map == null) return 'Random';
+	const found = Object.values(Reversi.maps).find(x => x.data.join('') === game.value.map.join(''));
+	return found ? found.name! : '-Custom-';
+});
+const isReady = computed(() => {
+	if (game.value.user1Id === $i.id && game.value.user1Ready) return true;
+	if (game.value.user2Id === $i.id && game.value.user2Ready) return true;
 	return false;
 });
-const isOpAccepted = computed(() => {
-	if (game.value.user1Id !== $i.id && game.value.user1Accepted) return true;
-	if (game.value.user2Id !== $i.id && game.value.user2Accepted) return true;
+const isOpReady = computed(() => {
+	if (game.value.user1Id !== $i.id && game.value.user1Ready) return true;
+	if (game.value.user2Id !== $i.id && game.value.user2Ready) return true;
 	return false;
 });
 
+function chooseMap(ev: MouseEvent) {
+	const menu: MenuItem[] = [{
+		text: i18n.ts.random,
+		icon: 'ti ti-dice',
+		action: () => {
+			game.value.map = null;
+			updateSettings('map');
+		},
+	}];
+
+	for (const c of mapCategories) {
+		const maps = Object.values(Reversi.maps).filter(x => x.category === c);
+		if (maps.length === 0) continue;
+		if (c != null) {
+			menu.push({
+				type: 'label',
+				text: c,
+			});
+		}
+		for (const m of maps) {
+			menu.push({
+				text: m.name!,
+				action: () => {
+					game.value.map = m.data;
+					updateSettings('map');
+				},
+			});
+		}
+	}
+
+	os.popupMenu(menu, ev.currentTarget ?? ev.target);
+}
+
 function exit() {
 	props.connection.send('exit', {});
 }
 
-function accept() {
-	props.connection.send('accept', {});
+function ready() {
+	props.connection.send('ready', true);
 }
 
-function cancel() {
-	props.connection.send('cancelAccept', {});
+function unready() {
+	props.connection.send('ready', false);
 }
 
-function onChangeAcceptingStates(acceptingStates) {
-	game.value.user1Accepted = acceptingStates.user1;
-	game.value.user2Accepted = acceptingStates.user2;
+function onChangeReadyStates(states) {
+	game.value.user1Ready = states.user1;
+	game.value.user2Ready = states.user2;
 }
 
 function updateSettings(key: keyof Misskey.entities.ReversiGameDetailed) {
@@ -144,21 +185,6 @@ function updateSettings(key: keyof Misskey.entities.ReversiGameDetailed) {
 
 function onUpdateSettings({ key, value }: { key: keyof Misskey.entities.ReversiGameDetailed; value: any; }) {
 	game.value[key] = value;
-	if (game.value.map == null) {
-		mapName.value = null;
-	} else {
-		const found = Object.values(Reversi.maps).find(x => x.data.join('') === game.value.map.join(''));
-		mapName.value = found ? found.name! : '-Custom-';
-	}
-}
-
-function onMapChange() {
-	if (mapName.value == null) {
-		game.value.map = null;
-	} else {
-		game.value.map = Object.values(Reversi.maps).find(x => x.name === mapName.value)!.data;
-	}
-	updateSettings('map');
 }
 
 function onMapCellClick(pos: number, pixel: string) {
@@ -175,11 +201,41 @@ function onMapCellClick(pos: number, pixel: string) {
 	updateSettings('map');
 }
 
-props.connection.on('changeAcceptingStates', onChangeAcceptingStates);
+props.connection.on('changeReadyStates', onChangeReadyStates);
 props.connection.on('updateSettings', onUpdateSettings);
 
 onUnmounted(() => {
-	props.connection.off('changeAcceptingStates', onChangeAcceptingStates);
+	props.connection.off('changeReadyStates', onChangeReadyStates);
 	props.connection.off('updateSettings', onUpdateSettings);
 });
 </script>
+
+<style lang="scss" module>
+.board {
+	display: grid;
+	grid-gap: 4px;
+	width: 300px;
+	height: 300px;
+	margin: 0 auto;
+	color: var(--fg);
+}
+
+.boardCell {
+	background: transparent;
+	border: solid 2px var(--divider);
+	border-radius: 6px;
+	overflow: clip;
+	cursor: pointer;
+}
+.boardCellNone {
+	border-color: transparent;
+}
+
+.footer {
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	background: var(--acrylicBg);
+	border-top: solid 0.5px var(--divider);
+}
+
+</style>

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

@@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div v-if="game == null || connection == null"><MkLoading/></div>
-<GameSetting v-else-if="!game.isStarted" :initGame="game" :connection="connection"/>
-<GameBoard v-else :initGame="game" :connection="connection"/>
+<GameSetting v-else-if="!game.isStarted" :game="game" :connection="connection"/>
+<GameBoard v-else :game="game" :connection="connection"/>
 </template>
 
 <script lang="ts" setup>
@@ -42,8 +42,8 @@ async function fetchGame() {
 	connection.value = useStream().useChannel('reversiGame', {
 		gameId: game.value.id,
 	});
-	connection.value.on('started', g => {
-		game.value = g;
+	connection.value.on('started', x => {
+		game.value = x.game;
 	});
 }
 

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

@@ -4,14 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="!matching" class="bgvwxkhb">
+<MkSpacer v-if="!matchingAny && !matchingUser" :contentMax="600" class="bgvwxkhb">
 	<h1>Misskey {{ i18n.ts._reversi.reversi }}</h1>
 
-	<div class="play">
-		<MkButton primary round style="margin: var(--margin) auto 0 auto;" @click="match">{{ i18n.ts.invite }}</MkButton>
-	</div>
+	<div class="_gaps">
+		<div class="_buttonsCenter">
+			<MkButton primary rounded @click="matchAny">Match</MkButton>
+			<MkButton primary rounded @click="matchUser">{{ i18n.ts.invite }}</MkButton>
+		</div>
 
-	<div class="_section">
 		<MkFolder v-if="invitations.length > 0">
 			<template #header>{{ i18n.ts.invitations }}</template>
 			<div class="nfcacttm">
@@ -24,165 +25,180 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</MkFolder>
 
-		<MkFolder v-if="myGames.length > 0">
-			<template #header>{{ i18n.ts._reversi.myGames }}</template>
-			<div class="knextgwz">
-				<MkA v-for="g in myGames" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
-					<div class="players">
-						<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/>
+		<MkFolder v-if="$i" :defaultOpen="true">
+			<template #label>{{ i18n.ts._reversi.myGames }}</template>
+			<MkPagination :pagination="myGamesPagination">
+				<template #default="{ items }">
+					<div class="knextgwz">
+						<MkA v-for="g in items" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
+							<div class="players">
+								<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/>
+							</div>
+							<footer><span class="state" :class="{ playing: !g.isEnded }">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span><MkTime class="time" :time="g.createdAt"/></footer>
+						</MkA>
 					</div>
-					<footer><span class="state" :class="{ playing: !g.isEnded }">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span><MkTime class="time" :time="g.createdAt"/></footer>
-				</MkA>
-			</div>
+				</template>
+			</MkPagination>
 		</MkFolder>
 
-		<MkFolder v-if="games.length > 0">
-			<template #header>{{ i18n.ts._reversi.allGames }}</template>
-			<div class="knextgwz">
-				<MkA v-for="g in games" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
-					<div class="players">
-						<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/>
+		<MkFolder :defaultOpen="true">
+			<template #label>{{ i18n.ts._reversi.allGames }}</template>
+			<MkPagination :pagination="gamesPagination">
+				<template #default="{ items }">
+					<div class="knextgwz">
+						<MkA v-for="g in items" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
+							<div class="players">
+								<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/>
+							</div>
+							<footer><span class="state" :class="{ playing: !g.isEnded }">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span><MkTime class="time" :time="g.createdAt"/></footer>
+						</MkA>
 					</div>
-					<footer><span class="state" :class="{ playing: !g.isEnded }">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span><MkTime class="time" :time="g.createdAt"/></footer>
-				</MkA>
-			</div>
+				</template>
+			</MkPagination>
 		</MkFolder>
 	</div>
-</div>
+</MkSpacer>
 <div v-else class="sazhgisb">
-	<h1>
+	<h1 v-if="matchingUser">
 		<I18n :src="i18n.ts.waitingFor" tag="span">
 			<template #x>
-				<b><MkUserName :user="matching"/></b>
+				<b><MkUserName :user="matchingUser"/></b>
 			</template>
 		</I18n>
 		<MkEllipsis/>
 	</h1>
+	<h1 v-else>
+		Matching
+		<MkEllipsis/>
+	</h1>
 	<div class="cancel">
-		<MkButton inline round @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+		<MkButton inline round @click="cancelMatching">{{ i18n.ts.cancel }}</MkButton>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, markRaw } from 'vue';
-import * as os from '@/os';
-import MkButton from '@/components/ui/button.vue';
-import MkFolder from '@/components/ui/folder.vue';
-import * as symbols from '@/symbols';
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { useStream } from '@/stream.js';
+import MkButton from '@/components/MkButton.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import { i18n } from '@/i18n.js';
+import { $i } from '@/account.js';
+import MkPagination from '@/components/MkPagination.vue';
+import { useRouter } from '@/global/router/supplier.js';
+import * as os from '@/os.js';
+import { useInterval } from '@/scripts/use-interval.js';
 
-export default defineComponent({
-	components: {
-		MkButton, MkFolder,
+const myGamesPagination = {
+	endpoint: 'reversi/games' as const,
+	limit: 10,
+	params: {
+		my: true,
 	},
+};
 
-	inject: ['navHook'],
+const gamesPagination = {
+	endpoint: 'reversi/games' as const,
+	limit: 10,
+};
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.i18n.ts._reversi.reversi,
-				icon: 'fas fa-gamepad',
-			},
-			games: [],
-			gamesFetching: true,
-			gamesMoreFetching: false,
-			myGames: [],
-			matching: null,
-			invitations: [],
-			connection: null,
-			pingClock: null,
-		};
-	},
+const router = useRouter();
 
-	mounted() {
-		if (this.$i) {
-			this.connection = markRaw(os.stream.useChannel('gamesReversi'));
+if ($i) {
+	const connection = useStream().useChannel('reversi');
 
-			this.connection.on('invited', this.onInvited);
+	connection.on('matched', x => {
+		startGame(x.game);
+	});
 
-			this.connection.on('matched', this.onMatched);
+	connection.on('invited', invite => {
+		invitations.value.unshift(invite);
+	});
 
-			this.pingClock = setInterval(() => {
-				if (this.matching) {
-					this.connection.send('ping', {
-						id: this.matching.id,
-					});
-				}
-			}, 3000);
+	onUnmounted(() => {
+		connection.dispose();
+	});
+}
 
-			os.api('games/reversi/games', {
-				my: true,
-			}).then(games => {
-				this.myGames = games;
-			});
+const invitations = ref<Misskey.entities.UserLite[]>([]);
+const matchingUser = ref<Misskey.entities.UserLite | null>(null);
+const matchingAny = ref<boolean>(false);
 
-			os.api('games/reversi/invitations').then(invitations => {
-				this.invitations = this.invitations.concat(invitations);
-			});
-		}
+function startGame(game: Misskey.entities.ReversiGameDetailed) {
+	matchingUser.value = null;
+	matchingAny.value = false;
+	router.push(`/reversi/g/${game.id}`);
+}
 
-		os.api('games/reversi/games').then(games => {
-			this.games = games;
-			this.gamesFetching = false;
+async function matchHeatbeat() {
+	if (matchingUser.value) {
+		const res = await misskeyApi('reversi/match', {
+			userId: matchingUser.value.id,
 		});
-	},
 
-	beforeUnmount() {
-		if (this.connection) {
-			this.connection.dispose();
-			clearInterval(this.pingClock);
+		if (res != null) {
+			startGame(res);
 		}
-	},
+	} else if (matchingAny.value) {
+		const res = await misskeyApi('reversi/match', {
+			userId: null,
+		});
 
-	methods: {
-		go(game) {
-			const url = '/games/reversi/' + game.id;
-			if (this.navHook) {
-				this.navHook(url);
-			} else {
-				this.$router.push(url);
-			}
-		},
+		if (res != null) {
+			startGame(res);
+		}
+	}
+}
 
-		async match() {
-			const user = await os.selectUser({ local: true });
-			if (user == null) return;
-			os.api('games/reversi/match', {
-				userId: user.id,
-			}).then(res => {
-				if (res == null) {
-					this.matching = user;
-				} else {
-					this.go(res);
-				}
-			});
-		},
+async function matchUser() {
+	const user = await os.selectUser({ local: true });
+	if (user == null) return;
 
-		cancel() {
-			this.matching = null;
-			os.api('games/reversi/match/cancel');
-		},
+	matchingUser.value = user;
 
-		accept(invitation) {
-			os.api('games/reversi/match', {
-				userId: invitation.parent.id,
-			}).then(game => {
-				if (game) {
-					this.go(game);
-				}
-			});
-		},
+	matchHeatbeat();
+}
 
-		onMatched(game) {
-			this.go(game);
-		},
+async function matchAny() {
+	matchingAny.value = true;
 
-		onInvited(invite) {
-			this.invitations.unshift(invite);
-		},
-	},
+	matchHeatbeat();
+}
+
+function cancelMatching() {
+	if (matchingUser.value) {
+		misskeyApi('reversi/cancel-match', { userId: matchingUser.value.id });
+		matchingUser.value = null;
+	} else if (matchingAny.value) {
+		misskeyApi('reversi/cancel-match', { userId: null });
+		matchingAny.value = false;
+	}
+}
+
+async function accept(invitation) {
+	const game = await misskeyApi('reversi/match', {
+		userId: invitation.parent.id,
+	});
+	if (game) {
+		startGame(game);
+	}
+}
+
+useInterval(matchHeatbeat, 1000 * 10, { immediate: false, afterMounted: true });
+
+onMounted(() => {
+	misskeyApi('reversi/invitations').then(_invitations => {
+		invitations.value = _invitations;
+	});
 });
+
+definePageMetadata(computed(() => ({
+	title: 'Reversi',
+	icon: 'ti ti-device-gamepad',
+})));
 </script>
 
 	<style lang="scss" scoped>

packages/frontend/vite.config.ts

@@ -103,7 +103,7 @@ export function getConfig(): UserConfig {
 
 		// https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies
 		optimizeDeps: {
-			include: ['misskey-js'],
+			include: ['misskey-js', 'misskey-reversi'],
 		},
 
 		build: {
@@ -135,7 +135,7 @@ export function getConfig(): UserConfig {
 
 			// https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies
 			commonjsOptions: {
-				include: [/misskey-js/, /node_modules/],
+				include: [/misskey-js/, /misskey-reversi/, /node_modules/],
 			},
 		},