Ajout du shader d'ouverture sur la page d'accueil

js/cuteTexture.js

@@ -110,7 +110,9 @@ const DEFAULT_FRAGMENT_SHADER = `
 /**
  * Initialise un canvas d'arrière plan "CuteTexture" avec les options données
  */
-export function initCuteTexture(){
+export function initCuteTexture(options){
+  let shaderSourceOption = options?.shaderSource;
+
   /** @type {HTMLCanvasElement} */
   const targetCanvas = document.querySelector("canvas[data-cute-texture]") || document.querySelector("canvas.cute-texture") || document.querySelector("canvas");
   if(!targetCanvas)
@@ -128,7 +130,9 @@ export function initCuteTexture(){
   if(ctx == null)
     throw new Error("WebGL n'ext pas supporté sur votre machine")
 
-  let mainShader = initMainShader(ctx)
+  let mainShader = initMainShader(ctx, {
+    shaderSource: shaderSourceOption
+  })
   console.log("Shader CuteTexture initialisé", mainShader)
   
   const initTime = Date.now()
@@ -153,7 +157,9 @@ export function initCuteTexture(){
 /**
  * @param {WebGLRenderingContext} ctx 
  */
-function initMainShader(ctx, oldShader=null){
+function initMainShader(ctx, options){
+  let fragmentShaderCode = options?.shaderSource;
+
   const vertexShader = ctx.createShader(ctx.VERTEX_SHADER)
   ctx.shaderSource(vertexShader, DEFAULT_VERTEX_SHADER)
   ctx.compileShader(vertexShader)
@@ -164,11 +170,11 @@ function initMainShader(ctx, oldShader=null){
     return null
   }
 
-  let fragmentShaderCode;
-  let fragmentShaderCodeElement = document.querySelector(`script[type="x-shader/glsl+fragment"]`);
-  if(fragmentShaderCodeElement){
-    fragmentShaderCode = fragmentShaderCodeElement.innerHTML
-  } else {
+  if(!fragmentShaderCode){
+    fragmentShaderCode = getDocumentShaderSource(document);
+  }
+
+  if(!fragmentShaderCode){
     fragmentShaderCode = DEFAULT_FRAGMENT_SHADER
   }
 
@@ -229,13 +235,6 @@ function initMainShader(ctx, oldShader=null){
     }
   }
 
-  if(oldShader){
-    ctx.deleteProgram(oldShader.program)
-    ctx.deleteShader(oldShader.vertexShader)
-    ctx.deleteShader(oldShader.fragmentShader)
-    ctx.deleteBuffer(oldShader.vertexIndexBuffer)
-  }
-
   const vertexIndexBuffer = ctx.createBuffer()
   ctx.bindBuffer(ctx.ARRAY_BUFFER, vertexIndexBuffer)
   ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([0, 1, 2]), ctx.STATIC_DRAW)
@@ -244,7 +243,6 @@ function initMainShader(ctx, oldShader=null){
     program: shaderProgram,
     vertexShader,
     fragmentShader,
-    fragmentShaderElement: fragmentShaderCodeElement,
     videoElement,
     videoTexture,
     aVertexIndex: ctx.getAttribLocation(shaderProgram, "aVertexIndex"),
@@ -343,4 +341,8 @@ function renderCuteTexture(target, mainShader, initTime){
   }
   
   ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, 3);
+}
+
+export function getDocumentShaderSource(doc=document){
+  return doc.querySelector(`script[type="x-shader/glsl+fragment"]`)?.innerHTML
 }

js/main.js

@@ -2,12 +2,18 @@ import { loadEvents } from './events.js'
 import { loadStatus } from './status.js'
 import { initCuteTexture } from './cuteTexture.js'
 
-// =================================== background texture
-initCuteTexture()
-
 // ======================================== events & statut d'ouverture
 loadEvents();
-loadStatus();
+loadStatus()
+  .then((status) => {
+    console.log("Status actuel du LOL", status);
+
+    let cuteTexture = initCuteTexture({
+      shaderSource: status.shaderSource
+    });
+
+    cuteTexture.target.style.visibility = "visible"
+  });
 
 // ======================================== floating event window
 

js/status.js

@@ -1,10 +1,12 @@
-import { statusProxy } from './main.js'
+import { getDocumentShaderSource } from './cuteTexture.js';
 
 export async function loadStatus(){
   let res = await fetch('/status/index.html');
 
   let html_text = await res.text()
   let html = new DOMParser().parseFromString(html_text, "text/html");
+  
+  let shaderSource = getDocumentShaderSource(html);
 
   let target = document.querySelector('#statuSection');
 
@@ -15,13 +17,7 @@ export async function loadStatus(){
   let status = html.querySelector('#lolStatus');
   console.log('current status:', status.innerText);
 
-
-  if (status.innerText.includes('ouvert')){
-    statusProxy.lolStatus = true;
-  }else{
-    statusProxy.lolStatus = false;
-  }
-
+  let isOpen = status.innerText.includes('ouvert');
 
   let icon = html.querySelector('link[rel="icon"]');
   let style = html.querySelectorAll('link[rel="stylesheet"]')[0];
@@ -31,4 +27,6 @@ export async function loadStatus(){
   document.head.append(style);
 
   target.appendChild(status);
+
+  return { open: isOpen, shaderSource };
 }