refactor: extract bubble-game engine as independent package

14 files changed, 620 insertions, 497 deletions

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index a9a68601fc..6dd826d459 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -55,12 +55,12 @@
 		"mfm-js": "0.24.0",
 		"misskey-js": "workspace:*",
 		"misskey-reversi": "workspace:*",
+		"misskey-bubble-game": "workspace:*",
 		"photoswipe": "5.4.3",
 		"punycode": "2.3.1",
 		"rollup": "4.9.1",
 		"sanitize-html": "2.11.0",
 		"sass": "1.69.5",
-		"seedrandom": "^3.0.5",
 		"shiki": "0.14.7",
 		"strict-event-emitter-types": "2.0.0",
 		"textarea-caret": "3.1.0",
diff --git a/packages/frontend/src/pages/drop-and-fusion.game.vue b/packages/frontend/src/pages/drop-and-fusion.game.vue
index 1fc0c7cd9c..51819fafd0 100644
--- a/packages/frontend/src/pages/drop-and-fusion.game.vue
+++ b/packages/frontend/src/pages/drop-and-fusion.game.vue
@@ -180,6 +180,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, onDeactivated, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
 import * as Matter from 'matter-js';
 import * as Misskey from 'misskey-js';
+import { DropAndFusionGame, Mono } from 'misskey-bubble-game';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import * as os from '@/os.js';
@@ -193,7 +194,6 @@ import { i18n } from '@/i18n.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { apiUrl } from '@/config.js';
 import { $i } from '@/account.js';
-import { DropAndFusionGame, Mono } from '@/scripts/drop-and-fusion-engine.js';
 import * as sound from '@/scripts/sound.js';
 import MkRange from '@/components/MkRange.vue';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
index 8cdc7b59c6..84fe9e44df 100644
--- a/packages/frontend/vite.config.ts
+++ b/packages/frontend/vite.config.ts
@@ -103,7 +103,7 @@ export function getConfig(): UserConfig {
 
 		// https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies
 		optimizeDeps: {
-			include: ['misskey-js', 'misskey-reversi'],
+			include: ['misskey-js', 'misskey-reversi', 'misskey-bubble-game'],
 		},
 
 		build: {
@@ -135,7 +135,7 @@ export function getConfig(): UserConfig {
 
 			// https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies
 			commonjsOptions: {
-				include: [/misskey-js/, /misskey-reversi/, /node_modules/],
+				include: [/misskey-js/, /misskey-reversi/, /misskey-bubble-game/, /node_modules/],
 			},
 		},
 
diff --git a/packages/misskey-bubble-game/.eslintignore b/packages/misskey-bubble-game/.eslintignore
new file mode 100644
index 0000000000..f22128f047
--- /dev/null
+++ b/packages/misskey-bubble-game/.eslintignore
@@ -0,0 +1,7 @@
+node_modules
+/built
+/coverage
+/.eslintrc.js
+/jest.config.ts
+/test
+/test-d
diff --git a/packages/misskey-bubble-game/.eslintrc.cjs b/packages/misskey-bubble-game/.eslintrc.cjs
new file mode 100644
index 0000000000..e2e31e9e33
--- /dev/null
+++ b/packages/misskey-bubble-game/.eslintrc.cjs
@@ -0,0 +1,9 @@
+module.exports = {
+	parserOptions: {
+		tsconfigRootDir: __dirname,
+		project: ['./tsconfig.json'],
+	},
+	extends: [
+		'../shared/.eslintrc.js',
+	],
+};
diff --git a/packages/misskey-bubble-game/package.json b/packages/misskey-bubble-game/package.json
new file mode 100644
index 0000000000..806d693670
--- /dev/null
+++ b/packages/misskey-bubble-game/package.json
@@ -0,0 +1,31 @@
+{
+	"name": "misskey-bubble-game",
+	"version": "0.0.1",
+	"main": "./built/index.js",
+	"types": "./built/index.d.ts",
+	"scripts": {
+		"build": "tsc",
+		"watch": "nodemon -w src -e ts,js,cjs,mjs,json --exec \"pnpm run build\"",
+		"eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
+		"typecheck": "tsc --noEmit",
+		"lint": "pnpm typecheck && pnpm eslint"
+	},
+	"devDependencies": {
+		"@misskey-dev/eslint-plugin": "1.0.0",
+		"@types/matter-js": "0.19.6",
+		"@types/node": "20.11.5",
+		"@types/seedrandom": "3.0.8",
+		"@typescript-eslint/eslint-plugin": "6.19.0",
+		"@typescript-eslint/parser": "6.19.0",
+		"eslint": "8.56.0",
+		"typescript": "5.3.3"
+	},
+	"files": [
+		"built"
+	],
+	"dependencies": {
+		"eventemitter3": "5.0.1",
+		"matter-js": "0.19.0",
+		"seedrandom": "3.0.5"
+	}
+}
diff --git a/packages/misskey-bubble-game/src/game.ts b/packages/misskey-bubble-game/src/game.ts
new file mode 100644
index 0000000000..e01a011eee
--- /dev/null
+++ b/packages/misskey-bubble-game/src/game.ts
@@ -0,0 +1,495 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { EventEmitter } from 'eventemitter3';
+import * as Matter from 'matter-js';
+import seedrandom from 'seedrandom';
+import { NORAML_MONOS, SQUARE_MONOS, SWEETS_MONOS, YEN_MONOS } from './monos.js';
+
+export type Mono = {
+	id: string;
+	level: number;
+	sizeX: number;
+	sizeY: number;
+	shape: 'circle' | 'rectangle' | 'custom';
+	vertices?: Matter.Vector[][];
+	verticesSize?: number;
+	score: number;
+	dropCandidate: boolean;
+};
+
+type Log = {
+	frame: number;
+	operation: 'drop';
+	x: number;
+} | {
+	frame: number;
+	operation: 'hold';
+} | {
+	frame: number;
+	operation: 'surrender';
+};
+
+export class DropAndFusionGame extends EventEmitter<{
+	changeScore: (newScore: number) => void;
+	changeCombo: (newCombo: number) => void;
+	changeStock: (newStock: { id: string; mono: Mono }[]) => void;
+	changeHolding: (newHolding: { id: string; mono: Mono } | null) => void;
+	dropped: (x: number) => void;
+	fusioned: (x: number, y: number, nextMono: Mono | null, scoreDelta: number) => void;
+	collision: (energy: number, bodyA: Matter.Body, bodyB: Matter.Body) => void;
+	monoAdded: (mono: Mono) => void;
+	gameOver: () => void;
+}> {
+	private PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
+	private COMBO_INTERVAL = 60; // frame
+	public readonly GAME_VERSION = 3;
+	public readonly GAME_WIDTH = 450;
+	public readonly GAME_HEIGHT = 600;
+	public readonly DROP_COOLTIME = 30; // frame
+	public readonly PLAYAREA_MARGIN = 25;
+	private STOCK_MAX = 4;
+	private TICK_DELTA = 1000 / 60; // 60fps
+
+	public frame = 0;
+	public engine: Matter.Engine;
+	private tickCallbackQueue: { frame: number; callback: () => void; }[] = [];
+	private overflowCollider: Matter.Body;
+	private isGameOver = false;
+	private gameMode: 'normal' | 'yen' | 'square' | 'sweets' | 'space';
+	private rng: () => number;
+	private logs: Log[] = [];
+
+	/**
+	 * フィールドに出ていて、かつ合体の対象となるアイテム
+	 */
+	private fusionReadyBodyIds: Matter.Body['id'][] = [];
+
+	private gameOverReadyBodyIds: Matter.Body['id'][] = [];
+
+	/**
+	 * fusion予約アイテムのペア
+	 * TODO: これらのモノは光らせるなどの演出をすると視覚的に楽しそう
+	 */
+	private fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
+
+	private latestDroppedAt = 0; // frame
+	private latestFusionedAt = 0; // frame
+	private stock: { id: string; mono: Mono }[] = [];
+	private holding: { id: string; mono: Mono } | null = null;
+
+	public get monoDefinitions() {
+		switch (this.gameMode) {
+			case 'normal': return NORAML_MONOS;
+			case 'yen': return YEN_MONOS;
+			case 'square': return SQUARE_MONOS;
+			case 'sweets': return SWEETS_MONOS;
+			case 'space': return NORAML_MONOS;
+		}
+	}
+
+	private _combo = 0;
+	private get combo() {
+		return this._combo;
+	}
+	private set combo(value: number) {
+		this._combo = value;
+		this.emit('changeCombo', value);
+	}
+
+	private _score = 0;
+	private get score() {
+		return this._score;
+	}
+	private set score(value: number) {
+		this._score = value;
+		this.emit('changeScore', value);
+	}
+
+	private getMonoRenderOptions: null | ((mono: Mono) => Partial<Matter.IBodyRenderOptions>) = null;
+
+	public replayPlaybackRate = 1;
+
+	constructor(env: {
+		seed: string;
+		gameMode: DropAndFusionGame['gameMode'];
+		getMonoRenderOptions?: (mono: Mono) => Partial<Matter.IBodyRenderOptions>;
+	}) {
+		super();
+
+		//#region BIND
+		this.tick = this.tick.bind(this);
+		//#endregion
+
+		this.gameMode = env.gameMode;
+		this.getMonoRenderOptions = env.getMonoRenderOptions ?? null;
+		this.rng = seedrandom(env.seed);
+
+		// sweetsモードは重いため
+		const physicsQualityFactor = this.gameMode === 'sweets' ? 4 : this.PHYSICS_QUALITY_FACTOR;
+		this.engine = Matter.Engine.create({
+			constraintIterations: 2 * physicsQualityFactor,
+			positionIterations: 6 * physicsQualityFactor,
+			velocityIterations: 4 * physicsQualityFactor,
+			gravity: {
+				x: 0,
+				y: this.gameMode === 'space' ? 0.0125 : 1,
+			},
+			timing: {
+				timeScale: 2,
+			},
+			enableSleeping: false,
+		});
+
+		this.engine.world.bodies = [];
+
+		//#region walls
+		const WALL_OPTIONS: Matter.IChamferableBodyDefinition = {
+			label: '_wall_',
+			isStatic: true,
+			friction: 0.7,
+			slop: this.gameMode === 'space' ? 0.01 : 0.7,
+			render: {
+				strokeStyle: 'transparent',
+				fillStyle: 'transparent',
+			},
+		};
+
+		const thickness = 100;
+		Matter.Composite.add(this.engine.world, [
+			Matter.Bodies.rectangle(this.GAME_WIDTH / 2, this.GAME_HEIGHT + (thickness / 2) - this.PLAYAREA_MARGIN, this.GAME_WIDTH, thickness, WALL_OPTIONS),
+			Matter.Bodies.rectangle(this.GAME_WIDTH + (thickness / 2) - this.PLAYAREA_MARGIN, this.GAME_HEIGHT / 2, thickness, this.GAME_HEIGHT, WALL_OPTIONS),
+			Matter.Bodies.rectangle(-((thickness / 2) - this.PLAYAREA_MARGIN), this.GAME_HEIGHT / 2, thickness, this.GAME_HEIGHT, WALL_OPTIONS),
+		]);
+		//#endregion
+
+		this.overflowCollider = Matter.Bodies.rectangle(this.GAME_WIDTH / 2, 0, this.GAME_WIDTH, 200, {
+			label: '_overflow_',
+			isStatic: true,
+			isSensor: true,
+			render: {
+				strokeStyle: 'transparent',
+				fillStyle: 'transparent',
+			},
+		});
+		Matter.Composite.add(this.engine.world, this.overflowCollider);
+	}
+
+	public msToFrame(ms: number) {
+		return Math.round(ms / this.TICK_DELTA);
+	}
+
+	public frameToMs(frame: number) {
+		return frame * this.TICK_DELTA;
+	}
+
+	private createBody(mono: Mono, x: number, y: number) {
+		const options: Matter.IBodyDefinition = {
+			label: mono.id,
+			density: this.gameMode === 'space' ? 0.01 : ((mono.sizeX * mono.sizeY) / 10000),
+			restitution: this.gameMode === 'space' ? 0.5 : 0.2,
+			frictionAir: this.gameMode === 'space' ? 0 : 0.01,
+			friction: this.gameMode === 'space' ? 0.5 : 0.7,
+			frictionStatic: this.gameMode === 'space' ? 0 : 5,
+			slop: this.gameMode === 'space' ? 0.01 : 0.7,
+			//mass: 0,
+			render: this.getMonoRenderOptions ? this.getMonoRenderOptions(mono) : undefined,
+		};
+		if (mono.shape === 'circle') {
+			return Matter.Bodies.circle(x, y, mono.sizeX / 2, options);
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		} else if (mono.shape === 'rectangle') {
+			return Matter.Bodies.rectangle(x, y, mono.sizeX, mono.sizeY, options);
+		} else if (mono.shape === 'custom') {
+			return Matter.Bodies.fromVertices(x, y, mono.vertices!.map(i => i.map(j => ({
+				x: (j.x / mono.verticesSize!) * mono.sizeX,
+				y: (j.y / mono.verticesSize!) * mono.sizeY,
+			}))), options);
+		} else {
+			throw new Error('unrecognized shape');
+		}
+	}
+
+	private fusion(bodyA: Matter.Body, bodyB: Matter.Body) {
+		if (this.latestFusionedAt > this.frame - this.COMBO_INTERVAL) {
+			this.combo++;
+		} else {
+			this.combo = 1;
+		}
+		this.latestFusionedAt = this.frame;
+
+		const newX = (bodyA.position.x + bodyB.position.x) / 2;
+		const newY = (bodyA.position.y + bodyB.position.y) / 2;
+
+		this.fusionReadyBodyIds = this.fusionReadyBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
+		this.gameOverReadyBodyIds = this.gameOverReadyBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
+		Matter.Composite.remove(this.engine.world, [bodyA, bodyB]);
+
+		const currentMono = this.monoDefinitions.find(y => y.id === bodyA.label)!;
+		const nextMono = this.monoDefinitions.find(x => x.level === currentMono.level + 1) ?? null;
+
+		if (nextMono) {
+			const body = this.createBody(nextMono, newX, newY);
+			Matter.Composite.add(this.engine.world, body);
+
+			// 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする
+			this.tickCallbackQueue.push({
+				frame: this.frame + this.msToFrame(100),
+				callback: () => {
+					this.fusionReadyBodyIds.push(body.id);
+				},
+			});
+
+			this.emit('monoAdded', nextMono);
+		}
+
+		const hasComboBonus = this.gameMode !== 'yen' && this.gameMode !== 'sweets';
+		const comboBonus = hasComboBonus ? 1 + ((this.combo - 1) / 5) : 1;
+		const additionalScore = Math.round(currentMono.score * comboBonus);
+		this.score += additionalScore;
+
+		this.emit('fusioned', newX, newY, nextMono, additionalScore);
+	}
+
+	private onCollision(event: Matter.IEventCollision<Matter.Engine>) {
+		for (const pairs of event.pairs) {
+			const { bodyA, bodyB } = pairs;
+
+			const shouldFusion = (bodyA.label === bodyB.label) &&
+				!this.fusionReservedPairs.some(x =>
+					x.bodyA.id === bodyA.id ||
+					x.bodyA.id === bodyB.id ||
+					x.bodyB.id === bodyA.id ||
+					x.bodyB.id === bodyB.id);
+
+			if (shouldFusion) {
+				if (this.fusionReadyBodyIds.includes(bodyA.id) && this.fusionReadyBodyIds.includes(bodyB.id)) {
+					this.fusion(bodyA, bodyB);
+				} else {
+					this.fusionReservedPairs.push({ bodyA, bodyB });
+					this.tickCallbackQueue.push({
+						frame: this.frame + this.msToFrame(100),
+						callback: () => {
+							this.fusionReservedPairs = this.fusionReservedPairs.filter(x => x.bodyA.id !== bodyA.id && x.bodyB.id !== bodyB.id);
+							this.fusion(bodyA, bodyB);
+						},
+					});
+				}
+			} else {
+				const energy = pairs.collision.depth;
+
+				if (bodyA.label === '_overflow_' || bodyB.label === '_overflow_') continue;
+
+				if (bodyA.label !== '_wall_' && bodyB.label !== '_wall_') {
+					if (!this.gameOverReadyBodyIds.includes(bodyA.id)) this.gameOverReadyBodyIds.push(bodyA.id);
+					if (!this.gameOverReadyBodyIds.includes(bodyB.id)) this.gameOverReadyBodyIds.push(bodyB.id);
+				}
+
+				this.emit('collision', energy, bodyA, bodyB);
+			}
+		}
+	}
+
+	private onCollisionActive(event: Matter.IEventCollision<Matter.Engine>) {
+		for (const pairs of event.pairs) {
+			const { bodyA, bodyB } = pairs;
+
+			// ハコからあふれたかどうかの判定
+			if (bodyA.id === this.overflowCollider.id || bodyB.id === this.overflowCollider.id) {
+				if (this.gameOverReadyBodyIds.includes(bodyA.id) || this.gameOverReadyBodyIds.includes(bodyB.id)) {
+					this.gameOver();
+					break;
+				}
+				continue;
+			}
+		}
+	}
+
+	public surrender() {
+		this.logs.push({
+			frame: this.frame,
+			operation: 'surrender',
+		});
+
+		this.gameOver();
+	}
+
+	private gameOver() {
+		this.isGameOver = true;
+		this.emit('gameOver');
+	}
+
+	public start() {
+		for (let i = 0; i < this.STOCK_MAX; i++) {
+			this.stock.push({
+				id: this.rng().toString(),
+				mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(this.rng() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
+			});
+		}
+		this.emit('changeStock', this.stock);
+
+		Matter.Events.on(this.engine, 'collisionStart', this.onCollision.bind(this));
+		Matter.Events.on(this.engine, 'collisionActive', this.onCollisionActive.bind(this));
+	}
+
+	public getLogs() {
+		return this.logs;
+	}
+
+	public tick() {
+		this.frame++;
+
+		if (this.latestFusionedAt < this.frame - this.COMBO_INTERVAL) {
+			this.combo = 0;
+		}
+
+		this.tickCallbackQueue = this.tickCallbackQueue.filter(x => {
+			if (x.frame === this.frame) {
+				x.callback();
+				return false;
+			} else {
+				return true;
+			}
+		});
+
+		Matter.Engine.update(this.engine, this.TICK_DELTA);
+
+		const hasNextTick = !this.isGameOver;
+
+		return hasNextTick;
+	}
+
+	public getActiveMonos() {
+		return this.engine.world.bodies.map(x => this.monoDefinitions.find((mono) => mono.id === x.label)!).filter(x => x !== undefined);
+	}
+
+	public drop(_x: number) {
+		if (this.isGameOver) return;
+		if (this.frame - this.latestDroppedAt < this.DROP_COOLTIME) return;
+
+		const head = this.stock.shift()!;
+		this.stock.push({
+			id: this.rng().toString(),
+			mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(this.rng() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
+		});
+		this.emit('changeStock', this.stock);
+
+		const inputX = Math.round(_x);
+		const x = Math.min(this.GAME_WIDTH - this.PLAYAREA_MARGIN - (head.mono.sizeX / 2), Math.max(this.PLAYAREA_MARGIN + (head.mono.sizeX / 2), inputX));
+		const body = this.createBody(head.mono, x, 50 + head.mono.sizeY / 2);
+		this.logs.push({
+			frame: this.frame,
+			operation: 'drop',
+			x: inputX,
+		});
+
+		// add force
+		if (this.gameMode === 'space') {
+			Matter.Body.applyForce(body, body.position, {
+				x: 0,
+				y: (Math.PI * head.mono.sizeX * head.mono.sizeY) / 65536,
+			});
+		}
+
+		Matter.Composite.add(this.engine.world, body);
+
+		this.fusionReadyBodyIds.push(body.id);
+		this.latestDroppedAt = this.frame;
+
+		this.emit('dropped', x);
+		this.emit('monoAdded', head.mono);
+	}
+
+	public hold() {
+		if (this.isGameOver) return;
+
+		this.logs.push({
+			frame: this.frame,
+			operation: 'hold',
+		});
+
+		if (this.holding) {
+			const head = this.stock.shift()!;
+			this.stock.unshift(this.holding);
+			this.holding = head;
+			this.emit('changeHolding', this.holding);
+			this.emit('changeStock', this.stock);
+		} else {
+			const head = this.stock.shift()!;
+			this.holding = head;
+			this.stock.push({
+				id: this.rng().toString(),
+				mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(this.rng() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
+			});
+			this.emit('changeHolding', this.holding);
+			this.emit('changeStock', this.stock);
+		}
+	}
+
+	public static serializeLogs(logs: Log[]) {
+		const _logs: number[][] = [];
+
+		for (let i = 0; i < logs.length; i++) {
+			const log = logs[i];
+			const frameDelta = i === 0 ? log.frame : log.frame - logs[i - 1].frame;
+
+			switch (log.operation) {
+				case 'drop':
+					_logs.push([frameDelta, 0, log.x]);
+					break;
+				case 'hold':
+					_logs.push([frameDelta, 1]);
+					break;
+				case 'surrender':
+					_logs.push([frameDelta, 2]);
+					break;
+			}
+		}
+
+		return _logs;
+	}
+
+	public static deserializeLogs(logs: number[][]) {
+		const _logs: Log[] = [];
+
+		let frame = 0;
+
+		for (const log of logs) {
+			const frameDelta = log[0];
+			frame += frameDelta;
+
+			const operation = log[1];
+
+			switch (operation) {
+				case 0:
+					_logs.push({
+						frame,
+						operation: 'drop',
+						x: log[2],
+					});
+					break;
+				case 1:
+					_logs.push({
+						frame,
+						operation: 'hold',
+					});
+					break;
+				case 2:
+					_logs.push({
+						frame,
+						operation: 'surrender',
+					});
+					break;
+			}
+		}
+
+		return _logs;
+	}
+
+	public dispose() {
+		Matter.World.clear(this.engine.world, false);
+		Matter.Engine.clear(this.engine);
+	}
+}
diff --git a/packages/misskey-bubble-game/src/index.ts b/packages/misskey-bubble-game/src/index.ts
new file mode 100644
index 0000000000..6df708763f
--- /dev/null
+++ b/packages/misskey-bubble-game/src/index.ts
@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { DropAndFusionGame, Mono } from './game.js';
+
+export {
+	DropAndFusionGame, Mono,
+};
diff --git a/packages/frontend/src/scripts/drop-and-fusion-engine.ts b/packages/misskey-bubble-game/src/monos.ts
index aef2613065..d205c3cba5 100644
--- a/packages/frontend/src/scripts/drop-and-fusion-engine.ts
+++ b/packages/misskey-bubble-game/src/monos.ts
@@ -3,36 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { EventEmitter } from 'eventemitter3';
-import * as Matter from 'matter-js';
-import seedrandom from 'seedrandom';
-
-export type Mono = {
-	id: string;
-	level: number;
-	sizeX: number;
-	sizeY: number;
-	shape: 'circle' | 'rectangle' | 'custom';
-	vertices?: Matter.Vector[][];
-	verticesSize?: number;
-	score: number;
-	dropCandidate: boolean;
-};
-
-type Log = {
-	frame: number;
-	operation: 'drop';
-	x: number;
-} | {
-	frame: number;
-	operation: 'hold';
-} | {
-	frame: number;
-	operation: 'surrender';
-};
+import { Mono } from './game.js';
 
 const NORMAL_BASE_SIZE = 32;
-const NORAML_MONOS: Mono[] = [{
+export const NORAML_MONOS: Mono[] = [{
 	id: '9377076d-c980-4d83-bdaf-175bc58275b7',
 	level: 10,
 	sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
@@ -116,7 +90,7 @@ const NORAML_MONOS: Mono[] = [{
 
 const YEN_BASE_SIZE = 32;
 const YEN_SATSU_BASE_SIZE = 70;
-const YEN_MONOS: Mono[] = [{
+export const YEN_MONOS: Mono[] = [{
 	id: '880f9bd9-802f-4135-a7e1-fd0e0331f726',
 	level: 10,
 	sizeX: (YEN_SATSU_BASE_SIZE * 2) * 1.25 * 1.25 * 1.25,
@@ -199,7 +173,7 @@ const YEN_MONOS: Mono[] = [{
 }];
 
 const SQUARE_BASE_SIZE = 28;
-const SQUARE_MONOS: Mono[] = [{
+export const SQUARE_MONOS: Mono[] = [{
 	id: 'f75fd0ba-d3d4-40a4-9712-b470e45b0525',
 	level: 10,
 	sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
@@ -282,7 +256,7 @@ const SQUARE_MONOS: Mono[] = [{
 }];
 
 const SWEETS_BASE_SIZE = 40;
-const SWEETS_MONOS: Mono[] = [{
+export const SWEETS_MONOS: Mono[] = [{
 	id: '77f724c0-88be-4aeb-8e1a-a00ed18e3844',
 	level: 10,
 	sizeX: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
@@ -976,465 +950,3 @@ const SWEETS_MONOS: Mono[] = [{
 	score: 30,
 	dropCandidate: true,
 }];
-
-export class DropAndFusionGame extends EventEmitter<{
-	changeScore: (newScore: number) => void;
-	changeCombo: (newCombo: number) => void;
-	changeStock: (newStock: { id: string; mono: Mono }[]) => void;
-	changeHolding: (newHolding: { id: string; mono: Mono } | null) => void;
-	dropped: (x: number) => void;
-	fusioned: (x: number, y: number, nextMono: Mono | null, scoreDelta: number) => void;
-	collision: (energy: number, bodyA: Matter.Body, bodyB: Matter.Body) => void;
-	monoAdded: (mono: Mono) => void;
-	gameOver: () => void;
-}> {
-	private PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
-	private COMBO_INTERVAL = 60; // frame
-	public readonly GAME_VERSION = 3;
-	public readonly GAME_WIDTH = 450;
-	public readonly GAME_HEIGHT = 600;
-	public readonly DROP_COOLTIME = 30; // frame
-	public readonly PLAYAREA_MARGIN = 25;
-	private STOCK_MAX = 4;
-	private TICK_DELTA = 1000 / 60; // 60fps
-
-	public frame = 0;
-	public engine: Matter.Engine;
-	private tickCallbackQueue: { frame: number; callback: () => void; }[] = [];
-	private overflowCollider: Matter.Body;
-	private isGameOver = false;
-	private gameMode: 'normal' | 'yen' | 'square' | 'sweets' | 'space';
-	private rng: () => number;
-	private logs: Log[] = [];
-
-	/**
-	 * フィールドに出ていて、かつ合体の対象となるアイテム
-	 */
-	private fusionReadyBodyIds: Matter.Body['id'][] = [];
-
-	private gameOverReadyBodyIds: Matter.Body['id'][] = [];
-
-	/**
-	 * fusion予約アイテムのペア
-	 * TODO: これらのモノは光らせるなどの演出をすると視覚的に楽しそう
-	 */
-	private fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
-
-	private latestDroppedAt = 0; // frame
-	private latestFusionedAt = 0; // frame
-	private stock: { id: string; mono: Mono }[] = [];
-	private holding: { id: string; mono: Mono } | null = null;
-
-	public get monoDefinitions() {
-		switch (this.gameMode) {
-			case 'normal': return NORAML_MONOS;
-			case 'yen': return YEN_MONOS;
-			case 'square': return SQUARE_MONOS;
-			case 'sweets': return SWEETS_MONOS;
-			case 'space': return NORAML_MONOS;
-		}
-	}
-
-	private _combo = 0;
-	private get combo() {
-		return this._combo;
-	}
-	private set combo(value: number) {
-		this._combo = value;
-		this.emit('changeCombo', value);
-	}
-
-	private _score = 0;
-	private get score() {
-		return this._score;
-	}
-	private set score(value: number) {
-		this._score = value;
-		this.emit('changeScore', value);
-	}
-
-	private getMonoRenderOptions: null | ((mono: Mono) => Partial<Matter.IBodyRenderOptions>) = null;
-
-	public replayPlaybackRate = 1;
-
-	constructor(env: {
-		seed: string;
-		gameMode: DropAndFusionGame['gameMode'];
-		getMonoRenderOptions?: (mono: Mono) => Partial<Matter.IBodyRenderOptions>;
-	}) {
-		super();
-
-		//#region BIND
-		this.tick = this.tick.bind(this);
-		//#endregion
-
-		this.gameMode = env.gameMode;
-		this.getMonoRenderOptions = env.getMonoRenderOptions ?? null;
-		this.rng = seedrandom(env.seed);
-
-		// sweetsモードは重いため
-		const physicsQualityFactor = this.gameMode === 'sweets' ? 4 : this.PHYSICS_QUALITY_FACTOR;
-		this.engine = Matter.Engine.create({
-			constraintIterations: 2 * physicsQualityFactor,
-			positionIterations: 6 * physicsQualityFactor,
-			velocityIterations: 4 * physicsQualityFactor,
-			gravity: {
-				x: 0,
-				y: this.gameMode === 'space' ? 0.0125 : 1,
-			},
-			timing: {
-				timeScale: 2,
-			},
-			enableSleeping: false,
-		});
-
-		this.engine.world.bodies = [];
-
-		//#region walls
-		const WALL_OPTIONS: Matter.IChamferableBodyDefinition = {
-			label: '_wall_',
-			isStatic: true,
-			friction: 0.7,
-			slop: this.gameMode === 'space' ? 0.01 : 0.7,
-			render: {
-				strokeStyle: 'transparent',
-				fillStyle: 'transparent',
-			},
-		};
-
-		const thickness = 100;
-		Matter.Composite.add(this.engine.world, [
-			Matter.Bodies.rectangle(this.GAME_WIDTH / 2, this.GAME_HEIGHT + (thickness / 2) - this.PLAYAREA_MARGIN, this.GAME_WIDTH, thickness, WALL_OPTIONS),
-			Matter.Bodies.rectangle(this.GAME_WIDTH + (thickness / 2) - this.PLAYAREA_MARGIN, this.GAME_HEIGHT / 2, thickness, this.GAME_HEIGHT, WALL_OPTIONS),
-			Matter.Bodies.rectangle(-((thickness / 2) - this.PLAYAREA_MARGIN), this.GAME_HEIGHT / 2, thickness, this.GAME_HEIGHT, WALL_OPTIONS),
-		]);
-		//#endregion
-
-		this.overflowCollider = Matter.Bodies.rectangle(this.GAME_WIDTH / 2, 0, this.GAME_WIDTH, 200, {
-			label: '_overflow_',
-			isStatic: true,
-			isSensor: true,
-			render: {
-				strokeStyle: 'transparent',
-				fillStyle: 'transparent',
-			},
-		});
-		Matter.Composite.add(this.engine.world, this.overflowCollider);
-	}
-
-	public msToFrame(ms: number) {
-		return Math.round(ms / this.TICK_DELTA);
-	}
-
-	public frameToMs(frame: number) {
-		return frame * this.TICK_DELTA;
-	}
-
-	private createBody(mono: Mono, x: number, y: number) {
-		const options: Matter.IBodyDefinition = {
-			label: mono.id,
-			density: this.gameMode === 'space' ? 0.01 : ((mono.sizeX * mono.sizeY) / 10000),
-			restitution: this.gameMode === 'space' ? 0.5 : 0.2,
-			frictionAir: this.gameMode === 'space' ? 0 : 0.01,
-			friction: this.gameMode === 'space' ? 0.5 : 0.7,
-			frictionStatic: this.gameMode === 'space' ? 0 : 5,
-			slop: this.gameMode === 'space' ? 0.01 : 0.7,
-			//mass: 0,
-			render: this.getMonoRenderOptions ? this.getMonoRenderOptions(mono) : undefined,
-		};
-		if (mono.shape === 'circle') {
-			return Matter.Bodies.circle(x, y, mono.sizeX / 2, options);
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		} else if (mono.shape === 'rectangle') {
-			return Matter.Bodies.rectangle(x, y, mono.sizeX, mono.sizeY, options);
-		} else if (mono.shape === 'custom') {
-			return Matter.Bodies.fromVertices(x, y, mono.vertices!.map(i => i.map(j => ({
-				x: (j.x / mono.verticesSize!) * mono.sizeX,
-				y: (j.y / mono.verticesSize!) * mono.sizeY,
-			}))), options);
-		} else {
-			throw new Error('unrecognized shape');
-		}
-	}
-
-	private fusion(bodyA: Matter.Body, bodyB: Matter.Body) {
-		if (this.latestFusionedAt > this.frame - this.COMBO_INTERVAL) {
-			this.combo++;
-		} else {
-			this.combo = 1;
-		}
-		this.latestFusionedAt = this.frame;
-
-		const newX = (bodyA.position.x + bodyB.position.x) / 2;
-		const newY = (bodyA.position.y + bodyB.position.y) / 2;
-
-		this.fusionReadyBodyIds = this.fusionReadyBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
-		this.gameOverReadyBodyIds = this.gameOverReadyBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
-		Matter.Composite.remove(this.engine.world, [bodyA, bodyB]);
-
-		const currentMono = this.monoDefinitions.find(y => y.id === bodyA.label)!;
-		const nextMono = this.monoDefinitions.find(x => x.level === currentMono.level + 1) ?? null;
-
-		if (nextMono) {
-			const body = this.createBody(nextMono, newX, newY);
-			Matter.Composite.add(this.engine.world, body);
-
-			// 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする
-			this.tickCallbackQueue.push({
-				frame: this.frame + this.msToFrame(100),
-				callback: () => {
-					this.fusionReadyBodyIds.push(body.id);
-				},
-			});
-
-			this.emit('monoAdded', nextMono);
-		}
-
-		const hasComboBonus = this.gameMode !== 'yen' && this.gameMode !== 'sweets';
-		const comboBonus = hasComboBonus ? 1 + ((this.combo - 1) / 5) : 1;
-		const additionalScore = Math.round(currentMono.score * comboBonus);
-		this.score += additionalScore;
-
-		this.emit('fusioned', newX, newY, nextMono, additionalScore);
-	}
-
-	private onCollision(event: Matter.IEventCollision<Matter.Engine>) {
-		for (const pairs of event.pairs) {
-			const { bodyA, bodyB } = pairs;
-
-			const shouldFusion = (bodyA.label === bodyB.label) &&
-				!this.fusionReservedPairs.some(x =>
-					x.bodyA.id === bodyA.id ||
-					x.bodyA.id === bodyB.id ||
-					x.bodyB.id === bodyA.id ||
-					x.bodyB.id === bodyB.id);
-
-			if (shouldFusion) {
-				if (this.fusionReadyBodyIds.includes(bodyA.id) && this.fusionReadyBodyIds.includes(bodyB.id)) {
-					this.fusion(bodyA, bodyB);
-				} else {
-					this.fusionReservedPairs.push({ bodyA, bodyB });
-					this.tickCallbackQueue.push({
-						frame: this.frame + this.msToFrame(100),
-						callback: () => {
-							this.fusionReservedPairs = this.fusionReservedPairs.filter(x => x.bodyA.id !== bodyA.id && x.bodyB.id !== bodyB.id);
-							this.fusion(bodyA, bodyB);
-						},
-					});
-				}
-			} else {
-				const energy = pairs.collision.depth;
-
-				if (bodyA.label === '_overflow_' || bodyB.label === '_overflow_') continue;
-
-				if (bodyA.label !== '_wall_' && bodyB.label !== '_wall_') {
-					if (!this.gameOverReadyBodyIds.includes(bodyA.id)) this.gameOverReadyBodyIds.push(bodyA.id);
-					if (!this.gameOverReadyBodyIds.includes(bodyB.id)) this.gameOverReadyBodyIds.push(bodyB.id);
-				}
-
-				this.emit('collision', energy, bodyA, bodyB);
-			}
-		}
-	}
-
-	private onCollisionActive(event: Matter.IEventCollision<Matter.Engine>) {
-		for (const pairs of event.pairs) {
-			const { bodyA, bodyB } = pairs;
-
-			// ハコからあふれたかどうかの判定
-			if (bodyA.id === this.overflowCollider.id || bodyB.id === this.overflowCollider.id) {
-				if (this.gameOverReadyBodyIds.includes(bodyA.id) || this.gameOverReadyBodyIds.includes(bodyB.id)) {
-					this.gameOver();
-					break;
-				}
-				continue;
-			}
-		}
-	}
-
-	public surrender() {
-		this.logs.push({
-			frame: this.frame,
-			operation: 'surrender',
-		});
-
-		this.gameOver();
-	}
-
-	private gameOver() {
-		this.isGameOver = true;
-		this.emit('gameOver');
-	}
-
-	public start() {
-		for (let i = 0; i < this.STOCK_MAX; i++) {
-			this.stock.push({
-				id: this.rng().toString(),
-				mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(this.rng() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
-			});
-		}
-		this.emit('changeStock', this.stock);
-
-		Matter.Events.on(this.engine, 'collisionStart', this.onCollision.bind(this));
-		Matter.Events.on(this.engine, 'collisionActive', this.onCollisionActive.bind(this));
-	}
-
-	public getLogs() {
-		return this.logs;
-	}
-
-	public tick() {
-		this.frame++;
-
-		if (this.latestFusionedAt < this.frame - this.COMBO_INTERVAL) {
-			this.combo = 0;
-		}
-
-		this.tickCallbackQueue = this.tickCallbackQueue.filter(x => {
-			if (x.frame === this.frame) {
-				x.callback();
-				return false;
-			} else {
-				return true;
-			}
-		});
-
-		Matter.Engine.update(this.engine, this.TICK_DELTA);
-
-		const hasNextTick = !this.isGameOver;
-
-		return hasNextTick;
-	}
-
-	public getActiveMonos() {
-		return this.engine.world.bodies.map(x => this.monoDefinitions.find((mono) => mono.id === x.label)!).filter(x => x !== undefined);
-	}
-
-	public drop(_x: number) {
-		if (this.isGameOver) return;
-		if (this.frame - this.latestDroppedAt < this.DROP_COOLTIME) return;
-
-		const head = this.stock.shift()!;
-		this.stock.push({
-			id: this.rng().toString(),
-			mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(this.rng() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
-		});
-		this.emit('changeStock', this.stock);
-
-		const inputX = Math.round(_x);
-		const x = Math.min(this.GAME_WIDTH - this.PLAYAREA_MARGIN - (head.mono.sizeX / 2), Math.max(this.PLAYAREA_MARGIN + (head.mono.sizeX / 2), inputX));
-		const body = this.createBody(head.mono, x, 50 + head.mono.sizeY / 2);
-		this.logs.push({
-			frame: this.frame,
-			operation: 'drop',
-			x: inputX,
-		});
-
-		// add force
-		if (this.gameMode === 'space') {
-			Matter.Body.applyForce(body, body.position, {
-				x: 0,
-				y: (Math.PI * head.mono.sizeX * head.mono.sizeY) / 65536,
-			});
-		}
-
-		Matter.Composite.add(this.engine.world, body);
-
-		this.fusionReadyBodyIds.push(body.id);
-		this.latestDroppedAt = this.frame;
-
-		this.emit('dropped', x);
-		this.emit('monoAdded', head.mono);
-	}
-
-	public hold() {
-		if (this.isGameOver) return;
-
-		this.logs.push({
-			frame: this.frame,
-			operation: 'hold',
-		});
-
-		if (this.holding) {
-			const head = this.stock.shift()!;
-			this.stock.unshift(this.holding);
-			this.holding = head;
-			this.emit('changeHolding', this.holding);
-			this.emit('changeStock', this.stock);
-		} else {
-			const head = this.stock.shift()!;
-			this.holding = head;
-			this.stock.push({
-				id: this.rng().toString(),
-				mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(this.rng() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
-			});
-			this.emit('changeHolding', this.holding);
-			this.emit('changeStock', this.stock);
-		}
-	}
-
-	public static serializeLogs(logs: Log[]) {
-		const _logs: number[][] = [];
-
-		for (let i = 0; i < logs.length; i++) {
-			const log = logs[i];
-			const frameDelta = i === 0 ? log.frame : log.frame - logs[i - 1].frame;
-
-			switch (log.operation) {
-				case 'drop':
-					_logs.push([frameDelta, 0, log.x]);
-					break;
-				case 'hold':
-					_logs.push([frameDelta, 1]);
-					break;
-				case 'surrender':
-					_logs.push([frameDelta, 2]);
-					break;
-			}
-		}
-
-		return _logs;
-	}
-
-	public static deserializeLogs(logs: number[][]) {
-		const _logs: Log[] = [];
-
-		let frame = 0;
-
-		for (const log of logs) {
-			const frameDelta = log[0];
-			frame += frameDelta;
-
-			const operation = log[1];
-
-			switch (operation) {
-				case 0:
-					_logs.push({
-						frame,
-						operation: 'drop',
-						x: log[2],
-					});
-					break;
-				case 1:
-					_logs.push({
-						frame,
-						operation: 'hold',
-					});
-					break;
-				case 2:
-					_logs.push({
-						frame,
-						operation: 'surrender',
-					});
-					break;
-			}
-		}
-
-		return _logs;
-	}
-
-	public dispose() {
-		Matter.World.clear(this.engine.world, false);
-		Matter.Engine.clear(this.engine);
-	}
-}
diff --git a/packages/misskey-bubble-game/tsconfig.json b/packages/misskey-bubble-game/tsconfig.json
new file mode 100644
index 0000000000..f56b65e868
--- /dev/null
+++ b/packages/misskey-bubble-game/tsconfig.json
@@ -0,0 +1,33 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "nodenext",
+		"moduleResolution": "nodenext",
+		"declaration": true,
+		"declarationMap": true,
+		"sourceMap": true,
+		"outDir": "./built/",
+		"removeComments": true,
+		"strict": true,
+		"strictFunctionTypes": true,
+		"strictNullChecks": true,
+		"experimentalDecorators": true,
+		"noImplicitReturns": true,
+		"esModuleInterop": true,
+		"typeRoots": [
+			"./node_modules/@types"
+		],
+		"lib": [
+			"esnext",
+			"dom"
+		]
+	},
+	"include": [
+		"src/**/*"
+	],
+	"exclude": [
+		"node_modules",
+		"test/**/*"
+	]
+}
diff --git a/packages/misskey-reversi/.eslintignore b/packages/misskey-reversi/.eslintignore
new file mode 100644
index 0000000000..f22128f047
--- /dev/null
+++ b/packages/misskey-reversi/.eslintignore
@@ -0,0 +1,7 @@
+node_modules
+/built
+/coverage
+/.eslintrc.js
+/jest.config.ts
+/test
+/test-d
diff --git a/packages/misskey-reversi/.eslintrc.cjs b/packages/misskey-reversi/.eslintrc.cjs
new file mode 100644
index 0000000000..e2e31e9e33
--- /dev/null
+++ b/packages/misskey-reversi/.eslintrc.cjs
@@ -0,0 +1,9 @@
+module.exports = {
+	parserOptions: {
+		tsconfigRootDir: __dirname,
+		project: ['./tsconfig.json'],
+	},
+	extends: [
+		'../shared/.eslintrc.js',
+	],
+};
diff --git a/packages/misskey-reversi/src/index.ts b/packages/misskey-reversi/src/index.ts
index 20ed36f208..28964413b7 100644
--- a/packages/misskey-reversi/src/index.ts
+++ b/packages/misskey-reversi/src/index.ts
@@ -1,3 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
 import { Game } from './game.js';
 
 export {
diff --git a/packages/misskey-reversi/src/maps.ts b/packages/misskey-reversi/src/maps.ts
index 85cf1a0485..b47a996c7c 100644
--- a/packages/misskey-reversi/src/maps.ts
+++ b/packages/misskey-reversi/src/maps.ts
@@ -1,3 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
 /**
  * 組み込みマップ定義
  *