142 lines
3.7 KiB
Vue
142 lines
3.7 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 showOptions = 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">
|
|
<AnimatedBackground></AnimatedBackground>
|
|
<div id="market">
|
|
<MarketCards></MarketCards>
|
|
</div>
|
|
<div id="player_list_container">
|
|
<div id="player_list">
|
|
<PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
|
|
</PlayerListElement>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="current_player">
|
|
<template v-for="p in current_players">
|
|
<!-- <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
|
|
:color-end="goStore.self == p ? [.0, 1, 1] : undefined" /> -->
|
|
<PlayerSlot :player="p"></PlayerSlot>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
<ResultDialog :isVisible="showResults" :won="isWinner" :players="goStore.current_game?.players"
|
|
@close="showResults = false">
|
|
</ResultDialog>
|
|
<GlobalOverlay></GlobalOverlay>
|
|
<SelfView></SelfView>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#game_board {
|
|
display: grid;
|
|
grid-template-columns: 1fr 450px;
|
|
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;
|
|
/* background: url('/images/bg-darkgrass.png'); */
|
|
}
|
|
|
|
#current_player {
|
|
grid-area: current_player;
|
|
}
|
|
|
|
#market {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
#player_list_container {
|
|
grid-area: player_list;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
justify-content: center;
|
|
|
|
/* background-image: url("/images/bg-darkgrass.png"); */
|
|
}
|
|
|
|
#player_list {
|
|
min-height: 90%;
|
|
background: burlywood;
|
|
border: 5px solid darkgoldenrod;
|
|
border-radius: 10px;
|
|
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
|
|
margin: 10px;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
#player_list .card {
|
|
--max-height: 90px;
|
|
}
|
|
</style> |