Merge branch 'develop' into prohibit-posting-kyomu-note

locales/index.d.ts

@@ -1199,6 +1199,8 @@ export interface Locale {
     "showReplay": string;
     "replay": string;
     "replaying": string;
+    "ranking": string;
+    "lastNDays": string;
     "_bubbleGame": {
         "howToPlay": string;
         "_howToPlay": {

locales/ja-JP.yml

@@ -1196,6 +1196,8 @@ soundWillBePlayed: "サウンドが再生されます"
 showReplay: "リプレイを見る"
 replay: "リプレイ"
 replaying: "リプレイ中"
+ranking: "ランキング"
+lastNDays: "直近{n}日"
 
 _bubbleGame:
   howToPlay: "遊び方"

packages/backend/migration/1704959805077-bubble-game-record.js

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class BubbleGameRecord1704959805077 {
+    name = 'BubbleGameRecord1704959805077'
+
+    async up(queryRunner) {
+        await queryRunner.query(`CREATE TABLE "bubble_game_record" ("id" character varying(32) NOT NULL, "userId" character varying(32) NOT NULL, "seededAt" TIMESTAMP WITH TIME ZONE NOT NULL, "seed" character varying(1024) NOT NULL, "gameVersion" integer NOT NULL, "gameMode" character varying(128) NOT NULL, "score" integer NOT NULL, "logs" jsonb NOT NULL DEFAULT '[]', "isVerified" boolean NOT NULL DEFAULT false, CONSTRAINT "PK_a75395fe404b392e2893b50d7ea" PRIMARY KEY ("id"))`);
+        await queryRunner.query(`CREATE INDEX "IDX_75276757070d21fdfaf4c05290" ON "bubble_game_record" ("userId") `);
+        await queryRunner.query(`CREATE INDEX "IDX_4ae7053179014915d1432d3f40" ON "bubble_game_record" ("seededAt") `);
+        await queryRunner.query(`CREATE INDEX "IDX_26d4ee490b5a487142d35466ee" ON "bubble_game_record" ("score") `);
+        await queryRunner.query(`ALTER TABLE "bubble_game_record" ADD CONSTRAINT "FK_75276757070d21fdfaf4c052909" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "bubble_game_record" DROP CONSTRAINT "FK_75276757070d21fdfaf4c052909"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_26d4ee490b5a487142d35466ee"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_4ae7053179014915d1432d3f40"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_75276757070d21fdfaf4c05290"`);
+        await queryRunner.query(`DROP TABLE "bubble_game_record"`);
+    }
+}

packages/backend/src/di-symbols.ts

@@ -78,5 +78,6 @@ export const DI = {
 	flashsRepository: Symbol('flashsRepository'),
 	flashLikesRepository: Symbol('flashLikesRepository'),
 	userMemosRepository: Symbol('userMemosRepository'),
+	bubbleGameRecordsRepository: Symbol('bubbleGameRecordsRepository'),
 	//#endregion
 };

packages/backend/src/models/BubbleGameRecord.ts

@@ -0,0 +1,57 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from './util/id.js';
+import { MiUser } from './User.js';
+
+@Entity('bubble_game_record')
+export class MiBubbleGameRecord {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column({
+		...id(),
+	})
+	public userId: MiUser['id'];
+
+	@ManyToOne(type => MiUser, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: MiUser | null;
+
+	@Index()
+	@Column('timestamp with time zone')
+	public seededAt: Date;
+
+	@Column('varchar', {
+		length: 1024,
+	})
+	public seed: string;
+
+	@Column('integer')
+	public gameVersion: number;
+
+	@Column('varchar', {
+		length: 128,
+	})
+	public gameMode: string;
+
+	@Index()
+	@Column('integer')
+	public score: number;
+
+	@Column('jsonb', {
+		default: [],
+	})
+	public logs: any[];
+
+	@Column('boolean', {
+		default: false,
+	})
+	public isVerified: boolean;
+}

packages/backend/src/models/RepositoryModule.ts

@@ -5,7 +5,7 @@
 
 import { Module } from '@nestjs/common';
 import { DI } from '@/di-symbols.js';
-import { MiAbuseUserReport, MiAccessToken, MiAd, MiAnnouncement, MiAnnouncementRead, MiAntenna, MiApp, MiAuthSession, MiAvatarDecoration, MiBlocking, MiChannel, MiChannelFavorite, MiChannelFollowing, MiClip, MiClipFavorite, MiClipNote, MiDriveFile, MiDriveFolder, MiEmoji, MiFlash, MiFlashLike, MiFollowRequest, MiFollowing, MiGalleryLike, MiGalleryPost, MiHashtag, MiInstance, MiMeta, MiModerationLog, MiMuting, MiNote, MiNoteFavorite, MiNoteReaction, MiNoteThreadMuting, MiNoteUnread, MiPage, MiPageLike, MiPasswordResetRequest, MiPoll, MiPollVote, MiPromoNote, MiPromoRead, MiRegistrationTicket, MiRegistryItem, MiRelay, MiRenoteMuting, MiRetentionAggregation, MiRole, MiRoleAssignment, MiSignin, MiSwSubscription, MiUsedUsername, MiUser, MiUserIp, MiUserKeypair, MiUserList, MiUserListFavorite, MiUserListMembership, MiUserMemo, MiUserNotePining, MiUserPending, MiUserProfile, MiUserPublickey, MiUserSecurityKey, MiWebhook } from './_.js';
+import { MiAbuseUserReport, MiAccessToken, MiAd, MiAnnouncement, MiAnnouncementRead, MiAntenna, MiApp, MiAuthSession, MiAvatarDecoration, MiBlocking, MiChannel, MiChannelFavorite, MiChannelFollowing, MiClip, MiClipFavorite, MiClipNote, MiDriveFile, MiDriveFolder, MiEmoji, MiFlash, MiFlashLike, MiFollowRequest, MiFollowing, MiGalleryLike, MiGalleryPost, MiHashtag, MiInstance, MiMeta, MiModerationLog, MiMuting, MiNote, MiNoteFavorite, MiNoteReaction, MiNoteThreadMuting, MiNoteUnread, MiPage, MiPageLike, MiPasswordResetRequest, MiPoll, MiPollVote, MiPromoNote, MiPromoRead, MiRegistrationTicket, MiRegistryItem, MiRelay, MiRenoteMuting, MiRetentionAggregation, MiRole, MiRoleAssignment, MiSignin, MiSwSubscription, MiUsedUsername, MiUser, MiUserIp, MiUserKeypair, MiUserList, MiUserListFavorite, MiUserListMembership, MiUserMemo, MiUserNotePining, MiUserPending, MiUserProfile, MiUserPublickey, MiUserSecurityKey, MiWebhook, MiBubbleGameRecord } from './_.js';
 import type { DataSource } from 'typeorm';
 import type { Provider } from '@nestjs/common';
 
@@ -399,6 +399,12 @@ const $userMemosRepository: Provider = {
 	inject: [DI.db],
 };
 
+export const $bubbleGameRecordsRepository: Provider = {
+	provide: DI.bubbleGameRecordsRepository,
+	useFactory: (db: DataSource) => db.getRepository(MiBubbleGameRecord),
+	inject: [DI.db],
+};
+
 @Module({
 	imports: [
 	],
@@ -468,6 +474,7 @@ const $userMemosRepository: Provider = {
 		$flashsRepository,
 		$flashLikesRepository,
 		$userMemosRepository,
+		$bubbleGameRecordsRepository,
 	],
 	exports: [
 		$usersRepository,
@@ -535,6 +542,7 @@ const $userMemosRepository: Provider = {
 		$flashsRepository,
 		$flashLikesRepository,
 		$userMemosRepository,
+		$bubbleGameRecordsRepository,
 	],
 })
 export class RepositoryModule {}

packages/backend/src/models/_.ts

@@ -68,6 +68,7 @@ import { MiRoleAssignment } from '@/models/RoleAssignment.js';
 import { MiFlash } from '@/models/Flash.js';
 import { MiFlashLike } from '@/models/FlashLike.js';
 import { MiUserListFavorite } from '@/models/UserListFavorite.js';
+import { MiBubbleGameRecord } from '@/models/BubbleGameRecord.js';
 import type { Repository } from 'typeorm';
 
 export {
@@ -136,6 +137,7 @@ export {
 	MiFlash,
 	MiFlashLike,
 	MiUserMemo,
+	MiBubbleGameRecord,
 };
 
 export type AbuseUserReportsRepository = Repository<MiAbuseUserReport>;
@@ -203,3 +205,4 @@ export type RoleAssignmentsRepository = Repository<MiRoleAssignment>;
 export type FlashsRepository = Repository<MiFlash>;
 export type FlashLikesRepository = Repository<MiFlashLike>;
 export type UserMemoRepository = Repository<MiUserMemo>;
+export type BubbleGameRecordsRepository = Repository<MiBubbleGameRecord>;

packages/backend/src/postgres.ts

@@ -76,6 +76,7 @@ import { MiRoleAssignment } from '@/models/RoleAssignment.js';
 import { MiFlash } from '@/models/Flash.js';
 import { MiFlashLike } from '@/models/FlashLike.js';
 import { MiUserMemo } from '@/models/UserMemo.js';
+import { MiBubbleGameRecord } from '@/models/BubbleGameRecord.js';
 
 import { Config } from '@/config.js';
 import MisskeyLogger from '@/logger.js';
@@ -190,6 +191,7 @@ export const entities = [
 	MiFlash,
 	MiFlashLike,
 	MiUserMemo,
+	MiBubbleGameRecord,
 	...charts,
 ];
 

packages/backend/src/server/api/EndpointsModule.ts

@@ -364,6 +364,8 @@ import * as ep___users_updateMemo from './endpoints/users/update-memo.js';
 import * as ep___fetchRss from './endpoints/fetch-rss.js';
 import * as ep___fetchExternalResources from './endpoints/fetch-external-resources.js';
 import * as ep___retention from './endpoints/retention.js';
+import * as ep___bubbleGame_register from './endpoints/bubble-game/register.js';
+import * as ep___bubbleGame_ranking from './endpoints/bubble-game/ranking.js';
 import { GetterService } from './GetterService.js';
 import { ApiLoggerService } from './ApiLoggerService.js';
 import type { Provider } from '@nestjs/common';
@@ -726,6 +728,8 @@ const $users_updateMemo: Provider = { provide: 'ep:users/update-memo', useClass:
 const $fetchRss: Provider = { provide: 'ep:fetch-rss', useClass: ep___fetchRss.default };
 const $fetchExternalResources: Provider = { provide: 'ep:fetch-external-resources', useClass: ep___fetchExternalResources.default };
 const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention.default };
+const $bubbleGame_register: Provider = { provide: 'ep:bubble-game/register', useClass: ep___bubbleGame_register.default };
+const $bubbleGame_ranking: Provider = { provide: 'ep:bubble-game/ranking', useClass: ep___bubbleGame_ranking.default };
 
 @Module({
 	imports: [
@@ -1092,6 +1096,8 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$fetchRss,
 		$fetchExternalResources,
 		$retention,
+		$bubbleGame_register,
+		$bubbleGame_ranking,
 	],
 	exports: [
 		$admin_meta,
@@ -1449,6 +1455,8 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$fetchRss,
 		$fetchExternalResources,
 		$retention,
+		$bubbleGame_register,
+		$bubbleGame_ranking,
 	],
 })
 export class EndpointsModule {}

packages/backend/src/server/api/endpoints.ts

@@ -365,6 +365,8 @@ import * as ep___users_updateMemo from './endpoints/users/update-memo.js';
 import * as ep___fetchRss from './endpoints/fetch-rss.js';
 import * as ep___fetchExternalResources from './endpoints/fetch-external-resources.js';
 import * as ep___retention from './endpoints/retention.js';
+import * as ep___bubbleGame_register from './endpoints/bubble-game/register.js';
+import * as ep___bubbleGame_ranking from './endpoints/bubble-game/ranking.js';
 
 const eps = [
 	['admin/meta', ep___admin_meta],
@@ -725,6 +727,8 @@ const eps = [
 	['fetch-rss', ep___fetchRss],
 	['fetch-external-resources', ep___fetchExternalResources],
 	['retention', ep___retention],
+	['bubble-game/register', ep___bubbleGame_register],
+	['bubble-game/ranking', ep___bubbleGame_ranking],
 ];
 
 interface IEndpointMetaBase {

packages/backend/src/server/api/endpoints/bubble-game/ranking.ts

@@ -0,0 +1,73 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import { MoreThan } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import type { BubbleGameRecordsRepository } from '@/models/_.js';
+import { DI } from '@/di-symbols.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+
+export const meta = {
+	allowGet: true,
+	cacheSec: 60,
+
+	errors: {
+	},
+
+	res: {
+		type: 'array',
+		optional: false, nullable: false,
+		items: {
+			type: 'object',
+			optional: false, nullable: false,
+			properties: {
+				id: { type: 'string', format: 'misskey:id' },
+				score: { type: 'integer' },
+				user: { ref: 'UserLite' },
+			},
+		},
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		gameMode: { type: 'string' },
+	},
+	required: ['gameMode'],
+} as const;
+
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
+	constructor(
+		@Inject(DI.bubbleGameRecordsRepository)
+		private bubbleGameRecordsRepository: BubbleGameRecordsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+		super(meta, paramDef, async (ps) => {
+			const records = await this.bubbleGameRecordsRepository.find({
+				where: {
+					gameMode: ps.gameMode,
+					seededAt: MoreThan(new Date(Date.now() - 1000 * 60 * 60 * 24 * 7)),
+				},
+				order: {
+					score: 'DESC',
+				},
+				take: 10,
+				relations: ['user'],
+			});
+
+			const users = await this.userEntityService.packMany(records.map(r => r.user!), null, { detail: false });
+
+			return records.map(r => ({
+				id: r.id,
+				score: r.score,
+				user: users.find(u => u.id === r.user!.id),
+			}));
+		});
+	}
+}

packages/backend/src/server/api/endpoints/bubble-game/register.ts

@@ -0,0 +1,84 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { IdService } from '@/core/IdService.js';
+import type { BubbleGameRecordsRepository } from '@/models/_.js';
+import { DI } from '@/di-symbols.js';
+import { ApiError } from '../../error.js';
+
+export const meta = {
+	requireCredential: true,
+
+	kind: 'write:account',
+
+	limit: {
+		duration: ms('1hour'),
+		max: 120,
+		minInterval: ms('30sec'),
+	},
+
+	errors: {
+		invalidSeed: {
+			message: 'Provided seed is invalid.',
+			code: 'INVALID_SEED',
+			id: 'eb627bc7-574b-4a52-a860-3c3eae772b88',
+		},
+	},
+
+	res: {
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		score: { type: 'integer', minimum: 0 },
+		seed: { type: 'string', minLength: 1, maxLength: 1024 },
+		logs: { type: 'array' },
+		gameMode: { type: 'string' },
+		gameVersion: { type: 'integer' },
+	},
+	required: ['score', 'seed', 'logs', 'gameMode', 'gameVersion'],
+} as const;
+
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
+	constructor(
+		@Inject(DI.bubbleGameRecordsRepository)
+		private bubbleGameRecordsRepository: BubbleGameRecordsRepository,
+
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const seedDate = new Date(parseInt(ps.seed, 10));
+			const now = new Date();
+
+			// シードが未来なのは通常のプレイではありえないので弾く
+			if (seedDate.getTime() > now.getTime()) {
+				throw new ApiError(meta.errors.invalidSeed);
+			}
+
+			// シードが古すぎる(1時間以上前)のも弾く
+			if (seedDate.getTime() < now.getTime() - 1000 * 60 * 60) {
+				throw new ApiError(meta.errors.invalidSeed);
+			}
+
+			await this.bubbleGameRecordsRepository.insert({
+				id: this.idService.gen(now.getTime()),
+				seed: ps.seed,
+				seededAt: seedDate,
+				userId: me.id,
+				score: ps.score,
+				logs: ps.logs,
+				gameMode: ps.gameMode,
+				gameVersion: ps.gameVersion,
+				isVerified: false,
+			});
+		});
+	}
+}

packages/frontend/src/components/MkHeatmap.vue

@@ -15,6 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, nextTick, watch, shallowRef, ref } from 'vue';
 import { Chart } from 'chart.js';
+import * as Misskey from 'misskey-js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
@@ -23,9 +24,16 @@ import { initChart } from '@/scripts/init-chart.js';
 
 initChart();
 
-const props = defineProps<{
+export type HeatmapSource = 'active-users' | 'notes' | 'ap-requests-inbox-received' | 'ap-requests-deliver-succeeded' | 'ap-requests-deliver-failed';
-	src: string;
+
-}>();
+const props = withDefaults(defineProps<{
+	src: HeatmapSource;
+	user?: Misskey.entities.User;
+	label?: string;
+}>(), {
+	user: undefined,
+	label: '',
+});
 
 const rootEl = shallowRef<HTMLDivElement>(null);
 const chartEl = shallowRef<HTMLCanvasElement>(null);
@@ -75,8 +83,13 @@ async function renderChart() {
 		const raw = await misskeyApi('charts/active-users', { limit: chartLimit, span: 'day' });
 		values = raw.readWrite;
 	} else if (props.src === 'notes') {
+		if (props.user) {
+			const raw = await misskeyApi('charts/user/notes', { userId: props.user.id, limit: chartLimit, span: 'day' });
+			values = raw.inc;
+		} else {
 			const raw = await misskeyApi('charts/notes', { limit: chartLimit, span: 'day' });
 			values = raw.local.inc;
+		}
 	} else if (props.src === 'ap-requests-inbox-received') {
 		const raw = await misskeyApi('charts/ap-request', { limit: chartLimit, span: 'day' });
 		values = raw.inboxReceived;
@@ -105,7 +118,7 @@ async function renderChart() {
 		type: 'matrix',
 		data: {
 			datasets: [{
-				label: 'Read & Write',
+				label: props.label,
 				data: format(values),
 				pointRadius: 0,
 				borderWidth: 0,
@@ -128,6 +141,9 @@ async function renderChart() {
 					const a = c.chart.chartArea ?? {};
 					return (a.bottom - a.top) / 7 - marginEachCell;
 				},
+			/* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
+			}] satisfies ChartData[],
+			 */
 			}],
 		},
 		options: {
@@ -195,7 +211,7 @@ async function renderChart() {
 						},
 						label(context) {
 							const v = context.dataset.data[context.dataIndex];
-							return ['Active: ' + v.v];
+							return [v.v];
 						},
 					},
 					//mode: 'index',

packages/frontend/src/components/MkInstanceStats.vue

@@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<option value="ap-requests-deliver-failed">AP Requests: deliverFailed</option>
 		</MkSelect>
 		<div class="_panel" :class="$style.heatmap">
-			<MkHeatmap :src="heatmapSrc"/>
+			<MkHeatmap :src="heatmapSrc" :label="'Read & Write'"/>
 		</div>
 	</MkFoldableSection>
 
@@ -92,7 +92,7 @@ import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import * as os from '@/os.js';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import MkHeatmap from '@/components/MkHeatmap.vue';
+import MkHeatmap, { type HeatmapSource } from '@/components/MkHeatmap.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkRetentionHeatmap from '@/components/MkRetentionHeatmap.vue';
 import MkRetentionLineChart from '@/components/MkRetentionLineChart.vue';
@@ -103,7 +103,7 @@ initChart();
 const chartLimit = 500;
 const chartSpan = ref<'hour' | 'day'>('hour');
 const chartSrc = ref('active-users');
-const heatmapSrc = ref('active-users');
+const heatmapSrc = ref<HeatmapSource>('active-users');
 const subDoughnutEl = shallowRef<HTMLCanvasElement>();
 const pubDoughnutEl = shallowRef<HTMLCanvasElement>();
 

packages/frontend/src/pages/drop-and-fusion.game.vue

@@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:moveClass="$style.transition_picked_move"
 						mode="out-in"
 					>
-						<img v-if="currentPick" :key="currentPick.id" :src="getTextureImageUrl(currentPick.mono)" :class="$style.currentMono" :style="{ marginBottom: -((currentPick?.mono.size * viewScale) / 2) + 'px', left: -((currentPick?.mono.size * viewScale) / 2) + 'px', width: `${currentPick?.mono.size * viewScale}px` }"/>
+						<img v-if="currentPick" :key="currentPick.id" :src="getTextureImageUrl(currentPick.mono)" :class="$style.currentMono" :style="{ marginBottom: -((currentPick?.mono.sizeY * viewScale) / 2) + 'px', left: -((currentPick?.mono.sizeX * viewScale) / 2) + 'px', width: `${currentPick?.mono.sizeX * viewScale}px` }"/>
 					</Transition>
 					<template v-if="dropReady && currentPick">
 						<img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentMonoArrow"/>
@@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-if="isGameOver && !replaying" :class="$style.gameOverLabel">
 					<div class="_gaps_s">
 						<img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/>
-						<div>SCORE: <MkNumber :value="score"/></div>
+						<div>SCORE: <MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</div>
 						<div>MAX CHAIN: <MkNumber :value="maxCombo"/></div>
 					</div>
 				</div>
@@ -90,8 +90,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div :class="$style.frameInner">
 					<div class="_buttonsCenter">
 						<MkButton @click="endReplay"><i class="ti ti-player-stop"></i> END</MkButton>
-						<MkButton :primary="replayPlaybackRate === 2" @click="replayPlaybackRate = replayPlaybackRate === 2 ? 1 : 2"><i class="ti ti-player-track-next"></i> x2</MkButton>
 						<MkButton :primary="replayPlaybackRate === 4" @click="replayPlaybackRate = replayPlaybackRate === 4 ? 1 : 4"><i class="ti ti-player-track-next"></i> x4</MkButton>
+						<MkButton :primary="replayPlaybackRate === 16" @click="replayPlaybackRate = replayPlaybackRate === 16 ? 1 : 16"><i class="ti ti-player-track-next"></i> x16</MkButton>
 					</div>
 				</div>
 			</div>
@@ -108,8 +108,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div style="display: flex;">
 				<div :class="$style.frame" style="flex: 1; margin-right: 10px;">
 					<div :class="$style.frameInner">
-						<div>SCORE: <b><MkNumber :value="score"/></b> (MAX CHAIN: <b><MkNumber :value="maxCombo"/></b>)</div>
+						<div>SCORE: <b><MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b></div>
-						<div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/></b><b v-else>-</b></div>
+						<div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b><b v-else>-</b></div>
 					</div>
 				</div>
 				<div :class="[$style.frame]" style="margin-left: auto;">
@@ -167,230 +167,404 @@ const NORMAL_BASE_SIZE = 30;
 const NORAML_MONOS: Mono[] = [{
 	id: '9377076d-c980-4d83-bdaf-175bc58275b7',
 	level: 10,
-	size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'circle',
 	score: 512,
 	dropCandidate: false,
 	sfxPitch: 0.25,
 	img: '/client-assets/drop-and-fusion/exploding_head.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: 'be9f38d2-b267-4b1a-b420-904e22e80568',
 	level: 9,
-	size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'circle',
 	score: 256,
 	dropCandidate: false,
 	sfxPitch: 0.5,
 	img: '/client-assets/drop-and-fusion/face_with_symbols_on_mouth.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: 'beb30459-b064-4888-926b-f572e4e72e0c',
 	level: 8,
-	size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'circle',
 	score: 128,
 	dropCandidate: false,
 	sfxPitch: 0.75,
 	img: '/client-assets/drop-and-fusion/cold_face.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: 'feab6426-d9d8-49ae-849c-048cdbb6cdf0',
 	level: 7,
-	size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'circle',
 	score: 64,
 	dropCandidate: false,
 	sfxPitch: 1,
 	img: '/client-assets/drop-and-fusion/zany_face.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: 'd6d8fed6-6d18-4726-81a1-6cf2c974df8a',
 	level: 6,
-	size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'circle',
 	score: 32,
 	dropCandidate: false,
 	sfxPitch: 1.5,
 	img: '/client-assets/drop-and-fusion/pleading_face.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '249c728e-230f-4332-bbbf-281c271c75b2',
 	level: 5,
-	size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'circle',
 	score: 16,
 	dropCandidate: true,
 	sfxPitch: 2,
 	img: '/client-assets/drop-and-fusion/face_with_open_mouth.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '23d67613-d484-4a93-b71e-3e81b19d6186',
 	level: 4,
-	size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25,
+	sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25,
+	sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25,
 	shape: 'circle',
 	score: 8,
 	dropCandidate: true,
 	sfxPitch: 2.5,
 	img: '/client-assets/drop-and-fusion/smiling_face_with_sunglasses.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '3cbd0add-ad7d-4685-bad0-29f6dddc0b99',
 	level: 3,
-	size: NORMAL_BASE_SIZE * 1.25 * 1.25,
+	sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25,
+	sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25,
 	shape: 'circle',
 	score: 4,
 	dropCandidate: true,
 	sfxPitch: 3,
 	img: '/client-assets/drop-and-fusion/grinning_squinting_face.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '8f86d4f4-ee02-41bf-ad38-1ce0ae457fb5',
 	level: 2,
-	size: NORMAL_BASE_SIZE * 1.25,
+	sizeX: NORMAL_BASE_SIZE * 1.25,
+	sizeY: NORMAL_BASE_SIZE * 1.25,
 	shape: 'circle',
 	score: 2,
 	dropCandidate: true,
 	sfxPitch: 3.5,
 	img: '/client-assets/drop-and-fusion/smiling_face_with_hearts.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '64ec4add-ce39-42b4-96cb-33908f3f118d',
 	level: 1,
-	size: NORMAL_BASE_SIZE,
+	sizeX: NORMAL_BASE_SIZE,
+	sizeY: NORMAL_BASE_SIZE,
 	shape: 'circle',
 	score: 1,
 	dropCandidate: true,
 	sfxPitch: 4,
 	img: '/client-assets/drop-and-fusion/heart_suit.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }];
 
+const YEN_BASE_SIZE = 30;
+const YEN_SATSU_BASE_SIZE = 70;
+const YEN_MONOS: Mono[] = [{
+	id: '880f9bd9-802f-4135-a7e1-fd0e0331f726',
+	level: 10,
+	sizeX: (YEN_SATSU_BASE_SIZE * 2) * 1.25 * 1.25 * 1.25,
+	sizeY: YEN_SATSU_BASE_SIZE * 1.25 * 1.25 * 1.25,
+	shape: 'rectangle',
+	score: 10000,
+	dropCandidate: false,
+	sfxPitch: 0.25,
+	img: '/client-assets/drop-and-fusion/10000yen.png',
+	imgSizeX: 512,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}, {
+	id: 'e807beb6-374a-4314-9cc2-aa5f17d96b6b',
+	level: 9,
+	sizeX: (YEN_SATSU_BASE_SIZE * 2) * 1.25 * 1.25,
+	sizeY: YEN_SATSU_BASE_SIZE * 1.25 * 1.25,
+	shape: 'rectangle',
+	score: 5000,
+	dropCandidate: false,
+	sfxPitch: 0.5,
+	img: '/client-assets/drop-and-fusion/5000yen.png',
+	imgSizeX: 512,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}, {
+	id: '033445b7-8f90-4fc9-beca-71a9e87cb530',
+	level: 8,
+	sizeX: (YEN_SATSU_BASE_SIZE * 2) * 1.25,
+	sizeY: YEN_SATSU_BASE_SIZE * 1.25,
+	shape: 'rectangle',
+	score: 2000,
+	dropCandidate: false,
+	sfxPitch: 0.75,
+	img: '/client-assets/drop-and-fusion/2000yen.png',
+	imgSizeX: 512,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}, {
+	id: '410a09ec-5f7f-46f6-b26f-cbca4ccbd091',
+	level: 7,
+	sizeX: YEN_SATSU_BASE_SIZE * 2,
+	sizeY: YEN_SATSU_BASE_SIZE,
+	shape: 'rectangle',
+	score: 1000,
+	dropCandidate: false,
+	sfxPitch: 1,
+	img: '/client-assets/drop-and-fusion/1000yen.png',
+	imgSizeX: 512,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}, {
+	id: '2aae82bc-3fa4-49ad-a6b5-94d888e809f5',
+	level: 6,
+	sizeX: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	shape: 'circle',
+	score: 500,
+	dropCandidate: false,
+	sfxPitch: 1.5,
+	img: '/client-assets/drop-and-fusion/500yen.png',
+	imgSizeX: 256,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}, {
+	id: 'a619bd67-d08f-4cc0-8c7e-c8072a4950cd',
+	level: 5,
+	sizeX: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
+	shape: 'circle',
+	score: 100,
+	dropCandidate: true,
+	sfxPitch: 2,
+	img: '/client-assets/drop-and-fusion/100yen.png',
+	imgSizeX: 256,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}, {
+	id: 'c1c5d8e4-17d6-4455-befd-12154d731faa',
+	level: 4,
+	sizeX: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25,
+	sizeY: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25,
+	shape: 'circle',
+	score: 50,
+	dropCandidate: true,
+	sfxPitch: 2.5,
+	img: '/client-assets/drop-and-fusion/50yen.png',
+	imgSizeX: 256,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}, {
+	id: '7082648c-e428-44c4-887a-25c07a8ebdd5',
+	level: 3,
+	sizeX: YEN_BASE_SIZE * 1.25 * 1.25,
+	sizeY: YEN_BASE_SIZE * 1.25 * 1.25,
+	shape: 'circle',
+	score: 10,
+	dropCandidate: true,
+	sfxPitch: 3,
+	img: '/client-assets/drop-and-fusion/10yen.png',
+	imgSizeX: 256,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}, {
+	id: '0d8d40d5-e6e0-4d26-8a95-b8d842363379',
+	level: 2,
+	sizeX: YEN_BASE_SIZE * 1.25,
+	sizeY: YEN_BASE_SIZE * 1.25,
+	shape: 'circle',
+	score: 5,
+	dropCandidate: true,
+	sfxPitch: 3.5,
+	img: '/client-assets/drop-and-fusion/5yen.png',
+	imgSizeX: 256,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}, {
+	id: '9dec1b38-d99d-40de-8288-37367b983d0d',
+	level: 1,
+	sizeX: YEN_BASE_SIZE,
+	sizeY: YEN_BASE_SIZE,
+	shape: 'circle',
+	score: 1,
+	dropCandidate: true,
+	sfxPitch: 4,
+	img: '/client-assets/drop-and-fusion/1yen.png',
+	imgSizeX: 256,
+	imgSizeY: 256,
+	spriteScale: 0.97,
+}];
+
 const SQUARE_BASE_SIZE = 28;
 const SQUARE_MONOS: Mono[] = [{
 	id: 'f75fd0ba-d3d4-40a4-9712-b470e45b0525',
 	level: 10,
-	size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'rectangle',
 	score: 512,
 	dropCandidate: false,
 	sfxPitch: 0.25,
 	img: '/client-assets/drop-and-fusion/keycap_10.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '7b70f4af-1c01-45fd-af72-61b1f01e03d1',
 	level: 9,
-	size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'rectangle',
 	score: 256,
 	dropCandidate: false,
 	sfxPitch: 0.5,
 	img: '/client-assets/drop-and-fusion/keycap_9.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '41607ef3-b6d6-4829-95b6-3737bf8bb956',
 	level: 8,
-	size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'rectangle',
 	score: 128,
 	dropCandidate: false,
 	sfxPitch: 0.75,
 	img: '/client-assets/drop-and-fusion/keycap_8.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '8a8310d2-0374-460f-bb50-ca9cd3ee3416',
 	level: 7,
-	size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'rectangle',
 	score: 64,
 	dropCandidate: false,
 	sfxPitch: 1,
 	img: '/client-assets/drop-and-fusion/keycap_7.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '1092e069-fe1a-450b-be97-b5d477ec398c',
 	level: 6,
-	size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'rectangle',
 	score: 32,
 	dropCandidate: false,
 	sfxPitch: 1.5,
 	img: '/client-assets/drop-and-fusion/keycap_6.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '2294734d-7bb8-4781-bb7b-ef3820abf3d0',
 	level: 5,
-	size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
+	sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
 	shape: 'rectangle',
 	score: 16,
 	dropCandidate: true,
 	sfxPitch: 2,
 	img: '/client-assets/drop-and-fusion/keycap_5.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: 'ea8a61af-e350-45f7-ba6a-366fcd65692a',
 	level: 4,
-	size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25,
+	sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25,
+	sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25,
 	shape: 'rectangle',
 	score: 8,
 	dropCandidate: true,
 	sfxPitch: 2.5,
 	img: '/client-assets/drop-and-fusion/keycap_4.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: 'd0c74815-fc1c-4fbe-9953-c92e4b20f919',
 	level: 3,
-	size: SQUARE_BASE_SIZE * 1.25 * 1.25,
+	sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25,
+	sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25,
 	shape: 'rectangle',
 	score: 4,
 	dropCandidate: true,
 	sfxPitch: 3,
 	img: '/client-assets/drop-and-fusion/keycap_3.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: 'd8fbd70e-611d-402d-87da-1a7fd8cd2c8d',
 	level: 2,
-	size: SQUARE_BASE_SIZE * 1.25,
+	sizeX: SQUARE_BASE_SIZE * 1.25,
+	sizeY: SQUARE_BASE_SIZE * 1.25,
 	shape: 'rectangle',
 	score: 2,
 	dropCandidate: true,
 	sfxPitch: 3.5,
 	img: '/client-assets/drop-and-fusion/keycap_2.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }, {
 	id: '35e476ee-44bd-4711-ad42-87be245d3efd',
 	level: 1,
-	size: SQUARE_BASE_SIZE,
+	sizeX: SQUARE_BASE_SIZE,
+	sizeY: SQUARE_BASE_SIZE,
 	shape: 'rectangle',
 	score: 1,
 	dropCandidate: true,
 	sfxPitch: 4,
 	img: '/client-assets/drop-and-fusion/keycap_1.png',
-	imgSize: 256,
+	imgSizeX: 256,
+	imgSizeY: 256,
 	spriteScale: 1.12,
 }];
 
 const props = defineProps<{
-	gameMode: 'normal' | 'square';
+	gameMode: 'normal' | 'square' | 'yen';
 	mute: boolean;
 }>();
 
@@ -398,7 +572,11 @@ const emit = defineEmits<{
 	(ev: 'end'): void;
 }>();
 
-const monoDefinitions = props.gameMode === 'normal' ? NORAML_MONOS : SQUARE_MONOS;
+const monoDefinitions =
+	props.gameMode === 'normal' ? NORAML_MONOS :
+	props.gameMode === 'square' ? SQUARE_MONOS :
+	props.gameMode === 'yen' ? YEN_MONOS :
+	[] as never;
 
 let viewScale = 1;
 let seed: string = Date.now().toString();
@@ -413,6 +591,7 @@ let tickRaf: number | null = null;
 let game = new DropAndFusionGame({
 	seed: seed,
 	monoDefinitions,
+	hasComboBonus: props.gameMode !== 'yen',
 });
 attachGameEvents();
 
@@ -616,6 +795,7 @@ async function restart() {
 	game = new DropAndFusionGame({
 		seed: seed,
 		monoDefinitions,
+		hasComboBonus: props.gameMode !== 'yen',
 	});
 	attachGameEvents();
 	await start();
@@ -640,7 +820,7 @@ function reset() {
 
 function dispose() {
 	game.dispose();
-	Matter.Render.stop(renderer);
+	if (renderer) Matter.Render.stop(renderer);
 	if (tickRaf) {
 		window.cancelAnimationFrame(tickRaf);
 	}
@@ -656,6 +836,7 @@ function replay() {
 	game = new DropAndFusionGame({
 		seed: seed,
 		monoDefinitions,
+		hasComboBonus: props.gameMode !== 'yen',
 		replaying: true,
 	});
 	attachGameEvents();
@@ -679,9 +860,11 @@ function endReplay() {
 function exportLog() {
 	if (!logs) return;
 	const data = JSON.stringify({
-		seed: seed,
+		v: game.GAME_VERSION,
-		date: new Date().toISOString(),
+		m: props.gameMode,
-		logs: logs,
+		s: seed,
+		d: new Date().toISOString(),
+		l: DropAndFusionGame.serializeLogs(logs),
 	});
 	copyToClipboard(data);
 	os.success();
@@ -723,8 +906,15 @@ function getGameImageDriveFile() {
 			const [frame, logo] = images;
 			ctx.fillStyle = '#fff';
 			ctx.fillRect(0, 0, game.GAME_WIDTH, game.GAME_HEIGHT);
+
 			ctx.drawImage(frame, 0, 0, game.GAME_WIDTH, game.GAME_HEIGHT);
 			ctx.drawImage(canvasEl.value!, 0, 0, game.GAME_WIDTH, game.GAME_HEIGHT);
+
+			ctx.fillStyle = '#000';
+			ctx.font = '16px bold sans-serif';
+			ctx.textBaseline = 'top';
+			ctx.fillText(`SCORE: ${score.value.toLocaleString()}`, 10, 10);
+
 			ctx.globalAlpha = 0.7;
 			ctx.drawImage(logo, game.GAME_WIDTH * 0.55, 6, game.GAME_WIDTH * 0.45, game.GAME_WIDTH * 0.45 * (logo.height / logo.width));
 			ctx.globalAlpha = 1;
@@ -765,7 +955,7 @@ async function share() {
 	os.post({
 		initialText: `#BubbleGame
 MODE: ${props.gameMode}
-SCORE: ${score.value} (MAX CHAIN: ${maxCombo.value})`,
+SCORE: ${score.value.toLocaleString()} (MAX CHAIN: ${maxCombo.value})`,
 		initialFiles: [file],
 		instant: true,
 	});
@@ -803,11 +993,19 @@ function attachGameEvents() {
 		const panV = x - game.PLAYAREA_MARGIN;
 		const panW = game.GAME_WIDTH - game.PLAYAREA_MARGIN - game.PLAYAREA_MARGIN;
 		const pan = ((panV / panW) - 0.5) * 2;
-		sound.playUrl('/client-assets/drop-and-fusion/poi2.mp3', {
+		if (props.gameMode === 'yen') {
+			sound.playUrl('/client-assets/drop-and-fusion/drop_yen.mp3', {
 				volume: sfxVolume.value,
 				pan,
 				playbackRate: replayPlaybackRate.value,
 			});
+		} else {
+			sound.playUrl('/client-assets/drop-and-fusion/drop.mp3', {
+				volume: sfxVolume.value,
+				pan,
+				playbackRate: replayPlaybackRate.value,
+			});
+		}
 
 		if (replaying.value) return;
 
@@ -844,9 +1042,15 @@ function attachGameEvents() {
 	});
 
 	game.addListener('gameOver', () => {
+		if (props.gameMode === 'yen') {
+			sound.playUrl('/client-assets/drop-and-fusion/gameover_yen.mp3', {
+				volume: 0.5 * sfxVolume.value,
+			});
+		} else {
 			sound.playUrl('/client-assets/drop-and-fusion/gameover.mp3', {
 				volume: sfxVolume.value,
 			});
+		}
 
 		if (replaying.value) {
 			endReplay();
@@ -859,6 +1063,14 @@ function attachGameEvents() {
 		dropReady.value = false;
 		isGameOver.value = true;
 
+		misskeyApi('bubble-game/register', {
+			seed,
+			score: score.value,
+			gameMode: props.gameMode,
+			gameVersion: game.GAME_VERSION,
+			logs: DropAndFusionGame.serializeLogs(logs),
+		});
+
 		if (score.value > (highScore.value ?? 0)) {
 			highScore.value = score.value;
 
@@ -1156,10 +1368,15 @@ definePageMetadata({
 	position: absolute;
 	z-index: 10;
 	top: 50%;
-	width: 100%;
+	left: 0;
+	right: 0;
+	margin: auto;
+	width: calc(100% - 50px);
+	max-width: 320px;
 	padding: 16px;
 	box-sizing: border-box;
 	background: #0007;
+	border-radius: 16px;
 	color: #fff;
 	text-align: center;
 	font-weight: bold;

packages/frontend/src/pages/drop-and-fusion.vue

@@ -26,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkSelect v-model="gameMode">
 								<option value="normal">NORMAL</option>
 								<option value="square">SQUARE</option>
+								<option value="yen">YEN</option>
 							</MkSelect>
 							<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
 						</div>
@@ -39,6 +40,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</div>
 					</div>
 				</div>
+				<div :class="$style.frame">
+					<div :class="$style.frameInner">
+						<div class="_gaps_s" style="padding: 16px;">
+							<div><b>{{ i18n.t('lastNDays', { n: 7 }) }} {{ i18n.ts.ranking }}</b> ({{ gameMode }})</div>
+							<div v-if="ranking" class="_gaps_s">
+								<div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord">
+									<MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/>
+									<MkUserName :user="r.user" :nowrap="true"/>
+									<b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ gameMode === 'yen' ? '円' : 'pt' }}</b>
+								</div>
+							</div>
+							<div v-else>{{ i18n.ts.loading }}</div>
+						</div>
+					</div>
+				</div>
 				<div :class="$style.frame">
 					<div :class="$style.frameInner" style="padding: 16px;">
 						<div style="font-weight: bold;">{{ i18n.ts._bubbleGame.howToPlay }}</div>
@@ -70,17 +86,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import XGame from './drop-and-fusion.game.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import MkSelect from '@/components/MkSelect.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 
-const gameMode = ref<'normal' | 'square'>('normal');
+const gameMode = ref<'normal' | 'square' | 'yen'>('normal');
 const gameStarted = ref(false);
 const mute = ref(false);
+const ranking = ref(null);
+
+watch(gameMode, async () => {
+	ranking.value = await misskeyApiGet('bubble-game/ranking', { gameMode: gameMode.value });
+}, { immediate: true });
 
 async function start() {
 	gameStarted.value = true;
@@ -149,4 +171,13 @@ definePageMetadata({
 	border-top: 1px solid #693410;
 	border-bottom: 1px solid #ce8a5c;
 }
+
+.rankingRecord {
+	display: flex;
+	line-height: 24px;
+	padding-top: 4px;
+	white-space: nowrap;
+	overflow: visible;
+	text-overflow: ellipsis;
+}
 </style>

packages/frontend/src/pages/user/activity.heatmap.vue

@@ -1,219 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and other misskey contributors
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div ref="rootEl">
-	<MkLoading v-if="fetching"/>
-	<div v-else :class="$style.root" class="_panel">
-		<canvas ref="chartEl"></canvas>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, nextTick, watch, shallowRef, ref } from 'vue';
-import { Chart } from 'chart.js';
-import * as Misskey from 'misskey-js';
-import { misskeyApi } from '@/scripts/misskey-api.js';
-import { defaultStore } from '@/store.js';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
-import { alpha } from '@/scripts/color.js';
-import { initChart } from '@/scripts/init-chart.js';
-
-initChart();
-
-const props = defineProps<{
-	src: string;
-	user: Misskey.entities.User;
-}>();
-
-const rootEl = shallowRef<HTMLDivElement>(null);
-const chartEl = shallowRef<HTMLCanvasElement>(null);
-const now = new Date();
-let chartInstance: Chart = null;
-const fetching = ref(true);
-
-const { handler: externalTooltipHandler } = useChartTooltip({
-	position: 'middle',
-});
-
-async function renderChart() {
-	if (chartInstance) {
-		chartInstance.destroy();
-	}
-
-	const wide = rootEl.value.offsetWidth > 700;
-	const narrow = rootEl.value.offsetWidth < 400;
-
-	const weeks = wide ? 50 : narrow ? 10 : 25;
-	const chartLimit = 7 * weeks;
-
-	const getDate = (ago: number) => {
-		const y = now.getFullYear();
-		const m = now.getMonth();
-		const d = now.getDate();
-
-		return new Date(y, m, d - ago);
-	};
-
-	const format = (arr) => {
-		return arr.map((v, i) => {
-			const dt = getDate(i);
-			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
-			return {
-				x: iso,
-				y: dt.getDay(),
-				d: iso,
-				v,
-			};
-		});
-	};
-
-	let values;
-
-	if (props.src === 'notes') {
-		const raw = await misskeyApi('charts/user/notes', { userId: props.user.id, limit: chartLimit, span: 'day' });
-		values = raw.inc;
-	}
-
-	fetching.value = false;
-
-	await nextTick();
-
-	const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300';
-
-	// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
-	const max = values.slice().sort((a, b) => b - a).slice(0, 3).reduce((a, b) => a + b, 0) / 3;
-
-	const min = Math.max(0, Math.min(...values) - 1);
-
-	const marginEachCell = 4;
-
-	chartInstance = new Chart(chartEl.value, {
-		type: 'matrix',
-		data: {
-			datasets: [{
-				label: '',
-				data: format(values),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 3,
-				backgroundColor(c) {
-					const value = c.dataset.data[c.dataIndex].v;
-					let a = (value - min) / max;
-					if (value !== 0) { // 0でない限りは完全に不可視にはしない
-						a = Math.max(a, 0.05);
-					}
-					return alpha(color, a);
-				},
-				fill: true,
-				width(c) {
-					const a = c.chart.chartArea ?? {};
-					return (a.right - a.left) / weeks - marginEachCell;
-				},
-				height(c) {
-					const a = c.chart.chartArea ?? {};
-					return (a.bottom - a.top) / 7 - marginEachCell;
-				},
-			/* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
-			}] satisfies ChartData[],
-			 */
-			}],
-		},
-		options: {
-			aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
-			layout: {
-				padding: {
-					left: 8,
-					right: 0,
-					top: 0,
-					bottom: 0,
-				},
-			},
-			scales: {
-				x: {
-					type: 'time',
-					offset: true,
-					position: 'bottom',
-					time: {
-						unit: 'week',
-						round: 'week',
-						isoWeekday: 0,
-						displayFormats: {
-							day: 'M/d',
-							month: 'Y/M',
-							week: 'M/d',
-						},
-					},
-					grid: {
-						display: false,
-					},
-					ticks: {
-						display: true,
-						maxRotation: 0,
-						autoSkipPadding: 8,
-					},
-				},
-				y: {
-					offset: true,
-					reverse: true,
-					position: 'right',
-					grid: {
-						display: false,
-					},
-					ticks: {
-						maxRotation: 0,
-						autoSkip: true,
-						padding: 1,
-						font: {
-							size: 9,
-						},
-						callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
-					},
-				},
-			},
-			plugins: {
-				legend: {
-					display: false,
-				},
-				tooltip: {
-					enabled: false,
-					callbacks: {
-						title(context) {
-							const v = context[0].dataset.data[context[0].dataIndex];
-							return v.d;
-						},
-						label(context) {
-							const v = context.dataset.data[context.dataIndex];
-							return [v.v];
-						},
-					},
-					//mode: 'index',
-					animation: {
-						duration: 0,
-					},
-					external: externalTooltipHandler,
-				},
-			},
-		},
-	});
-}
-
-watch(() => props.src, () => {
-	fetching.value = true;
-	renderChart();
-});
-
-onMounted(async () => {
-	renderChart();
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	padding: 20px;
-}
-</style>

packages/frontend/src/pages/user/activity.vue

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div class="_gaps">
 		<MkFoldableSection class="item">
 			<template #header><i class="ti ti-activity"></i> Heatmap</template>
-			<XHeatmap :user="user" :src="'notes'"/>
+			<MkHeatmap :user="user" :src="'notes'"/>
 		</MkFoldableSection>
 		<MkFoldableSection class="item">
 			<template #header><i class="ti ti-pencil"></i> Notes</template>
@@ -28,11 +28,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import XHeatmap from './activity.heatmap.vue';
 import XPv from './activity.pv.vue';
 import XNotes from './activity.notes.vue';
 import XFollowing from './activity.following.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkHeatmap from '@/components/MkHeatmap.vue';
 
 const props = defineProps<{
 	user: Misskey.entities.User;

packages/frontend/src/scripts/drop-and-fusion-engine.ts

@@ -10,13 +10,15 @@ import seedrandom from 'seedrandom';
 export type Mono = {
 	id: string;
 	level: number;
-	size: number;
+	sizeX: number;
+	sizeY: number;
 	shape: 'circle' | 'rectangle';
 	score: number;
 	dropCandidate: boolean;
 	sfxPitch: number;
 	img: string;
-	imgSize: number;
+	imgSizeX: number;
+	imgSizeY: number;
 	spriteScale: number;
 };
 
@@ -32,7 +34,6 @@ type Log = {
 	operation: 'surrender';
 };
 
-// TODO: インスタンスを作り直さなくてもゲームをリスタートできるようにする
 export class DropAndFusionGame extends EventEmitter<{
 	changeScore: (newScore: number) => void;
 	changeCombo: (newCombo: number) => void;
@@ -46,18 +47,21 @@ export class DropAndFusionGame extends EventEmitter<{
 }> {
 	private PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
 	private COMBO_INTERVAL = 60; // frame
+	public readonly GAME_VERSION = 2;
 	public readonly GAME_WIDTH = 450;
 	public readonly GAME_HEIGHT = 600;
 	public readonly DROP_INTERVAL = 500;
 	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 monoDefinitions: Mono[] = [];
+	private hasComboBonus = true;
 	private rng: () => number;
 	private logs: Log[] = [];
 	private replaying = false;
@@ -65,7 +69,9 @@ export class DropAndFusionGame extends EventEmitter<{
 	/**
 	 * フィールドに出ていて、かつ合体の対象となるアイテム
 	 */
-	private activeBodyIds: Matter.Body['id'][] = [];
+	private fusionReadyBodyIds: Matter.Body['id'][] = [];
+
+	private gameOverReadyBodyIds: Matter.Body['id'][] = [];
 
 	/**
 	 * fusion予約アイテムのペア
@@ -73,8 +79,6 @@ export class DropAndFusionGame extends EventEmitter<{
 	 */
 	private fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
 
-	private latestDroppedBodyId: Matter.Body['id'] | null = null;
-
 	private latestDroppedAt = 0;
 	private latestFusionedAt = 0; // frame
 	private stock: { id: string; mono: Mono }[] = [];
@@ -100,11 +104,17 @@ export class DropAndFusionGame extends EventEmitter<{
 
 	public replayPlaybackRate = 1;
 
-	constructor(env: { monoDefinitions: Mono[]; seed: string; replaying?: boolean }) {
+	constructor(env: {
+		monoDefinitions: Mono[];
+		seed: string;
+		hasComboBonus: boolean;
+		replaying?: boolean;
+	}) {
 		super();
 
 		this.replaying = !!env.replaying;
 		this.monoDefinitions = env.monoDefinitions;
+		this.hasComboBonus = env.hasComboBonus;
 		this.rng = seedrandom(env.seed);
 
 		this.tick = this.tick.bind(this);
@@ -146,6 +156,7 @@ export class DropAndFusionGame extends EventEmitter<{
 		//#endregion
 
 		this.overflowCollider = Matter.Bodies.rectangle(this.GAME_WIDTH / 2, 0, this.GAME_WIDTH, 200, {
+			label: '_overflow_',
 			isStatic: true,
 			isSensor: true,
 			render: {
@@ -156,11 +167,15 @@ export class DropAndFusionGame extends EventEmitter<{
 		Matter.Composite.add(this.engine.world, this.overflowCollider);
 	}
 
+	private msToFrame(ms: number) {
+		return Math.round(ms / this.TICK_DELTA);
+	}
+
 	private createBody(mono: Mono, x: number, y: number) {
 		const options: Matter.IBodyDefinition = {
 			label: mono.id,
 			//density: 0.0005,
-			density: mono.size / 1000,
+			density: ((mono.sizeX + mono.sizeY) / 2) / 1000,
 			restitution: 0.2,
 			frictionAir: 0.01,
 			friction: 0.7,
@@ -170,16 +185,16 @@ export class DropAndFusionGame extends EventEmitter<{
 			render: {
 				sprite: {
 					texture: mono.img,
-					xScale: (mono.size / mono.imgSize) * mono.spriteScale,
+					xScale: (mono.sizeX / mono.imgSizeX) * mono.spriteScale,
-					yScale: (mono.size / mono.imgSize) * mono.spriteScale,
+					yScale: (mono.sizeY / mono.imgSizeY) * mono.spriteScale,
 				},
 			},
 		};
 		if (mono.shape === 'circle') {
-			return Matter.Bodies.circle(x, y, mono.size / 2, options);
+			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.size, mono.size, options);
+			return Matter.Bodies.rectangle(x, y, mono.sizeX, mono.sizeY, options);
 		} else {
 			throw new Error('unrecognized shape');
 		}
@@ -197,8 +212,9 @@ export class DropAndFusionGame extends EventEmitter<{
 		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]);
-		this.activeBodyIds = this.activeBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
 
 		const currentMono = this.monoDefinitions.find(y => y.id === bodyA.label)!;
 		const nextMono = this.monoDefinitions.find(x => x.level === currentMono.level + 1);
@@ -209,13 +225,13 @@ export class DropAndFusionGame extends EventEmitter<{
 
 			// 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする
 			this.tickCallbackQueue.push({
-				frame: this.frame + 6,
+				frame: this.frame + this.msToFrame(100),
 				callback: () => {
-					this.activeBodyIds.push(body.id);
+					this.fusionReadyBodyIds.push(body.id);
 				},
 			});
 
-			const comboBonus = 1 + ((this.combo - 1) / 5);
+			const comboBonus = this.hasComboBonus ? 1 + ((this.combo - 1) / 5) : 1;
 			const additionalScore = Math.round(currentMono.score * comboBonus);
 			this.score += additionalScore;
 
@@ -240,14 +256,6 @@ export class DropAndFusionGame extends EventEmitter<{
 		for (const pairs of event.pairs) {
 			const { bodyA, bodyB } = pairs;
 
-			if (bodyA.id === this.overflowCollider.id || bodyB.id === this.overflowCollider.id) {
-				if (bodyA.id === this.latestDroppedBodyId || bodyB.id === this.latestDroppedBodyId) {
-					continue;
-				}
-				this.gameOver();
-				break;
-			}
-
 			const shouldFusion = (bodyA.label === bodyB.label) &&
 				!this.fusionReservedPairs.some(x =>
 					x.bodyA.id === bodyA.id ||
@@ -256,12 +264,12 @@ export class DropAndFusionGame extends EventEmitter<{
 					x.bodyB.id === bodyB.id);
 
 			if (shouldFusion) {
-				if (this.activeBodyIds.includes(bodyA.id) && this.activeBodyIds.includes(bodyB.id)) {
+				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 + 6,
+						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);
@@ -269,12 +277,19 @@ export class DropAndFusionGame extends EventEmitter<{
 					});
 				}
 			} else {
+				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);
+				}
+
 				const energy = pairs.collision.depth;
 				if (energy > minCollisionEnergyForSound) {
 					const volume = (Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4;
 					const panV =
-						pairs.bodyA.label === '_wall_' ? bodyB.position.x - this.PLAYAREA_MARGIN :
+						bodyA.label === '_wall_' ? bodyB.position.x - this.PLAYAREA_MARGIN :
-						pairs.bodyB.label === '_wall_' ? bodyA.position.x - this.PLAYAREA_MARGIN :
+						bodyB.label === '_wall_' ? bodyA.position.x - this.PLAYAREA_MARGIN :
 						((bodyA.position.x + bodyB.position.x) / 2) - this.PLAYAREA_MARGIN;
 					const panW = this.GAME_WIDTH - this.PLAYAREA_MARGIN - this.PLAYAREA_MARGIN;
 					const pan = ((panV / panW) - 0.5) * 2;
@@ -285,6 +300,21 @@ export class DropAndFusionGame extends EventEmitter<{
 		}
 	}
 
+	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,
@@ -309,6 +339,7 @@ export class DropAndFusionGame extends EventEmitter<{
 		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() {
@@ -355,17 +386,18 @@ export class DropAndFusionGame extends EventEmitter<{
 		this.emit('changeStock', this.stock);
 
 		const inputX = Math.round(_x);
-		const x = Math.min(this.GAME_WIDTH - this.PLAYAREA_MARGIN - (head.mono.size / 2), Math.max(this.PLAYAREA_MARGIN + (head.mono.size / 2), inputX));
+		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.size / 2);
+		const body = this.createBody(head.mono, x, 50 + head.mono.sizeY / 2);
 		this.logs.push({
 			frame: this.frame,
 			operation: 'drop',
 			x: inputX,
 		});
 		Matter.Composite.add(this.engine.world, body);
-		this.activeBodyIds.push(body.id);
+
-		this.latestDroppedBodyId = body.id;
+		this.fusionReadyBodyIds.push(body.id);
 		this.latestDroppedAt = Date.now();
+
 		this.emit('dropped', x);
 		this.emit('monoAdded', head.mono);
 	}
@@ -396,6 +428,66 @@ export class DropAndFusionGame extends EventEmitter<{
 		}
 	}
 
+	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);

packages/frontend/src/scripts/sound.ts

@@ -92,7 +92,6 @@ export type OperationType = typeof operationTypes[number];
  * @param options `useCache`: デフォルトは`true` 一度再生した音声はキャッシュする
  */
 export async function loadAudio(url: string, options?: { useCache?: boolean; }) {
-	if (_DEV_) console.log('loading audio. opts:', options);
 	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 	if (ctx == null) {
 		ctx = new AudioContext();

packages/misskey-js/etc/misskey-js.api.md

@@ -473,6 +473,18 @@ type BlockingListRequest = operations['blocking/list']['requestBody']['content']
 // @public (undocumented)
 type BlockingListResponse = operations['blocking/list']['responses']['200']['content']['application/json'];
 
+// @public (undocumented)
+type BubbleGameRankingRequest = operations['bubble-game/ranking']['requestBody']['content']['application/json'];
+
+// @public (undocumented)
+type BubbleGameRankingResponse = operations['bubble-game/ranking']['responses']['200']['content']['application/json'];
+
+// @public (undocumented)
+type BubbleGameRegisterRequest = operations['bubble-game/register']['requestBody']['content']['application/json'];
+
+// @public (undocumented)
+type BubbleGameRegisterResponse = operations['bubble-game/register']['responses']['200']['content']['application/json'];
+
 // @public (undocumented)
 type Channel = components['schemas']['Channel'];
 
@@ -1607,6 +1619,10 @@ declare namespace entities {
         FetchExternalResourcesRequest,
         FetchExternalResourcesResponse,
         RetentionResponse,
+        BubbleGameRegisterRequest,
+        BubbleGameRegisterResponse,
+        BubbleGameRankingRequest,
+        BubbleGameRankingResponse,
         Error_2 as Error,
         UserLite,
         UserDetailedNotMeOnly,

packages/misskey-js/src/autogen/apiClientJSDoc.ts

@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T15:22:15.630Z
+ * generatedAt: 2024-01-11T14:29:04.817Z
  */
 
 import type { SwitchCaseResponseType } from '../api.js';
@@ -3985,5 +3985,27 @@ declare module '../api.js' {
       params: P,
       credential?: string | null,
     ): Promise<SwitchCaseResponseType<E, P>>;
+
+    /**
+     * No description provided.
+     * 
+     * **Credential required**: *Yes* / **Permission**: *write:account*
+     */
+    request<E extends 'bubble-game/register', P extends Endpoints[E]['req']>(
+      endpoint: E,
+      params: P,
+      credential?: string | null,
+    ): Promise<SwitchCaseResponseType<E, P>>;
+
+    /**
+     * No description provided.
+     * 
+     * **Credential required**: *No*
+     */
+    request<E extends 'bubble-game/ranking', P extends Endpoints[E]['req']>(
+      endpoint: E,
+      params: P,
+      credential?: string | null,
+    ): Promise<SwitchCaseResponseType<E, P>>;
   }
 }

packages/misskey-js/src/autogen/endpoint.ts

@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T15:22:15.626Z
+ * generatedAt: 2024-01-11T14:29:04.814Z
  */
 
 import type {
@@ -540,6 +540,10 @@ import type {
 	FetchExternalResourcesRequest,
 	FetchExternalResourcesResponse,
 	RetentionResponse,
+	BubbleGameRegisterRequest,
+	BubbleGameRegisterResponse,
+	BubbleGameRankingRequest,
+	BubbleGameRankingResponse,
 } from './entities.js';
 
 export type Endpoints = {
@@ -901,4 +905,6 @@ export type Endpoints = {
 	'fetch-rss': { req: FetchRssRequest; res: FetchRssResponse };
 	'fetch-external-resources': { req: FetchExternalResourcesRequest; res: FetchExternalResourcesResponse };
 	'retention': { req: EmptyRequest; res: RetentionResponse };
+	'bubble-game/register': { req: BubbleGameRegisterRequest; res: BubbleGameRegisterResponse };
+	'bubble-game/ranking': { req: BubbleGameRankingRequest; res: BubbleGameRankingResponse };
 }

packages/misskey-js/src/autogen/entities.ts

@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T15:22:15.624Z
+ * generatedAt: 2024-01-11T14:29:04.811Z
  */
 
 import { operations } from './types.js';
@@ -542,3 +542,7 @@ export type FetchRssResponse = operations['fetch-rss']['responses']['200']['cont
 export type FetchExternalResourcesRequest = operations['fetch-external-resources']['requestBody']['content']['application/json'];
 export type FetchExternalResourcesResponse = operations['fetch-external-resources']['responses']['200']['content']['application/json'];
 export type RetentionResponse = operations['retention']['responses']['200']['content']['application/json'];
+export type BubbleGameRegisterRequest = operations['bubble-game/register']['requestBody']['content']['application/json'];
+export type BubbleGameRegisterResponse = operations['bubble-game/register']['responses']['200']['content']['application/json'];
+export type BubbleGameRankingRequest = operations['bubble-game/ranking']['requestBody']['content']['application/json'];
+export type BubbleGameRankingResponse = operations['bubble-game/ranking']['responses']['200']['content']['application/json'];

packages/misskey-js/src/autogen/models.ts

@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T15:22:15.623Z
+ * generatedAt: 2024-01-11T14:29:04.810Z
  */
 
 import { components } from './types.js';

packages/misskey-js/src/autogen/types.ts

@@ -3,7 +3,7 @@
 
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T15:22:15.494Z
+ * generatedAt: 2024-01-11T14:29:04.681Z
  */
 
 /**
@@ -3447,6 +3447,31 @@ export type paths = {
      */
     post: operations['retention'];
   };
+  '/bubble-game/register': {
+    /**
+     * bubble-game/register
+     * @description No description provided.
+     *
+     * **Credential required**: *Yes* / **Permission**: *write:account*
+     */
+    post: operations['bubble-game/register'];
+  };
+  '/bubble-game/ranking': {
+    /**
+     * bubble-game/ranking
+     * @description No description provided.
+     *
+     * **Credential required**: *No*
+     */
+    get: operations['bubble-game/ranking'];
+    /**
+     * bubble-game/ranking
+     * @description No description provided.
+     *
+     * **Credential required**: *No*
+     */
+    post: operations['bubble-game/ranking'];
+  };
 };
 
 export type webhooks = Record<string, never>;
@@ -25396,5 +25421,126 @@ export type operations = {
       };
     };
   };
+  /**
+   * bubble-game/register
+   * @description No description provided.
+   *
+   * **Credential required**: *Yes* / **Permission**: *write:account*
+   */
+  'bubble-game/register': {
+    requestBody: {
+      content: {
+        'application/json': {
+          score: number;
+          seed: string;
+          logs: unknown[];
+          gameMode: string;
+          gameVersion: number;
+        };
+      };
+    };
+    responses: {
+      /** @description OK (with results) */
+      200: {
+        content: {
+          'application/json': unknown;
+        };
+      };
+      /** @description Client error */
+      400: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Authentication error */
+      401: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Forbidden error */
+      403: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description I'm Ai */
+      418: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description To many requests */
+      429: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Internal server error */
+      500: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+    };
+  };
+  /**
+   * bubble-game/ranking
+   * @description No description provided.
+   *
+   * **Credential required**: *No*
+   */
+  'bubble-game/ranking': {
+    requestBody: {
+      content: {
+        'application/json': {
+          gameMode: string;
+        };
+      };
+    };
+    responses: {
+      /** @description OK (with results) */
+      200: {
+        content: {
+          'application/json': {
+              /** Format: misskey:id */
+              id: string;
+              score: number;
+              user: components['schemas']['UserLite'];
+            }[];
+        };
+      };
+      /** @description Client error */
+      400: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Authentication error */
+      401: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Forbidden error */
+      403: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description I'm Ai */
+      418: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Internal server error */
+      500: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+    };
+  };
 };