edit: ajout script generatif avec collection test + pleins de petits réglages
This commit is contained in:
@@ -1,7 +1,23 @@
|
||||
<script setup>
|
||||
import ReloadIcon from '../assets/icons/reload.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="generatedContainer">
|
||||
<ColorPan></ColorPan>
|
||||
<div id="generatedContainer" ref="generatorContainer">
|
||||
<div class="loadingOverlay" v-show="overlayIsActive"><p id="loadingOText">ça charge...</p></div>
|
||||
<div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" v-for="item in randomImgList" :key="item.id" :style="{
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
}">
|
||||
<img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<PlayerDiv></PlayerDiv>
|
||||
<ColorPan></ColorPan>
|
||||
<button type="button" name="reload" data-tooltip="recharger" id="reloadBtnStyle" class="iconBtnStyle" @click="startContentReload">
|
||||
<ReloadIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -21,21 +37,256 @@
|
||||
#generatedContainer{
|
||||
background-color: transparent;
|
||||
width:100%;
|
||||
height:90%;
|
||||
position:relative;
|
||||
height:70%;
|
||||
}
|
||||
|
||||
#reloadBtnStyle{
|
||||
position: absolute;
|
||||
z-index:0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
top: 50%;
|
||||
left: 7.77px;
|
||||
animation: float 1.61s infinite;
|
||||
}
|
||||
|
||||
#reloadBtnStyle{
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.loadingOverlay{
|
||||
position: absolute;
|
||||
margin-top: 4.5%;
|
||||
width: 97%;
|
||||
height: 91%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
z-index: 0;
|
||||
border-radius: 0 16.1px 16.1px 0;
|
||||
pointer-events: none;
|
||||
animation: blinkBack 3.33s ease-in-out infinite;
|
||||
opacity: 0.333;
|
||||
}
|
||||
|
||||
#loadingOText{
|
||||
position:relative;
|
||||
z-index: 334;
|
||||
font-family: 'lineal';
|
||||
font-size: 33.3px;
|
||||
color: var(--light-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*====================Gestion des images*/
|
||||
.imgContainer{
|
||||
width:161px;
|
||||
height:161px;
|
||||
position:absolute;
|
||||
z-index:0;
|
||||
align-items:center;
|
||||
display:flex;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
.imgStyle{
|
||||
position: absolute;
|
||||
width:77px;
|
||||
height:auto;
|
||||
z-index:-1;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: var(--light-color);
|
||||
}
|
||||
.imgStyle.highlightItem{
|
||||
border-color: transparent;
|
||||
width:117px;
|
||||
height:auto;
|
||||
z-index:-1;
|
||||
}
|
||||
.imgStyle.highlightMax{
|
||||
border-color: transparent;
|
||||
width:200px;
|
||||
height:auto;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){
|
||||
@media(min-width:1300px){
|
||||
#generatedContainer{
|
||||
height: 67%;
|
||||
}
|
||||
|
||||
#reloadBtnStyle{
|
||||
top: 59%;
|
||||
left: 44.4px;
|
||||
width: 77px;
|
||||
height: 77px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#reloadBtnStyle .icon{
|
||||
height: 33px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.imgStyle{
|
||||
width:150px;
|
||||
}
|
||||
.imgStyle.highlightItem{
|
||||
width:200px;
|
||||
}
|
||||
.imgStyle.highlightMax{
|
||||
width:333px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { toRaw } from 'vue'
|
||||
|
||||
const imgImport = import.meta.glob('../assets/TEST/*.png',{eager:true,import:'default'});
|
||||
const imgCollection = Object.values(imgImport);
|
||||
|
||||
export default {
|
||||
name : 'GeneratedContent',
|
||||
data(){
|
||||
return{
|
||||
containerWidth:0,
|
||||
containerHeight:0,
|
||||
imgList: imgCollection.map((src,index)=>({
|
||||
id: "img-" + index,
|
||||
src: src,
|
||||
x: 0,
|
||||
y: 0,
|
||||
isHighlight: 0
|
||||
})),
|
||||
randomImgList: null,
|
||||
marjTop:0,
|
||||
marjBot:161,
|
||||
marjSide:200,
|
||||
overlayIsActive: false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
delay(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
},
|
||||
getRandomInt(min,max){
|
||||
min=Math.ceil(min)
|
||||
max=Math.floor(max)
|
||||
return Math.floor(Math.random()*(max-min+1))+min
|
||||
},
|
||||
selectHighlight(){
|
||||
const imgCount = this.randomImgList.length-1;
|
||||
let a = this.getRandomInt(0,imgCount);
|
||||
let b = 0;
|
||||
let c = 0;
|
||||
do{
|
||||
b = this.getRandomInt(0,imgCount);
|
||||
} while (a == b);
|
||||
|
||||
do{
|
||||
c = this.getRandomInt(0,imgCount);
|
||||
} while (a == c || c == b);
|
||||
console.log(a,b,c);
|
||||
this.randomImgList[a].isHighlight = 1;
|
||||
this.randomImgList[b].isHighlight = 1;
|
||||
this.randomImgList[c].isHighlight = 2;
|
||||
},
|
||||
genCoord(chain){
|
||||
const maxX = this.containerWidth;
|
||||
const maxY = this.containerHeight;
|
||||
// position initiale aléatoire
|
||||
let x = this.getRandomInt(0, maxX-this.marjSide);
|
||||
let y = this.getRandomInt(0, this.marjSide);
|
||||
// vecteur direction initial aléatoire mais biais vers le bas
|
||||
let dirX = (Math.random() - 0.5) * 5;
|
||||
let dirY = Math.random() * 2 + 0.7;
|
||||
for (let i = 0; i < chain.length; i++){
|
||||
// assigner position calc tour prev
|
||||
chain[i].x = x;
|
||||
chain[i].y = y;
|
||||
//calc nouvelle position
|
||||
// distance contrôlée
|
||||
const distance = this.getRandomInt(100, this.marjSide);
|
||||
// perturbation continue
|
||||
dirX += (Math.random() - 0.5) * 1.2;
|
||||
dirY += (Math.random() - 0.5) * 0.5;
|
||||
// perturbation brutale occasionnelle
|
||||
if (Math.random() < 0.5){
|
||||
dirX += (Math.random() - 0.5) * 3;
|
||||
dirY += (Math.random() - 0.5) * 1;
|
||||
}
|
||||
// biais vers le bas
|
||||
dirY += .2;
|
||||
// normaliser
|
||||
const length = Math.sqrt(dirX*dirX + dirY*dirY);
|
||||
dirX /= length;
|
||||
dirY /= length;
|
||||
// déplacement
|
||||
x += dirX * distance;
|
||||
y += dirY * distance;
|
||||
// rebond horizontal
|
||||
if (x <= 0){
|
||||
x = 0;
|
||||
dirX *= -1;
|
||||
}
|
||||
if (x >= maxX-this.marjSide){
|
||||
x = maxX-this.marjSide;
|
||||
dirX *= -1;
|
||||
}
|
||||
//limite en bas
|
||||
if (y>=maxY-this.marjBot){
|
||||
y = maxY-this.marjBot;
|
||||
dirY *= -1;
|
||||
}
|
||||
//limite haut
|
||||
if (y<=this.marjTop){
|
||||
y = this.marjTop;
|
||||
dirY *= -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
generateContent(){
|
||||
this.randomImgList = structuredClone(toRaw(this.imgList)).sort(() => Math.random()-0.5);
|
||||
this.selectHighlight();
|
||||
this.genCoord(this.randomImgList);
|
||||
console.log('Layout has been generated!');
|
||||
},
|
||||
async reloadAnimation(){
|
||||
this.overlayIsActive = true;
|
||||
for (let i = 0; i < 34; i++) {
|
||||
this.generateContent();
|
||||
await this.delay(44);
|
||||
if(i===33){
|
||||
this.overlayIsActive = false;
|
||||
};
|
||||
}
|
||||
},
|
||||
startContentReload(){
|
||||
this.reloadAnimation();
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
const displayContainer = this.$refs.generatorContainer;
|
||||
if(!displayContainer){
|
||||
console.error("container not found");
|
||||
return
|
||||
};
|
||||
|
||||
const observer = new ResizeObserver(entries=>{
|
||||
const rect = entries[0].contentRect;
|
||||
this.containerWidth = rect.width;
|
||||
this.containerHeight = rect.height;
|
||||
console.log(rect.width, rect.height);
|
||||
this.generateContent();
|
||||
});
|
||||
observer.observe(displayContainer);
|
||||
console.log("Generated content is loaded!");
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user