etc/Sharkey
0
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey synced 2024-11-25 07:25:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2024-01-07 14:32:57 +09:00
parent 1d1780081e
commit c6a4caa8be
1 changed files with 31 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
packages/frontend/src/pages/drop-and-fusion.vue
View file

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