vgaNAR6ta/LOLv333
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: interface pour le player et le panneau liens + fix z-index

Browse Source
This commit is contained in:
Vega
2026-07-05 06:13:26 +02:00
parent b1622d0008
commit ad870bd070
16 changed files with 476 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+77 -1
View File
@@ -1,3 +1,8 @@
<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>
@@ -6,15 +11,86 @@
<lolStatusDiv></lolStatusDiv>
</Teleport>
<eventDiv></eventDiv>
<eventPannel class="zFocus"></eventPannel>
<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!");
}
src/assets/icons/pause.svg
+5
View File
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.67 16.63">
<path d="M5.28,0v16.63H0V0h5.28Z"/>
<path d="M13.67,0v16.63h-5.28V0h5.28Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 228 B

src/assets/icons/play.svg
+2 -2
View File
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.5 73.4">
<path d="M18.1,68.55c-5.6-3.23-10.02-7.63-13.25-13.2C1.62,49.78,0,43.57,0,36.7s1.62-13.08,4.85-18.65c3.23-5.57,7.65-9.97,13.25-13.2C23.7,1.62,29.93,0,36.8,0s13,1.62,18.6,4.85c5.6,3.23,10.02,7.65,13.25,13.25,3.23,5.6,4.85,11.8,4.85,18.6s-1.62,13-4.85,18.6c-3.23,5.6-7.65,10.02-13.25,13.25-5.6,3.23-11.8,4.85-18.6,4.85s-13.1-1.62-18.7-4.85ZM47.2,54.5c3.13-1.8,5.6-4.27,7.4-7.4,1.8-3.13,2.7-6.6,2.7-10.4s-.9-7.27-2.7-10.4c-1.8-3.13-4.27-5.6-7.4-7.4-3.13-1.8-6.6-2.7-10.4-2.7s-7.37.9-10.5,2.7c-3.13,1.8-5.6,4.27-7.4,7.4-1.8,3.13-2.7,6.6-2.7,10.4s.9,7.27,2.7,10.4c1.8,3.13,4.27,5.6,7.4,7.4,3.13,1.8,6.63,2.7,10.5,2.7s7.27-.9,10.4-2.7Z"/>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
<path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 780 B

After

Width:  |  Height:  |  Size: 219 B

src/assets/icons/saved.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.6 133.47">
<g id="Calque_1-2" data-name="Calque 1">
<path d="M78.6,113.9V0H0v113.9h0l.07,19.57,39.15-38.87,39.16,38.73.21-19.43h0ZM39.08,78.6l-23.08,20.85V16h46.6v83.5l-23.23-20.9h-.3Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 337 B

src/components/EventContent.vue
+6 -1
View File
@@ -122,7 +122,12 @@
openEvent(obj){
console.log('updating...')
dataStorage.selectedEvent = obj;
dataStorage.eventInfoActive = true;
if (dataStorage.activePannels.includes('event')){
dataStorage.focus = 'event'
} else {
dataStorage.activePannels.push('event')
dataStorage.focus = 'event'
}
}
},
computed: {
src/components/EventInfoPannel.vue
+2 -2
View File
@@ -3,7 +3,7 @@
</script>
<template>
<div id="eventPannel" class="windowStyle" ref="eventPannel" v-show="isActive">
<div id="eventPannel" class="windowStyle" ref="eventPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
@@ -100,7 +100,7 @@
target.style.transform = transform;
},
closePannel(){
dataStorage.eventInfoActive = false;
this.$emit('close')
}
},
mounted(){
src/components/LinkPannel.vue
+116
View File
@@ -0,0 +1,116 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="linkPannel" class="windowStyle" ref="linkPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
Liens utiles
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent" id="linkContent">
<a id="linkItem" v-for="item of displayedLinks" :href="item.href" class="textBtnStyle">
<p><strong>{{item.title}}</strong><br>{{item.desc}}</p>
</a>
</div>
</div>
</template>
<style scoped>
/*================= Mise en page:
=> Mobile First : par défaut, moins de 500px
=> Tablette et PC format haut : de 500 à 1000px
=> PC large : à partir de 1000px
*/
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#linkPannel{
position: fixed;
width: 222px;
height: 333px;
top: 222px;
left: 117px;
}
#linkContent{
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
#linkItem{
width: 100%;
padding-right: 13.12px;
padding-left: 13.12px;
font-family: 'velvelyne';
font-size: 13.12px;
border-radius: 0;
border-width: 0 0 1.61px 0;
text-align: left;
justify-content: flex-start;
box-sizing: border-box;
strong{
text-transform: uppercase;
font-family: 'karrik';
font-weight: normal;
font-size: 16.1px;
}
}
/*================ PC LARGE*/
@media(min-width:650px){
#linkPannel{
left: 477px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
import { lolLinkList } from '../lolLinks.js'
export default {
name : 'LinkPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
computed: {
displayedLinks(){
return lolLinkList
}
},
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
}
},
mounted(){
this.target = this.$refs.linkPannel;
console.log("Link pannel is loaded!");
}
};
</script>
src/components/PlayerPannel.vue
+198
View File
@@ -0,0 +1,198 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
import PlayIcon from '../assets/icons/play.svg'
import PauseIcon from '../assets/icons/pause.svg'
import NextIcon from '../assets/icons/next.svg'
import PrevIcon from '../assets/icons/prev.svg'
import { loadAudioData } from '@/data/audioData.js'
</script>
<template>
<div id="playerPannel" class="windowStyle" ref="playerPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
<div class="windowContent" id="playerContent">
<div id="credits">
<marquee direction="left" behavior="scroll" scrollamount="7" width="100%">{{selectedSong.track}} — {{selectedSong.artist}}</marquee>
</div>
<div id="controls">
<button type="button" class="iconBtnStyle" @click="prevTrack" data-tooltip="précédente">
<PrevIcon name="prev" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" @click="toggleAudio" data-tooltip="lancer">
<component :is="isPlaying? PauseIcon : PlayIcon" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" @click="nextTrack" data-tooltip="suivante">
<NextIcon name="next" class="icon"/>
</button>
</div>
<audio ref="selectedAudio" @ended="nextTrack">
<source :src="audioFile" type="audio/mpeg">
</audio>
</div>
</div>
</template>
<style scoped>
/*================= Mise en page:
=> Mobile First : par défaut, moins de 500px
=> Tablette et PC format haut : de 500 à 1000px
=> PC large : à partir de 1000px
*/
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#playerPannel{
position: fixed;
width: 222px;
height: auto;
top: 222px;
left: 117px;
box-sizing: border-box;
cursor: move;
.closeBtn{
position: absolute;
align-self: flex-end;
margin-right: 3.33px;
margin-top: 3.33px;
}
}
#playerContent{
margin-top: 40px;
#credits{
width: 100%;
height: 44px;
background-color: var(--main-color);
padding-left: 7.77px;
padding-right: 7.77px;
padding-top: 13.12px;
margin-bottom: 13.12px;
marquee{
color: var(--back-color);
font-family: 'pressStart2P';
font-size: 22px;
font-weight: normal;
}
}
#controls{
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-bottom: 13.12px;
.iconBtnStyle{
width: 33px;
height: 33px;
}
}
}
/*================ PC LARGE*/
@media(min-width:650px){
#playerPannel{
left: 477px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
export default {
name : 'PlayerPannel',
components:{
Moveable
},
data(){
return{
target: null,
audioTarget: null,
audioData: [],
selectedSong:{
track: "",
artist: "",
src: ""
},
audioFile:"",
audioCredits:"",
trackCount: 0,
isPlaying: false
}
},
emits: ['close','focus'],
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
},
loadAudio(){
//console.log(this.target);
this.audioTarget.pause();
this.selectedSong = this.audioData[this.trackCount];
this.audioFile = this.selectedSong.src;
this.audioCredits = ' ' + this.selectedSong.track +' - '+ this.selectedSong.artist;
this.audioTarget.volume = 1;
this.audioTarget.load();
if(this.isPlaying){
this.audioTarget.play();
}
},
toggleAudio(){
if(this.isPlaying){
this.audioTarget.pause();
}else{
this.audioTarget.play();
}
this.isPlaying = !this.isPlaying;
},
prevTrack(){
this.trackCount -= 1;
if (this.trackCount<0){
this.trackCount = this.audioData.length - 1;
}
//console.log('prev:', this.trackCount);
this.loadAudio();
},
nextTrack(){
this.trackCount += 1;
if (this.trackCount>=this.audioData.length){
this.trackCount = 0;
}
//console.log('next:', this.trackCount);
this.loadAudio();
}
},
async mounted(){
this.target = this.$refs.playerPannel;
this.audioData = await loadAudioData();
this.audioTarget = this.$refs.selectedAudio;
//console.log('AUDIO/', this.audioData);
this.loadAudio();
console.log("Player pannel is loaded!");
}
};
</script>
src/data/audioData.js
+25
View File
@@ -0,0 +1,25 @@
import audio01 from './juste-tek.mp3'
import audio02 from './sinking-into-.mp3'
import audio03 from './technoloooogia.mp3'
export async function loadAudioData() {
let audioFiles = [
{
track: 'the sink',
artist: '333',
src: audio02
},
{
track: 'just tek',
artist: '333',
src: audio01
},
{
track: 'Technolooooogia',
artist: '333',
src: audio03
}
]
//console.log(audioFiles);
return audioFiles
}
src/data/juste-tek.mp3
BIN
View File
Binary file not shown.
src/data/sinking-into-.mp3
BIN
View File
Binary file not shown.
src/data/technoloooogia.mp3
BIN
View File
Binary file not shown.
src/dataExchange.js
+2 -1
View File
@@ -8,5 +8,6 @@ export const dataStorage = reactive({
subtitle: '',
desc: ''
},
eventInfoActive: false
activePannels: [],
focus: ''
})
src/lolLinks.js
+31
View File
@@ -0,0 +1,31 @@
import { reactive } from 'vue'
export const lolLinkList = reactive(
[
{
title: 'test',
desc: 'blah blah description du truc test',
href: '#'
},
{
title: 'test 0002',
desc: 'blah blah description du truc test',
href: '#'
},
{
title: 'test 333',
desc: 'encore une autre description du truc test',
href: '#'
},
{
title: 'test 0002',
desc: 'blah blah description du truc test',
href: '#'
},
{
title: 'test 333',
desc: 'encore une autre description du truc test',
href: '#'
}
]
)
src/main.js
+4
View File
@@ -8,6 +8,8 @@ import lolStatus from './components/lolStatus.vue'
import EventContent from './components/EventContent.vue'
import EventInfoPannel from './components/EventInfoPannel.vue'
import PlayerPannel from './components/PlayerPannel.vue'
import LinkPannel from './components/LinkPannel.vue'
// création app racine
const app = createApp(App);
@@ -16,6 +18,8 @@ app.component('lolStatusDiv', lolStatus);
app.component('eventDiv', EventContent);
app.component('eventPannel', EventInfoPannel);
app.component('playerPannel', PlayerPannel);
app.component('linkPannel', LinkPannel);
//Démarrage dans div#app de index.html
app.mount('#app');
src/style.css
+2 -2
View File
@@ -204,7 +204,7 @@ html, body{
}
.zBase{
z-index: 33;
z-index: 333;
}
.zFocus{
@@ -329,7 +329,7 @@ html, body{
height: 200px;
position: absolute;
top: 55px;
right: 7.77px;
right: 3.33px;
z-index: 3;
.textBtnStyle{