Move rules logic to multilingual

Author: johnsamuelwrites

.gitignore

@@ -20,4 +20,5 @@ public/*.wasm
 public/*.wat
 public/main.ml
 public/automate_elementaire.ml
-
+public/gallery-fragment.html
+public/gallery/

public/index.html

@@ -129,9 +129,8 @@ <h1>Cellcosmos</h1>
 
       <section id="gallery-panel" class="gallery-panel" hidden>
         <div class="gallery-header">
-          <p>Les 256 r&egrave;gles sont rendues c&ocirc;t&eacute; navigateur avec acc&eacute;l&eacute;ration WASM quand
-            elle est valide, sinon via le
-            moteur JavaScript int&eacute;gr&eacute;.</p>
+          <p>Les 256 r&egrave;gles sont pr&eacute;calcul&eacute;es au build puis charg&eacute;es depuis un fragment
+            statique s&eacute;par&eacute;, afin de garder `index.html` compact.</p>
         </div>
         <div id="gallery-grid" class="gallery-grid"></div>
       </section>

public/style.css

@@ -398,11 +398,17 @@ input[type="color"] {
   cursor: pointer;
 }
 
+.gallery-item:focus-visible {
+  outline: 2px solid rgba(255, 209, 102, 0.9);
+  outline-offset: 2px;
+}
+
 .gallery-thumb {
   display: block;
   width: 100%;
   aspect-ratio: 1;
   background: #061018;
+  object-fit: cover;
 }
 
 .gallery-label {
@@ -541,4 +547,4 @@ input[type="color"] {
   .rule-bar {
     padding: 14px;
   }
-}
+}

public/ui.js

@@ -12,16 +12,6 @@ const DEFAULTS = {
   direction: "ltr",
 };
 
-const RULE_NOTE_LABELS = {
-  0: "",
-  1: "Chaos pseudo al\u00e9atoire",
-  2: "Triangle de Sierpinski",
-  3: "Calcul universel",
-  4: "XOR avec auto-r\u00e9f\u00e9rence",
-  5: "Mod\u00e8le de trafic",
-  6: "Fronti\u00e8res seulement",
-};
-
 const fallbackDomain = {
   transition(ruleNumber, left, center, right) {
     const index = left * 4 + center * 2 + right;
@@ -36,14 +26,14 @@ const fallbackDomain = {
     if ([54, 106, 110, 137, 193].includes(ruleNumber)) return 4;
     return 2;
   },
-  noteId(ruleNumber) {
-    if (ruleNumber === 30) return 1;
-    if (ruleNumber === 90) return 2;
-    if (ruleNumber === 110) return 3;
-    if (ruleNumber === 150) return 4;
-    if (ruleNumber === 184) return 5;
-    if (ruleNumber === 254) return 6;
-    return 0;
+  noteLabel(ruleNumber) {
+    if (ruleNumber === 30) return "Chaos pseudo al\u00e9atoire";
+    if (ruleNumber === 90) return "Triangle de Sierpinski";
+    if (ruleNumber === 110) return "Calcul universel";
+    if (ruleNumber === 150) return "XOR avec auto-r\u00e9f\u00e9rence";
+    if (ruleNumber === 184) return "Mod\u00e8le de trafic";
+    if (ruleNumber === 254) return "Fronti\u00e8res seulement";
+    return "";
   },
   interpolateComponent(start, end, progressScaled) {
     return Math.round(start + (end - start) * (progressScaled / 1000));
@@ -53,7 +43,9 @@ const fallbackDomain = {
 let state = structuredClone(DEFAULTS);
 let wasm = null;
 let wasmAvailable = false;
-let galleryKey = "";
+const textDecoder = new TextDecoder();
+let galleryLoaded = false;
+let galleryLoading = null;
 
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
@@ -170,6 +162,7 @@ function validateWasmExports(exports) {
     || typeof exports.sortie_motif !== "function"
     || typeof exports.classe_wolfram !== "function"
     || typeof exports.note_regle !== "function"
+    || typeof exports.etiquette_note_regle !== "function"
     || typeof exports.composante_interpolee !== "function"
   ) {
     return false;
@@ -211,6 +204,15 @@ function validateWasmExports(exports) {
       }
     }
 
+    const labelPtr = Number(exports.etiquette_note_regle(90));
+    const labelLength = Number(exports.__ml_str_len());
+    const labelBytes = new Uint8Array(exports.memory.buffer, labelPtr, labelLength);
+    const label = textDecoder.decode(labelBytes.slice());
+    exports.__ml_reset();
+    if (label !== "Triangle de Sierpinski") {
+      return false;
+    }
+
     if (Number(exports.sortie_motif(90, 4)) !== 1) {
       return false;
     }
@@ -258,19 +260,22 @@ function wolframClass(ruleNumber) {
   return fallbackDomain.wolframClass(ruleNumber);
 }
 
-function ruleNoteId(ruleNumber) {
-  if (wasmAvailable && wasm && typeof wasm.note_regle === "function") {
+function ruleNoteLabel(ruleNumber) {
+  if (
+    wasmAvailable
+    && wasm
+    && typeof wasm.etiquette_note_regle === "function"
+    && typeof wasm.__ml_str_len === "function"
+    && typeof wasm.__ml_reset === "function"
+    && wasm.memory instanceof WebAssembly.Memory
+  ) {
     try {
-      return Number(wasm.note_regle(ruleNumber));
+      return callWasmString(wasm.etiquette_note_regle, ruleNumber);
     } catch (error) {
       disableWasmRuntime(error);
     }
   }
-  return fallbackDomain.noteId(ruleNumber);
-}
-
-function ruleNoteLabel(ruleNumber) {
-  return RULE_NOTE_LABELS[ruleNoteId(ruleNumber)] ?? "";
+  return fallbackDomain.noteLabel(ruleNumber);
 }
 
 function interpolateComponent(start, end, progressScaled) {
@@ -284,6 +289,15 @@ function interpolateComponent(start, end, progressScaled) {
   return fallbackDomain.interpolateComponent(start, end, progressScaled);
 }
 
+function callWasmString(fn, ...args) {
+  const ptr = Number(fn(...args));
+  const length = Number(wasm.__ml_str_len());
+  const bytes = new Uint8Array(wasm.memory.buffer, ptr, length);
+  const value = textDecoder.decode(bytes.slice());
+  wasm.__ml_reset();
+  return value;
+}
+
 function disableWasmRuntime(error) {
   wasm = null;
   wasmAvailable = false;
@@ -503,37 +517,6 @@ function renderGradientPickers() {
   });
 }
 
-function galleryStateKey() {
-  return JSON.stringify(state);
-}
-
-function buildGallery() {
-  const key = galleryStateKey();
-  if (key === galleryKey) return;
-  galleryKey = key;
-  const grid = document.getElementById("gallery-grid");
-  grid.innerHTML = "";
-  for (let rule = 0; rule < 256; rule += 1) {
-    const item = document.createElement("article");
-    item.className = "gallery-item";
-    const canvas = document.createElement("canvas");
-    canvas.className = "gallery-thumb";
-    renderToCanvas(canvas, rule, 50, 50, 2);
-    const label = document.createElement("div");
-    label.className = "gallery-label";
-    label.innerHTML = `<strong>R\u00e8gle ${rule}</strong><span>${ruleNoteLabel(rule) || `Classe ${wolframClass(rule)}`}</span>`;
-    item.append(canvas, label);
-    item.addEventListener("click", () => {
-      state.rule = rule;
-      syncRuleControls();
-      renderRuleDiagram();
-      switchTab("explorer");
-      scheduleRender();
-    });
-    grid.appendChild(item);
-  }
-}
-
 function switchTab(tab) {
   const explorer = tab === "explorer";
   const gallery = tab === "gallery";
@@ -544,14 +527,63 @@ function switchTab(tab) {
   document.getElementById("tab-explorer").classList.toggle("active", explorer);
   document.getElementById("tab-gallery").classList.toggle("active", gallery);
   document.getElementById("tab-source").classList.toggle("active", source);
-  if (gallery) buildGallery();
+  if (gallery) loadGalleryFragment();
 }
 
 const scheduleRender = debounce(() => {
   renderMainView();
-  if (!document.getElementById("gallery-panel").hidden) buildGallery();
 }, 100);
 
+function selectGalleryRule(rule) {
+  state.rule = clamp(rule, 0, 255);
+  syncRuleControls();
+  renderRuleDiagram();
+  switchTab("explorer");
+  scheduleRender();
+}
+
+function bindGallery() {
+  const grid = document.getElementById("gallery-grid");
+  grid.addEventListener("click", (event) => {
+    const item = event.target.closest(".gallery-item");
+    if (!item) return;
+    selectGalleryRule(Number.parseInt(item.dataset.rule, 10) || 0);
+  });
+  grid.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    const item = event.target.closest(".gallery-item");
+    if (!item) return;
+    event.preventDefault();
+    selectGalleryRule(Number.parseInt(item.dataset.rule, 10) || 0);
+  });
+}
+
+async function loadGalleryFragment() {
+  if (galleryLoaded) return;
+  if (galleryLoading) return galleryLoading;
+  const grid = document.getElementById("gallery-grid");
+  grid.innerHTML = '<p class="muted">Chargement de la galerie...</p>';
+  galleryLoading = fetch("gallery-fragment.html")
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`Fragment galerie indisponible (${response.status}).`);
+      }
+      return response.text();
+    })
+    .then((markup) => {
+      grid.innerHTML = markup;
+      galleryLoaded = true;
+    })
+    .catch((error) => {
+      grid.innerHTML = '<p class="muted">Impossible de charger la galerie statique.</p>';
+      console.error(error);
+    })
+    .finally(() => {
+      galleryLoading = null;
+    });
+  return galleryLoading;
+}
+
 function bindControls() {
   const presets = document.getElementById("presets");
 
@@ -715,6 +747,7 @@ function bindControls() {
 async function init() {
   loadFromURL();
   bindControls();
+  bindGallery();
   renderGradientPickers();
   syncRuleControls();
   renderRuleDiagram();