monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

enhance(frontend): tweak game

Browse source
This commit is contained in:
syuilo 2024-01-07 16:03:23 +09:00
parent c6a4caa8be
commit e6022c0d51
2 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
packages/frontend/assets/drop-and-fusion/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 144 KiB

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

@ -7,14 +7,24 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader/></template> <template #header><MkPageHeader/></template>
<MkSpacer :contentMax="800"> <MkSpacer :contentMax="800">
<div v-show="!gameStarted" class="_gaps_s" :class="$style.root"> <div v-show="!gameStarted" :class="$style.root">
<div style="text-align: center;"> <div style="text-align: center;" class="_gaps">
<div>{{ i18n.ts.bubbleGame }}</div> <div :class="$style.frame">
<MkSelect v-model="gameMode"> <div :class="$style.frameInner">
<option value="normal">NORMAL</option> <img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
<option value="square">SQUARE</option> </div>
</MkSelect> </div>
<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton> <div :class="$style.frame">
<div :class="$style.frameInner">
<div class="_gaps" style="padding: 16px;">
<MkSelect v-model="gameMode">
<option value="normal">NORMAL</option>
<option value="square">SQUARE</option>
</MkSelect>
<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div v-show="gameStarted" class="_gaps_s" :class="$style.root"> <div v-show="gameStarted" class="_gaps_s" :class="$style.root">
@ -102,7 +112,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup> <script lang="ts" setup>
import * as Matter from 'matter-js'; import * as Matter from 'matter-js';
import { Ref, onMounted, ref, shallowRef } from 'vue'; import { onMounted, ref, shallowRef } from 'vue';
import { EventEmitter } from 'eventemitter3'; import { EventEmitter } from 'eventemitter3';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { definePageMetadata } from '@/scripts/page-metadata.js'; import { definePageMetadata } from '@/scripts/page-metadata.js';
@ -685,7 +695,7 @@ class Game extends EventEmitter<{
let game: Game; let game: Game;
function onClick(ev: MouseEvent) { function onClick(ev: MouseEvent) {
const rect = containerEl.value.getBoundingClientRect(); const rect = containerEl.value!.getBoundingClientRect();
const x = (ev.clientX - rect.left) / viewScaleX; const x = (ev.clientX - rect.left) / viewScaleX;
@ -693,7 +703,7 @@ function onClick(ev: MouseEvent) {
} }
function onTouchend(ev: TouchEvent) { function onTouchend(ev: TouchEvent) {
const rect = containerEl.value.getBoundingClientRect(); const rect = containerEl.value!.getBoundingClientRect();
const x = (ev.changedTouches[0].clientX - rect.left) / viewScaleX; const x = (ev.changedTouches[0].clientX - rect.left) / viewScaleX;
@ -701,11 +711,11 @@ function onTouchend(ev: TouchEvent) {
} }
function onMousemove(ev: MouseEvent) { function onMousemove(ev: MouseEvent) {
mouseX.value = ev.clientX - containerEl.value.getBoundingClientRect().left; mouseX.value = ev.clientX - containerEl.value!.getBoundingClientRect().left;
} }
function onTouchmove(ev: TouchEvent) { function onTouchmove(ev: TouchEvent) {
mouseX.value = ev.touches[0].clientX - containerEl.value.getBoundingClientRect().left; mouseX.value = ev.touches[0].clientX - containerEl.value!.getBoundingClientRect().left;
} }
function restart() { function restart() {