1
0
forked from mirror/misskey

feat: ranking system of bubble game

Resolve #12961
This commit is contained in:
syuilo 2024-01-11 18:13:39 +09:00
parent 762fa6a8d8
commit cf54c2ba47
16 changed files with 391 additions and 10 deletions

1
locales/index.d.ts vendored
View File

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

View File

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

View File

@ -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"`);
}
}

View File

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

View File

@ -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;
}

View File

@ -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 {}

View File

@ -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>;

View File

@ -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,
];

View File

@ -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 {}

View File

@ -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 {

View File

@ -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),
}));
});
}
}

View File

@ -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,
});
});
}
}

View File

@ -679,9 +679,11 @@ function endReplay() {
function exportLog() {
if (!logs) return;
const data = JSON.stringify({
seed: seed,
date: new Date().toISOString(),
logs: logs,
v: game.GAME_VERSION,
m: props.gameMode,
s: seed,
d: new Date().toISOString(),
l: DropAndFusionGame.serializeLogs(logs),
});
copyToClipboard(data);
os.success();
@ -723,8 +725,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 +774,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,
});
@ -859,6 +868,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;

View File

@ -39,6 +39,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.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() }} 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 +85,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 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 +170,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>

View File

@ -32,7 +32,6 @@ type Log = {
operation: 'surrender';
};
// TODO: インスタンスを作り直さなくてもゲームをリスタートできるようにする
export class DropAndFusionGame extends EventEmitter<{
changeScore: (newScore: number) => void;
changeCombo: (newCombo: number) => void;
@ -46,12 +45,14 @@ export class DropAndFusionGame extends EventEmitter<{
}> {
private PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
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
public frame = 0;
public engine: Matter.Engine;
private tickCallbackQueue: { frame: number; callback: () => void; }[] = [];
@ -156,6 +157,10 @@ 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,
@ -209,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);
},
@ -261,7 +266,7 @@ export class DropAndFusionGame extends EventEmitter<{
} 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);
@ -396,6 +401,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);

View File

@ -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();