diff --git a/js/cuteTexture.js b/js/cuteTexture.js index 5fcabfc..64fb8cd 100644 --- a/js/cuteTexture.js +++ b/js/cuteTexture.js @@ -69,3 +69,19 @@ export function noiseAnimation(){ analogLikeNoise(); requestAnimationFrame(noiseAnimation); } + + +export function loadCanvas(){ + let textureVideo = document.querySelectorAll('main > #texture'); + + for (let video of textureVideo){ + video.style.visibility = 'collapse'; + } + + let textureCanvas = document.querySelector('main > canvas'); + textureCanvas.style.visibility = 'visible'; + + //console.log(textureCanvas); + + //console.log(textureVideo) +} diff --git a/js/main.js b/js/main.js index d60d252..619a194 100644 --- a/js/main.js +++ b/js/main.js @@ -2,27 +2,46 @@ import { loadEvents } from './events.js' import { loadStatus } from './status.js' import { scanlinesAnimation } from './cuteTexture.js' import { noiseAnimation } from './cuteTexture.js' +import { loadCanvas } from './cuteTexture.js' + + + + +// =================================== background texture +loadCanvas(); +let backgroundVideo = document.querySelector('main > #background'); + +let proxyTarget = {}; +let proxyHandler = { + +}; +export let statusProxy = new Proxy(proxyTarget, { + set(obj, prop, value){ + if(prop === 'lolStatus'){ + if (value){ + backgroundVideo.style.visibility = 'visible'; + scanlinesAnimation(); + return true + } else { + backgroundVideo.style.visibility = 'collapse'; + noiseAnimation(); + return true + } + } + } +}) + +statusProxy.lolStatus = false; + +//console.log(proxyTarget.lolStatus); + + +// ======================================== events & statut d'ouverture loadEvents(); loadStatus(); -// =================================== background texture - let textureVideo = document.querySelectorAll('main > #texture'); - -for (let video of textureVideo){ - video.style.visibility = 'collapse'; -} - -let textureCanvas = document.querySelector('main > canvas'); -textureCanvas.style.visibility = 'visible'; - -console.log(textureCanvas); - -//console.log(textureVideo) - -scanlinesAnimation(); -// ======================================== stops here ! - +// ======================================== floating event window let target = document.querySelector('#posterWindow'); @@ -40,13 +59,6 @@ startTarget.addEventListener('mousedown', (event) => { console.log('clicking...') }) -startTarget.addEventListener('touchstart', (event) => { - startX = event.pageX; - startY = event.pageY; - clicked = true; - console.log('touching...') -}) - document.addEventListener('mousemove', (event) => { if(clicked){ console.log('moving...') @@ -61,25 +73,34 @@ document.addEventListener('mousemove', (event) => { } }); -document.addEventListener('touchmove', (event) => { - if(clicked){ - console.log('moving...') - let currentX = event.pageX; - let currentY = event.pageY; - let moveX = target.offsetLeft + currentX - startX; - target.style.left = moveX + 'px'; - let moveY = target.offsetTop + currentY - startY; - target.style.top = moveY + 'px'; - startX = currentX; - startY = currentY; - } -}); - document.addEventListener('mouseup', () => { console.log('STOP !') clicked = false; }) + +//================================ tentative de gestion des écran tactiles +startTarget.addEventListener('touchstart', (event) => { + startX = event.pageX; + startY = event.pageY; + clicked = true; + console.log('touching...') +}) + +document.addEventListener('touchmove', (event) => { + if(clicked){ + console.log('moving...') + let currentX = event.pageX; + let currentY = event.pageY; + let moveX = target.offsetLeft + currentX - startX; + target.style.left = moveX + 'px'; + let moveY = target.offsetTop + currentY - startY; + target.style.top = moveY + 'px'; + startX = currentX; + startY = currentY; + } +}); + document.addEventListener('touchend', () => { console.log('STOP !') clicked = false; diff --git a/js/status.js b/js/status.js index e96c3e7..0855a37 100644 --- a/js/status.js +++ b/js/status.js @@ -1,3 +1,5 @@ +import { statusProxy } from './main.js' + export async function loadStatus(){ let res = await fetch('/status/index.ouvert.html'); @@ -11,9 +13,19 @@ export async function loadStatus(){ hiddenBtn.style.visibility = 'collapse'; let status = html.querySelector('#lolStatus'); + console.log('current status:', status.innerText); + + + if (status.innerText.includes('ouvert')){ + statusProxy.lolStatus = true; + }else{ + statusProxy.lolStatus = false; + } + + let icon = html.querySelector('link[rel="icon"]'); let style = html.querySelectorAll('link[rel="stylesheet"]')[0]; - //console.log("selected style : ", style); + //console.log("selected script: ", script); document.head.append(icon); document.head.append(style); diff --git a/readMe.MD b/readMe.MD index 2bf3fe5..8573977 100644 --- a/readMe.MD +++ b/readMe.MD @@ -15,3 +15,5 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont changer le fetch dans status.js > problème de gestion des évènement tactiles, rien ne marche ... + +> problème import css directement dans main.css diff --git a/status/openStyle.css b/status/openStyle.css index 64a2e2e..5ee8fcd 100644 --- a/status/openStyle.css +++ b/status/openStyle.css @@ -8,22 +8,24 @@ } .openBackground{ + position: absolute; visibility: visible; - opacity: .333; + opacity: 1; + z-index: -20 } .openBackground#texture{ - z-index: -31; + z-index: -30; } .openBackground#background{ mix-blend-mode: difference; - z-index: -30; filter: brightness(133%) saturate(33%) grayscale(); transform: rotate(180deg); position: absolute; margin-top: -9%; height: 120%; + opacity: .777; } /*======================= Page Statut LOL ouvert ===*/ diff --git a/style/main.css b/style/main.css index b556439..c75b21e 100644 --- a/style/main.css +++ b/style/main.css @@ -5,10 +5,10 @@ } /*================ ANIMATION ======================*/ -@import url("/animation.css"); + /*================ DESACT DEFAULT ======================*/ -@import url("/default.css"); + /*================ BODY ======================*/ html, body{ @@ -24,7 +24,7 @@ html, body{ } /*================ CLASSES COMMUNES ======================*/ -@import url("/common.css"); + /*================ STRUCTURE ======================*/ @@ -548,4 +548,5 @@ canvas{ opacity: .5; filter: hue-rotate(13.12deg); + mix-blend-mode: multiply; }