Skip to content
Snippets Groups Projects
Commit c6a4caa8 authored by syuilo's avatar syuilo
Browse files

refactor

parent 1d178008
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/frontend/src/pages/drop-and-fusion.vue
+ 31
− 31
View file @ c6a4caa8
......@@ -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); }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment