wip

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

@@ -549,6 +549,14 @@ const routes = [{
 	path: '/reversi/g/:gameId',
 	component: page(() => import('@/pages/reversi/game.vue')),
 	loginRequired: false,
+}, {
+	path: '/mahjong',
+	component: page(() => import('@/pages/mahjong/index.vue')),
+	loginRequired: false,
+}, {
+	path: '/mahjong/g/:roomId',
+	component: page(() => import('@/pages/mahjong/room.vue')),
+	loginRequired: true,
 }, {
 	path: '/timeline',
 	component: page(() => import('@/pages/timeline.vue')),

packages/frontend/src/pages/games.vue

@@ -18,6 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
 				</MkA>
 			</div>
+			<div class="_panel">
+				<MkA to="/mahjong">
+					<img src="/client-assets/mahjong/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
+				</MkA>
+			</div>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>

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

@@ -0,0 +1,166 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkSpacer :contentMax="600">
+	<div class="_gaps">
+		<div>
+			<img src="/client-assets/mahjong/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
+		</div>
+
+		<div class="_panel _gaps" style="padding: 16px;">
+			<div class="_buttonsCenter">
+				<MkButton primary gradate rounded @click="joinRoom">{{ i18n.ts._mahjong.joinRoom }}</MkButton>
+				<MkButton primary gradate rounded @click="createRoom">{{ i18n.ts._mahjong.createRoom }}</MkButton>
+			</div>
+			<div style="font-size: 90%; opacity: 0.7; text-align: center;"><i class="ti ti-music"></i> {{ i18n.ts.soundWillBePlayed }}</div>
+		</div>
+	</div>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { computed, onDeactivated, 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';
+import * as sound from '@/scripts/sound.js';
+
+const myGamesPagination = {
+	endpoint: 'mahjong/games' as const,
+	limit: 10,
+	params: {
+		my: true,
+	},
+};
+
+const gamesPagination = {
+	endpoint: 'mahjong/games' as const,
+	limit: 10,
+};
+
+const router = useRouter();
+
+const invitations = ref<Misskey.entities.UserLite[]>([]);
+const matchingUser = ref<Misskey.entities.UserLite | null>(null);
+const matchingAny = ref<boolean>(false);
+const noIrregularRules = ref<boolean>(false);
+
+async function joinRoom() {
+	const { canceled, result } = await os.inputText({
+		title: 'roomId',
+	});
+	if (canceled) return;
+	const room = await misskeyApi('mahjong/join-room', {
+		roomId: result,
+	});
+	router.push(`/mahjong/g/${room.id}`);
+}
+
+async function createRoom(ev: MouseEvent) {
+	const room = await misskeyApi('mahjong/create-room', {
+	});
+	router.push(`/mahjong/g/${room.id}`);
+}
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts._mahjong.mahjong,
+	icon: 'ti ti-device-gamepad',
+})));
+</script>
+
+<style lang="scss" module>
+@keyframes blink {
+	0% { opacity: 1; }
+	50% { opacity: 0.2; }
+}
+
+.invitation {
+	display: flex;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 16px;
+	line-height: 32px;
+	text-align: left;
+}
+
+.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;
+}
+
+.gamePreviewActive {
+	box-shadow: inset 0 0 8px 0px var(--accent);
+}
+
+.gamePreviewWaiting {
+	box-shadow: inset 0 0 8px 0px var(--warn);
+}
+
+.gamePreviewPlayers {
+	text-align: center;
+	padding: 16px;
+	line-height: 32px;
+}
+
+.gamePreviewPlayersAvatar {
+	width: 32px;
+	height: 32px;
+
+	&:first-child {
+		margin-right: 8px;
+	}
+
+	&:last-child {
+		margin-left: 8px;
+	}
+}
+
+.gamePreviewFooter {
+	display: flex;
+	align-items: baseline;
+	border-top: solid 0.5px var(--divider);
+	padding: 6px 10px;
+	font-size: 0.9em;
+}
+
+.gamePreviewStatusActive {
+	color: var(--accent);
+	font-weight: bold;
+	animation: blink 2s infinite;
+}
+
+.gamePreviewStatusWaiting {
+	color: var(--warn);
+	font-weight: bold;
+	animation: blink 2s infinite;
+}
+
+.waitingScreen {
+	text-align: center;
+}
+
+.waitingScreenTitle {
+	font-size: 1.5em;
+	margin-bottom: 16px;
+	margin-top: 32px;
+}
+</style>

packages/frontend/src/pages/mahjong/room.game.vue

@@ -0,0 +1,307 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkSpacer :contentMax="500">
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, shallowRef, triggerRef, watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import * as Mahjong from 'misskey-mahjong';
+import MkButton from '@/components/MkButton.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkSwitch from '@/components/MkSwitch.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';
+import * as sound from '@/scripts/sound.js';
+import * as os from '@/os.js';
+import { confetti } from '@/scripts/confetti.js';
+
+const $i = signinRequired();
+
+const props = defineProps<{
+	room: Misskey.entities.ReversiRoomDetailed;
+	connection?: Misskey.ChannelConnection | null;
+}>();
+
+const room = ref<Misskey.entities.ReversiRoomDetailed>(deepClone(props.room));
+const myUserNumber = computed(() => room.value.user1Id === $i.id ? 1 : room.value.user2Id === $i.id ? 2 : room.value.user3Id === $i.id ? 3 : 4);
+const engine = shallowRef(new Mahjong.Engine.PlayerGameEngine(myUserNumber, room.value.gameState));
+
+const isMyTurn = computed(() => {
+	return engine.value.state.turn === engine.value.myHouse;
+});
+
+/*
+if (room.value.isStarted && !room.value.isEnded) {
+	useInterval(() => {
+		if (room.value.isEnded) return;
+		const crc32 = engine.value.calcCrc32();
+		if (_DEV_) console.log('crc32', crc32);
+		misskeyApi('reversi/verify', {
+			roomId: room.value.id,
+			crc32: crc32.toString(),
+		}).then((res) => {
+			if (res.desynced) {
+				console.log('resynced');
+				restoreRoom(res.room!);
+			}
+		});
+	}, 10000, { immediate: false, afterMounted: true });
+}
+*/
+
+const appliedOps: string[] = [];
+
+const myTurnTimerRmain = ref<number>(room.value.timeLimitForEachTurn);
+const opTurnTimerRmain = ref<number>(room.value.timeLimitForEachTurn);
+
+/*
+const TIMER_INTERVAL_SEC = 3;
+if (!props.room.isEnded) {
+	useInterval(() => {
+		if (myTurnTimerRmain.value > 0) {
+			myTurnTimerRmain.value = Math.max(0, myTurnTimerRmain.value - TIMER_INTERVAL_SEC);
+		}
+		if (opTurnTimerRmain.value > 0) {
+			opTurnTimerRmain.value = Math.max(0, opTurnTimerRmain.value - TIMER_INTERVAL_SEC);
+		}
+
+		if (iAmPlayer.value) {
+			if ((isMyTurn.value && myTurnTimerRmain.value === 0) || (!isMyTurn.value && opTurnTimerRmain.value === 0)) {
+			props.connection!.send('claimTimeIsUp', {});
+			}
+		}
+	}, TIMER_INTERVAL_SEC * 1000, { immediate: false, afterMounted: true });
+}
+*/
+
+async function onStreamLog(log) {
+	if (log.id == null || !appliedOps.includes(log.id)) {
+		switch (log.operation) {
+			case 'put': {
+				sound.playUrl('/client-assets/mahjong/dahai.mp3', {
+					volume: 1,
+					playbackRate: 1,
+				});
+
+				if (log.house !== engine.value.turn) { // = desyncが発生している
+					const _room = await misskeyApi('reversi/show-room', {
+						roomId: props.room.id,
+					});
+					restoreRoom(_room);
+					return;
+				}
+
+				engine.value.op_dahai(log.house, log.tile);
+				triggerRef(engine);
+
+				myTurnTimerRmain.value = room.value.timeLimitForEachTurn;
+				opTurnTimerRmain.value = room.value.timeLimitForEachTurn;
+				break;
+			}
+
+			default:
+				break;
+		}
+	}
+}
+
+function restoreRoom(_room) {
+	room.value = deepClone(_room);
+
+	engine.value = new Mahjong.Engine.PlayerGameEngine(myUserNumber, room.value.gameState);
+}
+
+onMounted(() => {
+	if (props.connection != null) {
+		props.connection.on('log', onStreamLog);
+		props.connection.on('ended', onStreamEnded);
+	}
+});
+
+onActivated(() => {
+	if (props.connection != null) {
+		props.connection.on('log', onStreamLog);
+		props.connection.on('ended', onStreamEnded);
+	}
+});
+
+onDeactivated(() => {
+	if (props.connection != null) {
+		props.connection.off('log', onStreamLog);
+		props.connection.off('ended', onStreamEnded);
+	}
+});
+
+onUnmounted(() => {
+	if (props.connection != null) {
+		props.connection.off('log', onStreamLog);
+		props.connection.off('ended', onStreamEnded);
+	}
+});
+</script>
+
+<style lang="scss" module>
+@use "sass:math";
+
+.transition_flip_enterActive,
+.transition_flip_leaveActive {
+	backface-visibility: hidden;
+	transition: opacity 0.5s ease, transform 0.5s ease;
+}
+.transition_flip_enterFrom {
+	transform: rotateY(-180deg);
+	opacity: 0;
+}
+.transition_flip_leaveTo {
+	transform: rotateY(180deg);
+	opacity: 0;
+}
+
+$label-size: 16px;
+$gap: 4px;
+
+.root {
+	text-align: center;
+}
+
+.board {
+	width: 100%;
+	box-sizing: border-box;
+	margin: 0 auto;
+
+	padding: 7px;
+	background: #8C4F26;
+	box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
+	border-radius: 12px;
+}
+
+.boardInner {
+	padding: 32px;
+
+	background: var(--panel);
+	box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
+	border-radius: 8px;
+}
+
+@container (max-width: 400px) {
+	.boardInner {
+		padding: 16px;
+	}
+}
+
+.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: 100%;
+	aspect-ratio: 1;
+	transform-style: preserve-3d;
+	perspective: 150px;
+	transition: border 0.25s ease, opacity 0.25s ease;
+
+	&.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;
+	}
+}
+
+.boardCellStone {
+	position: absolute;
+	top: 0;
+	left: 0;
+	pointer-events: none;
+	user-select: none;
+	display: block;
+	width: 100%;
+	height: 100%;
+	border-radius: 100%;
+}
+</style>

packages/frontend/src/pages/mahjong/room.setting.vue

@@ -0,0 +1,128 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<MkSpacer :contentMax="600">
+		<div class="_gaps">
+			<div class="_panel">
+				<MkAvatar v-if="room.user1" :user="room.user1" :class="$style.userAvatar"/>
+				<div v-else-if="room.user1Ai">AI</div>
+				<div v-if="room.user1Ready">OK</div>
+			</div>
+			<div class="_panel">
+				<MkAvatar v-if="room.user2" :user="room.user2" :class="$style.userAvatar"/>
+				<div v-else-if="room.user2Ai">AI</div>
+				<div v-if="room.user2Ready">OK</div>
+			</div>
+			<div class="_panel">
+				<MkAvatar v-if="room.user3" :user="room.user3" :class="$style.userAvatar"/>
+				<div v-else-if="room.user3Ai">AI</div>
+				<div v-if="room.user3Ready">OK</div>
+			</div>
+			<div class="_panel">
+				<MkAvatar v-if="room.user4" :user="room.user4" :class="$style.userAvatar"/>
+				<div v-else-if="room.user4Ai">AI</div>
+				<div v-if="room.user4Ready">OK</div>
+			</div>
+		</div>
+	</MkSpacer>
+	<template #footer>
+		<div :class="$style.footer">
+			<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
+				<div style="text-align: center;" class="_gaps_s">
+					<div class="_buttonsCenter">
+						<MkButton rounded danger @click="leave">{{ i18n.ts._mahjong.leave }}</MkButton>
+						<MkButton v-if="!isReady" rounded primary @click="ready">{{ i18n.ts._mahjong.ready }}</MkButton>
+						<MkButton v-if="isReady" rounded @click="unready">{{ i18n.ts._mahjong.cancelReady }}</MkButton>
+					</div>
+				</div>
+			</MkSpacer>
+		</div>
+	</template>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import * as Mahjong from 'misskey-mahjong';
+import { i18n } from '@/i18n.js';
+import { signinRequired } from '@/account.js';
+import { deepClone } from '@/scripts/clone.js';
+import MkButton from '@/components/MkButton.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';
+import { MenuItem } from '@/types/menu.js';
+import { useRouter } from '@/global/router/supplier.js';
+
+const $i = signinRequired();
+
+const router = useRouter();
+
+const props = defineProps<{
+	room: Misskey.entities.MahjongRoomDetailed;
+	connection: Misskey.ChannelConnection;
+}>();
+
+const room = ref<Misskey.entities.MahjongRoomDetailed>(deepClone(props.room));
+
+const isReady = computed(() => {
+	if (room.value.user1Id === $i.id && room.value.user1Ready) return true;
+	if (room.value.user2Id === $i.id && room.value.user2Ready) return true;
+	if (room.value.user3Id === $i.id && room.value.user3Ready) return true;
+	if (room.value.user4Id === $i.id && room.value.user4Ready) return true;
+	return false;
+});
+
+async function leave() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.areYouSure,
+	});
+	if (canceled) return;
+
+	props.connection.send('leave', {});
+
+	router.push('/mahjong');
+}
+
+function ready() {
+	props.connection.send('ready', true);
+}
+
+function unready() {
+	props.connection.send('ready', false);
+}
+
+function onChangeReadyStates(states) {
+	room.value.user1Ready = states.user1;
+	room.value.user2Ready = states.user2;
+	room.value.user3Ready = states.user3;
+	room.value.user4Ready = states.user4;
+}
+
+props.connection.on('changeReadyStates', onChangeReadyStates);
+
+onUnmounted(() => {
+	props.connection.off('changeReadyStates', onChangeReadyStates);
+});
+</script>
+
+<style lang="scss" module>
+.userAvatar {
+	width: 48px;
+	height: 48px;
+}
+
+.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/mahjong/room.vue

@@ -0,0 +1,113 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="room == null || (!room.isEnded && connection == null)"><MkLoading/></div>
+<RoomSetting v-else-if="!room.isStarted" :room="room" :connection="connection!"/>
+<RoomGame v-else :room="room" :connection="connection"/>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import RoomSetting from './room.setting.vue';
+import RoomGame from './room.game.vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { useStream } from '@/stream.js';
+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();
+
+const router = useRouter();
+
+const props = defineProps<{
+	roomId: string;
+}>();
+
+const room = shallowRef<Misskey.entities.MahjongRoomDetailed | null>(null);
+const connection = shallowRef<Misskey.ChannelConnection | null>(null);
+const shareWhenStart = ref(false);
+
+watch(() => props.roomId, () => {
+	fetchGame();
+});
+
+function start(_room: Misskey.entities.MahjongRoomDetailed) {
+	if (room.value?.isStarted) return;
+
+	room.value = _room;
+}
+
+async function fetchGame() {
+	const _room = await misskeyApi('mahjong/show-room', {
+		roomId: props.roomId,
+	});
+
+	room.value = _room;
+	shareWhenStart.value = false;
+
+	if (connection.value) {
+		connection.value.dispose();
+	}
+	if (!room.value.isEnded) {
+		connection.value = useStream().useChannel('mahjongRoom', {
+			roomId: room.value.id,
+		});
+		connection.value.on('started', x => {
+			start(x.room);
+		});
+		connection.value.on('canceled', x => {
+			connection.value?.dispose();
+
+			if (x.userId !== $i.id) {
+				os.alert({
+					type: 'warning',
+					text: i18n.ts._mahjong.roomCanceled,
+				});
+				router.push('/mahjong');
+			}
+		});
+	}
+}
+
+// 通信を取りこぼした場合の救済
+useInterval(async () => {
+	if (room.value == null) return;
+	if (room.value.isStarted) return;
+
+	const _room = await misskeyApi('mahjong/show-room', {
+		roomId: props.roomId,
+	});
+
+	if (_room.isStarted) {
+		start(_room);
+	} else {
+		room.value = _room;
+	}
+}, 1000 * 10, {
+	immediate: false,
+	afterMounted: true,
+});
+
+onMounted(() => {
+	fetchGame();
+});
+
+onUnmounted(() => {
+	if (connection.value) {
+		connection.value.dispose();
+	}
+});
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts._mahjong.mahjong,
+	icon: 'ti ti-device-roompad',
+})));
+</script>