diff --git a/packages/frontend/src/pages/drop-and-fusion.vue b/packages/frontend/src/pages/drop-and-fusion.vue index 71d3f0619..a3be442d2 100644 --- a/packages/frontend/src/pages/drop-and-fusion.vue +++ b/packages/frontend/src/pages/drop-and-fusion.vue @@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only :moveClass="$style.transition_stock_move" >
- +
@@ -65,10 +65,10 @@ SPDX-License-Identifier: AGPL-3.0-only :moveClass="$style.transition_picked_move" mode="out-in" > - +
@@ -369,8 +369,8 @@ const PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高い let viewScaleX = 1; let viewScaleY = 1; -const currentPick = shallowRef<{ id: string; fruit: Mono } | null>(null); -const stock = shallowRef<{ id: string; fruit: Mono }[]>([]); +const currentPick = shallowRef<{ id: string; mono: Mono } | null>(null); +const stock = shallowRef<{ id: string; mono: Mono }[]>([]); const score = ref(0); const combo = ref(0); const comboPrev = ref(0); @@ -383,7 +383,7 @@ const highScore = ref(null); class Game extends EventEmitter<{ changeScore: (score: number) => void; changeCombo: (combo: number) => void; - changeStock: (stock: { id: string; fruit: Mono }[]) => void; + changeStock: (stock: { id: string; mono: Mono }[]) => void; dropped: () => void; fusioned: (x: number, y: number, score: number) => void; gameOver: () => void; @@ -409,7 +409,7 @@ class Game extends EventEmitter<{ private latestDroppedAt = 0; private latestFusionedAt = 0; - private stock: { id: string; fruit: Mono }[] = []; + private stock: { id: string; mono: Mono }[] = []; private _combo = 0; private get combo() { @@ -509,11 +509,11 @@ class Game extends EventEmitter<{ }); } - private createBody(fruit: Mono, x: number, y: number) { + private createBody(mono: Mono, x: number, y: number) { const options: Matter.IBodyDefinition = { - label: fruit.id, + label: mono.id, //density: 0.0005, - density: fruit.size / 1000, + density: mono.size / 1000, restitution: 0.2, frictionAir: 0.01, friction: 0.7, @@ -522,16 +522,16 @@ class Game extends EventEmitter<{ //mass: 0, render: { sprite: { - texture: fruit.img, - xScale: (fruit.size / fruit.imgSize) * fruit.spriteScale, - yScale: (fruit.size / fruit.imgSize) * fruit.spriteScale, + texture: mono.img, + xScale: (mono.size / mono.imgSize) * mono.spriteScale, + yScale: (mono.size / mono.imgSize) * mono.spriteScale, }, }, }; - if (fruit.shape === 'circle') { - return Matter.Bodies.circle(x, y, fruit.size / 2, options); - } else if (fruit.shape === 'rectangle') { - return Matter.Bodies.rectangle(x, y, fruit.size, fruit.size, options); + if (mono.shape === 'circle') { + return Matter.Bodies.circle(x, y, mono.size / 2, options); + } else if (mono.shape === 'rectangle') { + return Matter.Bodies.rectangle(x, y, mono.size, mono.size, options); } else { throw new Error('unrecognized shape'); } @@ -553,11 +553,11 @@ class Game extends EventEmitter<{ Matter.Composite.remove(this.engine.world, [bodyA, bodyB]); this.activeBodyIds = this.activeBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id); - const currentFruit = this.monoDefinitions.find(y => y.id === bodyA.label)!; - const nextFruit = this.monoDefinitions.find(x => x.level === currentFruit.level + 1); + const currentMono = this.monoDefinitions.find(y => y.id === bodyA.label)!; + const nextMono = this.monoDefinitions.find(x => x.level === currentMono.level + 1); - if (nextFruit) { - const body = this.createBody(nextFruit, newX, newY); + if (nextMono) { + const body = this.createBody(nextMono, newX, newY); Matter.Composite.add(this.engine.world, body); // 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする @@ -566,11 +566,11 @@ class Game extends EventEmitter<{ }, 100); const comboBonus = 1 + ((this.combo - 1) / 5); - const additionalScore = Math.round(currentFruit.score * comboBonus); + const additionalScore = Math.round(currentMono.score * comboBonus); this.score += additionalScore; const pan = ((newX / GAME_WIDTH) - 0.5) * 2; - sound.playRaw('syuilo/bubble2', 1, pan, nextFruit.sfxPitch); + sound.playRaw('syuilo/bubble2', 1, pan, nextMono.sfxPitch); this.emit('fusioned', newX, newY, additionalScore); } else { @@ -597,7 +597,7 @@ class Game extends EventEmitter<{ for (let i = 0; i < this.STOCK_MAX; i++) { this.stock.push({ id: Math.random().toString(), - fruit: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)], + mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)], }); } this.emit('changeStock', this.stock); @@ -658,12 +658,12 @@ class Game extends EventEmitter<{ const st = this.stock.shift()!; this.stock.push({ id: Math.random().toString(), - fruit: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)], + mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)], }); this.emit('changeStock', this.stock); - const x = Math.min(GAME_WIDTH - this.PLAYAREA_MARGIN - (st.fruit.size / 2), Math.max(this.PLAYAREA_MARGIN + (st.fruit.size / 2), _x)); - const body = this.createBody(st.fruit, x, 50 + st.fruit.size / 2); + const x = Math.min(GAME_WIDTH - this.PLAYAREA_MARGIN - (st.mono.size / 2), Math.max(this.PLAYAREA_MARGIN + (st.mono.size / 2), _x)); + const body = this.createBody(st.mono, x, 50 + st.mono.size / 2); Matter.Composite.add(this.engine.world, body); this.activeBodyIds.push(body.id); this.latestDroppedBodyId = body.id; @@ -970,7 +970,7 @@ definePageMetadata({ user-select: none; } -.currentFruit { +.currentMono { position: absolute; margin-top: 80px; z-index: 2; @@ -991,11 +991,11 @@ definePageMetadata({ user-select: none; } -.currentFruitArrow { +.currentMonoArrow { position: absolute; margin-top: 100px; z-index: 3; - animation: currentFruitArrow 2s ease infinite; + animation: currentMonoArrow 2s ease infinite; pointer-events: none; user-select: none; } @@ -1030,7 +1030,7 @@ definePageMetadata({ } } -@keyframes currentFruitArrow { +@keyframes currentMonoArrow { 0% { transform: translateY(0); } 25% { transform: translateY(-8px); } 50% { transform: translateY(0); }