mirror/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2025-01-15 01:31:14 +09:00
Code Issues Actions 21 Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo 2024-01-31 18:31:02 +09:00
parent 8121f8f40f
commit 3c97164cf2
12 changed files with 382 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/.eslintrc.cjs
View File

@ -22,8 +22,7 @@ module.exports = {
}, },
], ],
// window の禁止理由: グローバルスコープと衝突し、予期せぬ結果を招くため // window の禁止理由: グローバルスコープと衝突し、予期せぬ結果を招くため
// e の禁止理由: error や event など、複数のキーワードの頭文字であり分かりにくいため 'id-denylist': ['error', 'window'],
'id-denylist': ['error', 'window', 'e'],
'no-shadow': ['warn'], 'no-shadow': ['warn'],
'vue/attributes-order': ['error', { 'vue/attributes-order': ['error', {
'alphabetical': false, 'alphabetical': false,

BIN
packages/frontend/assets/mahjong/cii.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
packages/frontend/assets/mahjong/kan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
packages/frontend/assets/mahjong/pon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
packages/frontend/assets/mahjong/ron.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 49 KiB

BIN
packages/frontend/assets/mahjong/tsumo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

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

@ -9,20 +9,28 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.centerPanel"> <div :class="$style.centerPanel">
<div style="text-align: center;"> <div style="text-align: center;">
<div :class="$style.centerPanelTickerToi"> <div :class="$style.centerPanelTickerToi">
<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> <div style="position: absolute; left: 10px; bottom: 5px;">
<span :class="$style.centerPanelPoint">{{ engine.state.points[Mahjong.Utils.prevHouse(Mahjong.Utils.prevHouse(engine.myHouse))] }}</span> <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>
<div :class="$style.centerPanelTickerKami"> <div :class="$style.centerPanelTickerKami">
<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> <div style="position: absolute; left: 10px; bottom: 5px;">
<span :class="$style.centerPanelPoint">{{ engine.state.points[Mahjong.Utils.prevHouse(engine.myHouse)] }}</span> <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>
<div :class="$style.centerPanelTickerSimo"> <div :class="$style.centerPanelTickerSimo">
<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> <div style="position: absolute; left: 10px; bottom: 5px;">
<span :class="$style.centerPanelPoint">{{ engine.state.points[Mahjong.Utils.nextHouse(engine.myHouse)] }}</span> <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>
<div :class="$style.centerPanelTickerMe"> <div :class="$style.centerPanelTickerMe">
<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> <div style="position: absolute; left: 10px; bottom: 5px;">
<span :class="$style.centerPanelPoint">{{ engine.state.points[engine.myHouse] }}</span> <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>
</div> </div>
@ -49,28 +57,28 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.hoTilesContainerOfToimen"> <div :class="$style.hoTilesContainerOfToimen">
<div :class="$style.hoTilesOfToimen"> <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 }"> <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>
</div> </div>
<div :class="$style.hoTilesContainerOfKamitya"> <div :class="$style.hoTilesContainerOfKamitya">
<div :class="$style.hoTilesOfKamitya"> <div :class="$style.hoTilesOfKamitya">
<div v-for="tile in engine.state.hoTiles[Mahjong.Utils.prevHouse(engine.myHouse)]" :class="$style.hoTile"> <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>
</div> </div>
<div :class="$style.hoTilesContainerOfSimotya"> <div :class="$style.hoTilesContainerOfSimotya">
<div :class="$style.hoTilesOfSimotya"> <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 }"> <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>
</div> </div>
<div :class="$style.hoTilesContainerOfMe"> <div :class="$style.hoTilesContainerOfMe">
<div :class="$style.hoTilesOfMe"> <div :class="$style.hoTilesOfMe">
<div v-for="tile in engine.state.hoTiles[engine.myHouse]" :class="$style.hoTile"> <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> </div>
</div> </div>
@ -79,7 +87,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.handTilesOfMe"> <div :class="$style.handTilesOfMe">
<div <div
v-for="tile in Mahjong.Utils.sortTiles((isMyTurn && iTsumoed) ? engine.myHandTiles.slice(0, engine.myHandTiles.length - 1) : engine.myHandTiles)" 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)" @click="chooseTile(tile, $event)"
> >
<img :src="`/client-assets/mahjong/tile-front.png`" :class="$style.myTileBg"/> <img :src="`/client-assets/mahjong/tile-front.png`" :class="$style.myTileBg"/>
@ -88,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div <div
v-if="isMyTurn && iTsumoed" v-if="isMyTurn && iTsumoed"
style="display: inline-block; margin-left: 5px;" 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)" @click="chooseTile(engine.myHandTiles.at(-1), $event)"
> >
<img :src="`/client-assets/mahjong/tile-front.png`" :class="$style.myTileBg"/> <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 :class="$style.huroTilesOfMe">
<div v-for="huro in engine.state.huros[engine.myHouse]" style="display: inline-block;"> <div v-for="huro in engine.state.huros[engine.myHouse]" style="display: inline-block;">
<div v-if="huro.type === 'pon'"> <div v-if="huro.type === 'pon'">
<XTile :tile="huro.tile" variation="1"/> <XTile :tile="huro.tile" variation="1" :doras="engine.doras"/>
<XTile :tile="huro.tile" variation="1"/> <XTile :tile="huro.tile" variation="1" :doras="engine.doras"/>
<XTile :tile="huro.tile" variation="1"/> <XTile :tile="huro.tile" variation="1" :doras="engine.doras"/>
</div> </div>
</div> </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>
<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>
</template> </template>
<script lang="ts" setup> <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 Misskey from 'misskey-js';
import * as Mahjong from 'misskey-mahjong'; import * as Mahjong from 'misskey-mahjong';
import XTile from './tile.vue'; import XTile from './tile.vue';
@ -152,6 +194,11 @@ const canHora = computed(() => {
}); });
const selectableTiles = ref<Mahjong.Common.Tile[] | null>(null); 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([ console.log(Mahjong.Utils.getTilesForRiichi([
@ -252,6 +299,7 @@ function riichi() {
riichiSelect = true; riichiSelect = true;
selectableTiles.value = Mahjong.Utils.getTilesForRiichi(engine.value.myHandTiles); selectableTiles.value = Mahjong.Utils.getTilesForRiichi(engine.value.myHandTiles);
console.log(Mahjong.Utils.getTilesForRiichi(engine.value.myHandTiles));
} }
function kakan() { function kakan() {
@ -286,12 +334,15 @@ function skip() {
} }
const iTsumoed = ref(false); const iTsumoed = ref(false);
const kyokuEnded = ref(false);
function kyokuEnd() {
kyokuEnded.value = true;
}
function onStreamDahai(log) { function onStreamDahai(log) {
console.log('onStreamDahai', log); console.log('onStreamDahai', log);
if (log.house === engine.value.myHouse) return;
sound.playUrl('/client-assets/mahjong/dahai.mp3', { sound.playUrl('/client-assets/mahjong/dahai.mp3', {
volume: 1, volume: 1,
playbackRate: 1, playbackRate: 1,
@ -377,22 +428,29 @@ function onStreamPonned(log) {
engine.value.commit_pon(log.caller, log.callee); engine.value.commit_pon(log.caller, log.callee);
triggerRef(engine); triggerRef(engine);
ponSerifHouses[log.house] = true;
window.setTimeout(() => {
ponSerifHouses[log.house] = false;
}, 2000);
myTurnTimerRmain.value = room.value.timeLimitForEachTurn; myTurnTimerRmain.value = room.value.timeLimitForEachTurn;
} }
function onStreamRonned(log) { function onStreamRonned(log) {
console.log('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); triggerRef(engine);
alert('end kyoku'); for (const caller of log.callers) {
ronSerifHouses[caller] = true;
}
} }
function onStreamHora(log) { function onStreamHora(log) {
console.log('onStreamHora', log); console.log('onStreamHora', log);
window.alert('end kyoku'); tsumoSerifHouses[log.house] = true;
} }
function restoreRoom(_room) { function restoreRoom(_room) {
@ -447,6 +505,11 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@keyframes shine {
0% { translate: -30px; }
100% { translate: -130px; }
}
.root { .root {
background: #3C7A43; background: #3C7A43;
background-image: url('/client-assets/mahjong/bg.jpg'); background-image: url('/client-assets/mahjong/bg.jpg');
@ -485,26 +548,42 @@ onUnmounted(() => {
} }
.centerPanelTickerToi { .centerPanelTickerToi {
position: absolute; position: absolute;
width: 100%;
height: 100%;
top: 0; top: 0;
left: 0;
bottom: 0;
right: 0; right: 0;
rotate: 180deg; rotate: 180deg;
} }
.centerPanelTickerKami { .centerPanelTickerKami {
position: absolute; position: absolute;
width: 100%;
height: 100%;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0;
right: 0;
rotate: 90deg; rotate: 90deg;
} }
.centerPanelTickerSimo { .centerPanelTickerSimo {
position: absolute; position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
rotate: -90deg; rotate: -90deg;
} }
.centerPanelTickerMe { .centerPanelTickerMe {
position: absolute; position: absolute;
bottom: 0; width: 100%;
height: 100%;
top: 0;
left: 0; left: 0;
bottom: 0;
right: 0;
} }
.centerPanelHouse { .centerPanelHouse {
font-weight: bold; font-weight: bold;
@ -618,6 +697,52 @@ onUnmounted(() => {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 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 { .sideTile {
margin-bottom: -26px; margin-bottom: -26px;
} }
@ -644,11 +769,28 @@ onUnmounted(() => {
opacity: 0.7; opacity: 0.7;
pointer-events: none; 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 { .myTileBg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
pointer-events: none;
user-select: none;
} }
.myTileFg { .myTileFg {
position: absolute; position: absolute;
@ -657,5 +799,13 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 70%; height: 70%;
object-fit: contain; object-fit: contain;
pointer-events: none;
user-select: none;
}
.actions {
position: absolute;
bottom: 80px;
right: 50px;
} }
</style> </style>

28
packages/frontend/src/pages/mahjong/tile.vue
View File

@ -4,23 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <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/putted-tile-${variation}.png`" :class="$style.bg"/>
<img :src="`/client-assets/mahjong/tiles/${tile}.png`" :class="$style.fg"/> <img :src="`/client-assets/mahjong/tiles/${tile}.png`" :class="$style.fg"/>
</div> </div>
</template> </template>
<script lang="ts" setup> <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'; import * as Mahjong from 'misskey-mahjong';
const props = defineProps<{ const props = defineProps<{
tile: Mahjong.Common.Tile; tile: Mahjong.Common.Tile;
variation: string; variation: string;
doras: Mahjong.Common.Tile[];
}>(); }>();
const isDora = computed(() => props.doras.includes(props.tile));
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@keyframes shine {
0% { translate: -30px; }
100% { translate: -130px; }
}
.root { .root {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -51,4 +59,20 @@ const props = defineProps<{
height: 53%; height: 53%;
object-fit: contain; 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> </style>

79
packages/misskey-mahjong/src/common.ts
View File

@ -64,6 +64,43 @@ export type Huro = {
from: House | null; // null で加槓 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 = [ export const yakuNames = [
'riichi', 'riichi',
'ippatsu', '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;
}

63
packages/misskey-mahjong/src/engine.master.ts
View File

@ -5,6 +5,7 @@
import CRC32 from 'crc-32'; import CRC32 from 'crc-32';
import { Tile, House, Huro, TILE_TYPES, YAKU_DEFINITIONS } from './common.js'; import { Tile, House, Huro, TILE_TYPES, YAKU_DEFINITIONS } from './common.js';
import * as Common from './common.js';
import * as Utils from './utils.js'; import * as Utils from './utils.js';
import { PlayerState } from './engine.player.js'; import { PlayerState } from './engine.player.js';
@ -18,6 +19,8 @@ export type MasterState = {
kyoku: number; kyoku: number;
tiles: Tile[]; tiles: Tile[];
kingTiles: Tile[];
activatedDorasCount: number;
/** /**
* 副露した牌を含まない手牌 * 副露した牌を含まない手牌
@ -112,8 +115,12 @@ export class MasterGameEngine {
this.state = state; 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 { 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()]; const tiles = [...TILE_TYPES.slice(), ...TILE_TYPES.slice(), ...TILE_TYPES.slice(), ...TILE_TYPES.slice()];
tiles.sort(() => Math.random() - 0.5); tiles.sort(() => Math.random() - 0.5);
@ -128,6 +135,7 @@ export class MasterGameEngine {
const sHandTiles = tiles.splice(0, 13); const sHandTiles = tiles.splice(0, 13);
const wHandTiles = tiles.splice(0, 13); const wHandTiles = tiles.splice(0, 13);
const nHandTiles = tiles.splice(0, 13); const nHandTiles = tiles.splice(0, 13);
const kingTiles = tiles.splice(0, 14);
return { return {
user1House: 'e', user1House: 'e',
@ -137,6 +145,8 @@ export class MasterGameEngine {
round: 'e', round: 'e',
kyoku: 1, kyoku: 1,
tiles, tiles,
kingTiles,
activatedDorasCount: 1,
handTiles: { handTiles: {
e: eHandTiles, e: eHandTiles,
s: sHandTiles, s: sHandTiles,
@ -219,6 +229,11 @@ export class MasterGameEngine {
newState.points = this.state.points; newState.points = this.state.points;
} }
/**
* ロン
* @param callers ロンする人
* @param callee ロンされる人
*/
private ron(callers: House[], callee: House) { private ron(callers: House[], callee: House) {
for (const house of callers) { for (const house of callers) {
const yakus = YAKU_DEFINITIONS.filter(yaku => yaku.calc({ const yakus = YAKU_DEFINITIONS.filter(yaku => yaku.calc({
@ -229,6 +244,12 @@ export class MasterGameEngine {
ronTile: this.state.hoTiles[callee].at(-1)!, ronTile: this.state.hoTiles[callee].at(-1)!,
riichi: this.state.riichis[house], 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); console.log('yakus', house, yakus);
} }
@ -365,7 +386,42 @@ export class MasterGameEngine {
public commit_hora(house: House) { public commit_hora(house: House) {
if (this.state.turn !== house) throw new Error('Not your turn'); 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(); this.endKyoku();
} }
@ -402,6 +458,8 @@ export class MasterGameEngine {
const tile = this.state.hoTiles[kan.callee].pop()!; const tile = this.state.hoTiles[kan.callee].pop()!;
this.state.huros[kan.caller].push({ type: 'minkan', tile, from: kan.callee }); this.state.huros[kan.caller].push({ type: 'minkan', tile, from: kan.callee });
this.state.activatedDorasCount++;
const rinsyan = this.tsumo(); const rinsyan = this.tsumo();
this.state.turn = kan.caller; this.state.turn = kan.caller;
@ -476,6 +534,7 @@ export class MasterGameEngine {
round: this.state.round, round: this.state.round,
kyoku: this.state.kyoku, kyoku: this.state.kyoku,
tilesCount: this.state.tiles.length, tilesCount: this.state.tiles.length,
doraIndicateTiles: this.state.kingTiles.slice(0, this.state.activatedDorasCount),
handTiles: { handTiles: {
e: house === 'e' ? this.state.handTiles.e : this.state.handTiles.e.map(() => null), 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), s: house === 's' ? this.state.handTiles.s : this.state.handTiles.s.map(() => null),

32
packages/misskey-mahjong/src/engine.player.ts
View File

@ -5,6 +5,7 @@
import CRC32 from 'crc-32'; import CRC32 from 'crc-32';
import { Tile, House, Huro, TILE_TYPES, YAKU_DEFINITIONS } from './common.js'; import { Tile, House, Huro, TILE_TYPES, YAKU_DEFINITIONS } from './common.js';
import * as Common from './common.js';
import * as Utils from './utils.js'; import * as Utils from './utils.js';
export type PlayerState = { export type PlayerState = {
@ -17,6 +18,7 @@ export type PlayerState = {
kyoku: number; kyoku: number;
tilesCount: number; tilesCount: number;
doraIndicateTiles: Tile[];
/** /**
* 副露した牌を含まない手牌 * 副露した牌を含まない手牌
@ -94,6 +96,10 @@ export class PlayerGameEngine {
return this.state.riichis[this.myHouse]; 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) { public commit_tsumo(house: House, tile: Tile) {
console.log('commit_tsumo', this.state.turn, house, tile); console.log('commit_tsumo', this.state.turn, house, tile);
this.state.tilesCount--; this.state.tilesCount--;
@ -161,7 +167,19 @@ export class PlayerGameEngine {
this.state.canRonSource = null; 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) { for (const house of callers) {
const yakus = YAKU_DEFINITIONS.filter(yaku => yaku.calc({ const yakus = YAKU_DEFINITIONS.filter(yaku => yaku.calc({
@ -172,8 +190,20 @@ export class PlayerGameEngine {
ronTile: this.state.hoTiles[callee].at(-1)!, ronTile: this.state.hoTiles[callee].at(-1)!,
riichi: this.state.riichis[house], 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); console.log('yakus', house, yakus);
} }
return {
yakusMap,
doraCountsMap,
};
} }
/** /**

6
packages/misskey-mahjong/src/utils.ts
View File

@ -3,7 +3,7 @@
* SPDX-License-Identifier: AGPL-3.0-only * 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 { export function isTile(tile: string): tile is Tile {
return TILE_TYPES.includes(tile as Tile); return TILE_TYPES.includes(tile as Tile);
@ -242,3 +242,7 @@ export function getTilesForRiichi(handTiles: Tile[]): Tile[] {
return horaTiles.length > 0; return horaTiles.length > 0;
}); });
} }
export function nextTileForDora(tile: Tile): Tile {
return NEXT_TILE_FOR_DORA_MAP[tile];
}