This commit is contained in:
syuilo
2024-02-11 12:45:50 +09:00
parent c99d55e0cb
commit c47203b888
12 changed files with 1236 additions and 353 deletions

View File

@@ -123,6 +123,33 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<div :class="$style.playersContainer">
<div :class="[$style.playerOfToimen, $style.player]">
<template v-if="users[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))] != null">
<MkAvatar :user="users[Mmj.prevHouse(Mmj.prevHouse(mj.myHouse))]" style="width: 30px; height: 30px;"/>
</template>
<template v-else>
CPU
</template>
</div>
<div :class="[$style.playerOfKamitya, $style.player]">
<template v-if="users[Mmj.prevHouse(mj.myHouse)] != null">
<MkAvatar :user="users[Mmj.prevHouse(mj.myHouse)]" style="width: 30px; height: 30px;"/>
</template>
<template v-else>
CPU
</template>
</div>
<div :class="[$style.playerOfSimotya, $style.player]">
<template v-if="users[Mmj.nextHouse(mj.myHouse)] != null">
<MkAvatar :user="users[Mmj.nextHouse(mj.myHouse)]" style="width: 30px; height: 30px;"/>
</template>
<template v-else>
CPU
</template>
</div>
</div>
<XHandTiles :class="$style.handTilesOfMe" :tiles="mj.myHandTiles" :doras="mj.doras" :selectableTiles="selectableTiles" :separateLast="isMyTurn && iTsumoed" @choose="chooseTile"/>
<div :class="$style.serifContainer">
@@ -292,9 +319,16 @@ const isMyTurn = computed(() => {
});
const canHora = computed(() => {
return Mmj.canHora(mj.value.myHandTileTypes).length;
return Mmj.isAgarikei(mj.value.myHandTileTypes);
});
const users = computed(() => ({
e: houseToUser('e'),
s: houseToUser('s'),
w: houseToUser('w'),
n: houseToUser('n'),
}));
const selectableTiles = ref<Mmj.TileType[] | null>(null);
const ronSerifHouses = reactive<Record<Mmj.House, boolean>>({ e: false, s: false, w: false, n: false });
const ciiSerifHouses = reactive<Record<Mmj.House, boolean>>({ e: false, s: false, w: false, n: false });
@@ -801,7 +835,7 @@ onUnmounted(() => {
position: relative;
width: 100%;
height: 100%;
max-width: 800px;
max-width: 600px;
min-height: 600px;
margin: auto;
box-sizing: border-box;
@@ -947,7 +981,7 @@ onUnmounted(() => {
.handTilesOfToimen {
position: absolute;
top: 0;
left: 80px;
right: 40px;
}
.handTileImgOfToimen {
display: inline-block;
@@ -963,14 +997,14 @@ onUnmounted(() => {
.handTilesOfSimotya {
position: absolute;
top: 80px;
bottom: 80px;
right: 0;
}
.handTilesOfMe {
position: absolute;
bottom: 0;
left: 80px;
left: 0px;
}
.huroTilesOfMe {
@@ -1066,6 +1100,43 @@ onUnmounted(() => {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.playersContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
pointer-events: none;
}
.player {
position: absolute;
margin: auto;
width: 180px;
height: min-content;
padding: 10px;
box-sizing: border-box;
background: #0009;
color: #fff;
border-radius: 5px;
font-size: 90%;
}
.playerOfToimen {
top: 0;
left: 0;
right: 0;
}
.playerOfKamitya {
top: 0;
left: 0;
bottom: 0;
}
.playerOfSimotya {
top: 0;
right: 0;
bottom: 0;
}
.serifContainer {
position: absolute;
top: 0;