sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2024-01-28 17:31:32 +09:00
parent 606c88aa6b
commit db7bd0e94e
9 changed files with 127 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/frontend/assets/mahjong/tile-top-h.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
packages/frontend/assets/mahjong/tile-top-v.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
packages/frontend/assets/mahjong/tile-top.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

33
packages/frontend/src/pages/mahjong/room.game.vue
View File

@@ -28,28 +28,28 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.hoTilesContainerOfToimen">
<div :class="$style.hoTilesOfToimen">
<div v-for="tile in engine.getHoTilesOf(Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse)))" :class="$style.hoTile">
<img :src="`/client-assets/mahjong/tiles/${tile}.png`" style="position: absolute; width: 100%;"/>
<XTile :tile="tile" direction="v"/>
</div>
</div>
</div>
<div :class="$style.hoTilesContainerOfKamitya">
<div :class="$style.hoTilesOfKamitya">
<div v-for="tile in engine.getHoTilesOf(Mahjong.Utils.prevHouse(engine.myHouse))" :class="$style.hoTile">
<img :src="`/client-assets/mahjong/tiles/${tile}.png`" style="position: absolute; width: 100%;"/>
<XTile :tile="tile" direction="v"/>
</div>
</div>
</div>
<div :class="$style.hoTilesContainerOfSimotya">
<div :class="$style.hoTilesOfSimotya">
<div v-for="tile in engine.getHoTilesOf(Mahjong.Utils.nextHouse(engine.myHouse))" :class="$style.hoTile">
<img :src="`/client-assets/mahjong/tiles/${tile}.png`" style="position: absolute; width: 100%;"/>
<XTile :tile="tile" direction="v"/>
</div>
</div>
</div>
<div :class="$style.hoTilesContainerOfMe">
<div :class="$style.hoTilesOfMe">
<div v-for="tile in engine.myHoTiles" :class="$style.hoTile">
<img :src="`/client-assets/mahjong/tiles/${tile}.png`" style="position: absolute; width: 100%;"/>
<XTile :tile="tile" direction="v"/>
</div>
</div>
</div>
@@ -69,16 +69,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.huroTilesOfMe">
<div v-for="huro in engine.getHurosOf(engine.myHouse)" style="display: inline-block;">
<div v-if="huro.type === 'pon'">
<img :src="`/client-assets/mahjong/tiles/${huro.tile}.png`"/>
<img :src="`/client-assets/mahjong/tiles/${huro.tile}.png`"/>
<img :src="`/client-assets/mahjong/tiles/${huro.tile}.png`"/>
<XTile :tile="huro.tile" direction="v"/>
<XTile :tile="huro.tile" direction="v"/>
<XTile :tile="huro.tile" direction="v"/>
</div>
</div>
</div>
</div>
<MkButton v-if="engine.state.canPonSource != null" @click="pon">Pon</MkButton>
<MkButton v-if="engine.state.canPonSource != null" @click="skip">Skip pon</MkButton>
<MkButton v-if="isMyTurn && canHora">Hora</MkButton>
<MkButton v-if="engine.state.canRonSource != null" primary gradate @click="ron">Ron</MkButton>
<MkButton v-if="engine.state.canPonSource != null" primary @click="pon">Pon</MkButton>
<MkButton v-if="engine.state.canRonSource != null || engine.state.canPonSource != null" @click="skip">Skip</MkButton>
<MkButton v-if="isMyTurn && canHora">Tsumo</MkButton>
</div>
</template>
@@ -86,6 +87,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, shallowRef, triggerRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import * as Mahjong from 'misskey-mahjong';
import XTile from './tile.vue';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
@@ -190,6 +192,14 @@ function dahai(tile: Mahjong.Common.Tile, ev: MouseEvent) {
});
}
function ron() {
engine.value.op_ron(engine.value.state.canRonSource, engine.value.myHouse);
triggerRef(engine);
props.connection!.send('ron', {
});
}
function pon() {
engine.value.op_pon(engine.value.state.canPonSource, engine.value.myHouse);
triggerRef(engine);
@@ -464,9 +474,6 @@ onUnmounted(() => {
.hoTile {
position: relative;
display: inline-block;
width: 32px;
aspect-ratio: 0.7;
background: #fff;
margin-bottom: -8px;
}

45
packages/frontend/src/pages/mahjong/tile.vue Normal file
View File

@@ -0,0 +1,45 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.root">
<img v-if="direction === 'v'" :src="`/client-assets/mahjong/tile-top-v.png`" :class="$style.bg"/>
<img v-if="direction === 'h'" :src="`/client-assets/mahjong/tile-top-h.png`" :class="$style.bg"/>
<img :src="`/client-assets/mahjong/tiles/${tile}.png`" :class="$style.fg"/>
</div>
</template>
<script lang="ts" setup>
import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, shallowRef, triggerRef, watch } from 'vue';
import * as Mahjong from 'misskey-mahjong';
const props = defineProps<{
tile: Mahjong.Common.Tile;
direction: 'v' | 'h';
}>();
</script>
<style lang="scss" module>
.root {
display: inline-block;
position: relative;
width: 35px;
aspect-ratio: 0.7;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.fg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%;
object-fit: contain;
}
</style>