enhance(reversi): tweak reversi
This commit is contained in:
parent
6039f27bd5
commit
b3cc17ea0d
4 changed files with 153 additions and 104 deletions
BIN
packages/frontend/assets/reversi/lose.mp3
Normal file
BIN
packages/frontend/assets/reversi/lose.mp3
Normal file
Binary file not shown.
BIN
packages/frontend/assets/reversi/win.mp3
Normal file
BIN
packages/frontend/assets/reversi/win.mp3
Normal file
Binary file not shown.
|
@ -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,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
|
||||
<div :class="$style.board">
|
||||
<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>
|
||||
|
@ -83,6 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<span v-for="i in game.map[0].length" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="game.isEnded" class="_panel _gaps_s" style="padding: 16px;">
|
||||
<div>{{ logPos }} / {{ game.logs.length }}</div>
|
||||
|
@ -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 {
|
||||
|
|
|
@ -8,7 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkSpacer :contentMax="600">
|
||||
<div style="text-align: center;"><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></div>
|
||||
|
||||
<div class="_gaps">
|
||||
<div :class="{ [$style.disallow]: isReady }">
|
||||
<div class="_gaps" :class="{ [$style.disallowInner]: isReady }">
|
||||
<div style="font-size: 1.5em; text-align: center;">{{ i18n.ts._reversi.gameSettings }}</div>
|
||||
|
||||
<div class="_panel">
|
||||
|
@ -75,6 +76,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</MkFolder>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
<template #footer>
|
||||
<div :class="$style.footer">
|
||||
|
@ -123,7 +125,7 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game));
|
||||
const isLlotheo = ref<boolean>(false);
|
||||
|
||||
const mapName = computed(() => {
|
||||
if (game.value.map == null) return 'Random';
|
||||
const found = Object.values(Reversi.maps).find(x => x.data.join('') === game.value.map.join(''));
|
||||
|
@ -236,6 +238,15 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.disallow {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.disallowInner {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.board {
|
||||
display: grid;
|
||||
grid-gap: 4px;
|
||||
|
|
Loading…
Reference in a new issue