matrix-engine-wgpu 1.1.0 → 1.2.0

package/examples/games/jamb/html-content.js

@@ -0,0 +1,123 @@
+
+export let settingsBox = `
+<div>
+  <span style="font-size:170%" data-label="settings"></span>
+  <div style="margin:20px;" >
+    <div>
+      <span data-label="sounds"></span>
+      <label class="switch">
+        <input id="settingsAudios" type="checkbox">
+        <span class="sliderSwitch round"></span>
+      </label>
+    </div>
+    <div>
+    <div>
+      <span data-label="graphics"></span>
+
+      <select id="physicsSpeed" class="setting-select">
+        <option value="1">Slow</option>
+        <option value="2">Normal</option>
+        <option value="3">Fast</option>
+      </select>
+
+      <select id="blurControl">
+        <option value="0px">Blur: 0</option>
+        <option value="1px">Blur: 1</option>
+        <option value="2px">Blur: 2</option>
+        <option value="3px">Blur: 3</option>
+      </select>
+      </div>
+
+      <div>
+      <select id="grayscaleControl">
+        <option value="0%">Grayscale: 0%</option>
+        <option value="25%">Grayscale: 25%</option>
+        <option value="50%">Grayscale: 50%</option>
+        <option value="75%">Grayscale: 75%</option>
+        <option value="100%">Grayscale: 100%</option>
+      </select>
+      </div>
+      
+      <div>
+       <label>Brightness:</label>
+      <select id="brightnessControl">
+        <option value="100%">100%</option>
+        <option value="150%">150%</option>
+        <option value="200%">200%</option>
+      </select>
+      </div>
+      
+      <div>
+      <label>Contrast:</label>
+      <select id="contrastControl">
+        <option value="100%">100%</option>
+        <option value="150%">150%</option>
+        <option value="200%">200%</option>
+      </select>
+      </div>
+      
+      <div>
+      <label>Saturate:</label>
+      <select id="saturateControl">
+        <option value="100%">100%</option>
+        <option value="150%">150%</option>
+        <option value="200%">200%</option>
+      </select>
+     </div>
+      
+      <div>
+      <label>Sepia:</label>
+      <select id="sepiaControl">
+        <option value="0%">0%</option>
+        <option value="50%">50%</option>
+        <option value="100%">100%</option>
+      </select>
+     </div>
+      
+      <div>
+      <label>Invert:</label>
+      <select id="invertControl">
+        <option value="0%">0%</option>
+        <option value="50%">50%</option>
+        <option value="100%">100%</option>
+      </select>
+     </div>
+      
+      <div>
+      <label>Hue Rotate:</label>
+      <select id="hueControl">
+        <option value="0deg">0°</option>
+        <option value="90deg">90°</option>
+        <option value="180deg">180°</option>
+        <option value="270deg">270°</option>
+      </select>
+      </div>
+
+    </div>
+    <div>
+      <button class="btn" onclick="app.myDom.hideSettings()">
+        <span data-label="hide"></span>
+      </button>
+    </div>
+  </div>
+</div>`;
+
+export let welcomeBoxHTML =
+  `<span class="fancy-title" data-label="welcomeMsg"></span>
+     <a href="https://github.com/zlatnaspirala/matrix-engine-wgpu">zlatnaspirala/matrix-engine-wgpu</a><br><br>
+     <div style="display:flex;flex-direction:column;align-items: center;margin:20px;padding: 10px;">
+       <span style="width:100%" data-label="choosename"></span>
+       <input style="text-align: center;height:50px;font-size:100%;width:250px" class="fancy-label" type="text" value="Guest" />
+      </div>
+     <button id="startFromWelcome" class="btn" ><span style="font-size:30px;margin:15px;padding:10px" data-label="startGame"></span></button> <br>
+     <div><span class="fancy-label" data-label="changeLang"></span></div> 
+     <button class="btn" onclick="
+      app.label.loadMultilang('en').then(r => {
+        app.label.get = r;
+        app.label.update()
+      });
+     " ><span data-label="english"></span></button> 
+     <button class="btn" onclick="app.label.loadMultilang('sr').then(r => {
+        app.label.get = r
+        app.label.update() })" ><span data-label="serbian"></span></button> 
+    `;

package/examples/games/jamb/jamb.js

@@ -1,30 +1,165 @@
-import MatrixEngineWGPU from "../../../src/world.js";
-import {downloadMeshes} from '../../../src/engine/loader-obj.js';
-import {LOG_FUNNY, LOG_INFO, LOG_MATRIX, byId, mb} from "../../../src/engine/utils.js";
+import {LOG_FUNNY, LOG_INFO, LOG_MATRIX, byId, mb, setupCanvasFilters, typeText} from "../../../src/engine/utils.js";
+import {settingsBox, welcomeBoxHTML} from "./html-content.js";
 
 export let dices = {
   C: 0,
   STATUS: 'FREE_TO_PLAY',
-  STATUS_H2: 'WAIT',
-  STATUS_H3: 'WAIT',
   R: {},
+  SAVED_DICES: {},
+  pickDice: function(dice) {
+    if(Object.keys(this.SAVED_DICES).length >= 5) {
+      console.log("⚠️ You can only select up to 5 dice!");
+      return; // prevent adding more
+    }
+    this.SAVED_DICES[dice] = this.R[dice]
+    this.refreshSelectedBox()
+  },
+
+  setStartUpPosition: () => {
+    // 
+    let currentIndex = 0;
+    for(var x = 1;x < 7;x++) {
+      app.matrixAmmo.getBodyByName(('CubePhysics' + x)).MEObject.position.setPosition(-5 + currentIndex * 5, 2, -15);
+    }
+  },
+
+  refreshSelectedBox: function(arg) {
+    let currentIndex = 0;
+    for(var key in this.SAVED_DICES) {
+      let B = app.matrixAmmo.getBodyByName(key);
+      this.deactivatePhysics(B);
+      const transform = new Ammo.btTransform();
+      transform.setIdentity();
+      transform.setOrigin(new Ammo.btVector3(0, 0, 0));
+      B.setWorldTransform(transform);
+      B.MEObject.position.setPosition(-5 + currentIndex, 5, -16);
+      currentIndex += 3;
+    }
+  },
+
+  deactivatePhysics: function(body) {
+    const CF_KINEMATIC_OBJECT = 2;
+    const DISABLE_DEACTIVATION = 4;
+    // 1. Remove from world
+    app.matrixAmmo.dynamicsWorld.removeRigidBody(body);
+    // 2. Set body to kinematic
+    const flags = body.getCollisionFlags();
+    body.setCollisionFlags(flags | CF_KINEMATIC_OBJECT);
+    body.setActivationState(DISABLE_DEACTIVATION); // no auto-wakeup
+    // 3. Clear motion
+    const zero = new Ammo.btVector3(0, 0, 0);
+    body.setLinearVelocity(zero);
+    body.setAngularVelocity(zero);
+    // 4. Reset transform to current position (optional — preserves pose)
+    const currentTransform = body.getWorldTransform();
+    body.setWorldTransform(currentTransform);
+    body.getMotionState().setWorldTransform(currentTransform);
+    // 5. Add back to physics world
+    app.matrixAmmo.dynamicsWorld.addRigidBody(body);
+    // 6. Mark it manually (logic flag)
+    body.isKinematic = true;
+  },
+
+  resetBodyAboveFloor: function(body, z = -14) {
+    const transform = new Ammo.btTransform();
+    transform.setIdentity();
+    transform.setOrigin(new Ammo.btVector3(-1 + Math.random(), 3, z));
+    body.setWorldTransform(transform);
+    body.getMotionState().setWorldTransform(transform);
+  },
+
+  activatePhysics: function(body) {
+    // 1. Make it dynamic again
+    body.setCollisionFlags(body.getCollisionFlags() & ~2); // remove kinematic
+    body.setActivationState(1); // ACTIVE_TAG
+    body.isKinematic = false;
+
+    // 2. Reset position ABOVE the floor — force it out of collision
+    // const newY = 3 + Math.random(); // ensure it’s above the floor
+    const transform = new Ammo.btTransform();
+    transform.setIdentity();
+    const newX = (Math.random() - 0.5) * 4; // spread from -2 to +2 on X
+    const newY = 3;                        // fixed height above floor
+    transform.setOrigin(new Ammo.btVector3(newX, newY, 0));
+    body.setWorldTransform(transform);
+
+    // 3. Clear velocities
+    body.setLinearVelocity(new Ammo.btVector3(0, 0, 0));
+    body.setAngularVelocity(new Ammo.btVector3(0, 0, 0));
+
+    // 4. Enable CCD (to prevent tunneling)
+    const size = 1; // cube side length
+    body.setCcdMotionThreshold(1e-7);
+    body.setCcdSweptSphereRadius(size * 0.5);
+
+    // Re-add to world if needed
+    // Optionally: remove and re-add if not responding
+    app.matrixAmmo.dynamicsWorld.removeRigidBody(body);
+    app.matrixAmmo.dynamicsWorld.addRigidBody(body);
+
+    // 5. Reactivate it
+    body.activate(true);
+
+    this.resetBodyAboveFloor(body);
+  },
+
+  activateAllDicesPhysics: function() {
+    this.getAllDices()
+      // .filter((item) => {
+      //   let test = app.matrixAmmo.getBodyByName(item.name)?.isKinematicObject();
+      //   if(test === true) {
+      //     return true;
+      //   } else {
+      //     return false;
+      //   }
+      // })
+      .forEach((dice) => {
+        const body = app.matrixAmmo.getBodyByName(dice.name);
+        if(body) {
+          this.activatePhysics(body);  // <--- FIX: pass the physics body, not the dice object
+        }
+      });
+  },
+
+  getAllDices: function() {
+    return app.mainRenderBundle.filter(item => item.name.indexOf("CubePhysics") !== -1);
+  },
+
+  getDiceByName: function(name) {
+    return app.mainRenderBundle.find(item => item.name === name);
+  },
+
   checkAll: function() {
     this.C++;
-    if(typeof this.R.CubePhysics1 != 'undefined' &&
-      typeof this.R.CubePhysics2 != 'undefined' &&
-      typeof this.R.CubePhysics3 != 'undefined' &&
-      typeof this.R.CubePhysics4 != 'undefined' &&
-      typeof this.R.CubePhysics5 != 'undefined' &&
-      typeof this.R.CubePhysics6 != 'undefined' && this.C > 1200) {
-      dispatchEvent(new CustomEvent('all-done', {detail: {}}))
+
+    let activeRollingCount = 0;
+    let allReady = true;
+
+    for(let i = 1;i <= 6;i++) {
+      const key = "CubePhysics" + i;
+      if(key in this.SAVED_DICES) continue; // skip saved ones
+      activeRollingCount++; // count how many are still active
+      if(typeof this.R[key] === 'undefined') {
+        allReady = false;
+        break;
+      }
+    }
+    // Dynamic threshold: min wait time based on rolling dice
+    const minWait = Math.max(200, activeRollingCount * 200); // e.g. 1 die => 200, 5 dice => 1000, 6 dice => 1200
+    if(allReady && this.C > minWait) {
+      dispatchEvent(new CustomEvent('all-done', {detail: {}}));
       this.C = 0;
     }
   },
   validatePass: function() {
-    if(dices.STATUS == "IN_PLAY" || dices.STATUS == "FREE_TO_PLAY") {
-      // console.log('%cBLOCK', LOG_FUNNY)
-      if(dices.STATUS == "IN_PLAY") mb.error(`STATUS IS ${dices.STATUS}, please wait for results...`);
-      if(dices.STATUS == "FREE_TO_PLAY") mb.error(`STATUS IS ${dices.STATUS}, you need to roll dice first.`);
+    if(Object.keys(this.SAVED_DICES).length !== 5) {
+      console.log('%cBLOCK', LOG_FUNNY)
+      mb.error(`Must select (minimum) 5 dices before add results...`);
+      return false;
+    }
+    if(dices.STATUS != "FINISHED") {
+      console.log('%cBLOCK', LOG_FUNNY)
+      mb.error(`STATUS IS ${dices.STATUS}, please wait for results...`);
       app.matrixSounds.play('block')
       return false;
     } else {
@@ -56,44 +191,38 @@ export let myDom = {
 
     var help = document.createElement('div')
     help.id = 'HELP';
-    help.classList.add('btn2')
+    help.classList.add('btn')
     help.innerHTML = `<span data-label="help"></span>`;
 
     var settings = document.createElement('div')
     settings.id = 'settings';
-    settings.classList.add('btn2')
+    settings.classList.add('btn')
     settings.innerHTML = `<span data-label="settings"></span>`;
     settings.addEventListener('click', () => {
-
-      byId('messageBox').innerHTML = `
-      <div>
-        <span data-label="settings"></span>
-        <div>
-
-        <div>
-          <span data-label="sounds"></span>
-
-          <label class="switch">
-            <input type="checkbox">
-            <span class="sliderSwitch round"></span>
-          </label>
-
-        </div>
-
-        <div>
-          <button class="btn2" onclick="app.myDom.hideSettings()">
-            <span data-label="hide"></span>
-          </button>
-        </div>
-
-        </div>
-      </div>
-      `;
-
+      if(document.getElementById('messageBox').getAttribute('data-loaded') != null) {
+        byId('blocker').style.display = 'flex';
+        byId('messageBox').style.display = 'unset';
+        return;
+      }
+      byId('messageBox').innerHTML = settingsBox;
       byId('blocker').style.display = 'flex';
-      byId('messageBox').style.display = 'flex';
-
+      byId('messageBox').style.display = 'unset';
       dispatchEvent(new CustomEvent('updateLang', {}))
+
+      byId('settingsAudios').click()
+      byId('settingsAudios').addEventListener('change', (e) => {
+        if(e.target.checked == true) {
+          app.matrixSounds.unmuteAll();
+        } else {
+          app.matrixSounds.muteAll();
+        }
+      });
+      setupCanvasFilters();
+      byId('messageBox').setAttribute('data-loaded', 'loaded')
+      byId("physicsSpeed").addEventListener("change", (e) => {
+        app.matrixAmmo.speedUpSimulation = parseInt(e.target.value);
+      });
+
     })
 
     var roll = document.createElement('div')
@@ -105,7 +234,7 @@ export let myDom = {
     })
 
     var separator = document.createElement('div')
-    separator.innerHTML = `=======`;
+    separator.innerHTML = `✨maximumroulette.com✨`;
 
     root.append(settings)
     root.append(help)
@@ -127,21 +256,7 @@ export let myDom = {
     messageBox.id = 'messageBox';
 
     // console.log('TEST', app.label.get)
-    messageBox.innerHTML = `
-     <span data-label="welcomeMsg"></span>
-     <a href="https://github.com/zlatnaspirala/matrix-engine-wgpu">zlatnaspirala/matrix-engine-wgpu</a><br><br>
-     <button class="btn" ><span style="font-size:30px;margin:15px;padding:10px" data-label="startGame"></span></button> <br>
-     <div><span data-label="changeLang"></span></div> 
-     <button class="btn" onclick="
-      app.label.loadMultilang('en').then(r => {
-        app.label.get = r;
-        app.label.update()
-      });
-     " ><span data-label="english"></span></button> 
-     <button class="btn" onclick="app.label.loadMultilang('sr').then(r => {
-        app.label.get = r
-        app.label.update() })" ><span data-label="serbian"></span></button> 
-    `;
+    messageBox.innerHTML = welcomeBoxHTML;
 
 
     let initialMsgBoxEvent = function() {
@@ -150,25 +265,31 @@ export let myDom = {
       byId('blocker').style.display = 'none';
       myDom.createMenu();
       messageBox.removeEventListener('click', initialMsgBoxEvent)
-    };
 
-    messageBox.addEventListener('click', initialMsgBoxEvent)
+      document.querySelectorAll('.btn, .fancy-label, .fancy-title').forEach(el => {
+        el.addEventListener('mouseenter', () => {
+          app.matrixSounds.play('hover');
+        });
+      });
+    };
     root.append(messageBox)
-
     document.body.appendChild(root);
-
     app.label.update();
+    document.querySelectorAll('.btn, .fancy-label, .fancy-title').forEach(el => {
+      el.addEventListener('mouseenter', () => {
+        app.matrixSounds.play('hover');
+      });
+    });
+
+    setTimeout(() => {
+      byId('startFromWelcome').addEventListener('click', initialMsgBoxEvent)
+    }, 200);
   },
 
   createJamb: function() {
     var root = document.createElement('div')
     root.id = 'jambTable';
     root.style.position = 'absolute';
-    root.style.display = 'flex';
-    root.style.top = '10px';
-    root.style.left = '10px';
-    root.style.width = '200px';
-    root.style.background = '#7d7d7d8c';
 
     var rowHeader = document.createElement('div')
     rowHeader.id = 'rowHeader';
@@ -177,15 +298,16 @@ export let myDom = {
     rowHeader.style.width = '200px';
     rowHeader.innerHTML = '<span data-label="cornerText"></span><span id="user-points">0</span>';
     root.appendChild(rowHeader);
-    rowHeader.classList.add('myTheme1')
+    rowHeader.classList.add('fancy-label')
 
     var rowDown = document.createElement('div')
     rowDown.id = 'rowDown';
     rowDown.style.top = '10px';
     rowDown.style.left = '10px';
     rowDown.style.width = '200px';
-    rowDown.innerHTML = '↓';
-    rowDown.classList.add('myTheme1')
+    rowDown.innerHTML = '↓<span data-label="down"></span>';
+    rowDown.classList.add('fancy-label')
+    rowDown.classList.add('btn')
     root.appendChild(rowDown);
 
     var rowFree = document.createElement('div')
@@ -193,8 +315,9 @@ export let myDom = {
     rowFree.style.top = '10px';
     rowFree.style.left = '10px';
     rowFree.style.width = '200px';
-    rowFree.innerHTML = '↕';
-    rowFree.classList.add('myTheme1')
+    rowFree.innerHTML = '↕<span data-label="free"></span>';
+    rowFree.classList.add('fancy-label')
+    rowFree.classList.add('btn')
     root.appendChild(rowFree);
 
     var rowUp = document.createElement('div')
@@ -202,8 +325,9 @@ export let myDom = {
     rowUp.style.top = '10px';
     rowUp.style.left = '10px';
     rowUp.style.width = '200px';
-    rowUp.innerHTML = '↑';
-    rowUp.classList.add('myTheme1')
+    rowUp.innerHTML = '↑<span data-label="up"></span>';
+    rowUp.classList.add('fancy-label')
+    rowUp.classList.add('btn')
     root.appendChild(rowUp);
 
     var rowHand = document.createElement('div')
@@ -212,7 +336,8 @@ export let myDom = {
     rowHand.style.left = '10px';
     rowHand.style.width = '200px';
     rowHand.innerHTML = '<span data-label="hand"></span>';
-    rowHand.classList.add('myTheme1')
+    rowHand.classList.add('fancy-label')
+    rowHand.classList.add('btn')
     root.appendChild(rowHand);
 
     // INJECT TABLE HEADER ROW
@@ -222,12 +347,45 @@ export let myDom = {
     this.createRow(rowUp);
     this.createRow(rowHand);
 
+    this.createSelectedBox();
+
     document.body.appendChild(root);
     // console.log('JambTable added.')
   },
 
-  createLeftHeaderRow: function(myRoot) {
+  showHideJambTable: () => {
+    const panel = document.getElementById('jambTable');
+    if(panel.classList.contains('show')) {
+      panel.classList.remove('show');
+      panel.classList.add('hide');
+      // Delay actual hiding from layout to finish animation
+      setTimeout(() => {
+        panel.style.display = 'none';
+      }, 300);
+    } else {
+      panel.style.display = 'flex';
+      setTimeout(() => {
+        panel.classList.remove('hide');
+        panel.classList.add('show');
+      }, 10); // allow repaint
+    }
+  },
+  createSelectedBox: function() {
+    var topTitleDOM = document.createElement('div')
+    topTitleDOM.id = 'topTitleDOM';
+    topTitleDOM.style.width = 'auto';
+    topTitleDOM.style.position = 'absolute';
+    topTitleDOM.style.left = '35%';
+    topTitleDOM.style.top = '5%';
+    topTitleDOM.style.background = '#7d7d7d8c';
+    topTitleDOM.innerHTML = app.label.get.ready + ", " + app.userState.name + '.';
+    document.body.appendChild(topTitleDOM);
+    addEventListener('updateTitle', (e) => {
+      typeText('topTitleDOM', e.detail);
+    })
+  },
 
+  createLeftHeaderRow: function(myRoot) {
     for(var x = 1;x < 7;x++) {
       var rowNumber = document.createElement('div')
       rowNumber.id = 'rowNumber' + x;
@@ -427,7 +585,7 @@ export let myDom = {
         var getName = e.target.id;
         getName = getName.replace('free-rowNumber', '')
         var count23456 = 0;
-        for(let key in dices.R) {
+        for(let key in dices.SAVED_DICES) {
           if(parseInt(dices.R[key]) == parseInt(getName)) {
             count23456++;
           }
@@ -529,6 +687,7 @@ export let myDom = {
       rowNumber.style.left = '10px';
       rowNumber.style.width = 'auto';
       rowNumber.style.background = '#7d7d7d8c';
+      rowNumber.style.cursor = 'pointer';
       rowNumber.innerHTML = `-`;
 
       this.memoNumberRow.push(rowNumber)
@@ -547,7 +706,7 @@ export let myDom = {
           console.log('LOG ', getName)
           if(parseInt(getName) == 1) {
             var count1 = 0;
-            for(let key in dices.R) {
+            for(let key in dices.SAVED_DICES) {
               if(parseInt(dices.R[key]) == 1) {
                 console.log('yeap', dices.R)
                 count1++;
@@ -568,7 +727,7 @@ export let myDom = {
             if(parseInt(getName) == this.state.rowDown.length + 1) {
               console.log('moze za ', parseInt(getName))
               var count23456 = 0;
-              for(let key in dices.R) {
+              for(let key in dices.SAVED_DICES) {
                 if(parseInt(dices.R[key]) == parseInt(getName)) {
                   console.log('yeap', dices.R)
                   count23456++;

package/examples/unlit-textures.js

@@ -5,24 +5,25 @@ export var unlitTextures = function() {
     useSingleRenderPass: false,
     canvasSize: 'fullscreen'
   }, () => {
+    addEventListener('AmmoReady', () => {
+      let c = {
+        scale: 2,
+        position: {x: -3, y: 0, z: -10},
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 10, y: 0, z: 0},
+        texturesPaths: ['./res/textures/rust.jpg']
+      };
 
-    let c = {
-      scale: 2,
-      position: {x: -3, y: 0, z: -10},
-      rotation: {x: 0, y: 0, z: 0},
-      rotationSpeed: {x: 10, y: 0, z: 0},
-      texturesPaths: ['./res/textures/rust.jpg']
-    };
-
-    let o = {
-      scale: 2,
-      position: {x: 3, y: 0, z: -10},
-      rotation: {x: 0, y: 45, z: 0},
-      rotationSpeed: {x: 0, y: 10, z: 0},
-      texturesPaths: ['./res/textures/rust.jpg']
-    };
-    unlitTextures.addBall(c)
-    unlitTextures.addCube(o)
+      let o = {
+        scale: 2,
+        position: {x: 3, y: 0, z: -10},
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 10, y: 0, z: 0},
+        texturesPaths: ['./res/textures/default.png']
+      };
+      unlitTextures.addCube(o)
+      unlitTextures.addBall(c)
+    });
   })
 
   window.app = unlitTextures;

package/index.js

@@ -6,19 +6,25 @@
 import {degToRad} from "wgpu-matrix/dist/2.x/utils.js";
 import {downloadMeshes} from "./src/engine/loader-obj.js";
 import MatrixEngineWGPU from "./src/meWGPU.js";
+import {getRayFromMouse, rayIntersectsSphere} from "./src/engine/raycast.js";
 
 var about = () => {
   console.log("Hi npm. matrix-engine for webgpu is ready...")
   console.log("--------------------------------------------")
-  console.log("List of features : ")
+  console.log("List of features: ")
   console.log(" - Loading obj files with uvs")
-  console.log(" - Scene oriented draws")
+  console.log(" - Scene camera use -z front")
   console.log(" - position, rotation - same like matrix-engine")
+	console.log(" - Physics used Ammo.js build")
+	console.log(" - Raycaster HIT/CLICK on object scene")
 }
 
 export {
   MatrixEngineWGPU,
   downloadMeshes,
+	rayIntersectsSphere,
+	getRayFromMouse,
+	addRaycastListener,
   degToRad,
   about
 }