diff --git a/locales/index.d.ts b/locales/index.d.ts
index ed9e9f9bb9..8a87c1f8f9 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -9661,6 +9661,32 @@ export interface Locale extends ILocale {
          * 飜
          */
         "fan": string;
+        "_fanNames": {
+            /**
+             * 満貫
+             */
+            "mangan": string;
+            /**
+             * 跳満
+             */
+            "haneman": string;
+            /**
+             * 倍満
+             */
+            "baiman": string;
+            /**
+             * 三倍満
+             */
+            "sanbaiman": string;
+            /**
+             * 役満
+             */
+            "yakuman": string;
+            /**
+             * 数え役満
+             */
+            "kazoeyakuman": string;
+        };
         "_yakus": {
             /**
              * 立直
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 87e7c7566c..ab493d190f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2574,6 +2574,13 @@ _mahjong:
   dora: "ドラ"
   redDora: "赤ドラ"
   fan: "飜"
+  _fanNames:
+    mangan: "満貫"
+    haneman: "跳満"
+    baiman: "倍満"
+    sanbaiman: "三倍満"
+    yakuman: "役満"
+    kazoeyakuman: "数え役満"
   _yakus:
     "riichi": "立直"
     "ippatsu": "一発"
diff --git a/packages/backend/src/core/GlobalEventService.ts b/packages/backend/src/core/GlobalEventService.ts
index 243e13e6c5..3d7c3d052a 100644
--- a/packages/backend/src/core/GlobalEventService.ts
+++ b/packages/backend/src/core/GlobalEventService.ts
@@ -6,7 +6,7 @@
 import { Inject, Injectable } from '@nestjs/common';
 import * as Redis from 'ioredis';
 import * as Reversi from 'misskey-reversi';
-import * as Mahjong from 'misskey-mahjong';
+import * as Mmj from 'misskey-mahjong';
 import type { MiChannel } from '@/models/Channel.js';
 import type { MiUser } from '@/models/User.js';
 import type { MiUserProfile } from '@/models/UserProfile.js';
@@ -209,30 +209,30 @@ export interface MahjongRoomEventTypes {
 		room: Packed<'MahjongRoomDetailed'>;
 	};
 	tsumo: {
-		house: Mahjong.House;
-		tile: Mahjong.Tile;
+		house: Mmj.House;
+		tile: Mmj.Tile;
 	};
 	dahai: {
-		house: Mahjong.House;
-		tile: Mahjong.Tile;
+		house: Mmj.House;
+		tile: Mmj.Tile;
 		riichi: boolean;
 	};
 	dahaiAndTsumo: {
-		dahaiHouse: Mahjong.House;
-		dahaiTile: Mahjong.Tile;
-		tsumoTile: Mahjong.Tile;
+		dahaiHouse: Mmj.House;
+		dahaiTile: Mmj.Tile;
+		tsumoTile: Mmj.Tile;
 		riichi: boolean;
 	};
 	ponned: {
-		caller: Mahjong.House;
-		callee: Mahjong.House;
-		tile: Mahjong.Tile;
+		caller: Mmj.House;
+		callee: Mmj.House;
+		tile: Mmj.Tile;
 	};
 	kanned: {
-		caller: Mahjong.House;
-		callee: Mahjong.House;
-		tile: Mahjong.Tile;
-		rinsyan: Mahjong.Tile;
+		caller: Mmj.House;
+		callee: Mmj.House;
+		tile: Mmj.Tile;
+		rinsyan: Mmj.Tile;
 	};
 	ronned: {
 	};
diff --git a/packages/backend/src/core/MahjongService.ts b/packages/backend/src/core/MahjongService.ts
index f72e4731d6..498563ac6b 100644
--- a/packages/backend/src/core/MahjongService.ts
+++ b/packages/backend/src/core/MahjongService.ts
@@ -7,7 +7,7 @@ import { Inject, Injectable } from '@nestjs/common';
 import * as Redis from 'ioredis';
 import { ModuleRef } from '@nestjs/core';
 import { IsNull, LessThan, MoreThan } from 'typeorm';
-import * as Mahjong from 'misskey-mahjong';
+import * as Mmj from 'misskey-mahjong';
 import type {
 	MiMahjongGame,
 	MahjongGamesRepository,
@@ -55,7 +55,7 @@ type Room = {
 	isStarted?: boolean;
 	timeLimitForEachTurn: number;
 
-	gameState?: Mahjong.MasterState;
+	gameState?: Mmj.MasterState;
 };
 
 type CallingAnswers = {
@@ -77,12 +77,12 @@ type NextKyokuConfirmation = {
 	user4: boolean;
 };
 
-function getUserIdOfHouse(room: Room, engine: Mahjong.MasterGameEngine, house: Mahjong.House): MiUser['id'] {
-	return engine.state.user1House === house ? room.user1Id : engine.state.user2House === house ? room.user2Id : engine.state.user3House === house ? room.user3Id : room.user4Id;
+function getUserIdOfHouse(room: Room, mj: Mmj.MasterGameEngine, house: Mmj.House): MiUser['id'] {
+	return mj.user1House === house ? room.user1Id : mj.user2House === house ? room.user2Id : mj.user3House === house ? room.user3Id : room.user4Id;
 }
 
-function getHouseOfUserId(room: Room, engine: Mahjong.MasterGameEngine, userId: MiUser['id']): Mahjong.House {
-	return userId === room.user1Id ? engine.state.user1House : userId === room.user2Id ? engine.state.user2House : userId === room.user3Id ? engine.state.user3House : engine.state.user4House;
+function getHouseOfUserId(room: Room, mj: Mmj.MasterGameEngine, userId: MiUser['id']): Mmj.House {
+	return userId === room.user1Id ? mj.user1House : userId === room.user2Id ? mj.user2House : userId === room.user3Id ? mj.user3House : mj.user4House;
 }
 
 @Injectable()
@@ -278,7 +278,7 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 			throw new Error('Not ready');
 		}
 
-		room.gameState = Mahjong.MasterGameEngine.createInitialState();
+		room.gameState = Mmj.MasterGameEngine.createInitialState();
 		room.isStarted = true;
 
 		await this.saveRoom(room);
@@ -291,11 +291,11 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 	@bindThis
 	public async packRoom(room: Room, me: MiUser) {
 		if (room.gameState) {
-			const engine = new Mahjong.MasterGameEngine(room.gameState);
+			const mj = new Mmj.MasterGameEngine(room.gameState);
 			const myIndex = room.user1Id === me.id ? 1 : room.user2Id === me.id ? 2 : room.user3Id === me.id ? 3 : 4;
 			return {
 				...room,
-				gameState: engine.createPlayerState(myIndex),
+				gameState: mj.createPlayerState(myIndex),
 			};
 		} else {
 			return {
@@ -305,52 +305,56 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 	}
 
 	@bindThis
-	private async answer(room: Room, engine: Mahjong.MasterGameEngine, answers: CallingAnswers) {
-		const res = engine.commit_resolveCallingInterruption({
+	private async answer(room: Room, mj: Mmj.MasterGameEngine, answers: CallingAnswers) {
+		const res = mj.commit_resolveCallingInterruption({
 			pon: answers.pon ?? false,
 			cii: answers.cii ?? false,
 			kan: answers.kan ?? false,
-			ron: [...(answers.ron.e ? ['e'] : []), ...(answers.ron.s ? ['s'] : []), ...(answers.ron.w ? ['w'] : []), ...(answers.ron.n ? ['n'] : [])] as Mahjong.House[],
+			ron: [...(answers.ron.e ? ['e'] : []), ...(answers.ron.s ? ['s'] : []), ...(answers.ron.w ? ['w'] : []), ...(answers.ron.n ? ['n'] : [])] as Mmj.House[],
 		});
-		room.gameState = engine.state;
+		room.gameState = mj.getState();
 		await this.saveRoom(room);
 
 		switch (res.type) {
 			case 'tsumo':
 				this.globalEventService.publishMahjongRoomStream(room.id, 'tsumo', { house: res.house, tile: res.tile });
-				this.waitForTurn(room, res.turn, engine);
+				this.waitForTurn(room, res.turn, mj);
 				break;
 			case 'ponned':
 				this.globalEventService.publishMahjongRoomStream(room.id, 'ponned', { caller: res.caller, callee: res.callee, tiles: res.tiles });
-				this.waitForTurn(room, res.turn, engine);
+				this.waitForTurn(room, res.turn, mj);
 				break;
 			case 'kanned':
 				this.globalEventService.publishMahjongRoomStream(room.id, 'kanned', { caller: res.caller, callee: res.callee, tiles: res.tiles, rinsyan: res.rinsyan });
-				this.waitForTurn(room, res.turn, engine);
+				this.waitForTurn(room, res.turn, mj);
+				break;
+			case 'ciied':
+				this.globalEventService.publishMahjongRoomStream(room.id, 'ciied', { caller: res.caller, callee: res.callee, tiles: res.tiles });
+				this.waitForTurn(room, res.turn, mj);
 				break;
 			case 'ronned':
 				this.globalEventService.publishMahjongRoomStream(room.id, 'ronned', {
 					callers: res.callers,
 					callee: res.callee,
 					handTiles: {
-						e: engine.state.handTiles.e,
-						s: engine.state.handTiles.s,
-						w: engine.state.handTiles.w,
-						n: engine.state.handTiles.n,
+						e: mj.handTiles.e,
+						s: mj.handTiles.s,
+						w: mj.handTiles.w,
+						n: mj.handTiles.n,
 					},
 				});
-				this.endKyoku(room, engine);
+				this.endKyoku(room, mj);
 				break;
 			case 'ryukyoku':
 				this.globalEventService.publishMahjongRoomStream(room.id, 'ryukyoku', {
 				});
-				this.endKyoku(room, engine);
+				this.endKyoku(room, mj);
 				break;
 		}
 	}
 
 	@bindThis
-	private async endKyoku(room: Room, engine: Mahjong.MasterGameEngine) {
+	private async endKyoku(room: Room, mj: Mmj.MasterGameEngine) {
 		const confirmation: NextKyokuConfirmation = {
 			user1: false,
 			user2: false,
@@ -370,18 +374,18 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 			if (allConfirmed || (Date.now() - waitingStartedAt > NEXT_KYOKU_CONFIRMATION_TIMEOUT_MS)) {
 				await this.redisClient.del(`mahjong:gameNextKyokuConfirmation:${room.id}`);
 				clearInterval(interval);
-				this.nextKyoku(room, engine);
+				this.nextKyoku(room, mj);
 			}
 		}, 2000);
 	}
 
 	@bindThis
-	private async dahai(room: Room, engine: Mahjong.MasterGameEngine, house: Mahjong.House, tile: Mahjong.TileId, riichi = false) {
-		const res = engine.commit_dahai(house, tile, riichi);
-		room.gameState = engine.state;
+	private async dahai(room: Room, mj: Mmj.MasterGameEngine, house: Mmj.House, tile: Mmj.TileId, riichi = false) {
+		const res = mj.commit_dahai(house, tile, riichi);
+		room.gameState = mj.getState();
 		await this.saveRoom(room);
 
-		const aiHouses = [[1, room.user1Ai], [2, room.user2Ai], [3, room.user3Ai], [4, room.user4Ai]].filter(([id, ai]) => ai).map(([id, ai]) => engine.getHouse(id));
+		const aiHouses = [[1, room.user1Ai], [2, room.user2Ai], [3, room.user3Ai], [4, room.user4Ai]].filter(([id, ai]) => ai).map(([id, ai]) => mj.getHouse(id));
 
 		if (res.asking) {
 			const answers: CallingAnswers = {
@@ -397,13 +401,13 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 			};
 
 			// リーチ中はポン、チー、カンできない
-			if (res.canPonHouse != null && engine.state.riichis[res.canPonHouse]) {
+			if (res.canPonHouse != null && mj.riichis[res.canPonHouse]) {
 				answers.pon = false;
 			}
-			if (res.canCiiHouse != null && engine.state.riichis[res.canCiiHouse]) {
+			if (res.canCiiHouse != null && mj.riichis[res.canCiiHouse]) {
 				answers.cii = false;
 			}
-			if (res.canKanHouse != null && engine.state.riichis[res.canKanHouse]) {
+			if (res.canKanHouse != null && mj.riichis[res.canKanHouse]) {
 				answers.kan = false;
 			}
 
@@ -445,7 +449,7 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 					console.log(allAnswered ? 'ask all answerd' : 'ask timeout');
 					await this.redisClient.del(`mahjong:gameCallingAsking:${room.id}`);
 					clearInterval(interval);
-					this.answer(room, engine, currentAnswers);
+					this.answer(room, mj, currentAnswers);
 					return;
 				}
 			}, 1000);
@@ -454,7 +458,7 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 		} else {
 			this.globalEventService.publishMahjongRoomStream(room.id, 'dahaiAndTsumo', { dahaiHouse: house, dahaiTile: tile, tsumoTile: res.tsumoTile, riichi });
 
-			this.waitForTurn(room, res.next, engine);
+			this.waitForTurn(room, res.next, mj);
 		}
 	}
 
@@ -476,52 +480,52 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 	}
 
 	@bindThis
-	public async commit_dahai(roomId: MiMahjongGame['id'], user: MiUser, tile: Mahjong.TileId, riichi = false) {
+	public async commit_dahai(roomId: MiMahjongGame['id'], user: MiUser, tile: Mmj.TileId, riichi = false) {
 		const room = await this.getRoom(roomId);
 		if (room == null) return;
 		if (room.gameState == null) return;
 
-		const engine = new Mahjong.MasterGameEngine(room.gameState);
-		const myHouse = getHouseOfUserId(room, engine, user.id);
+		const mj = new Mmj.MasterGameEngine(room.gameState);
+		const myHouse = getHouseOfUserId(room, mj, user.id);
 
 		await this.clearTurnWaitingTimer(room.id);
 
-		await this.dahai(room, engine, myHouse, tile, riichi);
+		await this.dahai(room, mj, myHouse, tile, riichi);
 	}
 
 	@bindThis
-	public async commit_ankan(roomId: MiMahjongGame['id'], user: MiUser, tile: Mahjong.TileId) {
+	public async commit_ankan(roomId: MiMahjongGame['id'], user: MiUser, tile: Mmj.TileId) {
 		const room = await this.getRoom(roomId);
 		if (room == null) return;
 		if (room.gameState == null) return;
 
-		const engine = new Mahjong.MasterGameEngine(room.gameState);
-		const myHouse = getHouseOfUserId(room, engine, user.id);
+		const mj = new Mmj.MasterGameEngine(room.gameState);
+		const myHouse = getHouseOfUserId(room, mj, user.id);
 
 		await this.clearTurnWaitingTimer(room.id);
 
-		const res = engine.commit_ankan(myHouse, tile);
-		room.gameState = engine.state;
+		const res = mj.commit_ankan(myHouse, tile);
+		room.gameState = mj.getState();
 		await this.saveRoom(room);
 
 		this.globalEventService.publishMahjongRoomStream(room.id, 'ankanned', { house: myHouse, tiles: res.tiles, rinsyan: res.rinsyan });
 
-		this.waitForTurn(room, myHouse, engine);
+		this.waitForTurn(room, myHouse, mj);
 	}
 
 	@bindThis
-	public async commit_kakan(roomId: MiMahjongGame['id'], user: MiUser, tile: Mahjong.TileId) {
+	public async commit_kakan(roomId: MiMahjongGame['id'], user: MiUser, tile: Mmj.TileId) {
 		const room = await this.getRoom(roomId);
 		if (room == null) return;
 		if (room.gameState == null) return;
 
-		const engine = new Mahjong.MasterGameEngine(room.gameState);
-		const myHouse = getHouseOfUserId(room, engine, user.id);
+		const mj = new Mmj.MasterGameEngine(room.gameState);
+		const myHouse = getHouseOfUserId(room, mj, user.id);
 
 		await this.clearTurnWaitingTimer(room.id);
 
-		const res = engine.commit_kakan(myHouse, tile);
-		room.gameState = engine.state;
+		const res = mj.commit_kakan(myHouse, tile);
+		room.gameState = mj.getState();
 		await this.saveRoom(room);
 
 		this.globalEventService.publishMahjongRoomStream(room.id, 'kakanned', { house: myHouse, tiles: res.tiles, rinsyan: res.rinsyan, from: res.from });
@@ -533,13 +537,13 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 		if (room == null) return;
 		if (room.gameState == null) return;
 
-		const engine = new Mahjong.MasterGameEngine(room.gameState);
-		const myHouse = getHouseOfUserId(room, engine, user.id);
+		const mj = new Mmj.MasterGameEngine(room.gameState);
+		const myHouse = getHouseOfUserId(room, mj, user.id);
 
 		await this.clearTurnWaitingTimer(room.id);
 
-		const res = engine.commit_tsumoHora(myHouse);
-		room.gameState = engine.state;
+		const res = mj.commit_tsumoHora(myHouse);
+		room.gameState = mj.getState();
 		await this.saveRoom(room);
 
 		this.globalEventService.publishMahjongRoomStream(room.id, 'tsumoHora', { house: myHouse, handTiles: res.handTiles, tsumoTile: res.tsumoTile });
@@ -551,8 +555,8 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 		if (room == null) return;
 		if (room.gameState == null) return;
 
-		const engine = new Mahjong.MasterGameEngine(room.gameState);
-		const myHouse = getHouseOfUserId(room, engine, user.id);
+		const mj = new Mmj.MasterGameEngine(room.gameState);
+		const myHouse = getHouseOfUserId(room, mj, user.id);
 
 		// TODO: 自分に回答する権利がある状態かバリデーション
 
@@ -618,17 +622,17 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 		if (room == null) return;
 		if (room.gameState == null) return;
 
-		const engine = new Mahjong.MasterGameEngine(room.gameState);
-		const myHouse = getHouseOfUserId(room, engine, user.id);
+		const mj = new Mmj.MasterGameEngine(room.gameState);
+		const myHouse = getHouseOfUserId(room, mj, user.id);
 
 		// TODO: この辺の処理はアトミックに行いたいけどJSONサポートはRedis Stackが必要
 		const current = await this.redisClient.get(`mahjong:gameCallingAsking:${room.id}`);
 		if (current == null) throw new Error('no asking found');
 		const currentAnswers = JSON.parse(current) as CallingAnswers;
-		if (engine.state.ponAsking?.caller === myHouse) currentAnswers.pon = false;
-		if (engine.state.ciiAsking?.caller === myHouse) currentAnswers.cii = false;
-		if (engine.state.kanAsking?.caller === myHouse) currentAnswers.kan = false;
-		if (engine.state.ronAsking != null && engine.state.ronAsking.callers.includes(myHouse)) currentAnswers.ron[myHouse] = false;
+		if (mj.askings.pon?.caller === myHouse) currentAnswers.pon = false;
+		if (mj.askings.cii?.caller === myHouse) currentAnswers.cii = false;
+		if (mj.askings.kan?.caller === myHouse) currentAnswers.kan = false;
+		if (mj.askings.ron != null && mj.askings.ron.callers.includes(myHouse)) currentAnswers.ron[myHouse] = false;
 		await this.redisClient.set(`mahjong:gameCallingAsking:${room.id}`, JSON.stringify(currentAnswers));
 	}
 
@@ -638,18 +642,18 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 	 * NOTE: 時間切れチェックが行われたときにタイミングによっては次のwaitingが始まっている場合があることを考慮し、Setに一意のIDを格納する構造としている
 	 * @param room
 	 * @param house
-	 * @param engine
+	 * @param mj
 	 */
 	@bindThis
-	private async waitForTurn(room: Room, house: Mahjong.House, engine: Mahjong.MasterGameEngine) {
-		const aiHouses = [[1, room.user1Ai], [2, room.user2Ai], [3, room.user3Ai], [4, room.user4Ai]].filter(([id, ai]) => ai).map(([id, ai]) => engine.getHouse(id));
+	private async waitForTurn(room: Room, house: Mmj.House, mj: Mmj.MasterGameEngine) {
+		const aiHouses = [[1, room.user1Ai], [2, room.user2Ai], [3, room.user3Ai], [4, room.user4Ai]].filter(([id, ai]) => ai).map(([id, ai]) => mj.getHouse(id));
 
-		if (engine.state.riichis[house]) {
+		if (mj.riichis[house]) {
 			// リーチ時はアガリ牌でない限りツモ切り
-			const horaSets = Mahjong.getHoraSets(engine.handTileTypes[house]);
+			const horaSets = Mmj.getHoraSets(mj.handTileTypes[house]);
 			if (horaSets.length === 0) {
 				setTimeout(() => {
-					this.dahai(room, engine, house, engine.state.handTiles[house].at(-1));
+					this.dahai(room, mj, house, mj.handTiles[house].at(-1));
 				}, 500);
 				return;
 			}
@@ -657,7 +661,7 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 
 		if (aiHouses.includes(house)) {
 			setTimeout(() => {
-				this.dahai(room, engine, house, engine.state.handTiles[house].at(-1));
+				this.dahai(room, mj, house, mj.handTiles[house].at(-1));
 			}, 500);
 			return;
 		}
@@ -676,8 +680,8 @@ export class MahjongService implements OnApplicationShutdown, OnModuleInit {
 				await this.redisClient.srem(`mahjong:gameTurnWaiting:${room.id}`, id);
 				console.log('turn timeout', house, id);
 				clearInterval(interval);
-				const handTiles = engine.state.handTiles[house];
-				await this.dahai(room, engine, house, handTiles.at(-1));
+				const handTiles = mj.handTiles[house];
+				await this.dahai(room, mj, house, handTiles.at(-1));
 				return;
 			}
 		}, 2000);
diff --git a/packages/frontend/assets/mahjong/logo.png b/packages/frontend/assets/mahjong/logo.png
index bacdd21e81..6ebbdbb548 100644
Binary files a/packages/frontend/assets/mahjong/logo.png and b/packages/frontend/assets/mahjong/logo.png differ
diff --git a/packages/frontend/assets/mahjong/tile-front.png b/packages/frontend/assets/mahjong/tile-front.png
deleted file mode 100644
index e6bc7038e1..0000000000
Binary files a/packages/frontend/assets/mahjong/tile-front.png and /dev/null differ
diff --git a/packages/frontend/src/pages/mahjong/hand-tiles.vue b/packages/frontend/src/pages/mahjong/hand-tiles.vue
new file mode 100644
index 0000000000..ebfb6e8cc1
--- /dev/null
+++ b/packages/frontend/src/pages/mahjong/hand-tiles.vue
@@ -0,0 +1,184 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="[$style.root]">
+	<div
+		v-for="tile in Mmj.sortTiles(separateLast ? tiles.slice(0, tiles.length - 1) : tiles)"
+		:class="[$style.tile, { [$style.tileNonSelectable]: selectableTiles != null && !selectableTiles.includes(mj$type(tile)), [$style.tileDora]: doras.includes(mj$type(tile)) }]"
+		@click="chooseTile(tile, $event)"
+	>
+		<div :class="$style.tileInner">
+			<div :class="$style.tileBg1"></div>
+			<div :class="$style.tileBg2"></div>
+			<div :class="$style.tileBg3"></div>
+			<img :src="`/client-assets/mahjong/tiles/${mj$(tile).red ? mj$type(tile) + 'r' : mj$type(tile)}.png`" :class="$style.tileFg1"/>
+			<div :class="$style.tileFg2"></div>
+		</div>
+	</div>
+	<div
+		v-if="separateLast"
+		style="display: inline-block; margin-left: 5px;"
+		:class="[$style.tile, { [$style.tileNonSelectable]: selectableTiles != null && !selectableTiles.includes(mj$type(tiles.at(-1))), [$style.tileDora]: doras.includes(mj$type(tiles.at(-1))) }]"
+		@click="chooseTile(tiles.at(-1), $event)"
+	>
+		<div :class="$style.tileInner">
+			<div :class="$style.tileBg1"></div>
+			<div :class="$style.tileBg2"></div>
+			<div :class="$style.tileBg3"></div>
+			<img :src="`/client-assets/mahjong/tiles/${mj$(tiles.at(-1)).red ? mj$type(tiles.at(-1)) + 'r' : mj$type(tiles.at(-1))}.png`" :class="$style.tileFg1"/>
+			<div :class="$style.tileFg2"></div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as Mmj from 'misskey-mahjong';
+
+//#region syntax suger
+function mj$(tileId: Mmj.TileId): Mmj.TileInstance {
+	return Mmj.findTileByIdOrFail(tileId);
+}
+
+function mj$type(tileId: Mmj.TileId): Mmj.TileType {
+	return mj$(tileId).t;
+}
+//#endregion
+
+const props = defineProps<{
+	tiles: Mmj.TileId[];
+	doras: Mmj.TileType[];
+	selectableTiles: Mmj.TileType[] | null;
+	separateLast: boolean;
+}>();
+
+const emit = defineEmits<{
+	(event: 'choose', tile: Mmj.TileId): void;
+}>();
+
+function chooseTile(tile: Mmj.TileId, event: MouseEvent) {
+	if (props.selectableTiles != null && !props.selectableTiles.includes(mj$type(tile))) return;
+	emit('choose', tile);
+}
+</script>
+
+<style lang="scss" module>
+@keyframes shine {
+	0% { translate: -20%; }
+	100% { translate: -70%; }
+}
+
+.root {
+
+}
+
+.tile {
+	display: inline-block;
+	vertical-align: bottom;
+	position: relative;
+	width: 35px;
+	aspect-ratio: 0.7;
+	cursor: pointer;
+}
+.tileInner {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: clip;
+	border-radius: 4px;
+	transition: translate 0.1s ease;
+}
+.tile:hover > .tileInner {
+	translate: 0 -10px;
+}
+.tileNonSelectable {
+	filter: grayscale(1);
+	opacity: 0.7;
+	pointer-events: none;
+}
+
+.tileDora > .tileInner {
+	&:after {
+		content: "";
+		display: block;
+		position: absolute;
+		top: 30px;
+		width: 200px;
+		height: 8px;
+		rotate: -45deg;
+		translate: -30px;
+		background: #ffffffee;
+		animation: shine 2s infinite;
+		pointer-events: none;
+	}
+}
+
+.tileBg1 {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	user-select: none;
+	background: #E38A45;
+}
+.tileBg2 {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 95%;
+	pointer-events: none;
+	user-select: none;
+	background: #DFDEDD;
+	border-radius: 3px 3px 0 0;
+
+	&:after {
+		content: "";
+		display: block;
+		position: absolute;
+		bottom: 78%;
+		left: 0;
+		width: 100%;
+		height: 6%;
+		pointer-events: none;
+		user-select: none;
+		background: linear-gradient(0deg, #fff 0%, #fff0 100%);
+	}
+}
+.tileBg3 {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 75%;
+	pointer-events: none;
+	user-select: none;
+	background: #fff;
+}
+.tileFg1 {
+	position: absolute;
+	bottom: 5%;
+	left: 0;
+	width: 100%;
+	height: 65%;
+	object-fit: contain;
+	pointer-events: none;
+	user-select: none;
+}
+.tileFg2 {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-shadow: 0 0 1px #000 inset;
+	pointer-events: none;
+	user-select: none;
+}
+</style>
diff --git a/packages/frontend/src/pages/mahjong/huro.vue b/packages/frontend/src/pages/mahjong/huro.vue
index 1c6da57efb..4988c5aaef 100644
--- a/packages/frontend/src/pages/mahjong/huro.vue
+++ b/packages/frontend/src/pages/mahjong/huro.vue
@@ -5,38 +5,38 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div v-if="huro.type === 'ankan'" :class="[$style.root]">
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[0])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[1])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[2])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[3])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[0])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[1])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[2])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[3])" :variation="variation" :doras="doras"/>
 </div>
 <div v-else-if="huro.type === 'minkan'" :class="[$style.root]">
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[0])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[1])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[2])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[3])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[0])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[1])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[2])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[3])" :variation="variation" :doras="doras"/>
 </div>
 <div v-else-if="huro.type === 'cii'" :class="[$style.root]">
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[0])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[1])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[2])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[0])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[1])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[2])" :variation="variation" :doras="doras"/>
 </div>
 <div v-else :class="[$style.root]">
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[0])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[1])" :variation="variation" :doras="doras"/>
-	<XTile :tile="Mahjong.findTileByIdOrFail(huro.tiles[2])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[0])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[1])" :variation="variation" :doras="doras"/>
+	<XTile :tile="Mmj.findTileByIdOrFail(huro.tiles[2])" :variation="variation" :doras="doras"/>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import * as Mahjong from 'misskey-mahjong';
+import * as Mmj from 'misskey-mahjong';
 import XTile from './tile.vue';
 
 const props = defineProps<{
-	huro: Mahjong.Huro;
+	huro: Mmj.Huro;
 	variation: string;
-	doras: Mahjong.TileType[];
+	doras: Mmj.TileType[];
 }>();
 </script>
 
diff --git a/packages/frontend/src/pages/mahjong/room.game.vue b/packages/frontend/src/pages/mahjong/room.game.vue
index c1f344831a..8b8883756d 100644
--- a/packages/frontend/src/pages/mahjong/room.game.vue
+++ b/packages/frontend/src/pages/mahjong/room.game.vue
@@ -10,118 +10,100 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div style="text-align: center;">
 				<div :class="$style.centerPanelTickerToi">
 					<div style="position: absolute; left: 10px; bottom: 5px;">
-						<span :class="$style.centerPanelHouse">{{ Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse)) === 'e' ? i18n.ts._mahjong.east : Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse)) === 's' ? i18n.ts._mahjong.south : Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse)) === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
-						<span :class="$style.centerPanelPoint">{{ engine.state.points[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))] }}</span>
+						<span :class="$style.centerPanelHouse">{{ Mmj.prevHouse(Mmj.prevHouse(mj.myHouse)) === 'e' ? i18n.ts._mahjong.east : Mmj.prevHouse(Mmj.prevHouse(mj.myHouse)) === 's' ? i18n.ts._mahjong.south : Mmj.prevHouse(Mmj.prevHouse(mj.myHouse)) === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
+						<span :class="$style.centerPanelPoint">{{ mj.points[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))] }}</span>
 					</div>
 				</div>
 				<div :class="$style.centerPanelTickerKami">
 					<div style="position: absolute; left: 10px; bottom: 5px;">
-						<span :class="$style.centerPanelHouse">{{ Mahjong.prevHouse(engine.myHouse) === 'e' ? i18n.ts._mahjong.east : Mahjong.prevHouse(engine.myHouse) === 's' ? i18n.ts._mahjong.south : Mahjong.prevHouse(engine.myHouse) === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
-						<span :class="$style.centerPanelPoint">{{ engine.state.points[Mahjong.prevHouse(engine.myHouse)] }}</span>
+						<span :class="$style.centerPanelHouse">{{ Mmj.prevHouse(mj.myHouse) === 'e' ? i18n.ts._mahjong.east : Mmj.prevHouse(mj.myHouse) === 's' ? i18n.ts._mahjong.south : Mmj.prevHouse(mj.myHouse) === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
+						<span :class="$style.centerPanelPoint">{{ mj.points[Mmj.prevHouse(mj.myHouse)] }}</span>
 					</div>
 				</div>
 				<div :class="$style.centerPanelTickerSimo">
 					<div style="position: absolute; left: 10px; bottom: 5px;">
-						<span :class="$style.centerPanelHouse">{{ Mahjong.nextHouse(engine.myHouse) === 'e' ? i18n.ts._mahjong.east : Mahjong.nextHouse(engine.myHouse) === 's' ? i18n.ts._mahjong.south : Mahjong.nextHouse(engine.myHouse) === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
-						<span :class="$style.centerPanelPoint">{{ engine.state.points[Mahjong.nextHouse(engine.myHouse)] }}</span>
+						<span :class="$style.centerPanelHouse">{{ Mmj.nextHouse(mj.myHouse) === 'e' ? i18n.ts._mahjong.east : Mmj.nextHouse(mj.myHouse) === 's' ? i18n.ts._mahjong.south : Mmj.nextHouse(mj.myHouse) === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
+						<span :class="$style.centerPanelPoint">{{ mj.points[Mmj.nextHouse(mj.myHouse)] }}</span>
 					</div>
 				</div>
 				<div :class="$style.centerPanelTickerMe">
 					<div style="position: absolute; left: 10px; bottom: 5px;">
-						<span :class="$style.centerPanelHouse">{{ engine.myHouse === 'e' ? i18n.ts._mahjong.east : engine.myHouse === 's' ? i18n.ts._mahjong.south : engine.myHouse === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
-						<span :class="$style.centerPanelPoint">{{ engine.state.points[engine.myHouse] }}</span>
+						<span :class="$style.centerPanelHouse">{{ mj.myHouse === 'e' ? i18n.ts._mahjong.east : mj.myHouse === 's' ? i18n.ts._mahjong.south : mj.myHouse === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
+						<span :class="$style.centerPanelPoint">{{ mj.points[mj.myHouse] }}</span>
 					</div>
 				</div>
 				<div>
-					<div>{{ engine.state.tilesCount }}</div>
+					<div>{{ mj.tilesCount }}</div>
 				</div>
 			</div>
 		</div>
 
 		<div :class="$style.handTilesOfToimen">
-			<div v-for="tile in engine.state.handTiles[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))]" style="display: inline-block;">
+			<div v-for="tile in mj.handTiles[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" style="display: inline-block;">
 				<img :src="`/client-assets/mahjong/tile-back.png`" :class="$style.handTileImgOfToimen"/>
 			</div>
 		</div>
 
 		<div :class="$style.handTilesOfKamitya">
-			<div v-for="tile in engine.state.handTiles[Mahjong.prevHouse(engine.myHouse)]" :class="$style.sideTile">
+			<div v-for="tile in mj.handTiles[Mmj.prevHouse(mj.myHouse)]" :class="$style.sideTile">
 				<img :src="`/client-assets/mahjong/tile-side.png`" style="display: inline-block; width: 32px;"/>
 			</div>
 		</div>
 
 		<div :class="$style.handTilesOfSimotya">
-			<div v-for="tile in engine.state.handTiles[Mahjong.nextHouse(engine.myHouse)]" :class="$style.sideTile">
+			<div v-for="tile in mj.handTiles[Mmj.nextHouse(mj.myHouse)]" :class="$style.sideTile">
 				<img :src="`/client-assets/mahjong/tile-side.png`" style="display: inline-block; width: 32px; scale: -1 1;"/>
 			</div>
 		</div>
 
 		<div :class="$style.huroTilesOfToimen">
-			<XHuro v-for="huro in engine.state.huros[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))]" :huro="huro" :variation="1" :doras="engine.doras"/>
+			<XHuro v-for="huro in mj.huros[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" :huro="huro" :variation="1" :doras="mj.doras"/>
 		</div>
 
 		<div :class="$style.huroTilesOfKamitya">
-			<XHuro v-for="huro in engine.state.huros[Mahjong.prevHouse(engine.myHouse)]" :huro="huro" :variation="1" :doras="engine.doras"/>
+			<XHuro v-for="huro in mj.huros[Mmj.prevHouse(mj.myHouse)]" :huro="huro" :variation="1" :doras="mj.doras"/>
 		</div>
 
 		<div :class="$style.huroTilesOfSimotya">
-			<XHuro v-for="huro in engine.state.huros[Mahjong.nextHouse(engine.myHouse)]" :huro="huro" :variation="1" :doras="engine.doras"/>
+			<XHuro v-for="huro in mj.huros[Mmj.nextHouse(mj.myHouse)]" :huro="huro" :variation="1" :doras="mj.doras"/>
 		</div>
 
 		<div :class="$style.huroTilesOfMe">
-			<XHuro v-for="huro in engine.state.huros[engine.myHouse]" :huro="huro" :variation="1" :doras="engine.doras"/>
+			<XHuro v-for="huro in mj.huros[mj.myHouse]" :huro="huro" :variation="1" :doras="mj.doras"/>
 		</div>
 
 		<div :class="$style.hoTilesContainer">
 			<div :class="$style.hoTilesContainerOfToimen">
 				<div :class="$style.hoTilesOfToimen">
-					<div v-for="(tile, i) in engine.state.hoTiles[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))]" :class="$style.hoTile" :style="{ zIndex: engine.state.hoTiles[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))].length - i }">
-						<XTile :tile="Mahjong.findTileByIdOrFail(tile)" variation="2" :doras="engine.doras"/>
+					<div v-for="(tile, i) in mj.hoTiles[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" :class="$style.hoTile" :style="{ zIndex: mj.hoTiles[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))].length - i }">
+						<XTile :tile="mj$(tile)" variation="2" :doras="mj.doras"/>
 					</div>
 				</div>
 			</div>
 			<div :class="$style.hoTilesContainerOfKamitya">
 				<div :class="$style.hoTilesOfKamitya">
-					<div v-for="tile in engine.state.hoTiles[Mahjong.prevHouse(engine.myHouse)]" :class="$style.hoTile">
-						<XTile :tile="Mahjong.findTileByIdOrFail(tile)" variation="4" :doras="engine.doras"/>
+					<div v-for="tile in mj.hoTiles[Mmj.prevHouse(mj.myHouse)]" :class="$style.hoTile">
+						<XTile :tile="mj$(tile)" variation="4" :doras="mj.doras"/>
 					</div>
 				</div>
 			</div>
 			<div :class="$style.hoTilesContainerOfSimotya">
 				<div :class="$style.hoTilesOfSimotya">
-					<div v-for="(tile, i) in engine.state.hoTiles[Mahjong.nextHouse(engine.myHouse)]" :class="$style.hoTile" :style="{ zIndex: engine.state.hoTiles[Mahjong.nextHouse(engine.myHouse)].length - i }">
-						<XTile :tile="Mahjong.findTileByIdOrFail(tile)" variation="5" :doras="engine.doras"/>
+					<div v-for="(tile, i) in mj.hoTiles[Mmj.nextHouse(mj.myHouse)]" :class="$style.hoTile" :style="{ zIndex: mj.hoTiles[Mmj.nextHouse(mj.myHouse)].length - i }">
+						<XTile :tile="mj$(tile)" variation="5" :doras="mj.doras"/>
 					</div>
 				</div>
 			</div>
 			<div :class="$style.hoTilesContainerOfMe">
 				<div :class="$style.hoTilesOfMe">
-					<div v-for="tile in engine.state.hoTiles[engine.myHouse]" :class="$style.hoTile">
-						<XTile :tile="Mahjong.findTileByIdOrFail(tile)" variation="1" :doras="engine.doras"/>
+					<div v-for="tile in mj.hoTiles[mj.myHouse]" :class="$style.hoTile">
+						<XTile :tile="mj$(tile)" variation="1" :doras="mj.doras"/>
 					</div>
 				</div>
 			</div>
 		</div>
 
-		<div :class="$style.handTilesOfMe">
-			<div
-				v-for="tile in Mahjong.sortTiles((isMyTurn && iTsumoed) ? engine.myHandTiles.slice(0, engine.myHandTiles.length - 1) : engine.myHandTiles)"
-				:class="[$style.myTile, { [$style.myTileNonSelectable]: selectableTiles != null && !selectableTiles.includes(Mahjong.findTileByIdOrFail(tile).t), [$style.myTileDora]: engine.doras.includes(Mahjong.findTileByIdOrFail(tile).t) }]"
-				@click="chooseTile(tile, $event)"
-			>
-				<img :src="`/client-assets/mahjong/tile-front.png`" :class="$style.myTileBg"/>
-				<img :src="`/client-assets/mahjong/tiles/${Mahjong.findTileByIdOrFail(tile).red ? Mahjong.findTileByIdOrFail(tile).t + 'r' : Mahjong.findTileByIdOrFail(tile).t}.png`" :class="$style.myTileFg"/>
-			</div>
-			<div
-				v-if="isMyTurn && iTsumoed"
-				style="display: inline-block; margin-left: 5px;"
-				:class="[$style.myTile, { [$style.myTileNonSelectable]: selectableTiles != null && !selectableTiles.includes(Mahjong.findTileByIdOrFail(engine.myHandTiles.at(-1)).t), [$style.myTileDora]: engine.doras.includes(Mahjong.findTileByIdOrFail(engine.myHandTiles.at(-1)).t) }]"
-				@click="chooseTile(engine.myHandTiles.at(-1), $event)"
-			>
-				<img :src="`/client-assets/mahjong/tile-front.png`" :class="$style.myTileBg"/>
-				<img :src="`/client-assets/mahjong/tiles/${Mahjong.findTileByIdOrFail(engine.myHandTiles.at(-1)).red ? Mahjong.findTileByIdOrFail(engine.myHandTiles.at(-1)).t + 'r' : Mahjong.findTileByIdOrFail(engine.myHandTiles.at(-1)).t}.png`" :class="$style.myTileFg"/>
-			</div>
-		</div>
+		<XHandTiles :class="$style.handTilesOfMe" :tiles="mj.myHandTiles" :doras="mj.doras" :selectableTiles="selectableTiles" :separateLast="isMyTurn && iTsumoed" @choose="chooseTile"/>
 
 		<div :class="$style.serifContainer">
 			<div :class="$style.serifContainerOfToimen">
@@ -131,12 +113,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:enterFromClass="$style.transition_serif_enterFrom"
 					:leaveToClass="$style.transition_serif_leaveTo"
 				>
-					<img v-if="ronSerifHouses[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="ciiSerifHouses[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="ponSerifHouses[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="kanSerifHouses[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="tsumoSerifHouses[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="riichiSerifHouses[Mahjong.prevHouse(Mahjong.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/riichi.png`" style="display: block; width: 100%;"/>
+					<img v-if="ronSerifHouses[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="ciiSerifHouses[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="ponSerifHouses[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="kanSerifHouses[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="tsumoSerifHouses[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="riichiSerifHouses[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" :src="`/client-assets/mahjong/riichi.png`" style="display: block; width: 100%;"/>
 				</Transition>
 			</div>
 			<div :class="$style.serifContainerOfKamitya">
@@ -146,12 +128,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:enterFromClass="$style.transition_serif_enterFrom"
 					:leaveToClass="$style.transition_serif_leaveTo"
 				>
-					<img v-if="ronSerifHouses[Mahjong.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="ciiSerifHouses[Mahjong.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="ponSerifHouses[Mahjong.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="kanSerifHouses[Mahjong.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="tsumoSerifHouses[Mahjong.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="riichiSerifHouses[Mahjong.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/riichi.png`" style="display: block; width: 100%;"/>
+					<img v-if="ronSerifHouses[Mmj.prevHouse(mj.myHouse)]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="ciiSerifHouses[Mmj.prevHouse(mj.myHouse)]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="ponSerifHouses[Mmj.prevHouse(mj.myHouse)]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="kanSerifHouses[Mmj.prevHouse(mj.myHouse)]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="tsumoSerifHouses[Mmj.prevHouse(mj.myHouse)]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="riichiSerifHouses[Mmj.prevHouse(mj.myHouse)]" :src="`/client-assets/mahjong/riichi.png`" style="display: block; width: 100%;"/>
 				</Transition>
 			</div>
 			<div :class="$style.serifContainerOfSimotya">
@@ -161,12 +143,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:enterFromClass="$style.transition_serif_enterFrom"
 					:leaveToClass="$style.transition_serif_leaveTo"
 				>
-					<img v-if="ronSerifHouses[Mahjong.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="ciiSerifHouses[Mahjong.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="ponSerifHouses[Mahjong.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="kanSerifHouses[Mahjong.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="tsumoSerifHouses[Mahjong.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="riichiSerifHouses[Mahjong.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/riichi.png`" style="display: block; width: 100%;"/>
+					<img v-if="ronSerifHouses[Mmj.nextHouse(mj.myHouse)]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="ciiSerifHouses[Mmj.nextHouse(mj.myHouse)]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="ponSerifHouses[Mmj.nextHouse(mj.myHouse)]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="kanSerifHouses[Mmj.nextHouse(mj.myHouse)]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="tsumoSerifHouses[Mmj.nextHouse(mj.myHouse)]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="riichiSerifHouses[Mmj.nextHouse(mj.myHouse)]" :src="`/client-assets/mahjong/riichi.png`" style="display: block; width: 100%;"/>
 				</Transition>
 			</div>
 			<div :class="$style.serifContainerOfMe">
@@ -176,26 +158,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:enterFromClass="$style.transition_serif_enterFrom"
 					:leaveToClass="$style.transition_serif_leaveTo"
 				>
-					<img v-if="ronSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="ciiSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="ponSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="kanSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="tsumoSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
-					<img v-else-if="riichiSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/riichi.png`" style="display: block; width: 100%;"/>
+					<img v-if="ronSerifHouses[mj.myHouse]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="ciiSerifHouses[mj.myHouse]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="ponSerifHouses[mj.myHouse]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="kanSerifHouses[mj.myHouse]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="tsumoSerifHouses[mj.myHouse]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
+					<img v-else-if="riichiSerifHouses[mj.myHouse]" :src="`/client-assets/mahjong/riichi.png`" style="display: block; width: 100%;"/>
 				</Transition>
 			</div>
 		</div>
 
 		<div :class="$style.actions" class="_buttons">
-			<MkButton v-if="engine.state.canRon != null" primary gradate @click="ron">Ron</MkButton>
-			<MkButton v-if="engine.state.canPon != null" primary @click="pon">Pon</MkButton>
-			<MkButton v-if="engine.state.canCii != null" primary @click="cii">Cii</MkButton>
-			<MkButton v-if="engine.state.canKan != null" primary @click="kan">Kan</MkButton>
-			<MkButton v-if="engine.state.canRon != null || engine.state.canPon != null || engine.state.canCii != null || engine.state.canKan != null" @click="skip">Skip</MkButton>
-			<MkButton v-if="isMyTurn && engine.canAnkan()" @click="ankan">Ankan</MkButton>
-			<MkButton v-if="isMyTurn && engine.canKakan()" @click="kakan">Kakan</MkButton>
+			<MkButton v-if="mj.canRon != null" primary gradate @click="ron">Ron</MkButton>
+			<MkButton v-if="mj.canPon != null" primary @click="pon">Pon</MkButton>
+			<MkButton v-if="mj.canCii != null" primary @click="cii">Cii</MkButton>
+			<MkButton v-if="mj.canKan != null" primary @click="kan">Kan</MkButton>
+			<MkButton v-if="mj.canRon != null || mj.canPon != null || mj.canCii != null || mj.canKan != null" @click="skip">Skip</MkButton>
+			<MkButton v-if="isMyTurn && mj.canAnkan()" @click="ankan">Ankan</MkButton>
+			<MkButton v-if="isMyTurn && mj.canKakan()" @click="kakan">Kakan</MkButton>
 			<MkButton v-if="isMyTurn && canHora" primary gradate @click="tsumoHora">Tsumo</MkButton>
-			<MkButton v-if="isMyTurn && engine.canRiichi()" primary @click="riichi">Riichi</MkButton>
+			<MkButton v-if="isMyTurn && mj.canRiichi()" primary @click="riichi">Riichi</MkButton>
 		</div>
 	</div>
 	<div v-if="showKyokuResults" :class="$style.kyokuResult">
@@ -224,9 +206,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, onActivated, onDeactivated, onMounted, onUnmounted, reactive, ref, shallowRef, triggerRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import * as Mahjong from 'misskey-mahjong';
+import * as Mmj from 'misskey-mahjong';
 import XTile from './tile.vue';
 import XHuro from './huro.vue';
+import XHandTiles from './hand-tiles.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -240,6 +223,16 @@ import * as sound from '@/scripts/sound.js';
 import * as os from '@/os.js';
 import { confetti } from '@/scripts/confetti.js';
 
+//#region syntax suger
+function mj$(tileId: Mmj.TileId): Mmj.TileInstance {
+	return Mmj.findTileByIdOrFail(tileId);
+}
+
+function mj$type(tileId: Mmj.TileId): Mmj.TileType {
+	return mj$(tileId).t;
+}
+//#endregion
+
 const $i = signinRequired();
 
 const props = defineProps<{
@@ -249,29 +242,29 @@ const props = defineProps<{
 
 const room = ref<Misskey.entities.MahjongRoomDetailed>(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.PlayerGameEngine(myUserNumber.value, room.value.gameState));
+const mj = shallowRef(new Mmj.PlayerGameEngine(myUserNumber.value, room.value.gameState));
 
 const isMyTurn = computed(() => {
-	return engine.value.state.turn === engine.value.myHouse;
+	return mj.value.state.turn === mj.value.myHouse;
 });
 
 const canHora = computed(() => {
-	return Mahjong.getHoraSets(engine.value.myHandTiles).length > 0;
+	return Mmj.getHoraSets(mj.value.myHandTiles).length > 0;
 });
 
-const selectableTiles = ref<Mahjong.TileType[] | null>(null);
-const ronSerifHouses = reactive<Record<Mahjong.House, boolean>>({ e: false, s: false, w: false, n: false });
-const ciiSerifHouses = reactive<Record<Mahjong.House, boolean>>({ e: false, s: false, w: false, n: false });
-const ponSerifHouses = reactive<Record<Mahjong.House, boolean>>({ e: false, s: false, w: false, n: false });
-const kanSerifHouses = reactive<Record<Mahjong.House, boolean>>({ e: false, s: false, w: false, n: false });
-const tsumoSerifHouses = reactive<Record<Mahjong.House, boolean>>({ e: false, s: false, w: false, n: false });
-const riichiSerifHouses = reactive<Record<Mahjong.House, boolean>>({ e: false, s: false, w: false, n: false });
+const selectableTiles = ref<Mmj.TileType[] | null>(null);
+const ronSerifHouses = reactive<Record<Mmj.House, boolean>>({ e: false, s: false, w: false, n: false });
+const ciiSerifHouses = reactive<Record<Mmj.House, boolean>>({ e: false, s: false, w: false, n: false });
+const ponSerifHouses = reactive<Record<Mmj.House, boolean>>({ e: false, s: false, w: false, n: false });
+const kanSerifHouses = reactive<Record<Mmj.House, boolean>>({ e: false, s: false, w: false, n: false });
+const tsumoSerifHouses = reactive<Record<Mmj.House, boolean>>({ e: false, s: false, w: false, n: false });
+const riichiSerifHouses = reactive<Record<Mmj.House, boolean>>({ e: false, s: false, w: false, n: false });
 
 /*
 if (room.value.isStarted && !room.value.isEnded) {
 	useInterval(() => {
 		if (room.value.isEnded) return;
-		const crc32 = engine.value.calcCrc32();
+		const crc32 = mj.value.calcCrc32();
 		if (_DEV_) console.log('crc32', crc32);
 		misskeyApi('reversi/verify', {
 			roomId: room.value.id,
@@ -308,7 +301,7 @@ if (!props.room.isEnded) {
 }
 */
 
-function houseToUser(house: Mahjong.House) {
+function houseToUser(house: Mmj.House) {
 	return room.value.gameState.user1House === house ? room.value.user1 : room.value.gameState.user2House === house ? room.value.user2 : room.value.gameState.user3House === house ? room.value.user3 : room.value.user4;
 }
 
@@ -317,7 +310,7 @@ let ankanSelect = false;
 let kakanSelect = false;
 let ciiSelect = false;
 
-function chooseTile(tile: Mahjong.TileId, ev: MouseEvent) {
+function chooseTile(tile: Mmj.TileId, ev: MouseEvent) {
 	if (!isMyTurn.value) return;
 
 	iTsumoed.value = false;
@@ -353,22 +346,22 @@ function riichi() {
 	if (!isMyTurn.value) return;
 
 	riichiSelect = true;
-	selectableTiles.value = Mahjong.getTilesForRiichi(engine.value.myHandTileTypes);
-	console.log(Mahjong.getTilesForRiichi(engine.value.myHandTileTypes));
+	selectableTiles.value = Mmj.getTilesForRiichi(mj.value.myHandTileTypes);
+	console.log(Mmj.getTilesForRiichi(mj.value.myHandTileTypes));
 }
 
 function ankan() {
 	if (!isMyTurn.value) return;
 
 	ankanSelect = true;
-	selectableTiles.value = engine.value.getAnkanableTiles().map(id => Mahjong.findTileByIdOrFail(id).t);
+	selectableTiles.value = mj.value.getAnkanableTiles().map(id => mj$type(id));
 }
 
 function kakan() {
 	if (!isMyTurn.value) return;
 
 	kakanSelect = true;
-	selectableTiles.value = engine.value.getKakanableTiles().map(id => Mahjong.findTileByIdOrFail(id).t);
+	selectableTiles.value = mj.value.getKakanableTiles().map(id => mj$type(id));
 }
 
 function tsumoHora() {
@@ -388,9 +381,18 @@ function pon() {
 	});
 }
 
-function cii() {
-	props.connection!.send('cii', {
-	});
+function cii(ev: MouseEvent) {
+	const targetTile = mj.value.hoTiles[mj.value.canCii!.callee].at(-1)!;
+	const patterns = Mmj.getAvailableCiiPatterns(mj.value.myHandTileTypes, mj$type(targetTile));
+	os.popupMenu(patterns.map(pattern => ({
+		text: pattern.join(' '),
+		action: () => {
+			const index = Mmj.sortTileTypes(pattern).indexOf(targetTile);
+			props.connection!.send('cii', {
+				pattern: index === 0 ? 'x__' : index === 1 ? '_x_' : '__x',
+			});
+		},
+	})), ev.currentTarget ?? ev.target);
 }
 
 function kan() {
@@ -399,21 +401,21 @@ function kan() {
 }
 
 function skip() {
-	engine.value.commit_nop(engine.value.myHouse);
-	triggerRef(engine);
+	mj.value.commit_nop(mj.value.myHouse);
+	triggerRef(mj);
 
 	props.connection!.send('nop', {});
 }
 
 const iTsumoed = ref(false);
 const showKyokuResults = ref(false);
-const kyokuResults = ref<Record<Mahjong.House, {
+const kyokuResults = ref<Record<Mmj.House, {
 	yakus: {
 		name: string;
 		fan: number;
 	}[];
 	doraCount: number;
-	pointDeltas: Record<Mahjong.House, number>;
+	pointDeltas: Record<Mmj.House, number>;
 } | null>>({
 	e: null,
 	s: null,
@@ -433,7 +435,7 @@ function onStreamDahai(log) {
 		playbackRate: 1,
 	});
 
-	//if (log.house !== engine.value.state.turn) { // = desyncが発生している
+	//if (log.house !== mj.value.state.turn) { // = desyncが発生している
 	//	const _room = await misskeyApi('mahjong/show-room', {
 	//		roomId: props.room.id,
 	//	});
@@ -441,8 +443,8 @@ function onStreamDahai(log) {
 	//	return;
 	//}
 
-	engine.value.commit_dahai(log.house, log.tile, log.riichi);
-	triggerRef(engine);
+	mj.value.commit_dahai(log.house, log.tile, log.riichi);
+	triggerRef(mj);
 
 	riichiSerifHouses[log.house] = log.riichi;
 	window.setTimeout(() => {
@@ -455,7 +457,7 @@ function onStreamDahai(log) {
 function onStreamTsumo(log) {
 	console.log('onStreamTsumo', log);
 
-	//if (log.house !== engine.value.state.turn) { // = desyncが発生している
+	//if (log.house !== mj.value.state.turn) { // = desyncが発生している
 	//	const _room = await misskeyApi('mahjong/show-room', {
 	//		roomId: props.room.id,
 	//	});
@@ -463,10 +465,10 @@ function onStreamTsumo(log) {
 	//	return;
 	//}
 
-	engine.value.commit_tsumo(log.house, log.tile);
-	triggerRef(engine);
+	mj.value.commit_tsumo(log.house, log.tile);
+	triggerRef(mj);
 
-	if (log.house === engine.value.myHouse) {
+	if (log.house === mj.value.myHouse) {
 		iTsumoed.value = true;
 	}
 
@@ -476,7 +478,7 @@ function onStreamTsumo(log) {
 function onStreamDahaiAndTsumo(log) {
 	console.log('onStreamDahaiAndTsumo', log);
 
-	//if (log.house !== engine.value.state.turn) { // = desyncが発生している
+	//if (log.house !== mj.value.state.turn) { // = desyncが発生している
 	//	const _room = await misskeyApi('mahjong/show-room', {
 	//		roomId: props.room.id,
 	//	});
@@ -489,8 +491,8 @@ function onStreamDahaiAndTsumo(log) {
 		playbackRate: 1,
 	});
 
-	engine.value.commit_dahai(log.dahaiHouse, log.dahaiTile, log.riichi);
-	triggerRef(engine);
+	mj.value.commit_dahai(log.dahaiHouse, log.dahaiTile, log.riichi);
+	triggerRef(mj);
 
 	riichiSerifHouses[log.dahaiHouse] = log.riichi;
 	window.setTimeout(() => {
@@ -498,10 +500,10 @@ function onStreamDahaiAndTsumo(log) {
 	}, 2000);
 
 	window.setTimeout(() => {
-		engine.value.commit_tsumo(Mahjong.nextHouse(log.dahaiHouse), log.tsumoTile);
-		triggerRef(engine);
+		mj.value.commit_tsumo(Mmj.nextHouse(log.dahaiHouse), log.tsumoTile);
+		triggerRef(mj);
 
-		if (Mahjong.nextHouse(log.dahaiHouse) === engine.value.myHouse) {
+		if (Mmj.nextHouse(log.dahaiHouse) === mj.value.myHouse) {
 			iTsumoed.value = true;
 		}
 	}, 100);
@@ -512,7 +514,7 @@ function onStreamDahaiAndTsumo(log) {
 function onStreamPonned(log) {
 	console.log('onStreamPonned', log);
 
-	//if (log.house !== engine.value.state.turn) { // = desyncが発生している
+	//if (log.house !== mj.value.state.turn) { // = desyncが発生している
 	//	const _room = await misskeyApi('mahjong/show-room', {
 	//		roomId: props.room.id,
 	//	});
@@ -520,8 +522,8 @@ function onStreamPonned(log) {
 	//	return;
 	//}
 
-	engine.value.commit_pon(log.caller, log.callee, log.tiles);
-	triggerRef(engine);
+	mj.value.commit_pon(log.caller, log.callee, log.tiles);
+	triggerRef(mj);
 
 	ponSerifHouses[log.caller] = true;
 	window.setTimeout(() => {
@@ -534,8 +536,8 @@ function onStreamPonned(log) {
 function onStreamKanned(log) {
 	console.log('onStreamKanned', log);
 
-	engine.value.commit_kan(log.caller, log.callee, log.tiles, log.rinsyan);
-	triggerRef(engine);
+	mj.value.commit_kan(log.caller, log.callee, log.tiles, log.rinsyan);
+	triggerRef(mj);
 
 	kanSerifHouses[log.caller] = true;
 	window.setTimeout(() => {
@@ -546,8 +548,8 @@ function onStreamKanned(log) {
 function onStreamKakanned(log) {
 	console.log('onStreamKakanned', log);
 
-	engine.value.commit_kakan(log.house, log.tiles, log.rinsyan);
-	triggerRef(engine);
+	mj.value.commit_kakan(log.house, log.tiles, log.rinsyan);
+	triggerRef(mj);
 
 	kanSerifHouses[log.caller] = true;
 	window.setTimeout(() => {
@@ -558,8 +560,8 @@ function onStreamKakanned(log) {
 function onStreamAnkanned(log) {
 	console.log('onStreamAnkanned', log);
 
-	engine.value.commit_ankan(log.house, log.tiles, log.rinsyan);
-	triggerRef(engine);
+	mj.value.commit_ankan(log.house, log.tiles, log.rinsyan);
+	triggerRef(mj);
 
 	kanSerifHouses[log.caller] = true;
 	window.setTimeout(() => {
@@ -567,11 +569,23 @@ function onStreamAnkanned(log) {
 	}, 2000);
 }
 
+function onStreamCiied(log) {
+	console.log('onStreamCiied', log);
+
+	mj.value.commit_cii(log.caller, log.callee, log.tiles);
+	triggerRef(mj);
+
+	ciiSerifHouses[log.caller] = true;
+	window.setTimeout(() => {
+		ciiSerifHouses[log.caller] = false;
+	}, 2000);
+}
+
 function onStreamRonned(log) {
 	console.log('onStreamRonned', log);
 
-	const res = engine.value.commit_ronHora(log.callers, log.callee, log.handTiles);
-	triggerRef(engine);
+	const res = mj.value.commit_ronHora(log.callers, log.callee, log.handTiles);
+	triggerRef(mj);
 
 	kyokuResults.value = res;
 
@@ -589,8 +603,8 @@ function onStreamRonned(log) {
 function onStreamTsumoHora(log) {
 	console.log('onStreamTsumoHora', log);
 
-	const res = engine.value.commit_tsumoHora(log.house, log.handTiles, log.tsumoTile);
-	triggerRef(engine);
+	const res = mj.value.commit_tsumoHora(log.house, log.handTiles, log.tsumoTile);
+	triggerRef(mj);
 
 	kyokuResults.value[log.house] = res;
 
@@ -606,7 +620,7 @@ function onStreamTsumoHora(log) {
 function restoreRoom(_room) {
 	room.value = deepClone(_room);
 
-	engine.value = new Mahjong.PlayerGameEngine(myUserNumber, room.value.gameState);
+	mj.value = new Mmj.PlayerGameEngine(myUserNumber, room.value.gameState);
 }
 
 onMounted(() => {
@@ -618,6 +632,7 @@ onMounted(() => {
 		props.connection.on('kanned', onStreamKanned);
 		props.connection.on('kakanned', onStreamKakanned);
 		props.connection.on('ankanned', onStreamAnkanned);
+		props.connection.on('ciied', onStreamCiied);
 		props.connection.on('ronned', onStreamRonned);
 		props.connection.on('tsumoHora', onStreamTsumoHora);
 	}
@@ -632,6 +647,7 @@ onActivated(() => {
 		props.connection.on('kanned', onStreamKanned);
 		props.connection.on('kakanned', onStreamKakanned);
 		props.connection.on('ankanned', onStreamAnkanned);
+		props.connection.on('ciied', onStreamCiied);
 		props.connection.on('ronned', onStreamRonned);
 		props.connection.on('tsumoHora', onStreamTsumoHora);
 	}
@@ -646,6 +662,7 @@ onDeactivated(() => {
 		props.connection.off('kanned', onStreamKanned);
 		props.connection.off('kakanned', onStreamKakanned);
 		props.connection.off('ankanned', onStreamAnkanned);
+		props.connection.off('ciied', onStreamCiied);
 		props.connection.off('ronned', onStreamRonned);
 		props.connection.off('tsumoHora', onStreamTsumoHora);
 	}
@@ -660,6 +677,7 @@ onUnmounted(() => {
 		props.connection.off('kanned', onStreamKanned);
 		props.connection.off('kakanned', onStreamKakanned);
 		props.connection.off('ankanned', onStreamAnkanned);
+		props.connection.off('ciied', onStreamCiied);
 		props.connection.off('ronned', onStreamRonned);
 		props.connection.off('tsumoHora', onStreamTsumoHora);
 	}
@@ -961,58 +979,6 @@ onUnmounted(() => {
 	margin-bottom: -8px;
 }
 
-.myTile {
-	display: inline-block;
-	position: relative;
-	width: 35px;
-	aspect-ratio: 0.7;
-	transition: translate 0.1s ease;
-	cursor: pointer;
-}
-.myTile:hover {
-	translate: 0 -10px;
-}
-.myTileNonSelectable {
-	filter: grayscale(1);
-	opacity: 0.7;
-	pointer-events: none;
-}
-/*
-.myTileDora {
-	&:after {
-		content: "";
-		display: block;
-		position: absolute;
-		top: 30px;
-		width: 200px;
-		height: 8px;
-		rotate: -45deg;
-		translate: -30px;
-		background: #ffffffee;
-		animation: shine 2s infinite;
-		pointer-events: none;
-	}
-}
-*/
-.myTileBg {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	pointer-events: none;
-	user-select: none;
-}
-.myTileFg {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 70%;
-	object-fit: contain;
-	pointer-events: none;
-	user-select: none;
-}
-
 .actions {
 	position: absolute;
 	bottom: 80px;
diff --git a/packages/frontend/src/pages/mahjong/room.setting.vue b/packages/frontend/src/pages/mahjong/room.setting.vue
index 926ac4e487..c83aaf86d1 100644
--- a/packages/frontend/src/pages/mahjong/room.setting.vue
+++ b/packages/frontend/src/pages/mahjong/room.setting.vue
@@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <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 * as Mmj from 'misskey-mahjong';
 import { i18n } from '@/i18n.js';
 import { signinRequired } from '@/account.js';
 import { deepClone } from '@/scripts/clone.js';
diff --git a/packages/frontend/src/pages/mahjong/tile.vue b/packages/frontend/src/pages/mahjong/tile.vue
index ba823414aa..9f2185d1e4 100644
--- a/packages/frontend/src/pages/mahjong/tile.vue
+++ b/packages/frontend/src/pages/mahjong/tile.vue
@@ -12,12 +12,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import * as Mahjong from 'misskey-mahjong';
+import * as Mmj from 'misskey-mahjong';
 
 const props = defineProps<{
-	tile: Mahjong.TileInstance;
+	tile: Mmj.TileInstance;
 	variation: string;
-	doras: Mahjong.TileType[];
+	doras: Mmj.TileType[];
 }>();
 
 const isDora = computed(() => props.doras.includes(props.tile.t));
@@ -37,7 +37,7 @@ const isDora = computed(() => props.doras.includes(props.tile.t));
 	margin: -17px;
 }
 .h {
-	margin: -14px -21px -5px;
+	margin: -14px -19px -5px;
 }
 .v {
 	margin: -14px -18px -11px;
diff --git a/packages/misskey-mahjong/src/common.ts b/packages/misskey-mahjong/src/common.ts
index 27ac381b56..cb88faa8d2 100644
--- a/packages/misskey-mahjong/src/common.ts
+++ b/packages/misskey-mahjong/src/common.ts
@@ -52,6 +52,7 @@ export type TileInstance = {
 
 export type TileId = number;
 
+// NOTE: 0 は"不明"(他プレイヤーの手牌など)を表すものとして予約されている
 export const TILE_ID_MAP = new Map<TileId, TileInstance>([
 	/* eslint-disable no-multi-spaces */
 	[1,   { t: 'm1' }],    [2,   { t: 'm1' }],    [3,   { t: 'm1' }],    [4,   { t: 'm1' }],
@@ -288,18 +289,21 @@ type EnvForCalcYaku = {
 export const YAKU_DEFINITIONS = [{
 	name: 'riichi',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return state.riichi;
 	},
 }, {
 	name: 'tsumo',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return state.tsumoTile != null;
 	},
 }, {
 	name: 'red',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return (
 			(state.handTiles.filter(t => t === 'chun').length >= 3) ||
@@ -313,6 +317,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'white',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return (
 			(state.handTiles.filter(t => t === 'haku').length >= 3) ||
@@ -326,6 +331,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'green',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return (
 			(state.handTiles.filter(t => t === 'hatsu').length >= 3) ||
@@ -339,6 +345,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'field-wind-e',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return state.fieldWind === 'e' && (
 			(state.handTiles.filter(t => t === 'e').length >= 3) ||
@@ -352,6 +359,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'field-wind-s',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return state.fieldWind === 's' && (
 			(state.handTiles.filter(t => t === 's').length >= 3) ||
@@ -365,6 +373,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'seat-wind-e',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return state.house === 'e' && (
 			(state.handTiles.filter(t => t === 'e').length >= 3) ||
@@ -378,6 +387,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'seat-wind-s',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return state.house === 's' && (
 			(state.handTiles.filter(t => t === 's').length >= 3) ||
@@ -391,6 +401,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'seat-wind-w',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return state.house === 'w' && (
 			(state.handTiles.filter(t => t === 'w').length >= 3) ||
@@ -404,6 +415,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'seat-wind-n',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		return state.house === 'n' && (
 			(state.handTiles.filter(t => t === 'n').length >= 3) ||
@@ -417,6 +429,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'tanyao',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		const yaochuTiles: TileType[] = ['m1', 'm9', 'p1', 'p9', 's1', 's9', 'e', 's', 'w', 'n', 'haku', 'hatsu', 'chun'];
 		return (
@@ -432,6 +445,7 @@ export const YAKU_DEFINITIONS = [{
 }, {
 	name: 'pinfu',
 	fan: 1,
+	isYakuman: false,
 	calc: (state: EnvForCalcYaku) => {
 		// 面前じゃないとダメ
 		if (state.huros.length !== 0) return false;
@@ -494,6 +508,19 @@ export function calcOwnedDoraCount(handTiles: TileType[], huros: Huro[], doras:
 	return count;
 }
 
+export function calcRedDoraCount(handTiles: TileId[], huros: Huro[]): number {
+	let count = 0;
+	for (const t of handTiles) {
+		if (findTileByIdOrFail(t).red) count++;
+	}
+	for (const huro of huros) {
+		for (const t of huro.tiles) {
+			if (findTileByIdOrFail(t).red) count++;
+		}
+	}
+	return count;
+}
+
 export function calcTsumoHoraPointDeltas(house: House, fans: number): Record<House, number> {
 	const isParent = house === 'e';
 
@@ -534,13 +561,18 @@ export function isTile(tile: string): tile is TileType {
 	return TILE_TYPES.includes(tile as TileType);
 }
 
-export function sortTiles(tiles: TileType[]): TileType[] {
-	tiles.sort((a, b) => {
+export function sortTiles(tiles: TileId[]): TileId[] {
+	return tiles.toSorted((a, b) => {
+		return a - b;
+	});
+}
+
+export function sortTileTypes(tiles: TileType[]): TileType[] {
+	return tiles.toSorted((a, b) => {
 		const aIndex = TILE_TYPES.indexOf(a);
 		const bIndex = TILE_TYPES.indexOf(b);
 		return aIndex - bIndex;
 	});
-	return tiles;
 }
 
 export function nextHouse(house: House): House {
diff --git a/packages/misskey-mahjong/src/engine.master.ts b/packages/misskey-mahjong/src/engine.master.ts
index 8a9cb1993b..64a87d6cc0 100644
--- a/packages/misskey-mahjong/src/engine.master.ts
+++ b/packages/misskey-mahjong/src/engine.master.ts
@@ -67,58 +67,59 @@ export type MasterState = {
 	};
 	turn: House | null;
 	nextTurnAfterAsking: House | null;
+	askings: {
+		ron: {
+			/**
+			 * 牌を捨てた人
+			 */
+			callee: House;
 
-	ronAsking: {
-		/**
-		 * 牌を捨てた人
-		 */
-		callee: House;
+			/**
+			 * ロンする権利がある人
+			 */
+			callers: House[];
+		} | null;
 
-		/**
-		 * ロンする権利がある人
-		 */
-		callers: House[];
-	} | null;
+		pon: {
+			/**
+			 * 牌を捨てた人
+			 */
+			callee: House;
 
-	ponAsking: {
-		/**
-		 * 牌を捨てた人
-		 */
-		callee: House;
+			/**
+			 * ポンする権利がある人
+			 */
+			caller: House;
+		} | null;
 
-		/**
-		 * ポンする権利がある人
-		 */
-		caller: House;
-	} | null;
+		cii: {
+			/**
+			 * 牌を捨てた人
+			 */
+			callee: House;
 
-	ciiAsking: {
-		/**
-		 * 牌を捨てた人
-		 */
-		callee: House;
+			/**
+			 * チーする権利がある人(calleeの下家なのは自明だがプログラム簡略化のため)
+			 */
+			caller: House;
+		} | null;
 
-		/**
-		 * チーする権利がある人(calleeの下家なのは自明だがプログラム簡略化のため)
-		 */
-		caller: House;
-	} | null;
+		kan: {
+			/**
+			 * 牌を捨てた人
+			 */
+			callee: House;
 
-	kanAsking: {
-		/**
-		 * 牌を捨てた人
-		 */
-		callee: House;
-
-		/**
-		 * カンする権利がある人
-		 */
-		caller: House;
-	} | null;
+			/**
+			 * カンする権利がある人
+			 */
+			caller: House;
+		} | null;
+	};
 };
 
 export class MasterGameEngine {
-	public state: MasterState;
+	private state: MasterState;
 
 	constructor(state: MasterState) {
 		this.state = state;
@@ -129,6 +130,10 @@ export class MasterGameEngine {
 			.map(id => Common.nextTileForDora($type(id)));
 	}
 
+	public get handTiles(): Record<House, TileId[]> {
+		return this.state.handTiles;
+	}
+
 	public get handTileTypes(): Record<House, TileType[]> {
 		return {
 			e: this.state.handTiles.e.map(id => $type(id)),
@@ -147,6 +152,30 @@ export class MasterGameEngine {
 		};
 	}
 
+	public get riichis(): Record<House, boolean> {
+		return this.state.riichis;
+	}
+
+	public get askings(): MasterState['askings'] {
+		return this.state.askings;
+	}
+
+	public get user1House(): House {
+		return this.state.user1House;
+	}
+
+	public get user2House(): House {
+		return this.state.user2House;
+	}
+
+	public get user3House(): House {
+		return this.state.user3House;
+	}
+
+	public get user4House(): House {
+		return this.state.user4House;
+	}
+
 	public static createInitialState(): MasterState {
 		const ikasama: TileId[] = [125, 129, 9, 56, 57, 61, 77, 81, 85, 133, 134, 135, 121, 122];
 
@@ -207,10 +236,12 @@ export class MasterGameEngine {
 			},
 			turn: 'e',
 			nextTurnAfterAsking: null,
-			ponAsking: null,
-			ciiAsking: null,
-			kanAsking: null,
-			ronAsking: null,
+			askings: {
+				ron: null,
+				pon: null,
+				cii: null,
+				kan: null,
+			},
 		};
 	}
 
@@ -280,8 +311,9 @@ export class MasterGameEngine {
 				ronTile: this.hoTileTypes[callee].at(-1)!,
 				riichi: this.state.riichis[house],
 			}));
-			const doraCount = Common.calcOwnedDoraCount(this.handTileTypes[house], this.state.huros[house], this.doras);
-			// TODO: 赤ドラ
+			const doraCount =
+				Common.calcOwnedDoraCount(this.handTileTypes[house], this.state.huros[house], this.doras) +
+				Common.calcRedDoraCount(this.state.handTiles[house], this.state.huros[house]);
 			const fans = yakus.map(yaku => yaku.fan).reduce((a, b) => a + b, 0) + doraCount;
 			const point = Common.fanToPoint(fans, house === 'e');
 			this.state.points[callee] -= point;
@@ -356,25 +388,25 @@ export class MasterGameEngine {
 
 		if (canRonHouses.length > 0 || canPonHouse != null || canCiiHouse != null) {
 			if (canRonHouses.length > 0) {
-				this.state.ronAsking = {
+				this.state.askings.ron = {
 					callee: house,
 					callers: canRonHouses,
 				};
 			}
 			if (canKanHouse != null) {
-				this.state.kanAsking = {
+				this.state.askings.kan = {
 					callee: house,
 					caller: canKanHouse,
 				};
 			}
 			if (canPonHouse != null) {
-				this.state.ponAsking = {
+				this.state.askings.pon = {
 					callee: house,
 					caller: canPonHouse,
 				};
 			}
 			if (canCiiHouse != null) {
-				this.state.ciiAsking = {
+				this.state.askings.cii = {
 					callee: house,
 					caller: canCiiHouse,
 				};
@@ -460,8 +492,9 @@ export class MasterGameEngine {
 			ronTile: null,
 			riichi: this.state.riichis[house],
 		}));
-		const doraCount = Common.calcOwnedDoraCount(this.handTileTypes[house], this.state.huros[house], this.doras);
-		// TODO: 赤ドラ
+		const doraCount =
+			Common.calcOwnedDoraCount(this.handTileTypes[house], this.state.huros[house], this.doras) +
+			Common.calcRedDoraCount(this.state.handTiles[house], this.state.huros[house]);
 		const fans = yakus.map(yaku => yaku.fan).reduce((a, b) => a + b, 0) + doraCount;
 		const pointDeltas = Common.calcTsumoHoraPointDeltas(house, fans);
 		this.state.points.e += pointDeltas.e;
@@ -484,17 +517,17 @@ export class MasterGameEngine {
 		kan: boolean;
 		ron: House[];
 	}) {
-		if (this.state.ponAsking == null && this.state.ciiAsking == null && this.state.kanAsking == null && this.state.ronAsking == null) throw new Error();
+		if (this.state.askings.pon == null && this.state.askings.cii == null && this.state.askings.kan == null && this.state.askings.ron == null) throw new Error();
 
-		const pon = this.state.ponAsking;
-		const cii = this.state.ciiAsking;
-		const kan = this.state.kanAsking;
-		const ron = this.state.ronAsking;
+		const pon = this.state.askings.pon;
+		const cii = this.state.askings.cii;
+		const kan = this.state.askings.kan;
+		const ron = this.state.askings.ron;
 
-		this.state.ponAsking = null;
-		this.state.ciiAsking = null;
-		this.state.kanAsking = null;
-		this.state.ronAsking = null;
+		this.state.askings.pon = null;
+		this.state.askings.cii = null;
+		this.state.askings.kan = null;
+		this.state.askings.ron = null;
 
 		if (ron != null && answers.ron.length > 0) {
 			this.ronHora(answers.ron, ron.callee);
@@ -657,10 +690,10 @@ export class MasterGameEngine {
 			tilesCount: this.state.tiles.length,
 			doraIndicateTiles: this.state.kingTiles.slice(0, this.state.activatedDorasCount),
 			handTiles: {
-				e: house === 'e' ? this.state.handTiles.e : this.state.handTiles.e.map(() => null),
-				s: house === 's' ? this.state.handTiles.s : this.state.handTiles.s.map(() => null),
-				w: house === 'w' ? this.state.handTiles.w : this.state.handTiles.w.map(() => null),
-				n: house === 'n' ? this.state.handTiles.n : this.state.handTiles.n.map(() => null),
+				e: house === 'e' ? this.state.handTiles.e : this.state.handTiles.e.map(() => 0),
+				s: house === 's' ? this.state.handTiles.s : this.state.handTiles.s.map(() => 0),
+				w: house === 'w' ? this.state.handTiles.w : this.state.handTiles.w.map(() => 0),
+				n: house === 'n' ? this.state.handTiles.n : this.state.handTiles.n.map(() => 0),
 			},
 			hoTiles: {
 				e: this.state.hoTiles.e,
@@ -706,4 +739,8 @@ export class MasterGameEngine {
 	public calcCrc32ForUser4(): number {
 		// TODO
 	}
+
+	public getState(): MasterState {
+		return structuredClone(this.state);
+	}
 }
diff --git a/packages/misskey-mahjong/src/engine.player.ts b/packages/misskey-mahjong/src/engine.player.ts
index 01b48c2bf3..4d571be782 100644
--- a/packages/misskey-mahjong/src/engine.player.ts
+++ b/packages/misskey-mahjong/src/engine.player.ts
@@ -33,10 +33,10 @@ export type PlayerState = {
 	 * 副露した牌を含まない手牌
 	 */
 	handTiles: {
-		e: TileId[] | null[];
-		s: TileId[] | null[];
-		w: TileId[] | null[];
-		n: TileId[] | null[];
+		e: TileId[] | 0[];
+		s: TileId[] | 0[];
+		w: TileId[] | 0[];
+		n: TileId[] | 0[];
 	};
 
 	hoTiles: {
@@ -72,7 +72,7 @@ export type PlayerState = {
 };
 
 export type KyokuResult = {
-	yakus: { name: string; fan: number; }[];
+	yakus: { name: string; fan: number; isYakuman: boolean; }[];
 	doraCount: number;
 	pointDeltas: { e: number; s: number; w: number; n: number; };
 };
@@ -84,13 +84,53 @@ export class PlayerGameEngine {
 	public static InvalidOperationError = class extends Error {};
 
 	private myUserNumber: 1 | 2 | 3 | 4;
-	public state: PlayerState;
+	private state: PlayerState;
 
 	constructor(myUserNumber: PlayerGameEngine['myUserNumber'], state: PlayerState) {
 		this.myUserNumber = myUserNumber;
 		this.state = state;
 	}
 
+	public get doras(): TileType[] {
+		return this.state.doraIndicateTiles.map(t => Common.nextTileForDora($type(t)));
+	}
+
+	public get points(): Record<House, number> {
+		return this.state.points;
+	}
+
+	public get handTiles(): Record<House, number[]> {
+		return this.state.handTiles;
+	}
+
+	public get hoTiles(): Record<House, number[]> {
+		return this.state.hoTiles;
+	}
+
+	public get huros(): Record<House, Huro[]> {
+		return this.state.huros;
+	}
+
+	public get tilesCount(): number {
+		return this.state.tilesCount;
+	}
+
+	public get canRon(): PlayerState['canRon'] {
+		return this.state.canRon;
+	}
+
+	public get canPon(): PlayerState['canPon'] {
+		return this.state.canPon;
+	}
+
+	public get canKan(): PlayerState['canKan'] {
+		return this.state.canKan;
+	}
+
+	public get canCii(): PlayerState['canCii'] {
+		return this.state.canCii;
+	}
+
 	public get myHouse(): House {
 		switch (this.myUserNumber) {
 			case 1: return this.state.user1House;
@@ -112,10 +152,6 @@ export class PlayerGameEngine {
 		return this.state.riichis[this.myHouse];
 	}
 
-	public get doras(): TileType[] {
-		return this.state.doraIndicateTiles.map(t => Common.nextTileForDora($type(t)));
-	}
-
 	public commit_tsumo(house: House, tile: TileId) {
 		console.log('commit_tsumo', this.state.turn, house, tile);
 		this.state.tilesCount--;
@@ -123,7 +159,7 @@ export class PlayerGameEngine {
 		if (house === this.myHouse) {
 			this.myHandTiles.push(tile);
 		} else {
-			this.state.handTiles[house].push(null);
+			this.state.handTiles[house].push(0);
 		}
 	}
 
@@ -148,9 +184,9 @@ export class PlayerGameEngine {
 		if (house === this.myHouse) {
 		} else {
 			const canRon = Common.getHoraSets(this.myHandTiles.concat(tile).map(id => $type(id))).length > 0;
-			const canPon = this.myHandTiles.filter(t => t === tile).length === 2;
-			const canKan = this.myHandTiles.filter(t => t === tile).length === 3;
-			const canCii = house === Common.prevHouse(this.myHouse) &&
+			const canPon = !this.isMeRiichi && this.myHandTiles.filter(t => t === tile).length === 2;
+			const canKan = !this.isMeRiichi && this.myHandTiles.filter(t => t === tile).length === 3;
+			const canCii = !this.isMeRiichi && house === Common.prevHouse(this.myHouse) &&
 				Common.SHUNTU_PATTERNS.some(pattern =>
 					pattern.includes($type(tile)) &&
 					pattern.filter(t => this.myHandTileTypes.includes(t)).length >= 2);
@@ -173,8 +209,9 @@ export class PlayerGameEngine {
 			ronTile: null,
 			riichi: this.state.riichis[house],
 		}));
-		const doraCount = Common.calcOwnedDoraCount(handTiles.map(id => $type(id)), this.state.huros[house], this.doras);
-		// TODO: 赤ドラ
+		const doraCount =
+			Common.calcOwnedDoraCount(handTiles.map(id => $type(id)), this.state.huros[house], this.doras) +
+			Common.calcRedDoraCount(handTiles, this.state.huros[house]);
 		const fans = yakus.map(yaku => yaku.fan).reduce((a, b) => a + b, 0) + doraCount;
 		const pointDeltas = Common.calcTsumoHoraPointDeltas(house, fans);
 		this.state.points.e += pointDeltas.e;
@@ -186,6 +223,7 @@ export class PlayerGameEngine {
 			yakus: yakus.map(yaku => ({
 				name: yaku.name,
 				fan: yaku.fan,
+				isYakuman: yaku.isYakuman,
 			})),
 			doraCount,
 			pointDeltas,
@@ -223,13 +261,14 @@ export class PlayerGameEngine {
 				ronTile: $type(this.state.hoTiles[callee].at(-1)!),
 				riichi: this.state.riichis[house],
 			}));
-			const doraCount = Common.calcOwnedDoraCount(handTiles[house].map(id => $type(id)), this.state.huros[house], this.doras);
-			// TODO: 赤ドラ
+			const doraCount =
+				Common.calcOwnedDoraCount(handTiles[house].map(id => $type(id)), this.state.huros[house], this.doras) +
+				Common.calcRedDoraCount(handTiles[house], this.state.huros[house]);
 			const fans = yakus.map(yaku => yaku.fan).reduce((a, b) => a + b, 0) + doraCount;
 			const point = Common.fanToPoint(fans, house === 'e');
 			this.state.points[callee] -= point;
 			this.state.points[house] += point;
-			resultMap[house].yakus = yakus.map(yaku => ({ name: yaku.name, fan: yaku.fan }));
+			resultMap[house].yakus = yakus.map(yaku => ({ name: yaku.name, fan: yaku.fan, isYakuman: yaku.isYakuman }));
 			resultMap[house].doraCount = doraCount;
 			resultMap[house].pointDeltas[callee] = -point;
 			resultMap[house].pointDeltas[house] = point;
@@ -297,6 +336,28 @@ export class PlayerGameEngine {
 		console.log('commit_kakan', this.state.turn, house, tiles);
 	}
 
+	/**
+	 * チーします
+	 * @param caller チーした人
+	 * @param callee 牌を捨てた人
+	 */
+	public commit_cii(caller: House, callee: House, tiles: TileId[]) {
+		this.state.canCii = null;
+
+		this.state.hoTiles[callee].pop();
+		if (caller === this.myHouse) {
+			if (this.myHandTiles.includes(tiles[0])) this.myHandTiles.splice(this.myHandTiles.indexOf(tiles[0]), 1);
+			if (this.myHandTiles.includes(tiles[1])) this.myHandTiles.splice(this.myHandTiles.indexOf(tiles[1]), 1);
+			if (this.myHandTiles.includes(tiles[2])) this.myHandTiles.splice(this.myHandTiles.indexOf(tiles[2]), 1);
+		} else {
+			this.state.handTiles[caller].unshift();
+			this.state.handTiles[caller].unshift();
+		}
+		this.state.huros[caller].push({ type: 'cii', tiles: tiles, from: callee });
+
+		this.state.turn = caller;
+	}
+
 	public commit_nop() {
 		this.state.canRon = null;
 		this.state.canPon = null;
@@ -337,4 +398,8 @@ export class PlayerGameEngine {
 	public getKakanableTiles(): TileId[] {
 		return this.myHandTiles.filter(t => this.state.huros[this.myHouse].some(h => h.type === 'pon' && $type(t) === $type(h.tiles[0])));
 	}
+
+	public getState(): PlayerState {
+		return structuredClone(this.state);
+	}
 }