Merge branch 'develop' into develop

CHANGELOG.md

@@ -9,6 +9,9 @@
 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように
 - Enhance: チャンネルノートのピン留めをノートのメニューからできるように
 - Enhance: 管理者の場合はAPI tokenの発行画面で管理機能に関する権限を付与できるように
+- Enhance: AiScriptを0.17.0に更新　[CHANGELOG](https://github.com/aiscript-dev/aiscript/blob/bb89d132b633a622d3cb0eff0d0cc7e476c0cfdd/CHANGELOG.md)
+  - 配列の範囲外・非整数のインデックスへの代入が完全禁止になるので注意
+- Enhance: 絵文字ピッカー・オートコンプリートで、完全一致した絵文字を優先的に表示するように
 - Fix: ネイティブモードの絵文字がモノクロにならないように
 - Fix: v2023.12.0で追加された「モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能」が管理画面上で正しく表示されていない問題を修正
 - Fix: AiScriptの`readline`関数が不正な値を返すことがある問題のv2023.12.0時点での修正がPlay以外に適用されていないのを修正

locales/index.d.ts

@@ -1242,6 +1242,15 @@ export interface Locale {
     "showReplay": string;
     "replay": string;
     "replaying": string;
+    "ranking": string;
+    "_bubbleGame": {
+        "howToPlay": string;
+        "_howToPlay": {
+            "section1": string;
+            "section2": string;
+            "section3": string;
+        };
+    };
     "_announcement": {
         "forExistingUsers": string;
         "forExistingUsersDescription": string;

locales/ja-JP.yml

@@ -1239,6 +1239,14 @@ soundWillBePlayed: "サウンドが再生されます"
 showReplay: "リプレイを見る"
 replay: "リプレイ"
 replaying: "リプレイ中"
+ranking: "ランキング"
+
+_bubbleGame:
+  howToPlay: "遊び方"
+  _howToPlay:
+    section1: "位置を調整してハコにモノを落とします。"
+    section2: "同じ種類のモノがくっつくと別のモノに変化して、スコアが得られます。"
+    section3: "モノがハコからあふれるとゲームオーバーです。ハコからあふれないようにしつつモノを融合させてハイスコアを目指そう！"
 
 _announcement:
   forExistingUsers: "既存ユーザーのみ"

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

@@ -79,5 +79,6 @@ export const DI = {
 	flashLikesRepository: Symbol('flashLikesRepository'),
 	userMemosRepository: Symbol('userMemosRepository'),
 	noteEditRepository: Symbol('noteEditRepository'),
+	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, NoteEdit } 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, NoteEdit, MiBubbleGameRecord } from './_.js';
 import type { DataSource } from 'typeorm';
 import type { Provider } from '@nestjs/common';
 
@@ -405,6 +405,12 @@ const $noteEditRepository: Provider = {
 	inject: [DI.db],
 };
 
+const $bubbleGameRecordsRepository: Provider = {
+	provide: DI.bubbleGameRecordsRepository,
+	useFactory: (db: DataSource) => db.getRepository(MiBubbleGameRecord),
+	inject: [DI.db],
+};
+
 @Module({
 	imports: [
 	],
@@ -475,6 +481,7 @@ const $noteEditRepository: Provider = {
 		$flashLikesRepository,
 		$userMemosRepository,
 		$noteEditRepository,
+		$bubbleGameRecordsRepository,
 	],
 	exports: [
 		$usersRepository,
@@ -543,6 +550,7 @@ const $noteEditRepository: Provider = {
 		$flashLikesRepository,
 		$userMemosRepository,
 		$noteEditRepository,
+		$bubbleGameRecordsRepository,
 	],
 })
 export class RepositoryModule {}

packages/backend/src/models/_.ts

@@ -69,6 +69,7 @@ import { MiFlash } from '@/models/Flash.js';
 import { MiFlashLike } from '@/models/FlashLike.js';
 import { MiUserListFavorite } from '@/models/UserListFavorite.js';
 import { NoteEdit } from '@/models/NoteEdit.js';
+import { MiBubbleGameRecord } from '@/models/BubbleGameRecord.js';
 import type { Repository } from 'typeorm';
 
 export {
@@ -138,6 +139,7 @@ export {
 	MiFlashLike,
 	MiUserMemo,
 	NoteEdit,
+	MiBubbleGameRecord,
 };
 
 export type AbuseUserReportsRepository = Repository<MiAbuseUserReport>;
@@ -206,3 +208,4 @@ export type FlashsRepository = Repository<MiFlash>;
 export type FlashLikesRepository = Repository<MiFlashLike>;
 export type UserMemoRepository = Repository<MiUserMemo>;
 export type NoteEditRepository = Repository<NoteEdit>;
+export type BubbleGameRecordsRepository = Repository<MiBubbleGameRecord>;

packages/backend/src/postgres.ts

@@ -77,6 +77,7 @@ import { MiFlash } from '@/models/Flash.js';
 import { MiFlashLike } from '@/models/FlashLike.js';
 import { MiUserMemo } from '@/models/UserMemo.js';
 import { NoteEdit } from '@/models/NoteEdit.js';
+import { MiBubbleGameRecord } from '@/models/BubbleGameRecord.js';
 
 import { Config } from '@/config.js';
 import MisskeyLogger from '@/logger.js';
@@ -192,6 +193,7 @@ export const entities = [
 	MiFlashLike,
 	MiUserMemo,
 	NoteEdit,
+	MiBubbleGameRecord,
 	...charts,
 ];
 

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

@@ -377,6 +377,8 @@ 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___sponsors from './endpoints/sponsors.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';
@@ -752,6 +754,8 @@ const $fetchRss: Provider = { provide: 'ep:fetch-rss', useClass: ep___fetchRss.d
 const $fetchExternalResources: Provider = { provide: 'ep:fetch-external-resources', useClass: ep___fetchExternalResources.default };
 const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention.default };
 const $sponsors: Provider = { provide: 'ep:sponsors', useClass: ep___sponsors.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: [
@@ -1131,6 +1135,8 @@ const $sponsors: Provider = { provide: 'ep:sponsors', useClass: ep___sponsors.de
 		$fetchExternalResources,
 		$retention,
 		$sponsors,
+		$bubbleGame_register,
+		$bubbleGame_ranking,
 	],
 	exports: [
 		$admin_meta,
@@ -1501,6 +1507,8 @@ const $sponsors: Provider = { provide: 'ep:sponsors', useClass: ep___sponsors.de
 		$fetchExternalResources,
 		$retention,
 		$sponsors,
+		$bubbleGame_register,
+		$bubbleGame_ranking,
 	],
 })
 export class EndpointsModule {}

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

@@ -378,6 +378,8 @@ 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___sponsors from './endpoints/sponsors.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],
@@ -751,6 +753,8 @@ const eps = [
 	['fetch-external-resources', ep___fetchExternalResources],
 	['retention', ep___retention],
 	['sponsors', ep___sponsors],
+	['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,75 @@
+/*
+ * 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 = {
+	tags: [],
+
+	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,86 @@
+/*
+ * 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 = {
+	tags: [],
+
+	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/package.json

@@ -25,7 +25,7 @@
 		"@rollup/plugin-replace": "5.0.5",
 		"@rollup/pluginutils": "5.1.0",
 		"@sharkey/sfm-js": "0.24.4",
-		"@syuilo/aiscript": "0.16.0",
+		"@syuilo/aiscript": "0.17.0",
 		"@phosphor-icons/web": "^2.0.3",
 		"@twemoji/parser": "15.0.0",
 		"@vitejs/plugin-vue": "5.0.2",

packages/frontend/src/components/MkAutocomplete.vue

@@ -262,15 +262,24 @@ function emojiAutoComplete(query: string | null, emojiDb: EmojiDef[], max = 30):
 	}
 
 	const matched = new Map<string, EmojiScore>();
-
+	// 完全一致（エイリアス込み）
-	// 前方一致（エイリアスなし）
 	emojiDb.some(x => {
-		if (x.name.toLowerCase().startsWith(query) && !x.aliasOf) {
+		if (x.name.toLowerCase() === query && !matched.has(x.aliasOf ?? x.name)) {
-			matched.set(x.name, { emoji: x, score: query.length + 1 });
+			matched.set(x.aliasOf ?? x.name, { emoji: x, score: query.length + 2 });
 		}
 		return matched.size === max;
 	});
 
+	// 前方一致（エイリアスなし）
+	if (matched.size < max) {
+		emojiDb.some(x => {
+			if (x.name.startsWith(query) && !x.aliasOf) {
+				matched.set(x.name, { emoji: x, score: query.length + 1 });
+			}
+			return matched.size === max;
+		});
+	}
+
 	// 前方一致（エイリアス込み）
 	if (matched.size < max) {
 		emojiDb.some(x => {

packages/frontend/src/components/MkEmojiPicker.vue

@@ -221,6 +221,19 @@ watch(q, () => {
 				}
 			}
 		} else {
+			if (customEmojisMap.has(newQ)) {
+				matches.add(customEmojisMap.get(newQ)!);
+			}
+			if (matches.size >= max) return matches;
+
+			for (const emoji of emojis) {
+				if (emoji.aliases.some(alias => alias === newQ)) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+			if (matches.size >= max) return matches;
+
 			for (const emoji of emojis) {
 				if (emoji.name.startsWith(newQ)) {
 					matches.add(emoji);

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

@@ -6,7 +6,6 @@
 import { EventEmitter } from 'eventemitter3';
 import * as Matter from 'matter-js';
 import seedrandom from 'seedrandom';
-import * as sound from '@/scripts/sound.js';
 
 export type Mono = {
 	id: string;
@@ -38,45 +37,47 @@ export class DropAndFusionGame extends EventEmitter<{
 	changeCombo: (newCombo: number) => void;
 	changeStock: (newStock: { id: string; mono: Mono }[]) => void;
 	changeHolding: (newHolding: { id: string; mono: Mono } | null) => void;
-	dropped: () => void;
+	dropped: (x: number) => void;
 	fusioned: (x: number, y: number, scoreDelta: number) => void;
 	monoAdded: (mono: Mono) => void;
 	gameOver: () => void;
+	sfx(type: string, params: { volume: number; pan: number; pitch: number; }): void;
 }> {
 	private PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
-	private COMBO_INTERVAL = 1000;
+	private COMBO_INTERVAL = 60; // frame
+	public readonly GAME_VERSION = 1;
+	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
-	private loaded = false;
+
-	private frame = 0;
+	public frame = 0;
-	private engine: Matter.Engine;
+	public engine: Matter.Engine;
-	private render: Matter.Render;
-	private tickRaf: ReturnType<typeof requestAnimationFrame> | null = null;
 	private tickCallbackQueue: { frame: number; callback: () => void; }[] = [];
 	private overflowCollider: Matter.Body;
 	private isGameOver = false;
-	private gameWidth: number;
-	private gameHeight: number;
 	private monoDefinitions: Mono[] = [];
-	private monoTextures: Record<string, Blob> = {};
-	private monoTextureUrls: Record<string, string> = {};
 	private rng: () => number;
 	private logs: Log[] = [];
 	private replaying = false;
 
-	private sfxVolume = 1;
-
 	/**
 	 * フィールドに出ていて、かつ合体の対象となるアイテム
 	 */
 	private activeBodyIds: Matter.Body['id'][] = [];
 
+	/**
+	 * fusion予約アイテムのペア
+	 * TODO: これらのモノは光らせるなどの演出をすると視覚的に楽しそう
+	 */
+	private fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
+
 	private latestDroppedBodyId: Matter.Body['id'] | null = null;
 
 	private latestDroppedAt = 0;
-	private latestFusionedAt = 0;
+	private latestFusionedAt = 0; // frame
 	private stock: { id: string; mono: Mono }[] = [];
 	private holding: { id: string; mono: Mono } | null = null;
 
@@ -98,29 +99,17 @@ export class DropAndFusionGame extends EventEmitter<{
 		this.emit('changeScore', value);
 	}
 
-	private comboIntervalId: number | null = null;
+	public replayPlaybackRate = 1;
 
-	constructor(opts: {
+	constructor(env: { monoDefinitions: Mono[]; seed: string; replaying?: boolean }) {
-		canvas: HTMLCanvasElement;
-		width: number;
-		height: number;
-		monoDefinitions: Mono[];
-		seed: string;
-		sfxVolume?: number;
-	}) {
 		super();
 
+		this.replaying = !!env.replaying;
+		this.monoDefinitions = env.monoDefinitions;
+		this.rng = seedrandom(env.seed);
+
 		this.tick = this.tick.bind(this);
 
-		this.gameWidth = opts.width;
-		this.gameHeight = opts.height;
-		this.monoDefinitions = opts.monoDefinitions;
-		this.rng = seedrandom(opts.seed);
-
-		if (opts.sfxVolume) {
-			this.sfxVolume = opts.sfxVolume;
-		}
-
 		this.engine = Matter.Engine.create({
 			constraintIterations: 2 * this.PHYSICS_QUALITY_FACTOR,
 			positionIterations: 6 * this.PHYSICS_QUALITY_FACTOR,
@@ -135,26 +124,11 @@ export class DropAndFusionGame extends EventEmitter<{
 			enableSleeping: false,
 		});
 
-		this.render = Matter.Render.create({
-			engine: this.engine,
-			canvas: opts.canvas,
-			options: {
-				width: this.gameWidth,
-				height: this.gameHeight,
-				background: 'transparent', // transparent to hide
-				wireframeBackground: 'transparent', // transparent to hide
-				wireframes: false,
-				showSleeping: false,
-				pixelRatio: Math.max(2, window.devicePixelRatio),
-			},
-		});
-
-		Matter.Render.run(this.render);
-
 		this.engine.world.bodies = [];
 
 		//#region walls
 		const WALL_OPTIONS: Matter.IChamferableBodyDefinition = {
+			label: '_wall_',
 			isStatic: true,
 			friction: 0.7,
 			slop: 1.0,
@@ -166,13 +140,13 @@ export class DropAndFusionGame extends EventEmitter<{
 
 		const thickness = 100;
 		Matter.Composite.add(this.engine.world, [
-			Matter.Bodies.rectangle(this.gameWidth / 2, this.gameHeight + (thickness / 2) - this.PLAYAREA_MARGIN, this.gameWidth, thickness, WALL_OPTIONS),
+			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.gameWidth + (thickness / 2) - this.PLAYAREA_MARGIN, this.gameHeight / 2, thickness, this.gameHeight, 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.gameHeight / 2, thickness, this.gameHeight, 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.gameWidth / 2, 0, this.gameWidth, 200, {
+		this.overflowCollider = Matter.Bodies.rectangle(this.GAME_WIDTH / 2, 0, this.GAME_WIDTH, 200, {
 			isStatic: true,
 			isSensor: true,
 			render: {
@@ -181,12 +155,10 @@ export class DropAndFusionGame extends EventEmitter<{
 			},
 		});
 		Matter.Composite.add(this.engine.world, this.overflowCollider);
+	}
 
-		// fit the render viewport to the scene
+	private msToFrame(ms: number) {
-		Matter.Render.lookAt(this.render, {
+		return Math.round(ms / this.TICK_DELTA);
-			min: { x: 0, y: 0 },
-			max: { x: this.gameWidth, y: this.gameHeight },
-		});
 	}
 
 	private createBody(mono: Mono, x: number, y: number) {
@@ -219,13 +191,12 @@ export class DropAndFusionGame extends EventEmitter<{
 	}
 
 	private fusion(bodyA: Matter.Body, bodyB: Matter.Body) {
-		const now = Date.now();
+		if (this.latestFusionedAt > this.frame - this.COMBO_INTERVAL) {
-		if (this.latestFusionedAt > now - this.COMBO_INTERVAL) {
 			this.combo++;
 		} else {
 			this.combo = 1;
 		}
-		this.latestFusionedAt = now;
+		this.latestFusionedAt = this.frame;
 
 		// TODO: 単に位置だけでなくそれぞれの動きベクトルも融合する？
 		const newX = (bodyA.position.x + bodyB.position.x) / 2;
@@ -243,7 +214,7 @@ 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);
 				},
@@ -253,27 +224,69 @@ export class DropAndFusionGame extends EventEmitter<{
 			const additionalScore = Math.round(currentMono.score * comboBonus);
 			this.score += additionalScore;
 
-			// TODO: 効果音再生はコンポーネント側の責務なので移動する
-			const pan = ((newX / this.gameWidth) - 0.5) * 2;
-			sound.playUrl('/client-assets/drop-and-fusion/bubble2.mp3', {
-				volume: this.sfxVolume,
-				pan,
-				playbackRate: nextMono.sfxPitch,
-			});
-
 			this.emit('monoAdded', nextMono);
 			this.emit('fusioned', newX, newY, additionalScore);
+
+			const panV = newX - this.PLAYAREA_MARGIN;
+			const panW = this.GAME_WIDTH - this.PLAYAREA_MARGIN - this.PLAYAREA_MARGIN;
+			const pan = ((panV / panW) - 0.5) * 2;
+			this.emit('sfx', 'fusion', { volume: 1, pan, pitch: nextMono.sfxPitch });
 		} else {
-			//const VELOCITY = 30;
+			// nop
-			//for (let i = 0; i < 10; i++) {
+		}
-			//	const body = createBody(FRUITS.find(x => x.level === (1 + Math.floor(this.rng() * 3)))!, x + ((this.rng() * VELOCITY) - (VELOCITY / 2)), y + ((this.rng() * VELOCITY) - (VELOCITY / 2)));
+	}
-			//	Matter.Composite.add(world, body);
+
-			//	bodies.push(body);
+	private onCollision(event: Matter.IEventCollision<Matter.Engine>) {
-			//}
+		const minCollisionEnergyForSound = 2.5;
-			//sound.playUrl({
+		const maxCollisionEnergyForSound = 9;
-			//	type: 'syuilo/bubble2',
+		const soundPitchMax = 4;
-			//	volume: this.sfxVolume,
+		const soundPitchMin = 0.5;
-			//});
+
+		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 ||
+					x.bodyA.id === bodyB.id ||
+					x.bodyB.id === bodyA.id ||
+					x.bodyB.id === bodyB.id);
+
+			if (shouldFusion) {
+				if (this.activeBodyIds.includes(bodyA.id) && this.activeBodyIds.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 (energy > minCollisionEnergyForSound) {
+					const volume = (Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4;
+					const panV =
+						pairs.bodyA.label === '_wall_' ? bodyB.position.x - this.PLAYAREA_MARGIN :
+						pairs.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;
+					const pitch = soundPitchMin + ((soundPitchMax - soundPitchMin) * (1 - (Math.min(10, energy) / 10)));
+					this.emit('sfx', 'collision', { volume, pan, pitch });
+				}
+			}
 		}
 	}
 
@@ -288,51 +301,10 @@ export class DropAndFusionGame extends EventEmitter<{
 
 	private gameOver() {
 		this.isGameOver = true;
-		if (this.tickRaf) window.cancelAnimationFrame(this.tickRaf);
-		this.tickRaf = null;
 		this.emit('gameOver');
-
-		// TODO: 効果音再生はコンポーネント側の責務なので移動する
-		sound.playUrl('/client-assets/drop-and-fusion/gameover.mp3', {
-			volume: this.sfxVolume,
-		});
 	}
 
-	/** テクスチャをすべてキャッシュする */
+	public start() {
-	private async loadMonoTextures() {
-		async function loadSingleMonoTexture(mono: Mono, game: DropAndFusionGame) {
-			// Matter-js内にキャッシュがある場合はスキップ
-			if (game.render.textures[mono.img]) return;
-			console.log('loading', mono.img);
-
-			let src = mono.img;
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			if (game.monoTextureUrls[mono.img]) {
-				src = game.monoTextureUrls[mono.img];
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			} else if (game.monoTextures[mono.img]) {
-				src = URL.createObjectURL(game.monoTextures[mono.img]);
-				game.monoTextureUrls[mono.img] = src;
-			} else {
-				const res = await fetch(mono.img);
-				const blob = await res.blob();
-				game.monoTextures[mono.img] = blob;
-				src = URL.createObjectURL(blob);
-				game.monoTextureUrls[mono.img] = src;
-			}
-
-			const image = new Image();
-			image.src = src;
-			game.render.textures[mono.img] = image;
-		}
-
-		return Promise.all(this.monoDefinitions.map(x => loadSingleMonoTexture(x, this)));
-	}
-
-	public start(logs?: Log[]) {
-		if (!this.loaded) throw new Error('game is not loaded yet');
-		if (logs) this.replaying = true;
-
 		for (let i = 0; i < this.STOCK_MAX; i++) {
 			this.stock.push({
 				id: this.rng().toString(),
@@ -341,111 +313,20 @@ export class DropAndFusionGame extends EventEmitter<{
 		}
 		this.emit('changeStock', this.stock);
 
-		// TODO: fusion予約状態のアイテムは光らせるなどの演出をすると楽しそう
+		Matter.Events.on(this.engine, 'collisionStart', this.onCollision.bind(this));
-		let fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
-
-		const minCollisionEnergyForSound = 2.5;
-		const maxCollisionEnergyForSound = 9;
-		const soundPitchMax = 4;
-		const soundPitchMin = 0.5;
-
-		Matter.Events.on(this.engine, 'collisionStart', (event) => {
-			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) && !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.activeBodyIds.includes(bodyA.id) && this.activeBodyIds.includes(bodyB.id)) {
-						this.fusion(bodyA, bodyB);
-					} else {
-						fusionReservedPairs.push({ bodyA, bodyB });
-						this.tickCallbackQueue.push({
-							frame: this.frame + 6,
-							callback: () => {
-								fusionReservedPairs = fusionReservedPairs.filter(x => x.bodyA.id !== bodyA.id && x.bodyB.id !== bodyB.id);
-								this.fusion(bodyA, bodyB);
-							},
-						});
-					}
-				} else {
-					const energy = pairs.collision.depth;
-					if (energy > minCollisionEnergyForSound) {
-						// TODO: 効果音再生はコンポーネント側の責務なので移動する
-						const vol = ((Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4) * this.sfxVolume;
-						const pan = ((((bodyA.position.x + bodyB.position.x) / 2) / this.gameWidth) - 0.5) * 2;
-						const pitch = soundPitchMin + ((soundPitchMax - soundPitchMin) * (1 - (Math.min(10, energy) / 10)));
-						sound.playUrl('/client-assets/drop-and-fusion/poi1.mp3', {
-							volume: vol,
-							pan,
-							playbackRate: pitch,
-						});
-					}
-				}
-			}
-		});
-
-		this.comboIntervalId = window.setInterval(() => {
-			if (this.latestFusionedAt < Date.now() - this.COMBO_INTERVAL) {
-				this.combo = 0;
-			}
-		}, 500);
-
-		if (logs) {
-			const playTick = () => {
-				this.frame++;
-				const log = logs.find(x => x.frame === this.frame - 1);
-				if (log) {
-					switch (log.operation) {
-						case 'drop': {
-							this.drop(log.x);
-							break;
-						}
-						case 'hold': {
-							this.hold();
-							break;
-						}
-						case 'surrender': {
-							this.surrender();
-							break;
-						}
-						default:
-							break;
-					}
-				}
-				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);
-
-				if (!this.isGameOver) {
-					this.tickRaf = window.requestAnimationFrame(playTick);
-				}
-			};
-
-			playTick();
-		} else {
-			this.tick();
-		}
 	}
 
 	public getLogs() {
 		return this.logs;
 	}
 
-	private tick() {
+	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();
@@ -454,35 +335,12 @@ export class DropAndFusionGame extends EventEmitter<{
 				return true;
 			}
 		});
+
 		Matter.Engine.update(this.engine, this.TICK_DELTA);
-		if (!this.isGameOver) {
-			this.tickRaf = window.requestAnimationFrame(this.tick);
-		}
-	}
 
-	public async load() {
+		const hasNextTick = !this.isGameOver;
-		await this.loadMonoTextures();
-		this.loaded = true;
-	}
 
-	public setSfxVolume(volume: number) {
+		return hasNextTick;
-		this.sfxVolume = volume;
-	}
-
-	public getTextureImageUrl(mono: Mono) {
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		if (this.monoTextureUrls[mono.img]) {
-			return this.monoTextureUrls[mono.img];
-
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		} else if (this.monoTextures[mono.img]) {
-			// Gameクラス内にキャッシュがある場合はそれを使う
-			const out = URL.createObjectURL(this.monoTextures[mono.img]);
-			this.monoTextureUrls[mono.img] = out;
-			return out;
-		} else {
-			return mono.img;
-		}
 	}
 
 	public getActiveMonos() {
@@ -491,6 +349,7 @@ export class DropAndFusionGame extends EventEmitter<{
 
 	public drop(_x: number) {
 		if (this.isGameOver) return;
+		// TODO: フレームで計算するようにすればリプレイかどうかのチェックは不要になる
 		if (!this.replaying && (Date.now() - this.latestDroppedAt < this.DROP_INTERVAL)) return;
 
 		const head = this.stock.shift()!;
@@ -501,7 +360,7 @@ export class DropAndFusionGame extends EventEmitter<{
 		this.emit('changeStock', this.stock);
 
 		const inputX = Math.round(_x);
-		const x = Math.min(this.gameWidth - 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.size / 2), Math.max(this.PLAYAREA_MARGIN + (head.mono.size / 2), inputX));
 		const body = this.createBody(head.mono, x, 50 + head.mono.size / 2);
 		this.logs.push({
 			frame: this.frame,
@@ -512,15 +371,8 @@ export class DropAndFusionGame extends EventEmitter<{
 		this.activeBodyIds.push(body.id);
 		this.latestDroppedBodyId = body.id;
 		this.latestDroppedAt = Date.now();
-		this.emit('dropped');
+		this.emit('dropped', x);
 		this.emit('monoAdded', head.mono);
-
-		// TODO: 効果音再生はコンポーネント側の責務なので移動する
-		const pan = ((x / this.gameWidth) - 0.5) * 2;
-		sound.playUrl('/client-assets/drop-and-fusion/poi2.mp3', {
-			volume: this.sfxVolume,
-			pan,
-		});
 	}
 
 	public hold() {
@@ -547,17 +399,69 @@ export class DropAndFusionGame extends EventEmitter<{
 			this.emit('changeHolding', this.holding);
 			this.emit('changeStock', this.stock);
 		}
+	}
 
-		sound.playUrl('/client-assets/drop-and-fusion/hold.mp3', {
+	public static serializeLogs(logs: Log[]) {
-			volume: 0.5 * this.sfxVolume,
+		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() {
-		if (this.comboIntervalId) window.clearInterval(this.comboIntervalId);
-		if (this.tickRaf) window.cancelAnimationFrame(this.tickRaf);
-		this.tickRaf = null;
-		Matter.Render.stop(this.render);
 		Matter.World.clear(this.engine.world, false);
 		Matter.Engine.clear(this.engine);
 	}

packages/frontend/src/scripts/sound.ts

@@ -92,14 +92,12 @@ 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();
 	}
 	if (options?.useCache ?? true) {
 		if (cache.has(url)) {
-			if (_DEV_) console.log('use cache');
 			return cache.get(url) as AudioBuffer;
 		}
 	}
@@ -128,7 +126,6 @@ export async function loadAudio(url: string, options?: { useCache?: boolean; })
  */
 export function playMisskeySfx(operationType: OperationType) {
 	const sound = defaultStore.state[`sound_${operationType}`];
-	if (_DEV_) console.log('play', operationType, sound);
 	if (sound.type == null || !canPlay) return;
 
 	canPlay = false;

pnpm-lock.yaml

@@ -697,8 +697,8 @@ importers:
         specifier: 0.24.4
         version: 0.24.4
       '@syuilo/aiscript':
-        specifier: 0.16.0
+        specifier: 0.17.0
-        version: 0.16.0
+        version: 0.17.0
       '@twemoji/parser':
         specifier: 15.0.0
         version: 15.0.0
@@ -7584,8 +7584,8 @@ packages:
     dev: false
     optional: true
 
-  /@syuilo/aiscript@0.16.0:
+  /@syuilo/aiscript@0.17.0:
-    resolution: {integrity: sha512-CXvoWOq6kmOSUQtKv0IEf7Ebfkk5PO1LxAgLqgRRPgssPvDvINCXu/gFNXKdapkFMkmX+Gj8qjemKR1vnUS4ZA==}
+    resolution: {integrity: sha512-3JtQ1rWJHMxQ3153zLCXMUOwrOgjPPYGBl0dPHhR0ohm4tn7okMQRugxMCT0t3YxByemb9FfiM6TUjd0tEGxdA==}
     dependencies:
       seedrandom: 3.0.5
       stringz: 2.1.0