128 lines
3.2 KiB
Vue
128 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import goStore from '~/netcode';
|
|
import type { Player } from '~/netcode/Player';
|
|
import { playSound } from '~/helpers/audioHelpers';
|
|
|
|
const current_players = computed<Array<Player>>(() => Array.from(goStore.current_game?.players ?? []).filter(p => p.team === goStore.current_game?.current_turn))
|
|
|
|
watch(
|
|
() => goStore.current_game?.current_turn?.uuid,
|
|
() => {
|
|
if (goStore.current_game?.current_turn?.uuid == goStore.self?.team?.uuid) {
|
|
playSound('/sounds/ding.mp3')
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => goStore.current_game?.losers,
|
|
() => {
|
|
if (goStore.self?.uuid && goStore.current_game?.losers && goStore.current_game.losers.includes(goStore.self.uuid)) {
|
|
showLoserScreen()
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => goStore.current_game?.ended,
|
|
() => {
|
|
if (goStore.current_game?.ended && goStore.self?.uuid && goStore.current_game?.losers && !goStore.current_game.losers.includes(goStore.self.uuid)) {
|
|
showWinnerScreen()
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => goStore.current_game?.players,
|
|
(newList, oldList) => {
|
|
if (!oldList || !newList) { return }
|
|
if (goStore.current_game?.started) { return }
|
|
if (newList?.length > oldList.length) {
|
|
playSound('/sounds/teleport.mp3')
|
|
}
|
|
|
|
})
|
|
|
|
const showResults = ref(false)
|
|
const isWinner = ref(false)
|
|
|
|
function showLoserScreen() {
|
|
// playSound('/sounds/ding.mp3')
|
|
showResults.value = true
|
|
isWinner.value = false
|
|
}
|
|
|
|
function showWinnerScreen() {
|
|
// playSound('/sounds/ding.mp3')
|
|
showResults.value = true
|
|
isWinner.value = true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div @contextmenu.prevent="false" id="game_board">
|
|
<div id="market">
|
|
<MarketCards></MarketCards>
|
|
</div>
|
|
<div id="player_list">
|
|
<PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
|
|
</PlayerListElement>
|
|
</div>
|
|
<div id="current_player"
|
|
:class="(goStore.current_game?.current_turn && (goStore.current_game?.current_turn === goStore.self?.team)) ? 'self' : ''">
|
|
<PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
|
|
</div>
|
|
</div>
|
|
<ResultDialog
|
|
:isVisible="showResults"
|
|
:won="isWinner"
|
|
:players="goStore.current_game?.players"
|
|
@close="showResults = false">
|
|
</ResultDialog>
|
|
<SelfView></SelfView>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#game_board {
|
|
display: grid;
|
|
grid-template-columns: 1fr 400px;
|
|
grid-template-rows: min-content 1fr;
|
|
grid-template-areas:
|
|
"market player_list"
|
|
"current_player player_list";
|
|
height: 100%;
|
|
}
|
|
|
|
#player_list,
|
|
#current_player {
|
|
overflow: auto;
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
#current_player.self {
|
|
background-image: url('../images/bg-grass.png');
|
|
}
|
|
|
|
#market {
|
|
grid-area: market;
|
|
background-image: url("/images/bg-sand.png");
|
|
padding: 10px;
|
|
}
|
|
|
|
#current_player {
|
|
grid-area: current_player;
|
|
background-image: url("/images/bg-darkgrass.png");
|
|
|
|
}
|
|
|
|
#player_list {
|
|
grid-area: player_list;
|
|
border-left: 5px solid black;
|
|
height: 100%;
|
|
background-image: url("/images/bg-darkgrass.png");
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
#player_list .card_image {
|
|
max-width: 64px;
|
|
}
|
|
</style> |