109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
<script setup>
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import { InGameRef } from '../../services/Game';
|
|
import IconButton from '../partials/game/IconButton.vue';
|
|
import { AddSound } from '../../services/Sound';
|
|
import TileMap from './TileMap.vue';
|
|
import { DisplayCampaign, GetCampaign, GetClient } from '../../services/Dragonroll';
|
|
import { ClearAll, CreateWindow } from '../../services/Windows';
|
|
|
|
const game = ref(null);
|
|
const in_game = InGameRef();
|
|
const is_dm = ref(false);
|
|
|
|
function OpenCampaignPreview(){
|
|
CreateWindow('campaign_preview', {campaign: GetCampaign(), style: 'compact', hide_start: true, back: undefined, close: true});
|
|
}
|
|
|
|
function OpenChat(){
|
|
CreateWindow('chat');
|
|
}
|
|
|
|
function OpenDiceMenu(){
|
|
CreateWindow('dice_menu');
|
|
}
|
|
|
|
function OpenMapButtons(){
|
|
CreateWindow('map_buttons');
|
|
}
|
|
|
|
function OpenMapWindows(){
|
|
CreateWindow('map_window');
|
|
}
|
|
|
|
function OpenCombatMenu(){
|
|
CreateWindow('combat_window');
|
|
}
|
|
|
|
function ToggleGrid(){
|
|
|
|
}
|
|
|
|
watch(game, () => {
|
|
if(game.value && in_game.value){
|
|
AddSound(game.value);
|
|
|
|
// Check if we are dm
|
|
is_dm.value = GetClient().is_dm;
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="game-root" ref="game" v-if="in_game">
|
|
<!-- Aquests dos son absolute -->
|
|
|
|
<div class="vertical-button">
|
|
<IconButton icon="icons/iconoir/regular/menu.svg" :action="OpenCampaignPreview"></IconButton>
|
|
<IconButton icon="icons/iconoir/regular/cursor-pointer.svg"></IconButton>
|
|
<IconButton icon="icons/iconoir/regular/orthogonal-view.svg" :action="ToggleGrid"></IconButton>
|
|
<IconButton icon="icons/game-icons/000000/delapouite/rolling-dice-cup.svg" :action="OpenDiceMenu"></IconButton>
|
|
<IconButton icon="icons/game-icons/000000/lorc/crossed-sabres.svg" :action="OpenCombatMenu"></IconButton>
|
|
</div>
|
|
|
|
<div class="vertical-button gm" v-if="is_dm">
|
|
<IconButton icon="icons/iconoir/regular/map.svg" :action="OpenMapWindows"></IconButton>
|
|
<IconButton icon="icons/iconoir/regular/hammer.svg" :action="OpenMapButtons"></IconButton>
|
|
</div>
|
|
|
|
<div class="horizontal-button">
|
|
<IconButton icon="icons/iconoir/regular/group.svg"></IconButton>
|
|
<IconButton icon="icons/iconoir/regular/bookmark-book.svg"></IconButton>
|
|
<IconButton icon="icons/iconoir/regular/chat-bubble.svg" :action="OpenChat"></IconButton>
|
|
</div>
|
|
|
|
<!-- Tilemap -->
|
|
<TileMap></TileMap>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.vertical-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 1;
|
|
|
|
user-select: none;
|
|
|
|
&.gm {
|
|
left: 48px;
|
|
}
|
|
}
|
|
|
|
.horizontal-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
z-index: 1;
|
|
|
|
user-select: none;
|
|
}
|
|
</style> |