enhance(drop-and-fusion): refactor and new mode(wip)

This commit is contained in:
syuilo 2024-01-13 18:03:31 +09:00
parent 920888ed2a
commit 4846ab077b
45 changed files with 356 additions and 48 deletions

View file

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

View file

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

View file

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View file

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

View file

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

View file

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View file

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

View file

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View file

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View file

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View file

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View file

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

View file

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

View file

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View file

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 607 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 B

View file

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 91 KiB

View file

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 96 KiB

View file

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

View file

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

View file

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

View file

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

View file

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 92 KiB

View file

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

View file

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

View file

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 59 KiB

View file

@ -90,7 +90,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="isGameOver && !replaying" :class="$style.gameOverLabel"> <div v-if="isGameOver && !replaying" :class="$style.gameOverLabel">
<div class="_gaps_s"> <div class="_gaps_s">
<img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/> <img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/>
<div>SCORE: <MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</div> <div>SCORE: <MkNumber :value="score"/>{{ getScoreUnit(gameMode) }}</div>
<div>MAX CHAIN: <MkNumber :value="maxCombo"/></div> <div>MAX CHAIN: <MkNumber :value="maxCombo"/></div>
<div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b><MkNumber :value="yenTotal ?? score"/></b></div> <div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b><MkNumber :value="yenTotal ?? score"/></b></div>
</div> </div>
@ -127,8 +127,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div style="display: flex;"> <div style="display: flex;">
<div :class="$style.frame" style="flex: 1; margin-right: 10px;"> <div :class="$style.frame" style="flex: 1; margin-right: 10px;">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
<div>SCORE: <b><MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b></div> <div>SCORE: <b><MkNumber :value="score"/>{{ getScoreUnit(gameMode) }}</b></div>
<div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b><b v-else>-</b></div> <div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/>{{ getScoreUnit(gameMode) }}</b><b v-else>-</b></div>
<div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b v-if="yenTotal"><MkNumber :value="yenTotal"/></b><b v-else>-</b></div> <div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b v-if="yenTotal"><MkNumber :value="yenTotal"/></b><b v-else>-</b></div>
</div> </div>
</div> </div>
@ -197,70 +197,70 @@ type FrontendMonoDefinition = {
const NORAML_MONOS: FrontendMonoDefinition[] = [{ const NORAML_MONOS: FrontendMonoDefinition[] = [{
id: '9377076d-c980-4d83-bdaf-175bc58275b7', id: '9377076d-c980-4d83-bdaf-175bc58275b7',
sfxPitch: 0.25, sfxPitch: 0.25,
img: '/client-assets/drop-and-fusion/exploding_head.png', img: '/client-assets/drop-and-fusion/normal_monos/exploding_head.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'be9f38d2-b267-4b1a-b420-904e22e80568', id: 'be9f38d2-b267-4b1a-b420-904e22e80568',
sfxPitch: 0.5, sfxPitch: 0.5,
img: '/client-assets/drop-and-fusion/face_with_symbols_on_mouth.png', img: '/client-assets/drop-and-fusion/normal_monos/face_with_symbols_on_mouth.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'beb30459-b064-4888-926b-f572e4e72e0c', id: 'beb30459-b064-4888-926b-f572e4e72e0c',
sfxPitch: 0.75, sfxPitch: 0.75,
img: '/client-assets/drop-and-fusion/cold_face.png', img: '/client-assets/drop-and-fusion/normal_monos/cold_face.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'feab6426-d9d8-49ae-849c-048cdbb6cdf0', id: 'feab6426-d9d8-49ae-849c-048cdbb6cdf0',
sfxPitch: 1, sfxPitch: 1,
img: '/client-assets/drop-and-fusion/zany_face.png', img: '/client-assets/drop-and-fusion/normal_monos/zany_face.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'd6d8fed6-6d18-4726-81a1-6cf2c974df8a', id: 'd6d8fed6-6d18-4726-81a1-6cf2c974df8a',
sfxPitch: 1.5, sfxPitch: 1.5,
img: '/client-assets/drop-and-fusion/pleading_face.png', img: '/client-assets/drop-and-fusion/normal_monos/pleading_face.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '249c728e-230f-4332-bbbf-281c271c75b2', id: '249c728e-230f-4332-bbbf-281c271c75b2',
sfxPitch: 2, sfxPitch: 2,
img: '/client-assets/drop-and-fusion/face_with_open_mouth.png', img: '/client-assets/drop-and-fusion/normal_monos/face_with_open_mouth.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '23d67613-d484-4a93-b71e-3e81b19d6186', id: '23d67613-d484-4a93-b71e-3e81b19d6186',
sfxPitch: 2.5, sfxPitch: 2.5,
img: '/client-assets/drop-and-fusion/smiling_face_with_sunglasses.png', img: '/client-assets/drop-and-fusion/normal_monos/smiling_face_with_sunglasses.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '3cbd0add-ad7d-4685-bad0-29f6dddc0b99', id: '3cbd0add-ad7d-4685-bad0-29f6dddc0b99',
sfxPitch: 3, sfxPitch: 3,
img: '/client-assets/drop-and-fusion/grinning_squinting_face.png', img: '/client-assets/drop-and-fusion/normal_monos/grinning_squinting_face.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '8f86d4f4-ee02-41bf-ad38-1ce0ae457fb5', id: '8f86d4f4-ee02-41bf-ad38-1ce0ae457fb5',
sfxPitch: 3.5, sfxPitch: 3.5,
img: '/client-assets/drop-and-fusion/smiling_face_with_hearts.png', img: '/client-assets/drop-and-fusion/normal_monos/smiling_face_with_hearts.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '64ec4add-ce39-42b4-96cb-33908f3f118d', id: '64ec4add-ce39-42b4-96cb-33908f3f118d',
sfxPitch: 4, sfxPitch: 4,
img: '/client-assets/drop-and-fusion/heart_suit.png', img: '/client-assets/drop-and-fusion/normal_monos/heart_suit.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
@ -269,70 +269,70 @@ const NORAML_MONOS: FrontendMonoDefinition[] = [{
const YEN_MONOS: FrontendMonoDefinition[] = [{ const YEN_MONOS: FrontendMonoDefinition[] = [{
id: '880f9bd9-802f-4135-a7e1-fd0e0331f726', id: '880f9bd9-802f-4135-a7e1-fd0e0331f726',
sfxPitch: 0.25, sfxPitch: 0.25,
img: '/client-assets/drop-and-fusion/10000yen.png', img: '/client-assets/drop-and-fusion/yen_monos/10000yen.png',
imgSizeX: 512, imgSizeX: 512,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
}, { }, {
id: 'e807beb6-374a-4314-9cc2-aa5f17d96b6b', id: 'e807beb6-374a-4314-9cc2-aa5f17d96b6b',
sfxPitch: 0.5, sfxPitch: 0.5,
img: '/client-assets/drop-and-fusion/5000yen.png', img: '/client-assets/drop-and-fusion/yen_monos/5000yen.png',
imgSizeX: 512, imgSizeX: 512,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
}, { }, {
id: '033445b7-8f90-4fc9-beca-71a9e87cb530', id: '033445b7-8f90-4fc9-beca-71a9e87cb530',
sfxPitch: 0.75, sfxPitch: 0.75,
img: '/client-assets/drop-and-fusion/2000yen.png', img: '/client-assets/drop-and-fusion/yen_monos/2000yen.png',
imgSizeX: 512, imgSizeX: 512,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
}, { }, {
id: '410a09ec-5f7f-46f6-b26f-cbca4ccbd091', id: '410a09ec-5f7f-46f6-b26f-cbca4ccbd091',
sfxPitch: 1, sfxPitch: 1,
img: '/client-assets/drop-and-fusion/1000yen.png', img: '/client-assets/drop-and-fusion/yen_monos/1000yen.png',
imgSizeX: 512, imgSizeX: 512,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
}, { }, {
id: '2aae82bc-3fa4-49ad-a6b5-94d888e809f5', id: '2aae82bc-3fa4-49ad-a6b5-94d888e809f5',
sfxPitch: 1.5, sfxPitch: 1.5,
img: '/client-assets/drop-and-fusion/500yen.png', img: '/client-assets/drop-and-fusion/yen_monos/500yen.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
}, { }, {
id: 'a619bd67-d08f-4cc0-8c7e-c8072a4950cd', id: 'a619bd67-d08f-4cc0-8c7e-c8072a4950cd',
sfxPitch: 2, sfxPitch: 2,
img: '/client-assets/drop-and-fusion/100yen.png', img: '/client-assets/drop-and-fusion/yen_monos/100yen.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
}, { }, {
id: 'c1c5d8e4-17d6-4455-befd-12154d731faa', id: 'c1c5d8e4-17d6-4455-befd-12154d731faa',
sfxPitch: 2.5, sfxPitch: 2.5,
img: '/client-assets/drop-and-fusion/50yen.png', img: '/client-assets/drop-and-fusion/yen_monos/50yen.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
}, { }, {
id: '7082648c-e428-44c4-887a-25c07a8ebdd5', id: '7082648c-e428-44c4-887a-25c07a8ebdd5',
sfxPitch: 3, sfxPitch: 3,
img: '/client-assets/drop-and-fusion/10yen.png', img: '/client-assets/drop-and-fusion/yen_monos/10yen.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
}, { }, {
id: '0d8d40d5-e6e0-4d26-8a95-b8d842363379', id: '0d8d40d5-e6e0-4d26-8a95-b8d842363379',
sfxPitch: 3.5, sfxPitch: 3.5,
img: '/client-assets/drop-and-fusion/5yen.png', img: '/client-assets/drop-and-fusion/yen_monos/5yen.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
}, { }, {
id: '9dec1b38-d99d-40de-8288-37367b983d0d', id: '9dec1b38-d99d-40de-8288-37367b983d0d',
sfxPitch: 4, sfxPitch: 4,
img: '/client-assets/drop-and-fusion/1yen.png', img: '/client-assets/drop-and-fusion/yen_monos/1yen.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 0.97, spriteScale: 0.97,
@ -341,77 +341,149 @@ const YEN_MONOS: FrontendMonoDefinition[] = [{
const SQUARE_MONOS: FrontendMonoDefinition[] = [{ const SQUARE_MONOS: FrontendMonoDefinition[] = [{
id: 'f75fd0ba-d3d4-40a4-9712-b470e45b0525', id: 'f75fd0ba-d3d4-40a4-9712-b470e45b0525',
sfxPitch: 0.25, sfxPitch: 0.25,
img: '/client-assets/drop-and-fusion/keycap_10.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_10.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '7b70f4af-1c01-45fd-af72-61b1f01e03d1', id: '7b70f4af-1c01-45fd-af72-61b1f01e03d1',
sfxPitch: 0.5, sfxPitch: 0.5,
img: '/client-assets/drop-and-fusion/keycap_9.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_9.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '41607ef3-b6d6-4829-95b6-3737bf8bb956', id: '41607ef3-b6d6-4829-95b6-3737bf8bb956',
sfxPitch: 0.75, sfxPitch: 0.75,
img: '/client-assets/drop-and-fusion/keycap_8.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_8.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '8a8310d2-0374-460f-bb50-ca9cd3ee3416', id: '8a8310d2-0374-460f-bb50-ca9cd3ee3416',
sfxPitch: 1, sfxPitch: 1,
img: '/client-assets/drop-and-fusion/keycap_7.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_7.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '1092e069-fe1a-450b-be97-b5d477ec398c', id: '1092e069-fe1a-450b-be97-b5d477ec398c',
sfxPitch: 1.5, sfxPitch: 1.5,
img: '/client-assets/drop-and-fusion/keycap_6.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_6.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '2294734d-7bb8-4781-bb7b-ef3820abf3d0', id: '2294734d-7bb8-4781-bb7b-ef3820abf3d0',
sfxPitch: 2, sfxPitch: 2,
img: '/client-assets/drop-and-fusion/keycap_5.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_5.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'ea8a61af-e350-45f7-ba6a-366fcd65692a', id: 'ea8a61af-e350-45f7-ba6a-366fcd65692a',
sfxPitch: 2.5, sfxPitch: 2.5,
img: '/client-assets/drop-and-fusion/keycap_4.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_4.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'd0c74815-fc1c-4fbe-9953-c92e4b20f919', id: 'd0c74815-fc1c-4fbe-9953-c92e4b20f919',
sfxPitch: 3, sfxPitch: 3,
img: '/client-assets/drop-and-fusion/keycap_3.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_3.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'd8fbd70e-611d-402d-87da-1a7fd8cd2c8d', id: 'd8fbd70e-611d-402d-87da-1a7fd8cd2c8d',
sfxPitch: 3.5, sfxPitch: 3.5,
img: '/client-assets/drop-and-fusion/keycap_2.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_2.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '35e476ee-44bd-4711-ad42-87be245d3efd', id: '35e476ee-44bd-4711-ad42-87be245d3efd',
sfxPitch: 4, sfxPitch: 4,
img: '/client-assets/drop-and-fusion/keycap_1.png', img: '/client-assets/drop-and-fusion/square_monos/keycap_1.png',
imgSizeX: 256, imgSizeX: 256,
imgSizeY: 256, imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}]; }];
const SWEETS_MONOS: FrontendMonoDefinition[] = [{
id: '77f724c0-88be-4aeb-8e1a-a00ed18e3844',
sfxPitch: 0.25,
img: '/client-assets/drop-and-fusion/sweets_monos/shortcake_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}, {
id: 'f3468ef4-2e1e-4906-8795-f147f39f7e1f',
sfxPitch: 0.5,
img: '/client-assets/drop-and-fusion/sweets_monos/pancakes_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}, {
id: 'bcb41129-6f2d-44ee-89d3-86eb2df564ba',
sfxPitch: 0.75,
img: '/client-assets/drop-and-fusion/sweets_monos/shaved_ice_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}, {
id: 'f058e1ad-1981-409b-b3a7-302de0a43744',
sfxPitch: 1,
img: '/client-assets/drop-and-fusion/sweets_monos/soft_ice_cream_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}, {
id: 'd22cfe38-5a3b-4b9c-a1a6-907930a3d732',
sfxPitch: 1.5,
img: '/client-assets/drop-and-fusion/sweets_monos/doughnut_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}, {
id: '79867083-a073-427e-ae82-07a70d9f3b4f',
sfxPitch: 2,
img: '/client-assets/drop-and-fusion/sweets_monos/custard_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}, {
id: '2e152a12-a567-4100-b4d4-d15d81ba47b1',
sfxPitch: 2.5,
img: '/client-assets/drop-and-fusion/sweets_monos/chocolate_bar_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}, {
id: '12250376-2258-4716-8eec-b3a7239461fc',
sfxPitch: 3,
img: '/client-assets/drop-and-fusion/sweets_monos/lollipop_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}, {
id: '4d4f2668-4be7-44a3-aa3a-856df6e25aa6',
sfxPitch: 3.5,
img: '/client-assets/drop-and-fusion/sweets_monos/candy_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}, {
id: 'c9984b40-4045-44c3-b260-d47b7b4625b2',
sfxPitch: 4,
img: '/client-assets/drop-and-fusion/sweets_monos/cookie_color.svg',
imgSizeX: 32,
imgSizeY: 32,
spriteScale: 1.12,
}];
const props = defineProps<{ const props = defineProps<{
gameMode: 'normal' | 'square' | 'yen'; gameMode: 'normal' | 'square' | 'yen' | 'sweets';
mute: boolean; mute: boolean;
}>(); }>();
@ -423,9 +495,18 @@ const monoDefinitions = computed(() => {
return props.gameMode === 'normal' ? NORAML_MONOS : return props.gameMode === 'normal' ? NORAML_MONOS :
props.gameMode === 'square' ? SQUARE_MONOS : props.gameMode === 'square' ? SQUARE_MONOS :
props.gameMode === 'yen' ? YEN_MONOS : props.gameMode === 'yen' ? YEN_MONOS :
props.gameMode === 'sweets' ? SWEETS_MONOS :
[] as never; [] as never;
}); });
function getScoreUnit(gameMode: string) {
return gameMode === 'normal' ? 'pt' :
gameMode === 'square' ? 'pt' :
gameMode === 'yen' ? '円' :
gameMode === 'sweets' ? 'kcal' :
'' as never;
}
function getMonoRenderOptions(mono: Mono) { function getMonoRenderOptions(mono: Mono) {
const def = monoDefinitions.value.find(x => x.id === mono.id)!; const def = monoDefinitions.value.find(x => x.id === mono.id)!;
return { return {
@ -783,7 +864,7 @@ function getGameImageDriveFile() {
ctx.fillStyle = '#000'; ctx.fillStyle = '#000';
ctx.font = '16px bold sans-serif'; ctx.font = '16px bold sans-serif';
ctx.textBaseline = 'top'; ctx.textBaseline = 'top';
ctx.fillText(`SCORE: ${score.value.toLocaleString()}${props.gameMode === 'yen' ? '円' : 'pt'}`, 10, 10); ctx.fillText(`SCORE: ${score.value.toLocaleString()}${getScoreUnit(props.gameMode)}`, 10, 10);
ctx.globalAlpha = 0.7; 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.drawImage(logo, game.GAME_WIDTH * 0.55, 6, game.GAME_WIDTH * 0.45, game.GAME_WIDTH * 0.45 * (logo.height / logo.width));
@ -824,7 +905,7 @@ async function share() {
if (!file) return; if (!file) return;
os.post({ os.post({
initialText: `#BubbleGame (${props.gameMode}) initialText: `#BubbleGame (${props.gameMode})
SCORE: ${score.value.toLocaleString()}${props.gameMode === 'yen' ? '円' : 'pt'}`, SCORE: ${score.value.toLocaleString()}${getScoreUnit(props.gameMode)}`,
initialFiles: [file], initialFiles: [file],
instant: true, instant: true,
}); });
@ -897,8 +978,9 @@ function attachGameEvents() {
const rect = canvasEl.value.getBoundingClientRect(); const rect = canvasEl.value.getBoundingClientRect();
const domX = rect.left + (x * viewScale); const domX = rect.left + (x * viewScale);
const domY = rect.top + (y * viewScale); const domY = rect.top + (y * viewScale);
const scoreUnit = getScoreUnit(props.gameMode);
os.popup(MkRippleEffect, { x: domX, y: domY }, {}, 'end'); os.popup(MkRippleEffect, { x: domX, y: domY }, {}, 'end');
os.popup(MkPlusOneEffect, { x: domX, y: domY, value: scoreDelta + (props.gameMode === 'yen' ? '円' : '') }, {}, 'end'); os.popup(MkPlusOneEffect, { x: domX, y: domY, value: scoreDelta + (scoreUnit === 'pt' ? '' : scoreUnit) }, {}, 'end');
if (nextMono) { if (nextMono) {
const def = monoDefinitions.value.find(x => x.id === nextMono.id)!; const def = monoDefinitions.value.find(x => x.id === nextMono.id)!;
@ -1064,6 +1146,23 @@ onMounted(async () => {
} }
} }
/*
const getVerticesFromSvg = async (path: string) => {
const svgDoc = await fetch(path)
.then((response) => response.text())
.then((svgString) => {
const parser = new DOMParser();
return parser.parseFromString(svgString, 'image/svg+xml');
});
const pathDatas = svgDoc.querySelectorAll('path');
if (!pathDatas) return;
const vertices = Array.from(pathDatas).map((pathData) => {
return Matter.Svg.pathToVertices(pathData);
});
return vertices;
};
*/
await start(); await start();
const bgmBuffer = await sound.loadAudio('/client-assets/drop-and-fusion/bgm_1.mp3'); const bgmBuffer = await sound.loadAudio('/client-assets/drop-and-fusion/bgm_1.mp3');

View file

@ -27,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="normal">NORMAL</option> <option value="normal">NORMAL</option>
<option value="square">SQUARE</option> <option value="square">SQUARE</option>
<option value="yen">YEN</option> <option value="yen">YEN</option>
<!--<option value="sweets">SWEETS</option>-->
</MkSelect> </MkSelect>
<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton> <MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
</div> </div>
@ -48,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord"> <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"/> <MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/>
<MkUserName :user="r.user" :nowrap="true"/> <MkUserName :user="r.user" :nowrap="true"/>
<b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ gameMode === 'yen' ? '円' : 'pt' }}</b> <b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ getScoreUnit(gameMode) }}</b>
</div> </div>
</div> </div>
<div v-else>{{ i18n.ts.loading }}</div> <div v-else>{{ i18n.ts.loading }}</div>
@ -84,7 +85,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import XGame from './drop-and-fusion.game.vue'; import XGame from './drop-and-fusion.game.vue';
import { definePageMetadata } from '@/scripts/page-metadata.js'; import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
@ -93,7 +94,7 @@ import MkSelect from '@/components/MkSelect.vue';
import MkSwitch from '@/components/MkSwitch.vue'; import MkSwitch from '@/components/MkSwitch.vue';
import { misskeyApiGet } from '@/scripts/misskey-api.js'; import { misskeyApiGet } from '@/scripts/misskey-api.js';
const gameMode = ref<'normal' | 'square' | 'yen'>('normal'); const gameMode = ref<'normal' | 'square' | 'yen' | 'sweets'>('normal');
const gameStarted = ref(false); const gameStarted = ref(false);
const mute = ref(false); const mute = ref(false);
const ranking = ref(null); const ranking = ref(null);
@ -102,6 +103,14 @@ watch(gameMode, async () => {
ranking.value = await misskeyApiGet('bubble-game/ranking', { gameMode: gameMode.value }); ranking.value = await misskeyApiGet('bubble-game/ranking', { gameMode: gameMode.value });
}, { immediate: true }); }, { immediate: true });
function getScoreUnit(gameMode: string) {
return gameMode === 'normal' ? 'pt' :
gameMode === 'square' ? 'pt' :
gameMode === 'yen' ? '円' :
gameMode === 'sweets' ? 'kcal' :
'' as never;
}
async function start() { async function start() {
gameStarted.value = true; gameStarted.value = true;
} }

View file

@ -12,7 +12,8 @@ export type Mono = {
level: number; level: number;
sizeX: number; sizeX: number;
sizeY: number; sizeY: number;
shape: 'circle' | 'rectangle'; shape: 'circle' | 'rectangle' | 'custom';
vertices?: Matter.Vector[][];
score: number; score: number;
dropCandidate: boolean; dropCandidate: boolean;
}; };
@ -279,6 +280,202 @@ const SQUARE_MONOS: Mono[] = [{
dropCandidate: true, dropCandidate: true,
}]; }];
const SWEETS_BASE_SIZE = 30;
// TODO: custom shape vertices
const SWEETS_MONOS: Mono[] = [{
id: '77f724c0-88be-4aeb-8e1a-a00ed18e3844',
level: 10,
sizeX: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 512,
dropCandidate: false,
}, {
id: 'f3468ef4-2e1e-4906-8795-f147f39f7e1f',
level: 9,
sizeX: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 256,
dropCandidate: false,
}, {
id: 'bcb41129-6f2d-44ee-89d3-86eb2df564ba',
level: 8,
sizeX: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 128,
dropCandidate: false,
}, {
id: 'f058e1ad-1981-409b-b3a7-302de0a43744',
level: 7,
sizeX: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 64,
dropCandidate: false,
}, {
id: 'd22cfe38-5a3b-4b9c-a1a6-907930a3d732',
level: 6,
sizeX: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 32,
dropCandidate: false,
}, {
id: '79867083-a073-427e-ae82-07a70d9f3b4f',
level: 5,
sizeX: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'custom',
vertices: [
[
{
'x': 8,
'y': 15,
},
{
'x': 24,
'y': 15,
},
{
'x': 26,
'y': 26,
},
{
'x': 30,
'y': 26,
},
{
'x': 24.7,
'y': 30,
},
{
'x': 7.34,
'y': 30,
},
{
'x': 2,
'y': 26,
},
{
'x': 6,
'y': 26,
},
],
],
score: 16,
dropCandidate: true,
}, {
id: '2e152a12-a567-4100-b4d4-d15d81ba47b1',
level: 4,
sizeX: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25,
sizeY: SWEETS_BASE_SIZE * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 8,
dropCandidate: true,
}, {
id: '12250376-2258-4716-8eec-b3a7239461fc',
level: 3,
sizeX: SWEETS_BASE_SIZE * 1.25 * 1.25,
sizeY: SWEETS_BASE_SIZE * 1.25 * 1.25,
shape: 'circle',
score: 4,
dropCandidate: true,
}, {
id: '4d4f2668-4be7-44a3-aa3a-856df6e25aa6',
level: 2,
sizeX: SWEETS_BASE_SIZE * 1.25,
sizeY: SWEETS_BASE_SIZE * 1.25,
shape: 'custom',
vertices: [
[
{
'x': 12,
'y': 1.9180000000000001,
},
{
'x': 4,
'y': 4,
},
{
'x': 2.016,
'y': 12,
},
{
'x': 6,
'y': 13.375,
},
{
'x': 6,
'y': 18,
},
{
'x': 8,
'y': 22,
},
{
'x': 12,
'y': 25.372,
},
{
'x': 16.008,
'y': 26,
},
{
'x': 19,
'y': 25.372,
},
{
'x': 20,
'y': 30,
},
{
'x': 28,
'y': 27,
},
{
'x': 30,
'y': 20,
},
{
'x': 25.473,
'y': 19,
},
{
'x': 26,
'y': 15,
},
{
'x': 24,
'y': 10,
},
{
'x': 20,
'y': 7,
},
{
'x': 16.008,
'y': 6,
},
{
'x': 13,
'y': 6,
},
],
],
score: 2,
dropCandidate: true,
}, {
id: 'c9984b40-4045-44c3-b260-d47b7b4625b2',
level: 1,
sizeX: SWEETS_BASE_SIZE,
sizeY: SWEETS_BASE_SIZE,
shape: 'circle',
score: 1,
dropCandidate: true,
}];
export class DropAndFusionGame extends EventEmitter<{ export class DropAndFusionGame extends EventEmitter<{
changeScore: (newScore: number) => void; changeScore: (newScore: number) => void;
changeCombo: (newCombo: number) => void; changeCombo: (newCombo: number) => void;
@ -305,7 +502,7 @@ export class DropAndFusionGame extends EventEmitter<{
private tickCallbackQueue: { frame: number; callback: () => void; }[] = []; private tickCallbackQueue: { frame: number; callback: () => void; }[] = [];
private overflowCollider: Matter.Body; private overflowCollider: Matter.Body;
private isGameOver = false; private isGameOver = false;
private gameMode: 'normal' | 'yen' | 'square'; private gameMode: 'normal' | 'yen' | 'square' | 'sweets';
private rng: () => number; private rng: () => number;
private logs: Log[] = []; private logs: Log[] = [];
@ -329,12 +526,10 @@ export class DropAndFusionGame extends EventEmitter<{
private get monoDefinitions() { private get monoDefinitions() {
switch (this.gameMode) { switch (this.gameMode) {
case 'normal': case 'normal': return NORAML_MONOS;
return NORAML_MONOS; case 'yen': return YEN_MONOS;
case 'yen': case 'square': return SQUARE_MONOS;
return YEN_MONOS; case 'sweets': return SWEETS_MONOS;
case 'square':
return SQUARE_MONOS;
} }
} }
@ -449,6 +644,11 @@ export class DropAndFusionGame extends EventEmitter<{
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
} else if (mono.shape === 'rectangle') { } else if (mono.shape === 'rectangle') {
return Matter.Bodies.rectangle(x, y, mono.sizeX, mono.sizeY, options); return Matter.Bodies.rectangle(x, y, mono.sizeX, mono.sizeY, options);
} else if (mono.shape === 'custom') {
return Matter.Bodies.fromVertices(x, y, mono.vertices!.map(i => i.map(j => ({
x: (j.x / 32) * mono.sizeX,
y: (j.y / 32) * mono.sizeY,
}))), options);
} else { } else {
throw new Error('unrecognized shape'); throw new Error('unrecognized shape');
} }