enhance(reversi): 変則なしマッチングを可能に

2 files changed, 76 insertions, 57 deletions

diff --git a/packages/frontend/src/pages/reversi/game.setting.vue b/packages/frontend/src/pages/reversi/game.setting.vue
index b1e66e4fdd..0fbabfe4de 100644
--- a/packages/frontend/src/pages/reversi/game.setting.vue
+++ b/packages/frontend/src/pages/reversi/game.setting.vue
@@ -12,69 +12,74 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="_gaps" :class="{ [$style.disallowInner]: isReady }">
 				<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);">
-						<div>{{ mapName }}</div>
-						<MkButton style="margin-left: auto;" @click="chooseMap">{{ i18n.ts._reversi.chooseBoard }}</MkButton>
-					</div>
+				<template v-if="game.noIrregularRules">
+					<div>{{ i18n.ts._reversi.disallowIrregularRules }}</div>
+				</template>
+				<template v-else>
+					<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 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;" :class="x === 'b' ? 'ti ti-circle-filled' : '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;" :class="x === 'b' ? 'ti ti-circle-filled' : 'ti ti-circle'"></i>
+								</div>
 							</div>
 						</div>
 					</div>
-				</div>
 
-				<MkFolder :defaultOpen="true">
-					<template #label>{{ i18n.ts._reversi.blackOrWhite }}</template>
+					<MkFolder :defaultOpen="true">
+						<template #label>{{ i18n.ts._reversi.blackOrWhite }}</template>
 
-					<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>
-						</option>
-						<option :value="'2'">
-							<I18n :src="i18n.ts._reversi.blackIs" tag="span">
-								<template #name>
-									<b><MkUserName :user="game.user2"/></b>
-								</template>
-							</I18n>
-						</option>
-					</MkRadios>
-				</MkFolder>
+						<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>
+							</option>
+							<option :value="'2'">
+								<I18n :src="i18n.ts._reversi.blackIs" tag="span">
+									<template #name>
+										<b><MkUserName :user="game.user2"/></b>
+									</template>
+								</I18n>
+							</option>
+						</MkRadios>
+					</MkFolder>
 
-				<MkFolder :defaultOpen="true">
-					<template #label>{{ i18n.ts._reversi.timeLimitForEachTurn }}</template>
-					<template #suffix>{{ game.timeLimitForEachTurn }}{{ i18n.ts._time.second }}</template>
+					<MkFolder :defaultOpen="true">
+						<template #label>{{ i18n.ts._reversi.timeLimitForEachTurn }}</template>
+						<template #suffix>{{ game.timeLimitForEachTurn }}{{ i18n.ts._time.second }}</template>
 
-					<MkRadios v-model="game.timeLimitForEachTurn">
-						<option :value="5">5{{ i18n.ts._time.second }}</option>
-						<option :value="10">10{{ i18n.ts._time.second }}</option>
-						<option :value="30">30{{ i18n.ts._time.second }}</option>
-						<option :value="60">60{{ i18n.ts._time.second }}</option>
-						<option :value="90">90{{ i18n.ts._time.second }}</option>
-						<option :value="120">120{{ i18n.ts._time.second }}</option>
-						<option :value="180">180{{ i18n.ts._time.second }}</option>
-						<option :value="3600">3600{{ i18n.ts._time.second }}</option>
-					</MkRadios>
-				</MkFolder>
+						<MkRadios v-model="game.timeLimitForEachTurn">
+							<option :value="5">5{{ i18n.ts._time.second }}</option>
+							<option :value="10">10{{ i18n.ts._time.second }}</option>
+							<option :value="30">30{{ i18n.ts._time.second }}</option>
+							<option :value="60">60{{ i18n.ts._time.second }}</option>
+							<option :value="90">90{{ i18n.ts._time.second }}</option>
+							<option :value="120">120{{ i18n.ts._time.second }}</option>
+							<option :value="180">180{{ i18n.ts._time.second }}</option>
+							<option :value="3600">3600{{ i18n.ts._time.second }}</option>
+						</MkRadios>
+					</MkFolder>
 
-				<MkFolder :defaultOpen="true">
-					<template #label>{{ i18n.ts._reversi.rules }}</template>
+					<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 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>
+				</template>
 			</div>
 		</div>
 	</MkSpacer>
diff --git a/packages/frontend/src/pages/reversi/index.vue b/packages/frontend/src/pages/reversi/index.vue
index 7c687e813c..8deaead698 100644
--- a/packages/frontend/src/pages/reversi/index.vue
+++ b/packages/frontend/src/pages/reversi/index.vue
@@ -157,6 +157,7 @@ if ($i) {
 const invitations = ref<Misskey.entities.UserLite[]>([]);
 const matchingUser = ref<Misskey.entities.UserLite | null>(null);
 const matchingAny = ref<boolean>(false);
+const noIrregularRules = ref<boolean>(false);
 
 function startGame(game: Misskey.entities.ReversiGameDetailed) {
 	matchingUser.value = null;
@@ -182,6 +183,7 @@ async function matchHeatbeat() {
 	} else if (matchingAny.value) {
 		const res = await misskeyApi('reversi/match', {
 			userId: null,
+			noIrregularRules: noIrregularRules.value,
 		});
 
 		if (res != null) {
@@ -199,10 +201,22 @@ async function matchUser() {
 	matchHeatbeat();
 }
 
-async function matchAny() {
-	matchingAny.value = true;
-
-	matchHeatbeat();
+function matchAny(ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts._reversi.allowIrregularRules,
+		action: () => {
+			noIrregularRules.value = false;
+			matchingAny.value = true;
+			matchHeatbeat();
+		},
+	}, {
+		text: i18n.ts._reversi.disallowIrregularRules,
+		action: () => {
+			noIrregularRules.value = true;
+			matchingAny.value = true;
+			matchHeatbeat();
+		},
+	}], ev.currentTarget ?? ev.target);
 }
 
 function cancelMatching() {