wip
This commit is contained in:
syuilo
parent
8121f8f40f
commit
3c97164cf2
12 changed files with 382 additions and 37 deletions
|
|
@ -22,8 +22,7 @@ module.exports = {
|
|||
},
|
||||
],
|
||||
// window の禁止理由: グローバルスコープと衝突し、予期せぬ結果を招くため
|
||||
// e の禁止理由: error や event など、複数のキーワードの頭文字であり分かりにくいため
|
||||
'id-denylist': ['error', 'window', 'e'],
|
||||
'id-denylist': ['error', 'window'],
|
||||
'no-shadow': ['warn'],
|
||||
'vue/attributes-order': ['error', {
|
||||
'alphabetical': false,
|
||||
|
|
|
|||
BIN
packages/frontend/assets/mahjong/cii.png
Normal file
BIN
packages/frontend/assets/mahjong/cii.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
packages/frontend/assets/mahjong/kan.png
Normal file
BIN
packages/frontend/assets/mahjong/kan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
packages/frontend/assets/mahjong/pon.png
Normal file
BIN
packages/frontend/assets/mahjong/pon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 49 KiB |
BIN
packages/frontend/assets/mahjong/tsumo.png
Normal file
BIN
packages/frontend/assets/mahjong/tsumo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
|
|
@ -9,23 +9,31 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.centerPanel">
|
||||
<div style="text-align: center;">
|
||||
<div :class="$style.centerPanelTickerToi">
|
||||
<div style="position: absolute; left: 10px; bottom: 5px;">
|
||||
<span :class="$style.centerPanelHouse">{{ Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse)) === 'e' ? i18n.ts._mahjong.east : Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse)) === 's' ? i18n.ts._mahjong.south : Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse)) === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
|
||||
<span :class="$style.centerPanelPoint">{{ engine.state.points[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.centerPanelTickerKami">
|
||||
<div style="position: absolute; left: 10px; bottom: 5px;">
|
||||
<span :class="$style.centerPanelHouse">{{ Mahjong.Utils.prevHouse(engine.myHouse) === 'e' ? i18n.ts._mahjong.east : Mahjong.Utils.prevHouse(engine.myHouse) === 's' ? i18n.ts._mahjong.south : Mahjong.Utils.prevHouse(engine.myHouse) === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
|
||||
<span :class="$style.centerPanelPoint">{{ engine.state.points[Mahjong.Utils.prevHouse(engine.myHouse)] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.centerPanelTickerSimo">
|
||||
<div style="position: absolute; left: 10px; bottom: 5px;">
|
||||
<span :class="$style.centerPanelHouse">{{ Mahjong.Utils.nextHouse(engine.myHouse) === 'e' ? i18n.ts._mahjong.east : Mahjong.Utils.nextHouse(engine.myHouse) === 's' ? i18n.ts._mahjong.south : Mahjong.Utils.nextHouse(engine.myHouse) === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
|
||||
<span :class="$style.centerPanelPoint">{{ engine.state.points[Mahjong.Utils.nextHouse(engine.myHouse)] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.centerPanelTickerMe">
|
||||
<div style="position: absolute; left: 10px; bottom: 5px;">
|
||||
<span :class="$style.centerPanelHouse">{{ engine.myHouse === 'e' ? i18n.ts._mahjong.east : engine.myHouse === 's' ? i18n.ts._mahjong.south : engine.myHouse === 'w' ? i18n.ts._mahjong.west : i18n.ts._mahjong.north }}</span>
|
||||
<span :class="$style.centerPanelPoint">{{ engine.state.points[engine.myHouse] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="$style.handTilesOfToimen">
|
||||
<div v-for="tile in engine.state.handTiles[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))]" style="display: inline-block;">
|
||||
|
|
@ -49,28 +57,28 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.hoTilesContainerOfToimen">
|
||||
<div :class="$style.hoTilesOfToimen">
|
||||
<div v-for="(tile, i) in engine.state.hoTiles[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))]" :class="$style.hoTile" :style="{ zIndex: engine.state.hoTiles[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))].length - i }">
|
||||
<XTile :tile="tile" variation="2"/>
|
||||
<XTile :tile="tile" variation="2" :doras="engine.doras"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.hoTilesContainerOfKamitya">
|
||||
<div :class="$style.hoTilesOfKamitya">
|
||||
<div v-for="tile in engine.state.hoTiles[Mahjong.Utils.prevHouse(engine.myHouse)]" :class="$style.hoTile">
|
||||
<XTile :tile="tile" variation="4"/>
|
||||
<XTile :tile="tile" variation="4" :doras="engine.doras"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.hoTilesContainerOfSimotya">
|
||||
<div :class="$style.hoTilesOfSimotya">
|
||||
<div v-for="(tile, i) in engine.state.hoTiles[Mahjong.Utils.nextHouse(engine.myHouse)]" :class="$style.hoTile" :style="{ zIndex: engine.state.hoTiles[Mahjong.Utils.nextHouse(engine.myHouse)].length - i }">
|
||||
<XTile :tile="tile" variation="5"/>
|
||||
<XTile :tile="tile" variation="5" :doras="engine.doras"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.hoTilesContainerOfMe">
|
||||
<div :class="$style.hoTilesOfMe">
|
||||
<div v-for="tile in engine.state.hoTiles[engine.myHouse]" :class="$style.hoTile">
|
||||
<XTile :tile="tile" variation="1"/>
|
||||
<XTile :tile="tile" variation="1" :doras="engine.doras"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +87,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.handTilesOfMe">
|
||||
<div
|
||||
v-for="tile in Mahjong.Utils.sortTiles((isMyTurn && iTsumoed) ? engine.myHandTiles.slice(0, engine.myHandTiles.length - 1) : engine.myHandTiles)"
|
||||
:class="[$style.myTile, { [$style.myTileNonSelectable]: selectableTiles != null && !selectableTiles.includes(tile) }]"
|
||||
:class="[$style.myTile, { [$style.myTileNonSelectable]: selectableTiles != null && !selectableTiles.includes(tile), [$style.myTileDora]: engine.doras.includes(tile) }]"
|
||||
@click="chooseTile(tile, $event)"
|
||||
>
|
||||
<img :src="`/client-assets/mahjong/tile-front.png`" :class="$style.myTileBg"/>
|
||||
|
|
@ -88,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div
|
||||
v-if="isMyTurn && iTsumoed"
|
||||
style="display: inline-block; margin-left: 5px;"
|
||||
:class="[$style.myTile, { [$style.myTileNonSelectable]: selectableTiles != null && !selectableTiles.includes(tile) }]"
|
||||
:class="[$style.myTile, { [$style.myTileNonSelectable]: selectableTiles != null && !selectableTiles.includes(engine.myHandTiles.at(-1)), [$style.myTileDora]: engine.doras.includes(engine.myHandTiles.at(-1)) }]"
|
||||
@click="chooseTile(engine.myHandTiles.at(-1), $event)"
|
||||
>
|
||||
<img :src="`/client-assets/mahjong/tile-front.png`" :class="$style.myTileBg"/>
|
||||
|
|
@ -99,23 +107,57 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.huroTilesOfMe">
|
||||
<div v-for="huro in engine.state.huros[engine.myHouse]" style="display: inline-block;">
|
||||
<div v-if="huro.type === 'pon'">
|
||||
<XTile :tile="huro.tile" variation="1"/>
|
||||
<XTile :tile="huro.tile" variation="1"/>
|
||||
<XTile :tile="huro.tile" variation="1"/>
|
||||
<XTile :tile="huro.tile" variation="1" :doras="engine.doras"/>
|
||||
<XTile :tile="huro.tile" variation="1" :doras="engine.doras"/>
|
||||
<XTile :tile="huro.tile" variation="1" :doras="engine.doras"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="$style.serifContainer">
|
||||
<div :class="$style.serifContainerOfToimen">
|
||||
<img v-if="ronSerifHouses[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="ciiSerifHouses[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="ponSerifHouses[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="kanSerifHouses[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="tsumoSerifHouses[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
|
||||
</div>
|
||||
<div :class="$style.serifContainerOfKamitya">
|
||||
<img v-if="ronSerifHouses[Mahjong.Utils.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="ciiSerifHouses[Mahjong.Utils.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="ponSerifHouses[Mahjong.Utils.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="kanSerifHouses[Mahjong.Utils.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="tsumoSerifHouses[Mahjong.Utils.prevHouse(engine.myHouse)]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
|
||||
</div>
|
||||
<div :class="$style.serifContainerOfSimotya">
|
||||
<img v-if="ronSerifHouses[Mahjong.Utils.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="ciiSerifHouses[Mahjong.Utils.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="ponSerifHouses[Mahjong.Utils.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="kanSerifHouses[Mahjong.Utils.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="tsumoSerifHouses[Mahjong.Utils.nextHouse(engine.myHouse)]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
|
||||
</div>
|
||||
<div :class="$style.serifContainerOfMe">
|
||||
<img v-if="ronSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/ron.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="ciiSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/cii.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="ponSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/pon.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="kanSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/kan.png`" style="display: block; width: 100%;"/>
|
||||
<img v-else-if="tsumoSerifHouses[engine.myHouse]" :src="`/client-assets/mahjong/tsumo.png`" style="display: block; width: 100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="$style.actions" class="_buttons">
|
||||
<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" primary gradate @click="hora">Tsumo</MkButton>
|
||||
<MkButton v-if="isMyTurn && engine.canRiichi()" primary @click="riichi">Riichi</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, shallowRef, triggerRef, watch } from 'vue';
|
||||
import { computed, onActivated, onDeactivated, onMounted, onUnmounted, reactive, ref, shallowRef, triggerRef, watch } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import * as Mahjong from 'misskey-mahjong';
|
||||
import XTile from './tile.vue';
|
||||
|
|
@ -152,6 +194,11 @@ const canHora = computed(() => {
|
|||
});
|
||||
|
||||
const selectableTiles = ref<Mahjong.Common.Tile[] | null>(null);
|
||||
const ronSerifHouses = reactive<Record<Mahjong.Common.House, boolean>>({ e: false, s: false, w: false, n: false });
|
||||
const ciiSerifHouses = reactive<Record<Mahjong.Common.House, boolean>>({ e: false, s: false, w: false, n: false });
|
||||
const ponSerifHouses = reactive<Record<Mahjong.Common.House, boolean>>({ e: false, s: false, w: false, n: false });
|
||||
const kanSerifHouses = reactive<Record<Mahjong.Common.House, boolean>>({ e: false, s: false, w: false, n: false });
|
||||
const tsumoSerifHouses = reactive<Record<Mahjong.Common.House, boolean>>({ e: false, s: false, w: false, n: false });
|
||||
|
||||
/*
|
||||
console.log(Mahjong.Utils.getTilesForRiichi([
|
||||
|
|
@ -252,6 +299,7 @@ function riichi() {
|
|||
|
||||
riichiSelect = true;
|
||||
selectableTiles.value = Mahjong.Utils.getTilesForRiichi(engine.value.myHandTiles);
|
||||
console.log(Mahjong.Utils.getTilesForRiichi(engine.value.myHandTiles));
|
||||
}
|
||||
|
||||
function kakan() {
|
||||
|
|
@ -286,12 +334,15 @@ function skip() {
|
|||
}
|
||||
|
||||
const iTsumoed = ref(false);
|
||||
const kyokuEnded = ref(false);
|
||||
|
||||
function kyokuEnd() {
|
||||
kyokuEnded.value = true;
|
||||
}
|
||||
|
||||
function onStreamDahai(log) {
|
||||
console.log('onStreamDahai', log);
|
||||
|
||||
if (log.house === engine.value.myHouse) return;
|
||||
|
||||
sound.playUrl('/client-assets/mahjong/dahai.mp3', {
|
||||
volume: 1,
|
||||
playbackRate: 1,
|
||||
|
|
@ -377,22 +428,29 @@ function onStreamPonned(log) {
|
|||
engine.value.commit_pon(log.caller, log.callee);
|
||||
triggerRef(engine);
|
||||
|
||||
ponSerifHouses[log.house] = true;
|
||||
window.setTimeout(() => {
|
||||
ponSerifHouses[log.house] = false;
|
||||
}, 2000);
|
||||
|
||||
myTurnTimerRmain.value = room.value.timeLimitForEachTurn;
|
||||
}
|
||||
|
||||
function onStreamRonned(log) {
|
||||
console.log('onStreamRonned', log);
|
||||
|
||||
engine.value.commit_ron(log.callers, log.callee);
|
||||
engine.value.commit_ron(log.callers, log.callee, log.handTiles);
|
||||
triggerRef(engine);
|
||||
|
||||
alert('end kyoku');
|
||||
for (const caller of log.callers) {
|
||||
ronSerifHouses[caller] = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onStreamHora(log) {
|
||||
console.log('onStreamHora', log);
|
||||
|
||||
window.alert('end kyoku');
|
||||
tsumoSerifHouses[log.house] = true;
|
||||
}
|
||||
|
||||
function restoreRoom(_room) {
|
||||
|
|
@ -447,6 +505,11 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
@keyframes shine {
|
||||
0% { translate: -30px; }
|
||||
100% { translate: -130px; }
|
||||
}
|
||||
|
||||
.root {
|
||||
background: #3C7A43;
|
||||
background-image: url('/client-assets/mahjong/bg.jpg');
|
||||
|
|
@ -485,26 +548,42 @@ onUnmounted(() => {
|
|||
}
|
||||
.centerPanelTickerToi {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
rotate: 180deg;
|
||||
}
|
||||
.centerPanelTickerKami {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
rotate: 90deg;
|
||||
}
|
||||
.centerPanelTickerSimo {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
rotate: -90deg;
|
||||
}
|
||||
.centerPanelTickerMe {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.centerPanelHouse {
|
||||
font-weight: bold;
|
||||
|
|
@ -618,6 +697,52 @@ onUnmounted(() => {
|
|||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.serifContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
.serifContainerOfKamitya {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
width: 200px;
|
||||
height: min-content;
|
||||
}
|
||||
.serifContainerOfSimotya {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 200px;
|
||||
height: min-content;
|
||||
}
|
||||
.serifContainerOfToimen {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 200px;
|
||||
height: min-content;
|
||||
}
|
||||
.serifContainerOfMe {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 200px;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.sideTile {
|
||||
margin-bottom: -26px;
|
||||
}
|
||||
|
|
@ -644,11 +769,28 @@ onUnmounted(() => {
|
|||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
.myTileDora {
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
width: 200px;
|
||||
height: 8px;
|
||||
rotate: -45deg;
|
||||
translate: -30px;
|
||||
background: #ffffffee;
|
||||
animation: shine 2s infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.myTileBg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
.myTileFg {
|
||||
position: absolute;
|
||||
|
|
@ -657,5 +799,13 @@ onUnmounted(() => {
|
|||
width: 100%;
|
||||
height: 70%;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
right: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,23 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div :class="[$style.root, { [$style.h]: ['3', '4', '5'].includes(variation), [$style.v]: ['1', '2'].includes(variation) }]">
|
||||
<div :class="[$style.root, { [$style.h]: ['3', '4', '5'].includes(variation), [$style.v]: ['1', '2'].includes(variation), [$style.isDora]: isDora }]">
|
||||
<img :src="`/client-assets/mahjong/putted-tile-${variation}.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 { computed } from 'vue';
|
||||
import * as Mahjong from 'misskey-mahjong';
|
||||
|
||||
const props = defineProps<{
|
||||
tile: Mahjong.Common.Tile;
|
||||
variation: string;
|
||||
doras: Mahjong.Common.Tile[];
|
||||
}>();
|
||||
|
||||
const isDora = computed(() => props.doras.includes(props.tile));
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
@keyframes shine {
|
||||
0% { translate: -30px; }
|
||||
100% { translate: -130px; }
|
||||
}
|
||||
|
||||
.root {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -51,4 +59,20 @@ const props = defineProps<{
|
|||
height: 53%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.isDora {
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
width: 200px;
|
||||
height: 8px;
|
||||
rotate: -45deg;
|
||||
translate: -30px;
|
||||
background: #ffffffee;
|
||||
animation: shine 2s infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,43 @@ export type Huro = {
|
|||
from: House | null; // null で加槓
|
||||
};
|
||||
|
||||
export const NEXT_TILE_FOR_DORA_MAP: Record<Tile, Tile> = {
|
||||
m1: 'm2',
|
||||
m2: 'm3',
|
||||
m3: 'm4',
|
||||
m4: 'm5',
|
||||
m5: 'm6',
|
||||
m6: 'm7',
|
||||
m7: 'm8',
|
||||
m8: 'm9',
|
||||
m9: 'm1',
|
||||
p1: 'p2',
|
||||
p2: 'p3',
|
||||
p3: 'p4',
|
||||
p4: 'p5',
|
||||
p5: 'p6',
|
||||
p6: 'p7',
|
||||
p7: 'p8',
|
||||
p8: 'p9',
|
||||
p9: 'p1',
|
||||
s1: 's2',
|
||||
s2: 's3',
|
||||
s3: 's4',
|
||||
s4: 's5',
|
||||
s5: 's6',
|
||||
s6: 's7',
|
||||
s7: 's8',
|
||||
s8: 's9',
|
||||
s9: 's1',
|
||||
e: 's',
|
||||
s: 'w',
|
||||
w: 'n',
|
||||
n: 'e',
|
||||
haku: 'hatsu',
|
||||
hatsu: 'chun',
|
||||
chun: 'haku',
|
||||
};
|
||||
|
||||
export const yakuNames = [
|
||||
'riichi',
|
||||
'ippatsu',
|
||||
|
|
@ -245,3 +282,45 @@ export const YAKU_DEFINITIONS = [{
|
|||
);
|
||||
},
|
||||
}];
|
||||
|
||||
export function fanToPoint(fan: number, isParent: boolean): number {
|
||||
let point;
|
||||
|
||||
if (fan >= 13) {
|
||||
point = 32000;
|
||||
} else if (fan >= 11) {
|
||||
point = 24000;
|
||||
} else if (fan >= 8) {
|
||||
point = 16000;
|
||||
} else if (fan >= 6) {
|
||||
point = 12000;
|
||||
} else if (fan >= 4) {
|
||||
point = 8000;
|
||||
} else if (fan >= 3) {
|
||||
point = 4000;
|
||||
} else if (fan >= 2) {
|
||||
point = 2000;
|
||||
} else {
|
||||
point = 1000;
|
||||
}
|
||||
|
||||
if (isParent) {
|
||||
point *= 1.5;
|
||||
}
|
||||
|
||||
return point;
|
||||
}
|
||||
|
||||
export function calcOwnedDoraCount(handTiles: Tile[], huros: Huro[], doras: Tile[]): number {
|
||||
let count = 0;
|
||||
for (const t of handTiles) {
|
||||
if (doras.includes(t)) count++;
|
||||
}
|
||||
for (const huro of huros) {
|
||||
if (huro.type === 'pon' && doras.includes(huro.tile)) count += 3;
|
||||
if (huro.type === 'cii') count += huro.tiles.filter(t => doras.includes(t)).length;
|
||||
if (huro.type === 'minkan' && doras.includes(huro.tile)) count += 4;
|
||||
if (huro.type === 'ankan' && doras.includes(huro.tile)) count += 4;
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
import CRC32 from 'crc-32';
|
||||
import { Tile, House, Huro, TILE_TYPES, YAKU_DEFINITIONS } from './common.js';
|
||||
import * as Common from './common.js';
|
||||
import * as Utils from './utils.js';
|
||||
import { PlayerState } from './engine.player.js';
|
||||
|
||||
|
|
@ -18,6 +19,8 @@ export type MasterState = {
|
|||
kyoku: number;
|
||||
|
||||
tiles: Tile[];
|
||||
kingTiles: Tile[];
|
||||
activatedDorasCount: number;
|
||||
|
||||
/**
|
||||
* 副露した牌を含まない手牌
|
||||
|
|
@ -112,8 +115,12 @@ export class MasterGameEngine {
|
|||
this.state = state;
|
||||
}
|
||||
|
||||
public get doras(): Tile[] {
|
||||
return this.state.kingTiles.slice(0, this.state.activatedDorasCount).map(t => Utils.nextTileForDora(t));
|
||||
}
|
||||
|
||||
public static createInitialState(): MasterState {
|
||||
const ikasama: Tile[] = ['haku', 'm2', 'm3', 'p5', 'p6', 'p7', 's2', 's3', 's4', 'chun', 'chun', 'chun', 'n', 'n'];
|
||||
const ikasama: Tile[] = ['haku', 'hatsu', 'm3', 'p5', 'p6', 'p7', 's2', 's3', 's4', 'chun', 'chun', 'chun', 'n', 'n'];
|
||||
|
||||
const tiles = [...TILE_TYPES.slice(), ...TILE_TYPES.slice(), ...TILE_TYPES.slice(), ...TILE_TYPES.slice()];
|
||||
tiles.sort(() => Math.random() - 0.5);
|
||||
|
|
@ -128,6 +135,7 @@ export class MasterGameEngine {
|
|||
const sHandTiles = tiles.splice(0, 13);
|
||||
const wHandTiles = tiles.splice(0, 13);
|
||||
const nHandTiles = tiles.splice(0, 13);
|
||||
const kingTiles = tiles.splice(0, 14);
|
||||
|
||||
return {
|
||||
user1House: 'e',
|
||||
|
|
@ -137,6 +145,8 @@ export class MasterGameEngine {
|
|||
round: 'e',
|
||||
kyoku: 1,
|
||||
tiles,
|
||||
kingTiles,
|
||||
activatedDorasCount: 1,
|
||||
handTiles: {
|
||||
e: eHandTiles,
|
||||
s: sHandTiles,
|
||||
|
|
@ -219,6 +229,11 @@ export class MasterGameEngine {
|
|||
newState.points = this.state.points;
|
||||
}
|
||||
|
||||
/**
|
||||
* ロン
|
||||
* @param callers ロンする人
|
||||
* @param callee ロンされる人
|
||||
*/
|
||||
private ron(callers: House[], callee: House) {
|
||||
for (const house of callers) {
|
||||
const yakus = YAKU_DEFINITIONS.filter(yaku => yaku.calc({
|
||||
|
|
@ -229,6 +244,12 @@ export class MasterGameEngine {
|
|||
ronTile: this.state.hoTiles[callee].at(-1)!,
|
||||
riichi: this.state.riichis[house],
|
||||
}));
|
||||
const doraCount = Common.calcOwnedDoraCount(this.state.handTiles[house], this.state.huros[house], this.doras);
|
||||
const fans = yakus.map(yaku => yaku.fan).reduce((a, b) => a + b, 0) + doraCount;
|
||||
const point = Common.fanToPoint(fans, house === 'e');
|
||||
this.state.points[callee] -= point;
|
||||
this.state.points[house] += point;
|
||||
console.log('fans point', fans, point);
|
||||
console.log('yakus', house, yakus);
|
||||
}
|
||||
|
||||
|
|
@ -365,7 +386,42 @@ export class MasterGameEngine {
|
|||
public commit_hora(house: House) {
|
||||
if (this.state.turn !== house) throw new Error('Not your turn');
|
||||
|
||||
const yakus = Utils.getYakus(this.state.handTiles[house], null);
|
||||
const isParent = house === 'e';
|
||||
|
||||
const yakus = YAKU_DEFINITIONS.filter(yaku => yaku.calc({
|
||||
house: house,
|
||||
handTiles: this.state.handTiles[house],
|
||||
huros: this.state.huros[house],
|
||||
tsumoTile: this.state.handTiles[house].at(-1)!,
|
||||
ronTile: null,
|
||||
riichi: this.state.riichis[house],
|
||||
}));
|
||||
const doraCount = Common.calcOwnedDoraCount(this.state.handTiles[house], this.state.huros[house], this.doras);
|
||||
const fans = yakus.map(yaku => yaku.fan).reduce((a, b) => a + b, 0) + doraCount;
|
||||
const point = Common.fanToPoint(fans, isParent);
|
||||
this.state.points[house] += point;
|
||||
if (isParent) {
|
||||
const childPoint = Math.ceil(point / 3);
|
||||
this.state.points.s -= childPoint;
|
||||
this.state.points.w -= childPoint;
|
||||
this.state.points.n -= childPoint;
|
||||
} else {
|
||||
const parentPoint = Math.ceil(point / 2);
|
||||
this.state.points.e -= parentPoint;
|
||||
const otherPoint = Math.ceil(point / 4);
|
||||
if (house === 's') {
|
||||
this.state.points.w -= otherPoint;
|
||||
this.state.points.n -= otherPoint;
|
||||
} else if (house === 'w') {
|
||||
this.state.points.s -= otherPoint;
|
||||
this.state.points.n -= otherPoint;
|
||||
} else if (house === 'n') {
|
||||
this.state.points.s -= otherPoint;
|
||||
this.state.points.w -= otherPoint;
|
||||
}
|
||||
}
|
||||
console.log('fans point', fans, point);
|
||||
console.log('yakus', house, yakus);
|
||||
|
||||
this.endKyoku();
|
||||
}
|
||||
|
|
@ -402,6 +458,8 @@ export class MasterGameEngine {
|
|||
const tile = this.state.hoTiles[kan.callee].pop()!;
|
||||
this.state.huros[kan.caller].push({ type: 'minkan', tile, from: kan.callee });
|
||||
|
||||
this.state.activatedDorasCount++;
|
||||
|
||||
const rinsyan = this.tsumo();
|
||||
|
||||
this.state.turn = kan.caller;
|
||||
|
|
@ -476,6 +534,7 @@ export class MasterGameEngine {
|
|||
round: this.state.round,
|
||||
kyoku: this.state.kyoku,
|
||||
tilesCount: this.state.tiles.length,
|
||||
doraIndicateTiles: this.state.kingTiles.slice(0, this.state.activatedDorasCount),
|
||||
handTiles: {
|
||||
e: house === 'e' ? this.state.handTiles.e : this.state.handTiles.e.map(() => null),
|
||||
s: house === 's' ? this.state.handTiles.s : this.state.handTiles.s.map(() => null),
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
import CRC32 from 'crc-32';
|
||||
import { Tile, House, Huro, TILE_TYPES, YAKU_DEFINITIONS } from './common.js';
|
||||
import * as Common from './common.js';
|
||||
import * as Utils from './utils.js';
|
||||
|
||||
export type PlayerState = {
|
||||
|
|
@ -17,6 +18,7 @@ export type PlayerState = {
|
|||
kyoku: number;
|
||||
|
||||
tilesCount: number;
|
||||
doraIndicateTiles: Tile[];
|
||||
|
||||
/**
|
||||
* 副露した牌を含まない手牌
|
||||
|
|
@ -94,6 +96,10 @@ export class PlayerGameEngine {
|
|||
return this.state.riichis[this.myHouse];
|
||||
}
|
||||
|
||||
public get doras(): Tile[] {
|
||||
return this.state.doraIndicateTiles.map(t => Utils.nextTileForDora(t));
|
||||
}
|
||||
|
||||
public commit_tsumo(house: House, tile: Tile) {
|
||||
console.log('commit_tsumo', this.state.turn, house, tile);
|
||||
this.state.tilesCount--;
|
||||
|
|
@ -161,7 +167,19 @@ export class PlayerGameEngine {
|
|||
|
||||
this.state.canRonSource = null;
|
||||
|
||||
// TODO: ロンした人の手牌情報を貰う必要がある
|
||||
const yakusMap: Record<House, { name: string; fan: number; }[]> = {
|
||||
e: [] as { name: string; fan: number; }[],
|
||||
s: [] as { name: string; fan: number; }[],
|
||||
w: [] as { name: string; fan: number; }[],
|
||||
n: [] as { name: string; fan: number; }[],
|
||||
};
|
||||
|
||||
const doraCountsMap: Record<House, number> = {
|
||||
e: 0,
|
||||
s: 0,
|
||||
w: 0,
|
||||
n: 0,
|
||||
};
|
||||
|
||||
for (const house of callers) {
|
||||
const yakus = YAKU_DEFINITIONS.filter(yaku => yaku.calc({
|
||||
|
|
@ -172,8 +190,20 @@ export class PlayerGameEngine {
|
|||
ronTile: this.state.hoTiles[callee].at(-1)!,
|
||||
riichi: this.state.riichis[house],
|
||||
}));
|
||||
const doraCount = Common.calcOwnedDoraCount(handTiles[house], this.state.huros[house], this.doras);
|
||||
const fans = yakus.map(yaku => yaku.fan).reduce((a, b) => a + b, 0) + doraCount;
|
||||
const point = Common.fanToPoint(fans, house === 'e');
|
||||
this.state.points[callee] -= point;
|
||||
this.state.points[house] += point;
|
||||
yakusMap[house] = yakus.map(yaku => ({ name: yaku.name, fan: yaku.fan }));
|
||||
doraCountsMap[house] = doraCount;
|
||||
console.log('yakus', house, yakus);
|
||||
}
|
||||
|
||||
return {
|
||||
yakusMap,
|
||||
doraCountsMap,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { House, TILE_TYPES, Tile } from './common.js';
|
||||
import { House, NEXT_TILE_FOR_DORA_MAP, TILE_TYPES, Tile } from './common.js';
|
||||
|
||||
export function isTile(tile: string): tile is Tile {
|
||||
return TILE_TYPES.includes(tile as Tile);
|
||||
|
|
@ -242,3 +242,7 @@ export function getTilesForRiichi(handTiles: Tile[]): Tile[] {
|
|||
return horaTiles.length > 0;
|
||||
});
|
||||
}
|
||||
|
||||
export function nextTileForDora(tile: Tile): Tile {
|
||||
return NEXT_TILE_FOR_DORA_MAP[tile];
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue