edit: animation se modifie avec le statut d'ouverture + bug css import dans main.css

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)
+}

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;

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);

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

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 ===*/

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;
 }