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

enhance(reversi): tweak reversi

Browse Source
This commit is contained in:
syuilo
2024-01-21 17:08:36 +09:00
parent 6039f27bd5
commit b3cc17ea0d
4 changed files with 153 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
packages/frontend/src/pages/reversi/game.board.vue
View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="600">
<MkSpacer :contentMax="500">
<div :class="$style.root" class="_gaps">
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
<span>({{ i18n.ts._reversi.black }})</span>
@@ -35,53 +35,55 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div :class="$style.board">
<div v-if="showBoardLabels" :class="$style.labelsX">
<span v-for="i in game.map[0].length" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
</div>
<div style="display: flex;">
<div v-if="showBoardLabels" :class="$style.labelsY">
<div v-for="i in game.map.length" :class="$style.labelsYLabel">{{ i }}</div>
<div :class="$style.boardInner">
<div v-if="showBoardLabels" :class="$style.labelsX">
<span v-for="i in game.map[0].length" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
</div>
<div :class="$style.boardCells" :style="cellsStyle">
<div
v-for="(stone, i) in engine.board"
:key="i"
v-tooltip="`${String.fromCharCode(65 + engine.posToXy(i)[0])}${engine.posToXy(i)[1] + 1}`"
:class="[$style.boardCell, {
[$style.boardCell_empty]: stone == null,
[$style.boardCell_none]: engine.map[i] === 'null',
[$style.boardCell_isEnded]: game.isEnded,
[$style.boardCell_myTurn]: !game.isEnded && isMyTurn,
[$style.boardCell_can]: turnUser ? engine.canPut(turnUser.id === blackUser.id, i) : null,
[$style.boardCell_prev]: engine.prevPos === i
}]"
@click="putStone(i)"
>
<Transition
:enterActiveClass="$style.transition_flip_enterActive"
:leaveActiveClass="$style.transition_flip_leaveActive"
:enterFromClass="$style.transition_flip_enterFrom"
:leaveToClass="$style.transition_flip_leaveTo"
mode="default"
<div style="display: flex;">
<div v-if="showBoardLabels" :class="$style.labelsY">
<div v-for="i in game.map.length" :class="$style.labelsYLabel">{{ i }}</div>
</div>
<div :class="$style.boardCells" :style="cellsStyle">
<div
v-for="(stone, i) in engine.board"
:key="i"
v-tooltip="`${String.fromCharCode(65 + engine.posToXy(i)[0])}${engine.posToXy(i)[1] + 1}`"
:class="[$style.boardCell, {
[$style.boardCell_empty]: stone == null,
[$style.boardCell_none]: engine.map[i] === 'null',
[$style.boardCell_isEnded]: game.isEnded,
[$style.boardCell_myTurn]: !game.isEnded && isMyTurn,
[$style.boardCell_can]: turnUser ? engine.canPut(turnUser.id === blackUser.id, i) : null,
[$style.boardCell_prev]: engine.prevPos === i
}]"
@click="putStone(i)"
>
<template v-if="useAvatarAsStone">
<img v-if="stone === true" :class="$style.boardCellStone" :src="blackUser.avatarUrl"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" :src="whiteUser.avatarUrl"/>
</template>
<template v-else>
<img v-if="stone === true" :class="$style.boardCellStone" src="/client-assets/reversi/stone_b.png"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" src="/client-assets/reversi/stone_w.png"/>
</template>
</Transition>
<Transition
:enterActiveClass="$style.transition_flip_enterActive"
:leaveActiveClass="$style.transition_flip_leaveActive"
:enterFromClass="$style.transition_flip_enterFrom"
:leaveToClass="$style.transition_flip_leaveTo"
mode="default"
>
<template v-if="useAvatarAsStone">
<img v-if="stone === true" :class="$style.boardCellStone" :src="blackUser.avatarUrl"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" :src="whiteUser.avatarUrl"/>
</template>
<template v-else>
<img v-if="stone === true" :class="$style.boardCellStone" src="/client-assets/reversi/stone_b.png"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" src="/client-assets/reversi/stone_w.png"/>
</template>
</Transition>
</div>
</div>
<div v-if="showBoardLabels" :class="$style.labelsY">
<div v-for="i in game.map.length" :class="$style.labelsYLabel">{{ i }}</div>
</div>
</div>
<div v-if="showBoardLabels" :class="$style.labelsY">
<div v-for="i in game.map.length" :class="$style.labelsYLabel">{{ i }}</div>
<div v-if="showBoardLabels" :class="$style.labelsX">
<span v-for="i in game.map[0].length" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
</div>
</div>
<div v-if="showBoardLabels" :class="$style.labelsX">
<span v-for="i in game.map[0].length" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
</div>
</div>
<div v-if="game.isEnded" class="_panel _gaps_s" style="padding: 16px;">
@@ -155,6 +157,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
import { userPage } from '@/filters/user.js';
import * as sound from '@/scripts/sound.js';
import * as os from '@/os.js';
import { confetti } from '@/scripts/confetti.js';
const $i = signinRequired();
@@ -329,6 +332,22 @@ function onStreamLog(log: Reversi.Serializer.Log & { id: string | null }) {
function onStreamEnded(x) {
game.value = deepClone(x.game);
if (game.value.winnerId === $i.id) {
confetti({
duration: 1000 * 3,
});
sound.playUrl('/client-assets/reversi/win.mp3', {
volume: 1,
playbackRate: 1,
});
} else {
sound.playUrl('/client-assets/reversi/lose.mp3', {
volume: 1,
playbackRate: 1,
});
}
}
function checkEnd() {
@@ -465,8 +484,27 @@ $gap: 4px;
.board {
width: 100%;
max-width: 500px;
box-sizing: border-box;
margin: 0 auto;
padding: 7px;
background: #8C4F26;
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
border-radius: 12px;
}
.boardInner {
padding: 32px;
background: var(--panel);
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
border-radius: 8px;
}
@container (max-width: 400px) {
.boardInner {
padding: 16px;
}
}
.labelsX {