matrix-engine-wgpu 1.2.0 → 1.2.2

package/public/res/multilang/sr.json

@@ -28,6 +28,12 @@
   "sounds": "Zvuk",
   "welcomeMsg": "Dobro došli, <br> otvoren izvori kod 🎲 Ultimate Jamb igra <br> Pokupi kod: ",
   "ready":"Sve je spremno za igru 🎲!",
+  "freetoroll":"Zavrtite 🎲!",
+  "pick5":"Izaberi 5 najboljih 🎲 i izaberi polje u tabeli.",
   "hand1":"Prvo bacanje - sackajte...",
-  "choosename":"Izaberi alias:"
+  "hand2":"Drugo bacanje - sackajte...",
+  "graphics":"Grafika",
+  "choosename":"Izaberi alias:",
+  "table":"Tabla",
+  "about":"Ultimate Yahtzee je moderna 3D igra sa kockicama u potpunosti izgrađena pomoću MatrixEngineWGPU-a, visokoperformansnog rendering endžina zasnovanog na WebGPU-u, razvijenog za kreiranje interaktivne grafike direktno u pregledaču. Igra pruža glatke vizuelne efekte, realističnu fiziku kockica i zanimljivo korisničko iskustvo — sve bez potrebe za bilo kakvim dodacima ili instalacijama.\n  Ovaj projekat je pokretan otvorenim tehnologijama i dizajniran je da bude lagan, brz i veoma prilagodljiv. Odličan je primer kako se WebGPU može koristiti za interaktivni sadržaj u realnom vremenu. \n 🔗 Preuzmite / Isprobajte: \n github.com/zlatnaspirala/matrix-engine-wgpu \n 🛠 Licenca: \n Osnovni endžin i projekat Ultimate Yahtzee objavljeni su pod GPL v3 licencom, što ih čini besplatnim i otvorenog koda za ličnu i komercijalnu upotrebu — sve dok poštujete uslove licence. \n Bez obzira da li ste programer, igrač ili entuzijasta, Ultimate Yahtzee je zabavan način da iskusite potencijal moderne 3D tehnologije zasnovane na pregledaču."
 }

package/readme.md

@@ -322,4 +322,6 @@ You may use, modify, and sell projects based on this code — just keep this not
 
 [Full License Text](https://github.com/webgpu/webgpu-samples/blob/main/LICENSE.txt)
 
+Top level main.js instance (Ultimate Yahtzee)
+
 ---

package/src/engine/utils.js

@@ -721,22 +721,109 @@ export let mb = {
   }
 }
 
-export function typeText(elementId, text, delay = 50) {
+// Registry to track running animations per element
+const typingStates = new Map();
+
+export function typeText(elementId, htmlString, delay = 50) {
   const el = document.getElementById(elementId);
-  el.innerText = '';
-  let index = 0;
+  if (!el) return;
+
+  // If an existing typing is running for this element, cancel it
+  if (typingStates.has(elementId)) {
+    clearTimeout(typingStates.get(elementId).timeoutId);
+    typingStates.delete(elementId);
+  }
+
+  el.innerHTML = ''; // Clear previous content
+
+  const tempEl = document.createElement('div');
+  tempEl.innerHTML = htmlString;
+
+  const queue = [];
+
+  function flatten(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      queue.push({ type: 'text', text: node.textContent });
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      if (node.tagName.toLowerCase() === 'img') {
+        queue.push({
+          type: 'img',
+          src: node.getAttribute('src'),
+          alt: node.getAttribute('alt') || ''
+        });
+      } else {
+        queue.push({
+          type: 'element',
+          tag: node.tagName.toLowerCase(),
+          attributes: Object.fromEntries([...node.attributes].map(attr => [attr.name, attr.value]))
+        });
+        for (const child of node.childNodes) flatten(child);
+        queue.push({ type: 'end' });
+      }
+    }
+  }
+
+  for (const node of tempEl.childNodes) flatten(node);
+
+  let stack = [];
+  let currentElement = el;
 
   function typeNextChar() {
-    if(index < text.length) {
-      el.textContent += text.charAt(index);
-      index++;
-      setTimeout(typeNextChar, delay);
+    if (queue.length === 0) {
+      typingStates.delete(elementId); // Cleanup after finish
+      return;
     }
+
+    const item = queue[0];
+
+    if (item.type === 'text') {
+      if (!item.index) item.index = 0;
+
+      const ch = item.text[item.index];
+      if (ch === '\n') {
+        currentElement.appendChild(document.createElement('br'));
+      } else {
+        currentElement.appendChild(document.createTextNode(ch));
+      }
+
+      item.index++;
+      if (item.index >= item.text.length) queue.shift();
+
+    } else if (item.type === 'element') {
+      const newEl = document.createElement(item.tag);
+      if (item.attributes) {
+        for (let [key, val] of Object.entries(item.attributes)) {
+          newEl.setAttribute(key, val);
+        }
+      }
+      currentElement.appendChild(newEl);
+      stack.push(currentElement);
+      currentElement = newEl;
+      queue.shift();
+
+    } else if (item.type === 'end') {
+      currentElement = stack.pop();
+      queue.shift();
+
+    } else if (item.type === 'img') {
+      const img = document.createElement('img');
+      img.src = item.src;
+      img.alt = item.alt;
+      img.style.maxWidth = '100px';
+      img.style.verticalAlign = 'middle';
+      currentElement.appendChild(img);
+      queue.shift();
+    }
+
+    // Schedule next step and store timeoutId for control
+    const timeoutId = setTimeout(typeNextChar, delay);
+    typingStates.set(elementId, { timeoutId });
   }
 
   typeNextChar();
 }
 
+
 export function setupCanvasFilters(canvasId) {
   let canvas = document.getElementById(canvasId);
   if(canvas == null) {