wip

2024-05-06 11:29:54 +02:00 · 2024-01-19 20:49:17 +09:00 · 2024-01-19 20:49:17 +09:00 · 8dc2f1f49d
parent 353098f576
commit 8dc2f1f49d
13 changed files with 204 additions and 231 deletions
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -2665,6 +2665,8 @@ export interface Locale extends ILocale {
        "isLlotheo": string;
        "loopedMap": string;
        "canPutEverywhere": string;
+        "freeMatch": string;
+        "lookingForPlayer": string;
    };
 }
 declare const locales: {
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -2539,3 +2539,5 @@ _reversi:
  isLlotheo: "石の少ない方が勝ち(ロセオ)"
  loopedMap: "ループマップ"
  canPutEverywhere: "どこでも置けるモード"
+  freeMatch: "フリーマッチ"
+  lookingForPlayer: "対戦相手を探しています"
--- a/packages/backend/src/core/GlobalEventService.ts
+++ b/packages/backend/src/core/GlobalEventService.ts
@ -175,6 +175,7 @@ export interface ReversiGameEventTypes {
 		user2: boolean;
 	};
 	updateSettings: {
+		userId: MiUser['id'];
 		key: string;
 		value: any;
 	};
--- a/packages/backend/src/core/ReversiService.ts
+++ b/packages/backend/src/core/ReversiService.ts
@ -101,6 +101,38 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {

 	@bindThis
 	public async matchAnyUser(me: MiUser): Promise<MiReversiGame | null> {
+		//#region まず自分宛ての招待を探す
+		const invitations = await this.redisClient.zrange(
+			`reversi:matchSpecific:${me.id}`,
+			Date.now() - MATCHING_TIMEOUT_MS,
+			'+inf',
+			'BYSCORE');
+
+		if (invitations.length > 0) {
+			const invitorId = invitations[Math.floor(Math.random() * invitations.length)];
+			await this.redisClient.zrem(`reversi:matchSpecific:${me.id}`, invitorId);
+
+			const game = await this.reversiGamesRepository.insert({
+				id: this.idService.gen(),
+				user1Id: invitorId,
+				user2Id: me.id,
+				user1Ready: false,
+				user2Ready: false,
+				isStarted: false,
+				isEnded: false,
+				logs: [],
+				map: Reversi.maps.eighteight.data,
+				bw: 'random',
+				isLlotheo: false,
+			}).then(x => this.reversiGamesRepository.findOneByOrFail(x.identifiers[0]));
+
+			const packed = await this.reversiGameEntityService.packDetail(game, { id: invitorId });
+			this.globalEventService.publishReversiStream(invitorId, 'matched', { game: packed });
+
+			return game;
+		}
+		//#endregion
+
 		const matchings = await this.redisClient.zrange(
 			'reversi:matchAny',
 			Date.now() - MATCHING_TIMEOUT_MS,
@ -270,6 +302,7 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
 		});

 		this.globalEventService.publishReversiGameStream(game.id, 'updateSettings', {
+			userId: user.id,
 			key: key,
 			value: value,
 		});
--- a/packages/frontend/src/components/MkRadios.vue
+++ b/packages/frontend/src/components/MkRadios.vue
@ -18,6 +18,9 @@ export default defineComponent({
 		watch(value, () => {
 			context.emit('update:modelValue', value.value);
 		});
+		watch(() => props.modelValue, v => {
+			value.value = v;
+		});
 		if (!context.slots.default) return null;
 		let options = context.slots.default();
 		const label = context.slots.label && context.slots.label();
--- a/packages/frontend/src/pages/reversi/game.board.vue
+++ b/packages/frontend/src/pages/reversi/game.board.vue
@ -5,26 +5,26 @@ SPDX-License-Identifier: AGPL-3.0-only

 <template>
 <MkSpacer :contentMax="600">
-	<div :class="$style.root">
+	<div :class="$style.root" class="_gaps">
 		<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="i18n.t('_reversi.turnOf', { name: turnUser.name })" :plain="true" :customEmojis="turnUser.emojis"/>
+		<div style="overflow: clip; line-height: 28px;">
+			<div v-if="!iAmPlayer && !game.isEnded && turnUser" class="turn">
+				<Mfm :key="'turn:' + turnUser.id" :text="i18n.t('_reversi.turnOf', { name: turnUser.name ?? turnUser.username })" :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">
+			</div>
+			<div v-if="(logPos !== logs.length) && turnUser" class="turn">
+				<Mfm :key="'past-turn-of:' + turnUser.id" :text="i18n.t('_reversi.pastTurnOf', { name: turnUser.name ?? turnUser.username })" :plain="true" :customEmojis="turnUser.emojis"/>
+			</div>
+			<div v-if="iAmPlayer && !game.isEnded && !isMyTurn" class="turn1">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/></div>
+			<div v-if="iAmPlayer && !game.isEnded && isMyTurn" class="turn2" style="animation: tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</div>
+			<div 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"/>
+					<Mfm :key="'won'" :text="i18n.t('_reversi.won', { name: game.winner.name ?? game.winner.username })" :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>

 		<div :class="$style.board">
@ -62,28 +62,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>

-		<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 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 }}</div>

 		<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 v-if="game.isEnded" class="_panel _gaps_s" style="padding: 16px;">
+			<div>{{ logPos }} / {{ logs.length }}</div>
+			<div v-if="!autoplaying" class="_buttonsCenter">
+				<MkButton :disabled="logPos === 0" @click="logPos = 0"><i class="ti ti-chevrons-left"></i></MkButton>
+				<MkButton :disabled="logPos === 0" @click="logPos--"><i class="ti ti-chevron-left"></i></MkButton>
+				<MkButton :disabled="logPos === logs.length" @click="logPos++"><i class="ti ti-chevron-right"></i></MkButton>
+				<MkButton :disabled="logPos === logs.length" @click="logPos = logs.length"><i class="ti ti-chevrons-right"></i></MkButton>
 			</div>
-			<MkButton :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;" @click="autoplay()"><i class="fas fa-play"></i></MkButton>
+			<MkButton style="margin: auto;" :disabled="autoplaying" @click="autoplay()"><i class="ti ti-player-play"></i></MkButton>
 		</div>

-		<div class="info">
+		<div>
 			<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>
+
+		<MkA v-if="game.isEnded" :to="`/reversi`">
+			<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; width: 200px; margin: auto;"/>
+		</MkA>
 	</div>
 </MkSpacer>
 </template>
@ -191,7 +195,7 @@ if (game.value.isStarted && !game.value.isEnded) {
 		props.connection.send('syncState', {
 			crc32: crc32,
 		});
-	}, 3000, { immediate: false, afterMounted: true });
+	}, 5000, { immediate: false, afterMounted: true });
 }

 function putStone(pos) {
@ -422,40 +426,3 @@ $gap: 4px;
 	}
 }
 </style>
-
-	<style lang="scss" scoped>
-
-	@use "sass:math";
-
-	.xqnhankfuuilcwvhgsopeqncafzsquya {
-
-		> .status {
-			margin: 0;
-			padding: 16px 0;
-		}
-
-		> .actions {
-			padding-bottom: 16px;
-		}
-
-		> .player {
-			padding: 0 16px 32px 16px;
-			margin: 0 auto;
-			max-width: 500px;
-
-			> span {
-				display: inline-block;
-				margin: 0 8px;
-				min-width: 70px;
-			}
-
-			> .buttons {
-				display: flex;
-
-				> * {
-					flex: 1;
-				}
-			}
-		}
-	}
-	</style>
--- a/packages/frontend/src/pages/reversi/game.setting.vue
+++ b/packages/frontend/src/pages/reversi/game.setting.vue
@ -6,10 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<MkSpacer :contentMax="600">
-		<header><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></header>
+		<div style="text-align: center;"><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></div>

 		<div class="_gaps">
-			<p>{{ i18n.ts._reversi.gameSettings }}</p>
+			<div style="font-size: 1.5em; text-align: center;">{{ i18n.ts._reversi.gameSettings }}</div>

 			<div class="_panel">
 				<div style="display: flex; align-items: center; padding: 16px; border-bottom: solid 1px var(--divider);">
@ -21,35 +21,33 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<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>
+							<i v-if="x === 'b' || x === 'w'" style="pointer-events: none; user-select: none;" :class="x === 'b' ? 'ti ti-circle-filled' : 'ti ti-circle'"></i>
 						</div>
 					</div>
 				</div>
 			</div>

-			<div class="_panel" style="padding: 16px;">
-				<header>
-					<span>{{ i18n.ts._reversi.blackOrWhite }}</span>
-				</header>
+			<MkFolder :defaultOpen="true">
+				<template #label>{{ i18n.ts._reversi.blackOrWhite }}</template>

-				<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')">
+				<MkRadios v-model="game.bw">
+					<option value="random">{{ i18n.ts.random }}</option>
+					<option :value="'1'">
 						<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')">
+					</option>
+					<option :value="'2'">
 						<I18n :src="i18n.ts._reversi.blackIs" tag="span">
 							<template #name>
 								<b><MkUserName :user="game.user2"/></b>
 							</template>
 						</I18n>
-					</MkRadio>
-				</div>
-			</div>
+					</option>
+				</MkRadios>
+			</MkFolder>

 			<MkFolder :defaultOpen="true">
 				<template #label>{{ i18n.ts._reversi.rules }}</template>
@ -86,14 +84,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as Reversi from 'misskey-reversi';
-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 MkRadios from '@/components/MkRadios.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import * as os from '@/os.js';
@ -126,15 +121,12 @@ const isOpReady = computed(() => {
 	return false;
 });

+watch(() => game.value.bw, () => {
+	updateSettings('bw');
+});
+
 function chooseMap(ev: MouseEvent) {
-	const menu: MenuItem[] = [{
-		text: i18n.ts.random,
-		icon: 'ti ti-dice',
-		action: () => {
-			game.value.map = null;
-			updateSettings('map');
-		},
-	}];
+	const menu: MenuItem[] = [];

 	for (const c of mapCategories) {
 		const maps = Object.values(Reversi.maps).filter(x => x.category === c);
@ -183,7 +175,9 @@ function updateSettings(key: keyof Misskey.entities.ReversiGameDetailed) {
 	});
 }

-function onUpdateSettings({ key, value }: { key: keyof Misskey.entities.ReversiGameDetailed; value: any; }) {
+function onUpdateSettings({ userId, key, value }: { userId: string; key: keyof Misskey.entities.ReversiGameDetailed; value: any; }) {
+	if (userId === $i.id) return;
+	if (game.value[key] === value) return;
 	game.value[key] = value;
 }

@ -221,6 +215,8 @@ onUnmounted(() => {
 }

 .boardCell {
+	display: grid;
+	place-items: center;
 	background: transparent;
 	border: solid 2px var(--divider);
 	border-radius: 6px;
@ -237,5 +233,4 @@ onUnmounted(() => {
 	background: var(--acrylicBg);
 	border-top: solid 0.5px var(--divider);
 }
-
 </style>
--- a/packages/frontend/src/pages/reversi/index.vue
+++ b/packages/frontend/src/pages/reversi/index.vue
@ -4,23 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<MkSpacer v-if="!matchingAny && !matchingUser" :contentMax="600" class="bgvwxkhb">
-	<h1>Misskey {{ i18n.ts._reversi.reversi }}</h1>
-
+<MkSpacer v-if="!matchingAny && !matchingUser" :contentMax="600">
 	<div class="_gaps">
-		<div class="_buttonsCenter">
-			<MkButton primary rounded @click="matchAny">Match</MkButton>
-			<MkButton primary rounded @click="matchUser">{{ i18n.ts.invite }}</MkButton>
+		<div>
+			<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
 		</div>

-		<MkFolder v-if="invitations.length > 0">
-			<template #header>{{ i18n.ts.invitations }}</template>
-			<div class="nfcacttm">
-				<button v-for="invitation in invitations" class="invitation _panel _button" tabindex="-1" @click="accept(invitation)">
-					<MkAvatar class="avatar" :user="invitation.parent" :showIndicator="true"/>
-					<span class="name"><b><MkUserName :user="invitation.parent"/></b></span>
-					<span class="username">@{{ invitation.parent.username }}</span>
-					<MkTime :time="invitation.createdAt" class="time"/>
+		<div class="_buttonsCenter">
+			<MkButton primary gradate rounded @click="matchAny">{{ i18n.ts._reversi.freeMatch }}</MkButton>
+			<MkButton primary gradate rounded @click="matchUser">{{ i18n.ts.invite }}</MkButton>
+		</div>
+
+		<MkFolder v-if="invitations.length > 0" :defaultOpen="true">
+			<template #label>{{ i18n.ts.invitations }}</template>
+			<div class="_gaps_s">
+				<button v-for="user in invitations" :key="user.id" v-panel :class="$style.invitation" class="_button" tabindex="-1" @click="accept(user)">
+					<MkAvatar style="width: 32px; height: 32px; margin-right: 8px;" :user="user" :showIndicator="true"/>
+					<span style="margin-right: 8px;"><b><MkUserName :user="user"/></b></span>
+					<span>@{{ user.username }}</span>
 				</button>
 			</div>
 		</MkFolder>
@ -29,12 +30,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<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 :class="$style.gamePreviews">
+						<MkA v-for="g in items" :key="g.id" v-panel :class="$style.gamePreview" tabindex="-1" :to="`/reversi/g/${g.id}`">
+							<div :class="$style.gamePreviewPlayers">
+								<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
+							</div>
+							<div :class="$style.gamePreviewFooter">
+								<span :style="!g.isEnded ? 'color: var(--accent);' : ''">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span>
+								<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
 							</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>
@ -45,12 +49,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<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 :class="$style.gamePreviews">
+						<MkA v-for="g in items" :key="g.id" v-panel :class="$style.gamePreview" tabindex="-1" :to="`/reversi/g/${g.id}`">
+							<div :class="$style.gamePreviewPlayers">
+								<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
+							</div>
+							<div :class="$style.gamePreviewFooter">
+								<span :style="!g.isEnded ? 'color: var(--accent);' : ''">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span>
+								<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
 							</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>
@ -58,23 +65,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkFolder>
 	</div>
 </MkSpacer>
-<div v-else class="sazhgisb">
-	<h1 v-if="matchingUser">
-		<I18n :src="i18n.ts.waitingFor" tag="span">
-			<template #x>
-				<b><MkUserName :user="matchingUser"/></b>
-			</template>
-		</I18n>
-		<MkEllipsis/>
-	</h1>
-	<h1 v-else>
-		Matching
-		<MkEllipsis/>
-	</h1>
-	<div class="cancel">
-		<MkButton inline round @click="cancelMatching">{{ i18n.ts.cancel }}</MkButton>
+<MkSpacer v-else :contentMax="600">
+	<div :class="$style.waitingScreen">
+		<div v-if="matchingUser" :class="$style.waitingScreenTitle">
+			<I18n :src="i18n.ts.waitingFor" tag="span">
+				<template #x>
+					<b><MkUserName :user="matchingUser"/></b>
+				</template>
+			</I18n>
+			<MkEllipsis/>
+		</div>
+		<div v-else :class="$style.waitingScreenTitle">
+			{{ i18n.ts._reversi.lookingForPlayer }}<MkEllipsis/>
+		</div>
+		<div class="cancel">
+			<MkButton inline rounded @click="cancelMatching">{{ i18n.ts.cancel }}</MkButton>
+		</div>
 	</div>
-</div>
+</MkSpacer>
 </template>

 <script lang="ts" setup>
@ -114,8 +122,9 @@ if ($i) {
 		startGame(x.game);
 	});

-	connection.on('invited', invite => {
-		invitations.value.unshift(invite);
+	connection.on('invited', invitation => {
+		if (invitations.value.some(x => x.id === invitation.user.id)) return;
+		invitations.value.unshift(invitation.user);
 	});

 	onUnmounted(() => {
@ -178,9 +187,9 @@ function cancelMatching() {
 	}
 }

-async function accept(invitation) {
+async function accept(user) {
 	const game = await misskeyApi('reversi/match', {
-		userId: invitation.parent.id,
+		userId: user.id,
 	});
 	if (game) {
 		startGame(game);
@ -201,100 +210,62 @@ definePageMetadata(computed(() => ({
 })));
 </script>

-	<style lang="scss" scoped>
-	.bgvwxkhb {
-		> h1 {
-			margin: 0;
-			padding: 24px;
-			text-align: center;
-			font-size: 1.5em;
-			background: linear-gradient(0deg, #43c583, #438881);
-			color: #fff;
-		}
+<style lang="scss" module>
+.invitation {
+	display: flex;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 16px;
+	line-height: 32px;
+	text-align: left;
+}

-		> .play {
-			text-align: center;
-		}
+.gamePreviews {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	grid-gap: var(--margin);
+}
+
+.gamePreview {
+	font-size: 90%;
+	border-radius: 8px;
+	overflow: clip;
+}
+
+.gamePreviewPlayers {
+	text-align: center;
+	padding: 16px;
+	line-height: 32px;
+}
+
+.gamePreviewPlayersAvatar {
+	width: 32px;
+	height: 32px;
+
+	&:first-child {
+		margin-right: 8px;
 	}

-	.sazhgisb {
-		text-align: center;
+	&:last-child {
+		margin-left: 8px;
 	}
+}

-	.nfcacttm {
-		> .invitation {
-			display: flex;
-			box-sizing: border-box;
-			width: 100%;
-			padding: 16px;
-			line-height: 32px;
-			text-align: left;
+.gamePreviewFooter {
+	display: flex;
+	align-items: baseline;
+	border-top: solid 0.5px var(--divider);
+	padding: 6px 10px;
+	font-size: 0.9em;
+}

-			> .avatar {
-				width: 32px;
-				height: 32px;
-				margin-right: 8px;
-			}
+.waitingScreen {
+	text-align: center;
+}

-			> .name {
-				margin-right: 8px;
-			}
-
-			> .username {
-				margin-right: 8px;
-				opacity: 0.7;
-			}
-
-			> .time {
-				margin-left: auto;
-				opacity: 0.7;
-			}
-		}
-	}
-
-	.knextgwz {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-		grid-gap: var(--margin);
-
-		> .game {
-			> .players {
-				text-align: center;
-				padding: 16px;
-				line-height: 32px;
-
-				> .avatar {
-					width: 32px;
-					height: 32px;
-
-					&:first-child {
-						margin-right: 8px;
-					}
-
-					&:last-child {
-						margin-left: 8px;
-					}
-				}
-			}
-
-			> footer {
-				display: flex;
-				align-items: baseline;
-				border-top: solid 0.5px var(--divider);
-				padding: 6px 8px;
-				font-size: 0.9em;
-
-				> .state {
-					&.playing {
-						color: var(--accent);
-					}
-				}
-
-				> .time {
-					margin-left: auto;
-					opacity: 0.7;
-				}
-			}
-		}
-	}
-	</style>
+.waitingScreenTitle {
+	font-size: 1.5em;
+	margin-bottom: 16px;
+	margin-top: 32px;
+}
+</style>
--- a/packages/misskey-js/src/autogen/apiClientJSDoc.ts
+++ b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
@ -1,6 +1,6 @@
 /*
 * version: 2023.12.2
- * generatedAt: 2024-01-19T08:51:50.618Z
+ * generatedAt: 2024-01-19T11:00:07.160Z
 */

 import type { SwitchCaseResponseType } from '../api.js';
--- a/packages/misskey-js/src/autogen/endpoint.ts
+++ b/packages/misskey-js/src/autogen/endpoint.ts
@ -1,6 +1,6 @@
 /*
 * version: 2023.12.2
- * generatedAt: 2024-01-19T08:51:50.615Z
+ * generatedAt: 2024-01-19T11:00:07.158Z
 */

 import type {
--- a/packages/misskey-js/src/autogen/entities.ts
+++ b/packages/misskey-js/src/autogen/entities.ts
@ -1,6 +1,6 @@
 /*
 * version: 2023.12.2
- * generatedAt: 2024-01-19T08:51:50.614Z
+ * generatedAt: 2024-01-19T11:00:07.156Z
 */

 import { operations } from './types.js';
--- a/packages/misskey-js/src/autogen/models.ts
+++ b/packages/misskey-js/src/autogen/models.ts
@ -1,6 +1,6 @@
 /*
 * version: 2023.12.2
- * generatedAt: 2024-01-19T08:51:50.613Z
+ * generatedAt: 2024-01-19T11:00:07.155Z
 */

 import { components } from './types.js';
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@ -3,7 +3,7 @@

 /*
 * version: 2023.12.2
- * generatedAt: 2024-01-19T08:51:50.533Z
+ * generatedAt: 2024-01-19T11:00:07.077Z
 */

 /**
@ -4518,8 +4518,7 @@ export type components = {
      canPutEverywhere: boolean;
      loopedBoard: boolean;
      logs: {
-          /** Format: date-time */
-          at: string;
+          at: number;
          color: boolean;
          pos: number;
        }[];