99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<script setup>
|
|
import PlayerIcon from './assets/icons/play.svg'
|
|
import LinkIcon from './assets/icons/folder.svg'
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="#topBar .left" defer>
|
|
<lolStatusDiv></lolStatusDiv>
|
|
</Teleport>
|
|
<Teleport to="#lolOpener.uiStyle" defer>
|
|
<lolStatusDiv></lolStatusDiv>
|
|
</Teleport>
|
|
<eventDiv></eventDiv>
|
|
<eventPannel
|
|
v-show="pannelStatus.activePannels.includes('event')"
|
|
@focus="focusPannel('event')"
|
|
@close="closePannel('event')"
|
|
:class="{zBase: pannelStatus.focus !== 'event', zFocus: pannelStatus.focus === 'event'}"
|
|
></eventPannel>
|
|
<playerPannel
|
|
v-show="pannelStatus.activePannels.includes('player')"
|
|
@focus="focusPannel('player')"
|
|
@close="closePannel('player')"
|
|
:class="{zBase: pannelStatus.focus !== 'player', zFocus: pannelStatus.focus === 'player'}"
|
|
></playerPannel>
|
|
<linkPannel
|
|
v-show="pannelStatus.activePannels.includes('link')"
|
|
@focus="focusPannel('link')"
|
|
@close="closePannel('link')"
|
|
:class="{zBase: pannelStatus.focus !== 'link', zFocus: pannelStatus.focus === 'link'}"
|
|
></linkPannel>
|
|
<Teleport to="#openingHours" defer>
|
|
<div id="btnContainer">
|
|
<button type="button" name="link" class="iconBtnStyle" @click="openPannel('link')">
|
|
<LinkIcon name="close" class="icon"/>
|
|
</button>
|
|
<button type="button" name="player" class="iconBtnStyle" @click="openPannel('player')">
|
|
<PlayerIcon name="close" class="icon"/>
|
|
</button>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#btnContainer{
|
|
position: absolute;
|
|
left: 7.77px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7.77px;
|
|
margin-top: -88px;
|
|
|
|
.iconBtnStyle{
|
|
width: 33px;
|
|
height: 33px;
|
|
border-radius: 16.1px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { dataStorage } from './dataExchange.js'
|
|
export default {
|
|
name : 'App',
|
|
computed: {
|
|
pannelStatus(){
|
|
return dataStorage
|
|
}
|
|
},
|
|
methods: {
|
|
focusPannel(str){
|
|
if(this.pannelStatus.activePannels.includes(str)){
|
|
this.pannelStatus.focus = str
|
|
}
|
|
},
|
|
closePannel(str){
|
|
console.log('closing...')
|
|
const index = this.pannelStatus.activePannels.indexOf(str)
|
|
if( index !== -1){
|
|
this.pannelStatus.activePannels.splice(index, 1)
|
|
if(this.pannelStatus.focus === str){
|
|
this.pannelStatus.focus = null
|
|
}
|
|
}
|
|
},
|
|
openPannel(str){
|
|
if(!(this.pannelStatus.activePannels.includes(str))){
|
|
this.pannelStatus.activePannels.push(str)
|
|
} else {
|
|
this.focusPannel(str)
|
|
}
|
|
}
|
|
},
|
|
mounted(){
|
|
console.log("Vue root app is fully loaded!");
|
|
}
|
|
};
|
|
</script>
|