76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import goStore from '~/netcode';
|
|
import type { Player } from '~/netcode/Player';
|
|
|
|
const current_players = computed<Array<Player>>(() => Array.from(goStore.current_game?.players ?? []).filter(p => p.team === goStore.current_game?.current_turn))
|
|
|
|
const discard_unwrapped = ref<boolean>(false)
|
|
</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>
|
|
<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");
|
|
padding-left: 70px;
|
|
padding-bottom: 75px;
|
|
|
|
}
|
|
|
|
#player_list {
|
|
grid-area: player_list;
|
|
border-left: 5px solid black;
|
|
border-bottom: 5px solid black;
|
|
height: 100%;
|
|
background-image: url("/images/bg-darkgrass.png");
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
#player_list .card_image {
|
|
max-width: 64px;
|
|
}
|
|
</style> |