83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<template>
|
|
<div id="lolStatusContainer">
|
|
<p ref="lolStatus">{{statusText}}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#lolStatusContainer{
|
|
width: 161px;
|
|
height: 33px;
|
|
background-color: var(--main-color);
|
|
color: var(--back-color);
|
|
border-color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
border-radius: 33px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding-bottom: 7.77px;
|
|
margin-left: 1.61vw;
|
|
padding-left: 3.33px;
|
|
filter: contrast(200%) saturate(200%);
|
|
|
|
p{
|
|
font-family: 'pressStart2P';
|
|
font-size: 16.1px;
|
|
letter-spacing: 1.61px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
#lolOpener #lolStatusContainer{
|
|
padding-top: 3.33px;
|
|
margin-left: 0;
|
|
width: 90%;
|
|
align-self: center;
|
|
|
|
@media(min-width: 700px){
|
|
width: 44%;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
import { lolState } from '../lolStatus.js'
|
|
import { watch } from 'vue'
|
|
|
|
export default {
|
|
name : 'lolStatus',
|
|
data(){
|
|
return{
|
|
statusText: 'FERMÉ...'
|
|
}
|
|
},
|
|
methods: {
|
|
updateVisibleStatus(){
|
|
let currentTheme = this.lolCurrentStatus ? 'open' : 'closed';
|
|
let pageIcon = document.querySelector('link');
|
|
//console.log(currentTheme);
|
|
console.log(pageIcon.href);
|
|
this.statusText = this.lolCurrentStatus ? 'OUVERT !' : 'FERMÉ...';
|
|
document.documentElement.setAttribute('data-theme' , currentTheme);
|
|
document.querySelector('link').href = this.lolCurrentStatus ? './src/assets/favicon_open.svg' : './src/assets/favicon.svg'
|
|
this.$refs.lolStatus.style.animation = this.lolCurrentStatus ? 'blink 3.33s infinite' : 'none';
|
|
}
|
|
},
|
|
computed: {
|
|
lolCurrentStatus(){
|
|
return lolState.isOpen
|
|
}
|
|
},
|
|
onMounted(){
|
|
watch(() => this.lolCurrentStatus, () => this.updateVisibleStatus())
|
|
},
|
|
mounted(){
|
|
this.updateVisibleStatus();
|
|
console.log("LOL status is loaded!");
|
|
}
|
|
};
|
|
</script>
|