From c6a4caa8be576f9ac457bbb218eccb91455148aa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 7 Jan 2024 14:32:57 +0900
Subject: [PATCH] refactor
---
.../frontend/src/pages/drop-and-fusion.vue | 62 +++++++++----------
1 file changed, 31 insertions(+), 31 deletions(-)
diff --git a/packages/frontend/src/pages/drop-and-fusion.vue b/packages/frontend/src/pages/drop-and-fusion.vue
index 71d3f06192..a3be442d21 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"
>
<div v-for="x in stock" :key="x.id" style="display: inline-block;">
- <img :src="x.fruit.img" style="width: 32px;"/>
+ <img :src="x.mono.img" style="width: 32px;"/>
</div>
</TransitionGroup>
</div>
@@ -65,10 +65,10 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass="$style.transition_picked_move"
mode="out-in"
>
- <img v-if="currentPick" :key="currentPick.id" :src="currentPick?.fruit.img" :class="$style.currentFruit" :style="{ top: -(currentPick?.fruit.size / 2) + 'px', left: (mouseX - (currentPick?.fruit.size / 2)) + 'px', width: `${currentPick?.fruit.size}px` }"/>
+ <img v-if="currentPick" :key="currentPick.id" :src="currentPick?.mono.img" :class="$style.currentMono" :style="{ top: -(currentPick?.mono.size / 2) + 'px', left: (mouseX - (currentPick?.mono.size / 2)) + 'px', width: `${currentPick?.mono.size}px` }"/>
</Transition>
<template v-if="dropReady">
- <img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentFruitArrow" :style="{ top: (currentPick?.fruit.size / 2) + 10 + 'px', left: (mouseX - 10) + 'px', width: `20px` }"/>
+ <img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentMonoArrow" :style="{ top: (currentPick?.mono.size / 2) + 10 + 'px', left: (mouseX - 10) + 'px', width: `20px` }"/>
<div :class="$style.dropGuide" :style="{ left: (mouseX - 2) + 'px' }"/>
</template>
<div v-if="gameOver" :class="$style.gameOverLabel">
@@ -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<number | null>(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); }