matrix-engine-wgpu 1.1.1 → 1.2.1

package/public/app.js

@@ -1,27 +1,279 @@
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 "use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.welcomeBoxHTML = exports.settingsBox = void 0;
+let settingsBox = exports.settingsBox = `
+<div style="">
+  <span style="font-size:170%" data-label="settings"></span>
+  <div style="justify-items: flex-end;margin:20px;" >
+    <div>
+      <span data-label="sounds"></span>
+      <label class="switch">
+        <input id="settingsAudios" type="checkbox">
+        <span class="sliderSwitch round"></span>
+      </label>
+    </div>
+      <div style="margin-top:20px;margin-bottom:15px;">
+        <span style="font-size: larger;margin-bottom:15px" data-label="graphics"></span>
+        <p></p>
+        <label>Anim speed:</label>
+        <select id="physicsSpeed" class="setting-select">
+          <option value="1">Slow</option>
+          <option value="2">Normal</option>
+          <option value="3">Fast</option>
+        </select>
+      </div>
+
+      <div>
+        <label>Blur:</label>
+        <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>
+      <label>Grayscale:</label>
+      <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 style="margin-top:20px;">
+      <button class="btn" onclick="app.myDom.hideSettings()">
+        <span data-label="hide"></span>
+      </button>
+    </div>
+
+    <img src="res/icons/512.png" style="position:absolute;left:10px;top:5%;width:300px;z-index:-1;"/>
+  </div>
+</div>`;
+let welcomeBoxHTML = exports.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> 
+    `;
+
+},{}],2:[function(require,module,exports){
+"use strict";
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.myDom = exports.dices = void 0;
-var _world = _interopRequireDefault(require("../../../src/world.js"));
-var _loaderObj = require("../../../src/engine/loader-obj.js");
 var _utils = require("../../../src/engine/utils.js");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _htmlContent = require("./html-content.js");
 let dices = exports.dices = {
   C: 0,
   STATUS: 'FREE_TO_PLAY',
-  STATUS_H2: 'WAIT',
-  STATUS_H3: 'WAIT',
   R: {},
   SAVED_DICES: {},
-  pickDice: dice => {
-    (void 0).SAVED_DICES[dice] = (void 0).R[dice];
+  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) {
+    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: {}
       }));
@@ -29,10 +281,14 @@ let dices = exports.dices = {
     }
   },
   validatePass: function () {
-    if (dices.STATUS == "IN_PLAY" || dices.STATUS == "FREE_TO_PLAY") {
-      // console.log('%cBLOCK', LOG_FUNNY)
-      if (dices.STATUS == "IN_PLAY") _utils.mb.error(`STATUS IS ${dices.STATUS}, please wait for results...`);
-      if (dices.STATUS == "FREE_TO_PLAY") _utils.mb.error(`STATUS IS ${dices.STATUS}, you need to roll dice first.`);
+    if (Object.keys(this.SAVED_DICES).length !== 5) {
+      console.log('%cBLOCK', _utils.LOG_FUNNY);
+      _utils.mb.error(`Must select (minimum) 5 dices before add results...`);
+      return false;
+    }
+    if (dices.STATUS != "FINISHED") {
+      console.log('%cBLOCK', _utils.LOG_FUNNY);
+      _utils.mb.error(`STATUS IS ${dices.STATUS}, please wait for results...`);
       app.matrixSounds.play('block');
       return false;
     } else {
@@ -57,41 +313,69 @@ let myDom = exports.myDom = {
     root.style.top = '10%';
     var help = document.createElement('div');
     help.id = 'HELP';
-    help.classList.add('btn2');
+    help.classList.add('btn');
     help.innerHTML = `<span data-label="help"></span>`;
+    help.addEventListener('click', () => {
+      if ((0, _utils.byId)('helpBox').style.display != 'none') {
+        (0, _utils.byId)('helpBox').style.display = 'none';
+      } else {
+        (0, _utils.byId)('helpBox').style.display = 'block';
+      }
+    });
+    var table = document.createElement('div');
+    table.id = 'showHideTableDOM';
+    table.classList.add('btn');
+    table.innerHTML = `<span data-label="table"></span>`;
+    table.addEventListener('click', () => {
+      this.showHideJambTable();
+    });
     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', () => {
-      (0, _utils.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) {
+        (0, _utils.byId)('blocker').style.display = 'flex';
+        (0, _utils.byId)('messageBox').style.display = 'unset';
+        return;
+      }
+      (0, _utils.byId)('messageBox').innerHTML = _htmlContent.settingsBox;
       (0, _utils.byId)('blocker').style.display = 'flex';
-      (0, _utils.byId)('messageBox').style.display = 'flex';
+      (0, _utils.byId)('messageBox').style.display = 'unset';
       dispatchEvent(new CustomEvent('updateLang', {}));
+      (0, _utils.byId)('settingsAudios').click();
+      (0, _utils.byId)('settingsAudios').addEventListener('change', e => {
+        if (e.target.checked == true) {
+          app.matrixSounds.unmuteAll();
+        } else {
+          app.matrixSounds.muteAll();
+        }
+      });
+      (0, _utils.setupCanvasFilters)();
+      (0, _utils.byId)('messageBox').setAttribute('data-loaded', 'loaded');
+      document.getElementById('physicsSpeed').value = app.matrixAmmo.speedUpSimulation;
+      (0, _utils.byId)("physicsSpeed").addEventListener("change", e => {
+        app.matrixAmmo.speedUpSimulation = parseInt(e.target.value);
+      });
+    });
+
+    // test help
+    var helpBox = document.createElement('div');
+    helpBox.id = 'helpBox';
+    helpBox.style.position = 'absolute';
+    helpBox.style.right = '20%';
+    helpBox.style.zIndex = '2';
+    helpBox.style.top = '15%';
+    helpBox.style.width = '60%';
+    helpBox.style.height = '50%';
+    helpBox.style.fontSize = '100%';
+    helpBox.classList.add('btn');
+    helpBox.addEventListener('click', () => {
+      (0, _utils.byId)('helpBox').style.display = 'none';
     });
+    document.body.appendChild(helpBox);
+    (0, _utils.typeText)('helpBox', app.label.get.about, 10);
+    //
     var roll = document.createElement('div');
     roll.id = 'hud-roll';
     roll.classList.add('btn');
@@ -100,8 +384,9 @@ let myDom = exports.myDom = {
       app.ROLL();
     });
     var separator = document.createElement('div');
-    separator.innerHTML = `=======`;
+    separator.innerHTML = `✨maximumroulette.com✨`;
     root.append(settings);
+    root.append(table);
     root.append(help);
     root.append(separator);
     root.append(roll);
@@ -118,42 +403,40 @@ let myDom = exports.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 = _htmlContent.welcomeBoxHTML;
     let initialMsgBoxEvent = function () {
       console.log('click on msgbox');
       (0, _utils.byId)('messageBox').innerHTML = ``;
       (0, _utils.byId)('blocker').style.display = 'none';
       myDom.createMenu();
       messageBox.removeEventListener('click', initialMsgBoxEvent);
+      document.querySelectorAll('.btn, .fancy-label, .fancy-title').forEach(el => {
+        el.addEventListener('mouseenter', () => {
+          app.matrixSounds.play('hover');
+        });
+      });
     };
-    messageBox.addEventListener('click', initialMsgBoxEvent);
     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(() => {
+      (0, _utils.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 dragHandler = document.createElement('div');
+    dragHandler.id = 'dragHandler';
+    dragHandler.classList.add('dragHandler');
+    dragHandler.innerHTML = "⇅ Drag";
+    root.append(dragHandler);
     var rowHeader = document.createElement('div');
     rowHeader.id = 'rowHeader';
     rowHeader.style.top = '10px';
@@ -161,30 +444,33 @@ let myDom = exports.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');
     rowFree.id = 'rowFree';
     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');
     rowUp.id = 'rowUp';
     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');
     rowHand.id = 'rowHand';
@@ -192,7 +478,8 @@ let myDom = exports.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
@@ -201,9 +488,44 @@ let myDom = exports.myDom = {
     this.createRowFree(rowFree);
     this.createRow(rowUp);
     this.createRow(rowHand);
+    this.createSelectedBox();
     document.body.appendChild(root);
     // console.log('JambTable added.')
   },
+  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.fontSize = '175%';
+    topTitleDOM.style.top = '4%';
+    topTitleDOM.style.background = '#7d7d7d8c';
+    topTitleDOM.innerHTML = app.label.get.ready + ", " + app.userState.name + '.';
+    topTitleDOM.setAttribute('data-gamestatus', 'FREE');
+    document.body.appendChild(topTitleDOM);
+    addEventListener('updateTitle', e => {
+      (0, _utils.typeText)('topTitleDOM', e.detail.text);
+      topTitleDOM.setAttribute('data-gamestatus', e.detail.status);
+    });
+  },
   createLeftHeaderRow: function (myRoot) {
     for (var x = 1; x < 7; x++) {
       var rowNumber = document.createElement('div');
@@ -376,7 +698,7 @@ let myDom = exports.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++;
           }
@@ -467,6 +789,7 @@ let myDom = exports.myDom = {
       rowNumber.style.left = '10px';
       rowNumber.style.width = 'auto';
       rowNumber.style.background = '#7d7d7d8c';
+      rowNumber.style.cursor = 'pointer';
       rowNumber.innerHTML = `-`;
       this.memoNumberRow.push(rowNumber);
       // initial
@@ -481,7 +804,7 @@ let myDom = exports.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++;
@@ -501,7 +824,7 @@ let myDom = exports.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++;
@@ -554,9 +877,8 @@ let myDom = exports.myDom = {
     rowMin.style.width = 'auto';
     rowMin.style.background = '#7d7d7d8c';
     rowMin.innerHTML = `-`;
-    this.rowMin = rowMin;
+    // this.rowMin = rowMin;
     myRoot.appendChild(rowMin);
-    this.rowMin = rowMin;
     var rowMaxMinSum = document.createElement('div');
     rowMaxMinSum.id = 'down-rowMaxMinSum';
     rowMaxMinSum.style.width = 'auto';
@@ -792,7 +1114,7 @@ let myDom = exports.myDom = {
     // console.log('<GAMEPLAY><FREE ROW IS FEELED>')
     var TEST = app.myDom.checkForAllDuplicate();
     for (var key in TEST) {
-      if (TEST[key] == 5 || TEST[key] > 5) {
+      if (TEST[key] == 5) {
         // win
         var getDiceID = parseInt(key.replace('value__', ''));
         var win = getDiceID * 5;
@@ -809,11 +1131,11 @@ let myDom = exports.myDom = {
   calcDownRowMax: e => {
     if (dices.validatePass() == false) return;
     e.target.classList.remove('canPlay');
-    (void 0).rowMin.classList.add('canPlay');
+    (0, _utils.byId)('down-rowMin').classList.add('canPlay');
     var test = 0;
     let keyLessNum = Object.keys(dices.R).reduce((key, v) => dices.R[v] < dices.R[key] ? v : key);
     // console.log('FIND MIN DICE TO REMOVE FROM SUM ', keyLessNum);
-    for (var key in dices.R) {
+    for (var key in dices.SAVED_DICES) {
       if (key != keyLessNum) {
         test += parseFloat(dices.R[key]);
       }
@@ -822,41 +1144,42 @@ let myDom = exports.myDom = {
     // now attach next event.
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}));
-    (void 0).rowMax.removeEventListener("click", (void 0).calcDownRowMax);
-    (0, _utils.byId)('down-rowMin').addEventListener('click', (void 0).calcDownRowMin);
+    (0, _utils.byId)('down-rowMax').removeEventListener("click", myDom.calcDownRowMax);
+    (0, _utils.byId)('down-rowMin').addEventListener('click', myDom.calcDownRowMin);
   },
   incrasePoints: function (arg) {
     (0, _utils.byId)('user-points').innerHTML = parseInt((0, _utils.byId)('user-points').innerHTML) + parseInt(arg);
   },
   calcDownRowMin: () => {
     if (dices.validatePass() == false) return;
-    (void 0).rowMin.classList.remove('canPlay');
+    (0, _utils.byId)('down-rowMin').classList.remove('canPlay');
     console.log('MIN ENABLED');
     var maxTestKey = Object.keys(dices.R).reduce(function (a, b) {
       return dices.R[a] > dices.R[b] ? a : b;
     });
     var test = 0;
     for (var key in dices.R) {
-      if (key != maxTestKey) {
-        test += parseFloat(dices.R[key]);
-      } else {
-        console.log('not calc dice ', dices.R[key]);
-      }
-    }
-    (void 0).rowMin.innerHTML = test;
-    (0, _utils.byId)('down-rowMin').removeEventListener('click', (void 0).calcDownRowMin);
+      // if(key != maxTestKey) {
+      test += parseFloat(dices.R[key]);
+      // } else {
+      //   console.log('not calc dice ', dices.R[key])
+      // }
+    }
+    (0, _utils.byId)('down-rowMin').innerHTML = test;
+    (0, _utils.byId)('down-rowMin').removeEventListener('click', myDom.calcDownRowMin);
     // calc max min dont forget rules for bonus +30
-    var SUMMINMAX = parseFloat((void 0).rowMax.innerHTML) - parseFloat((void 0).rowMin.innerHTML);
+    var SUMMINMAX = parseFloat((0, _utils.byId)('down-rowMax').innerHTML) - parseFloat((0, _utils.byId)('down-rowMin').innerHTML);
     (0, _utils.byId)('down-rowMaxMinSum').innerHTML = SUMMINMAX;
     myDom.incrasePoints(SUMMINMAX);
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}));
     (0, _utils.byId)('down-largeStraight').classList.add('canPlay');
-    (0, _utils.byId)('down-largeStraight').addEventListener('click', (void 0).attachKenta);
+    (0, _utils.byId)('down-largeStraight').addEventListener('click', myDom.attachKenta);
+    (0, _utils.byId)('down-rowMin').removeEventListener('click', myDom.calcDownRowMin);
   },
   checkForDuplicate: function () {
     var testArray = [];
-    for (var key in dices.R) {
+    for (var key in dices.SAVED_DICES) {
       var gen = {
         myId: key,
         value: dices.R[key]
@@ -873,7 +1196,7 @@ let myDom = exports.myDom = {
   },
   checkForAllDuplicate: function () {
     var testArray = [];
-    for (var key in dices.R) {
+    for (var key in dices.SAVED_DICES) {
       var gen = {
         myId: key,
         value: dices.R[key]
@@ -898,13 +1221,13 @@ let myDom = exports.myDom = {
     return discret;
   },
   attachKenta: function () {
-    console.log('Test kenta  ', dices.R);
+    console.log('Test kenta  ', dices.SAVED_DICES);
     (0, _utils.byId)('down-largeStraight').classList.remove('canPlay');
     var result = app.myDom.checkForDuplicate()[0];
     var testArray = app.myDom.checkForDuplicate()[1];
-    // console.log('TEST duplik: ' + result);
-    if (result.length == 2) {
-      console.log('TEST duplik less 3 : ' + result);
+    console.log('TEST duplik: ' + result);
+    if (result.length > 0) {
+      console.log('TEST duplik l : ' + result);
       var locPrevent = false;
       testArray.forEach((item, index, array) => {
         if (result[0].value == item.value && locPrevent == false) {
@@ -913,25 +1236,7 @@ let myDom = exports.myDom = {
           array.splice(index, 1);
         }
       });
-      // if we catch  1 and 6 in same stack then it is not possible for kenta...
-      var test1 = false,
-        test6 = false;
-      testArray.forEach((item, index, array) => {
-        if (item.value == 1) {
-          test1 = true;
-        } else if (item.value == 6) {
-          test6 = true;
-        }
-      });
-      if (test1 == true && test6 == true) {
-        (0, _utils.byId)('down-largeStraight').innerHTML = `0`;
-      } else if (test1 == true) {
-        (0, _utils.byId)('down-largeStraight').innerHTML = 15 + 50;
-        myDom.incrasePoints(15 + 50);
-      } else if (test6 == true) {
-        (0, _utils.byId)('down-largeStraight').innerHTML = 20 + 50;
-        myDom.incrasePoints(20 + 50);
-      }
+      (0, _utils.byId)('down-largeStraight').innerHTML = `0`;
     } else if (result < 2) {
       (0, _utils.byId)('down-largeStraight').innerHTML = 66;
       myDom.incrasePoints(66);
@@ -939,8 +1244,8 @@ let myDom = exports.myDom = {
       // zero value
       (0, _utils.byId)('down-largeStraight').innerHTML = `0`;
     }
-    (0, _utils.byId)('down-threeOfAKind').addEventListener('click', this.attachDownTrilling);
-    (0, _utils.byId)('down-largeStraight').removeEventListener('click', this.attachKenta);
+    (0, _utils.byId)('down-threeOfAKind').addEventListener('click', myDom.attachDownTrilling);
+    (0, _utils.byId)('down-largeStraight').removeEventListener('click', myDom.attachKenta);
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}));
   },
@@ -965,8 +1270,8 @@ let myDom = exports.myDom = {
     } else {
       (0, _utils.byId)('down-threeOfAKind').innerHTML = 0;
     }
-    (0, _utils.byId)('down-threeOfAKind').removeEventListener('click', this.attachDownTrilling);
-    (0, _utils.byId)('down-fullHouse').addEventListener('click', this.attachDownFullHouse);
+    (0, _utils.byId)('down-threeOfAKind').removeEventListener('click', myDom.attachDownTrilling);
+    (0, _utils.byId)('down-fullHouse').addEventListener('click', myDom.attachDownFullHouse);
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}));
   },
@@ -997,8 +1302,8 @@ let myDom = exports.myDom = {
     } else {
       (0, _utils.byId)('down-fullHouse').innerHTML = 0;
     }
-    (0, _utils.byId)('down-poker').addEventListener('click', this.attachDownPoker);
-    (0, _utils.byId)('down-fullHouse').removeEventListener('click', this.attachDownFullHouse);
+    (0, _utils.byId)('down-poker').addEventListener('click', myDom.attachDownPoker);
+    (0, _utils.byId)('down-fullHouse').removeEventListener('click', myDom.attachDownFullHouse);
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}));
   },
@@ -1014,13 +1319,13 @@ let myDom = exports.myDom = {
         myDom.incrasePoints(win + 40);
       }
     }
-    (0, _utils.byId)('down-poker').removeEventListener('click', this.attachDownPoker);
-    (0, _utils.byId)('down-jamb').addEventListener('click', this.attachDownJamb);
+    (0, _utils.byId)('down-poker').removeEventListener('click', myDom.attachDownPoker);
+    (0, _utils.byId)('down-jamb').addEventListener('click', myDom.attachDownJamb);
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}));
   },
   attachDownJamb: function () {
-    (0, _utils.byId)('down-jamb').removeEventListener('click', this.attachDownJamb);
+    (0, _utils.byId)('down-jamb').removeEventListener('click', myDom.attachDownJamb);
     console.log('<GAMEPLAY><DOWN ROW IS FEELED>');
     var TEST = app.myDom.checkForAllDuplicate();
     for (var key in TEST) {
@@ -1034,10 +1339,32 @@ let myDom = exports.myDom = {
     }
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}));
+  },
+  isDragging: false,
+  offsetX: 0,
+  offsetY: 0,
+  addDraggerForTable: () => {
+    (0, _utils.byId)('dragHandler').addEventListener('pointerdown', e => {
+      myDom.isDragging = true;
+      const rect = (0, _utils.byId)('jambTable').getBoundingClientRect();
+      myDom.offsetX = e.clientX - rect.left;
+      myDom.offsetY = e.clientY - rect.top;
+      (0, _utils.byId)('dragHandler').setPointerCapture(e.pointerId);
+    });
+    (0, _utils.byId)('dragHandler').addEventListener('pointermove', e => {
+      if (myDom.isDragging) {
+        (0, _utils.byId)('jambTable').style.left = `${e.clientX - myDom.offsetX}px`;
+        (0, _utils.byId)('jambTable').style.top = `${e.clientY - myDom.offsetY}px`;
+      }
+    });
+    (0, _utils.byId)('dragHandler').addEventListener('pointerup', e => {
+      myDom.isDragging = false;
+      (0, _utils.byId)('dragHandler').releasePointerCapture(e.pointerId);
+    });
   }
 };
 
-},{"../../../src/engine/loader-obj.js":7,"../../../src/engine/utils.js":12,"../../../src/world.js":20}],2:[function(require,module,exports){
+},{"../../../src/engine/utils.js":13,"./html-content.js":1}],3:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -1048,7 +1375,6 @@ var _world = _interopRequireDefault(require("./src/world.js"));
 var _loaderObj = require("./src/engine/loader-obj.js");
 var _utils = require("./src/engine/utils.js");
 var _jamb = require("./examples/games/jamb/jamb.js");
-var _sounds = require("./src/sounds/sounds.js");
 var _raycast = require("./src/engine/raycast.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 let application = exports.application = new _world.default({
@@ -1060,12 +1386,83 @@ let application = exports.application = new _world.default({
   }
 }, () => {
   // Dom operations
+  application.userState = {
+    name: 'Guest',
+    points: 0
+  };
   application.myDom = _jamb.myDom;
   _jamb.myDom.createJamb();
+  _jamb.myDom.addDraggerForTable();
   _jamb.myDom.createBlocker();
   application.dices = _jamb.dices;
-
-  // this code must be on top
+  application.activateDiceClickListener = null;
+
+  // -------------------------
+  // TEST
+  application.matrixAmmo.detectTopFaceFromQuat = q => {
+    // Define based on *visual face* → object-space normal mapping
+    const faces = [{
+      face: 1,
+      vec: [0, 1, 0]
+    },
+    // top
+    {
+      face: 2,
+      vec: [0, -1, 0]
+    },
+    // bottom
+    {
+      face: 3,
+      vec: [0, 0, 1]
+    },
+    // front
+    {
+      face: 4,
+      vec: [0, 0, -1]
+    },
+    // back
+    {
+      face: 5,
+      vec: [1, 0, 0]
+    },
+    // right
+    {
+      face: 6,
+      vec: [-1, 0, 0]
+    } // left
+    ];
+    let maxDot = -Infinity;
+    let topFace = null;
+    for (const f of faces) {
+      const v = application.matrixAmmo.applyQuatToVec(q, f.vec);
+      const dot = v.y; // Compare with world up (0, 1, 0)
+      if (dot > maxDot) {
+        maxDot = dot;
+        topFace = f.face;
+      }
+    }
+    return topFace;
+  };
+  application.matrixAmmo.applyQuatToVec = (q, vec) => {
+    const [x, y, z] = vec;
+    const qx = q.x(),
+      qy = q.y(),
+      qz = q.z(),
+      qw = q.w();
+
+    // Quaternion * vector * inverse(quaternion)
+    const ix = qw * x + qy * z - qz * y;
+    const iy = qw * y + qz * x - qx * z;
+    const iz = qw * z + qx * y - qy * x;
+    const iw = -qx * x - qy * y - qz * z;
+    return {
+      x: ix * qw + iw * -qx + iy * -qz - iz * -qy,
+      y: iy * qw + iw * -qy + iz * -qx - ix * -qz,
+      z: iz * qw + iw * -qz + ix * -qy - iy * -qx
+    };
+  };
+  // -------------------------
+  // This code must be on top (Physics)
   application.matrixAmmo.detectCollision = function () {
     this.lastRoll = '';
     this.presentScore = '';
@@ -1086,57 +1483,73 @@ let application = exports.application = new _world.default({
           var testR = contactManifold.getBody0().getWorldTransform().getRotation();
         }
         var passed = false;
-        if (Math.abs(testR.y()) < 0.00001) {
-          this.lastRoll = "3";
-          this.presentScore += 4;
-          passed = true;
-        }
-        if (Math.abs(testR.x()) < 0.00001) {
-          this.lastRoll = "5";
-          this.presentScore += 3;
-          passed = true;
-        }
-        if (testR.x().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
-          this.lastRoll = "6";
-          this.presentScore += 2;
-          passed = true;
-        }
-        if (testR.x().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
-          this.lastRoll = "2";
-          this.presentScore += 1;
-          passed = true;
-        }
-        if (testR.z().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
-          this.lastRoll = "4";
-          this.presentScore += 6;
-          passed = true;
-        }
-        if (testR.z().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
-          this.lastRoll = "1";
-          this.presentScore += 5;
-          passed = true;
+        const face = application.matrixAmmo.detectTopFaceFromQuat(testR);
+        if (face) {
+          this.lastRoll = face.toString();
+          // Update score logic
+          dispatchEvent(new CustomEvent(`dice-${face}`, {
+            detail: {
+              result: `dice-${face}`,
+              cubeId: MY_DICE_NAME
+            }
+          }));
         }
-        if (passed == true) dispatchEvent(new CustomEvent(`dice-${this.lastRoll}`, {
-          detail: {
-            result: `dice-${this.lastRoll}`,
-            cubeId: MY_DICE_NAME
-          }
-        }));
+        // if(Math.abs(testR.y()) < 0.00001) {
+        //   this.lastRoll = "3";
+        //   this.presentScore += 4;
+        //   passed = true;
+        // }
+        // if(Math.abs(testR.x()) < 0.00001) {
+        //   this.lastRoll = "5";
+        //   this.presentScore += 3;
+        //   passed = true;
+        // }
+        // if(testR.x().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
+        //   this.lastRoll = "6";
+        //   this.presentScore += 2;
+        //   passed = true;
+        // }
+        // if(testR.x().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
+        //   this.lastRoll = "2";
+        //   this.presentScore += 1;
+        //   passed = true;
+        // }
+        // if(testR.z().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
+        //   this.lastRoll = "4";
+        //   this.presentScore += 6;
+        //   passed = true;
+        // }
+        // if(testR.z().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
+        //   this.lastRoll = "1";
+        //   this.presentScore += 5;
+        //   passed = true;
+        // }
+        // if(passed == true) dispatchEvent(new CustomEvent(`dice-${this.lastRoll}`, {
+        //   detail: {
+        //     result: `dice-${this.lastRoll}`,
+        //     cubeId: MY_DICE_NAME
+        //   }
+        // }))
       }
     }
   };
   (0, _raycast.addRaycastListener)();
   addEventListener("ray.hit.event", e => {
-    console.log("hit cube ", e.detail.hitObject.name);
+    if ((0, _utils.byId)('topTitleDOM') && (0, _utils.byId)('topTitleDOM').getAttribute('data-gamestatus') != 'FREE' && (0, _utils.byId)('topTitleDOM').getAttribute('data-gamestatus') != 'status-select') {
+      console.log('no hit in middle of game ...');
+      return;
+    }
     if (application.dices.STATUS == "FREE_TO_PLAY") {
       console.log("hit cube status free to play prevent pick. ", e.detail.hitObject.name);
-    } else if (application.dices.STATUS == "SELECT_DICES_1") {
-      console.log("hit cube status SELECT1 pick.", e.detail.hitObject.name);
+    } else if (application.dices.STATUS == "SELECT_DICES_1" || application.dices.STATUS == "SELECT_DICES_2" || application.dices.STATUS == "FINISHED") {
+      if (Object.keys(application.dices.SAVED_DICES).length >= 5) {
+        console.log("PREVENTED SELECT1/2 pick.", e.detail.hitObject.name);
+        return;
+      }
+      console.log("hit cube status SELECT1/2 pick.", e.detail.hitObject.name);
       application.dices.pickDice(e.detail.hitObject.name);
     }
   });
-  // OR add manual see readme
-
   addEventListener('mousemove', e => {
     // console.log('only on click')
     _raycast.touchCoordinate.enabled = true;
@@ -1147,13 +1560,58 @@ let application = exports.application = new _world.default({
   application.matrixSounds.createAudio('block', 'res/audios/block.mp3', 6);
   application.matrixSounds.createAudio('dice1', 'res/audios/dice1.mp3', 6);
   application.matrixSounds.createAudio('dice2', 'res/audios/dice2.mp3', 6);
+  application.matrixSounds.createAudio('hover', 'res/audios/toggle_002.mp3', 3);
+  application.matrixSounds.createAudio('roll', 'res/audios/dice-roll.mp3', 2);
   addEventListener('AmmoReady', () => {
+    app.matrixAmmo.speedUpSimulation = 2;
     (0, _loaderObj.downloadMeshes)({
       cube: "./res/meshes/jamb/dice.obj"
     }, onLoadObj, {
       scale: [1, 1, 1],
       swap: [null]
     });
+    (0, _loaderObj.downloadMeshes)({
+      star1: "./res/meshes/shapes/star1.obj"
+    }, m => {
+      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']
+      };
+      // application.addCube(o)
+
+      // application.addMeshObj({
+      //   position: {x: 0, y: 6, z: -5},
+      //   rotation: {x: 0, y: 0, z: 0},
+      //   rotationSpeed: {x: 0, y: 0, z: 0},
+      //   texturesPaths: ['./res/meshes/jamb/dice.png'],
+      //   useUVShema4x2: true,
+      //   name: 'star1',
+      //   mesh: m.star1,
+      //   raycast: {enabled: true, radius: 2},
+      //   physics: {
+      //     enabled: true,
+      //     geometry: "Cube"
+      //   }
+      // })
+    }, {
+      scale: [11, 11, 11],
+      swap: [null]
+    });
     (0, _loaderObj.downloadMeshes)({
       bg: "./res/meshes/jamb/bg.obj"
     }, onLoadObjFloor, {
@@ -1257,9 +1715,6 @@ let application = exports.application = new _world.default({
   }
   function onLoadObjOther(m) {
     application.myLoadedMeshes = m;
-    for (var key in m) {
-      // console.log(`%c Loaded objs -> : ${key} `, LOG_MATRIX);
-    }
     // Add logo text top
     application.addMeshObj({
       position: {
@@ -1281,7 +1736,6 @@ let application = exports.application = new _world.default({
         geometry: "Cube"
       }
     });
-    // console.log('camera set')
     // application.cameras.WASD.pitch = 0.2
     setTimeout(() => {
       app.cameras.WASD.velocity[1] = 18;
@@ -1289,14 +1743,11 @@ let application = exports.application = new _world.default({
       app.matrixAmmo.setKinematicTransform(app.matrixAmmo.getBodyByName('mainTitle'), 0, 0, 0, 1);
       app.matrixAmmo.setKinematicTransform(app.matrixAmmo.getBodyByName('bg'), 0, -10, 0, 0, 0, 0);
       // Better access getBodyByName
-      console.log(' app.matrixAmmo. ', app.matrixAmmo.getBodyByName('CubePhysics1'));
-    }, 1225);
+      // console.log(' app.matrixAmmo. ', app.matrixAmmo.getBodyByName('CubePhysics1'))
+    }, 1200);
   }
   function onLoadObjFloor(m) {
     application.myLoadedMeshes = m;
-    for (var key in m) {
-      // console.log(`%c Loaded objs -> : ${key} `, LOG_MATRIX);
-    }
     application.addMeshObj({
       scale: [10, 0.1, 0.1],
       position: {
@@ -1309,7 +1760,6 @@ let application = exports.application = new _world.default({
         y: 0,
         z: 0
       },
-      // rotationSpeed: {x: 0, y: 0, z: 0},
       texturesPaths: ['./res/meshes/jamb/bg.png'],
       name: 'bg',
       mesh: m.bg,
@@ -1323,10 +1773,6 @@ let application = exports.application = new _world.default({
   }
   function onLoadObj(m) {
     application.myLoadedMeshes = m;
-    for (var key in m) {
-      // console.log(`%c Loaded objs -> : ${key} `, LOG_MATRIX);
-    }
-
     // Add dices
     application.addMeshObj({
       position: {
@@ -1504,7 +1950,7 @@ let application = exports.application = new _world.default({
     });
     application.TOLERANCE = 0;
     let allDiceDoneProcedure = () => {
-      console.log("ALL DONE");
+      console.log("ALL DONE", application.TOLERANCE);
       application.TOLERANCE++;
       if (application.TOLERANCE >= 1) {
         removeEventListener('dice-1', dice1Click);
@@ -1513,92 +1959,171 @@ let application = exports.application = new _world.default({
         removeEventListener('dice-4', dice4Click);
         removeEventListener('dice-5', dice5Click);
         removeEventListener('dice-6', dice6Click);
-        console.log('FINAL >>>> ', _jamb.dices.R);
+        console.log(`%cFINAL<preliminar> ${_jamb.dices.R}`, _utils.LOG_FUNNY);
         application.TOLERANCE = 0;
         app.cameras.WASD.yaw = 0.01;
         app.cameras.WASD.pitch = -1.26;
         app.cameras.WASD.position[2] = -18;
         app.cameras.WASD.position[1] = 19;
-
-        // dices.STATUS = "PLACE_RESULT";
-        _jamb.dices.STATUS = "SELECT_DICES_1";
-        // application.dices.STATUS = "FREE_TO_PLAY";
+        // ??                                                     ?
+        if (_jamb.dices.STATUS == "FREE_TO_PLAY" || _jamb.dices.STATUS == "IN_PLAY") {
+          _jamb.dices.STATUS = "SELECT_DICES_1";
+          console.log(`%cStatus<SELECT_DICES_1>`, _utils.LOG_FUNNY);
+          setTimeout(() => {
+            dispatchEvent(new CustomEvent('updateTitle', {
+              detail: {
+                text: app.label.get.freetoroll,
+                status: 'FREE'
+              }
+            }));
+          }, 500);
+        } else if (_jamb.dices.STATUS == "SELECT_DICES_1") {
+          _jamb.dices.STATUS = "SELECT_DICES_2";
+          setTimeout(() => {
+            dispatchEvent(new CustomEvent('updateTitle', {
+              detail: {
+                text: app.label.get.freetoroll,
+                status: 'FREE'
+              }
+            }));
+          }, 500);
+          console.log(`%cStatus<SELECT_DICES_2>`, _utils.LOG_FUNNY);
+        } else if (_jamb.dices.STATUS == "SELECT_DICES_2") {
+          _jamb.dices.STATUS = "FINISHED";
+          console.log(`%cStatus<FINISHED>`, _utils.LOG_FUNNY);
+          dispatchEvent(new CustomEvent('updateTitle', {
+            detail: {
+              text: app.label.get.pick5,
+              status: 'status-select'
+            }
+          }));
+        }
       }
     };
     addEventListener('all-done', allDiceDoneProcedure);
     addEventListener('FREE_TO_PLAY', () => {
-      // setup againt 3d space loc
-      console.info(' setup againt 3d space loc make some logic for pos ...');
-      app.matrixAmmo.getBodyByName('CubePhysics1').setLinearVelocity(new Ammo.btVector3(2, 2, 12));
-      app.matrixAmmo.getBodyByName('CubePhysics2').setLinearVelocity(new Ammo.btVector3(2, 2, 12));
-      app.matrixAmmo.getBodyByName('CubePhysics3').setLinearVelocity(new Ammo.btVector3(2, 2, 12));
-      app.matrixAmmo.getBodyByName('CubePhysics4').setLinearVelocity(new Ammo.btVector3(2, 2, 12));
-      app.matrixAmmo.getBodyByName('CubePhysics5').setLinearVelocity(new Ammo.btVector3(2, 2, 12));
-      app.matrixAmmo.getBodyByName('CubePhysics6').setLinearVelocity(new Ammo.btVector3(2, 2, 12));
+      // Big reset
+      console.log(`%c<Big reset needed ...>`, _utils.LOG_FUNNY);
+      app.dices.SAVED_DICES = {};
+      app.dices.setStartUpPosition();
+      setTimeout(() => {
+        app.dices.activateAllDicesPhysics();
+      }, 1000);
+      app.cameras.WASD.yaw = 0;
+      app.cameras.WASD.pitch = 0;
+      app.cameras.WASD.position[2] = 0;
+      app.cameras.WASD.position[1] = 3.76;
+      dispatchEvent(new CustomEvent('updateTitle', {
+        detail: {
+          text: app.label.get.hand1,
+          status: 'FREE'
+        }
+      }));
     });
 
     // ACTIONS
     let dice1Click = e => {
-      // console.info('DICE 1', e.detail)
+      // console.info('DICE 1 click ?????????', e.detail)
       _jamb.dices.R[e.detail.cubeId] = '1';
       _jamb.dices.checkAll();
     };
-    // addEventListener('dice-1', dice1Click)
-
     let dice2Click = e => {
       // console.info('DICE 2', e.detail)
       _jamb.dices.R[e.detail.cubeId] = '2';
       _jamb.dices.checkAll();
     };
-    // addEventListener('dice-2', dice2Click)
-
     let dice3Click = e => {
       // console.info('DICE 3', e.detail)
       _jamb.dices.R[e.detail.cubeId] = '3';
       _jamb.dices.checkAll();
     };
-    // addEventListener('dice-3', dice3Click)
-
     let dice4Click = e => {
       // console.info('DICE 4', e.detail)
       _jamb.dices.R[e.detail.cubeId] = '4';
       _jamb.dices.checkAll();
     };
-    // addEventListener('dice-4', dice4Click)
-
     let dice5Click = e => {
       // console.info('DICE 5', e.detail)
       _jamb.dices.R[e.detail.cubeId] = '5';
       _jamb.dices.checkAll();
     };
-    // addEventListener('dice-5', dice5Click)
-
     let dice6Click = e => {
       // console.info('DICE 6', e.detail)
       _jamb.dices.R[e.detail.cubeId] = '6';
       _jamb.dices.checkAll();
     };
-    // addEventListener('dice-6', dice6Click)
-
+    function shootDice(x) {
+      setTimeout(() => {
+        app.matrixAmmo.getBodyByName(`CubePhysics${x}`).setAngularVelocity(new Ammo.btVector3((0, _utils.randomFloatFromTo)(3, 12), 9, 9));
+        app.matrixAmmo.getBodyByName(`CubePhysics${x}`).setLinearVelocity(new Ammo.btVector3((0, _utils.randomFloatFromTo)(-5, 5), 15, -20));
+        setTimeout(() => app.matrixSounds.play('roll'), 1500);
+      }, 200 * x);
+    }
+    application.activateDiceClickListener = index => {
+      index = parseInt(index);
+      switch (index) {
+        case 1:
+          addEventListener('dice-1', dice1Click);
+        case 2:
+          addEventListener('dice-2', dice2Click);
+        case 3:
+          addEventListener('dice-3', dice3Click);
+        case 4:
+          addEventListener('dice-4', dice4Click);
+        case 5:
+          addEventListener('dice-5', dice5Click);
+        case 6:
+          addEventListener('dice-6', dice6Click);
+      }
+    };
     let rollProcedure = () => {
+      if (topTitleDOM.getAttribute('data-gamestatus') != 'FREE') {
+        console.log('validation fails...');
+        return;
+      }
       if (_jamb.dices.STATUS == "FREE_TO_PLAY") {
         app.matrixSounds.play('start');
         _jamb.dices.STATUS = "IN_PLAY";
+        dispatchEvent(new CustomEvent('updateTitle', {
+          detail: {
+            text: app.label.get.hand1,
+            status: 'inplay'
+          }
+        }));
         addEventListener('dice-1', dice1Click);
         addEventListener('dice-2', dice2Click);
         addEventListener('dice-3', dice3Click);
         addEventListener('dice-4', dice4Click);
         addEventListener('dice-5', dice5Click);
         addEventListener('dice-6', dice6Click);
-        function shootDice(x) {
-          setTimeout(() => {
-            app.matrixAmmo.getBodyByName(`CubePhysics${x}`).setAngularVelocity(new Ammo.btVector3((0, _utils.randomFloatFromTo)(3, 12), 9, 9));
-            app.matrixAmmo.getBodyByName(`CubePhysics${x}`).setLinearVelocity(new Ammo.btVector3((0, _utils.randomFloatFromTo)(-5, 5), 15, -20));
-          }, 200 * x);
-        }
         for (var x = 1; x < 7; x++) {
           shootDice(x);
         }
+      } else if (_jamb.dices.STATUS == "SELECT_DICES_1" || _jamb.dices.STATUS == "SELECT_DICES_2") {
+        // Now no selected dices still rolling
+        for (let i = 1; i <= 6; i++) {
+          const key = "CubePhysics" + i;
+          if (!(key in app.dices.SAVED_DICES)) {
+            console.log("Still in game last char is id : ", key[key.length - 1]);
+            application.activateDiceClickListener(parseInt(key[key.length - 1]));
+            shootDice(key[key.length - 1]);
+          } else {
+            console.log("??????????Still in game last char is id : ", key[key.length - 1]);
+            application.activateDiceClickListener(parseInt(key[key.length - 1]));
+          }
+        }
+        // ????
+        // application.activateDiceClickListener(1);
+
+        dispatchEvent(new CustomEvent('updateTitle', {
+          detail: {
+            text: _jamb.dices.STATUS == "SELECT_DICES_1" ? app.label.get.hand1 : app.label.get.hand2,
+            status: 'inplay'
+          }
+        }));
+      } else if (_jamb.dices.STATUS == "FINISHED") {
+        _utils.mb.error('No more roll...');
+        _utils.mb.show('Pick up 5 dices');
       }
     };
     addEventListener('DICE.ROLL', rollProcedure);
@@ -1609,7 +2134,7 @@ let application = exports.application = new _world.default({
 });
 window.app = application;
 
-},{"./examples/games/jamb/jamb.js":1,"./src/engine/loader-obj.js":7,"./src/engine/raycast.js":11,"./src/engine/utils.js":12,"./src/sounds/sounds.js":19,"./src/world.js":20}],3:[function(require,module,exports){
+},{"./examples/games/jamb/jamb.js":2,"./src/engine/loader-obj.js":8,"./src/engine/raycast.js":12,"./src/engine/utils.js":13,"./src/world.js":21}],4:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -6956,7 +7481,7 @@ function setDefaultType(ctor) {
   setDefaultType$1(ctor);
 }
 
-},{}],4:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -7341,7 +7866,6 @@ class MEBall {
     if (typeof this.renderables === 'undefined') return;
     passEncoder.setPipeline(this.pipeline);
     passEncoder.setBindGroup(0, this.frameBindGroup);
-
     // Loop through every renderable object and draw them individually.
     // (Because many of these meshes are repeated, with only the transforms
     // differing, instancing would be highly effective here. This sample
@@ -7371,7 +7895,7 @@ class MEBall {
 }
 exports.default = MEBall;
 
-},{"../shaders/shaders":16,"./engine":6,"./matrix-class":8,"wgpu-matrix":3}],5:[function(require,module,exports){
+},{"../shaders/shaders":17,"./engine":7,"./matrix-class":9,"wgpu-matrix":4}],6:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -7796,7 +8320,7 @@ class MECube {
 }
 exports.default = MECube;
 
-},{"../shaders/shaders":16,"./engine":6,"./matrix-class":8,"wgpu-matrix":3}],6:[function(require,module,exports){
+},{"../shaders/shaders":17,"./engine":7,"./matrix-class":9,"wgpu-matrix":4}],7:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -8256,7 +8780,7 @@ function createInputHandler(window, canvas) {
   };
 }
 
-},{"./utils":12,"wgpu-matrix":3}],7:[function(require,module,exports){
+},{"./utils":13,"wgpu-matrix":4}],8:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -8723,7 +9247,7 @@ function play(nameAni) {
   this.animation.currentAni = this.animation.anims[this.animation.anims.active].from;
 }
 
-},{}],8:[function(require,module,exports){
+},{}],9:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -8959,7 +9483,7 @@ class Rotation {
 }
 exports.Rotation = Rotation;
 
-},{"./utils":12}],9:[function(require,module,exports){
+},{"./utils":13}],10:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -9439,12 +9963,6 @@ class MEMeshObj {
     renderPass.setVertexBuffer(2, this.vertexTexCoordsBuffer);
     renderPass.setIndexBuffer(this.indexBuffer, 'uint16');
     renderPass.drawIndexed(this.indexCount);
-
-    // test ray
-
-    // try{ OLD
-    // if(this.raycast.enabled == true) checkingRay(this)
-    // } catch(e) {}
   };
   drawShadows = shadowPass => {
     shadowPass.setBindGroup(0, this.sceneBindGroupForShadow);
@@ -9458,7 +9976,7 @@ class MEMeshObj {
 }
 exports.default = MEMeshObj;
 
-},{"../shaders/fragment.wgsl":15,"../shaders/vertex.wgsl":17,"../shaders/vertexShadow.wgsl":18,"./engine":6,"./matrix-class":8,"./raycast":11,"./utils":12,"wgpu-matrix":3}],10:[function(require,module,exports){
+},{"../shaders/fragment.wgsl":16,"../shaders/vertex.wgsl":18,"../shaders/vertexShadow.wgsl":19,"./engine":7,"./matrix-class":9,"./raycast":12,"./utils":13,"wgpu-matrix":4}],11:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -9856,7 +10374,7 @@ class MEMesh {
 }
 exports.default = MEMesh;
 
-},{"../shaders/fragment.wgsl":15,"../shaders/vertex.wgsl":17,"../shaders/vertexShadow.wgsl":18,"./engine":6,"./loader-obj":7,"./matrix-class":8,"wgpu-matrix":3}],11:[function(require,module,exports){
+},{"../shaders/fragment.wgsl":16,"../shaders/vertex.wgsl":18,"../shaders/vertexShadow.wgsl":19,"./engine":7,"./loader-obj":8,"./matrix-class":9,"wgpu-matrix":4}],12:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -9960,7 +10478,7 @@ function addRaycastListener() {
   });
 }
 
-},{"wgpu-matrix":3}],12:[function(require,module,exports){
+},{"wgpu-matrix":4}],13:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -9983,7 +10501,10 @@ exports.quaternion_rotation_matrix = quaternion_rotation_matrix;
 exports.radToDeg = radToDeg;
 exports.randomFloatFromTo = randomFloatFromTo;
 exports.randomIntFromTo = randomIntFromTo;
-exports.vec3 = exports.urlQuery = exports.scriptManager = void 0;
+exports.scriptManager = void 0;
+exports.setupCanvasFilters = setupCanvasFilters;
+exports.typeText = typeText;
+exports.vec3 = exports.urlQuery = void 0;
 const vec3 = exports.vec3 = {
   cross(a, b, dst) {
     dst = dst || new Float32Array(3);
@@ -10700,7 +11221,148 @@ let mb = exports.mb = {
   }
 };
 
-},{}],13:[function(require,module,exports){
+// Registry to track running animations per element
+const typingStates = new Map();
+function typeText(elementId, htmlString, delay = 50) {
+  const el = document.getElementById(elementId);
+  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 (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();
+}
+function setupCanvasFilters(canvasId) {
+  let canvas = document.getElementById(canvasId);
+  if (canvas == null) {
+    canvas = document.getElementsByTagName('canvas')[0];
+  }
+  const filterState = {
+    blur: "0px",
+    grayscale: "0%",
+    brightness: "100%",
+    contrast: "100%",
+    saturate: "100%",
+    sepia: "0%",
+    invert: "0%",
+    hueRotate: "0deg"
+  };
+  function updateFilter() {
+    const filterString = `
+      blur(${filterState.blur}) 
+      grayscale(${filterState.grayscale}) 
+      brightness(${filterState.brightness}) 
+      contrast(${filterState.contrast}) 
+      saturate(${filterState.saturate}) 
+      sepia(${filterState.sepia}) 
+      invert(${filterState.invert}) 
+      hue-rotate(${filterState.hueRotate})
+    `.trim();
+    canvas.style.filter = filterString;
+  }
+  const bindings = {
+    blurControl: "blur",
+    grayscaleControl: "grayscale",
+    brightnessControl: "brightness",
+    contrastControl: "contrast",
+    saturateControl: "saturate",
+    sepiaControl: "sepia",
+    invertControl: "invert",
+    hueControl: "hueRotate"
+  };
+  Object.entries(bindings).forEach(([selectId, key]) => {
+    const el = document.getElementById(selectId);
+    el.addEventListener("change", e => {
+      filterState[key] = e.target.value;
+      updateFilter();
+    });
+  });
+  updateFilter(); // Initial
+}
+
+},{}],14:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -10740,7 +11402,7 @@ class MultiLang {
 }
 exports.MultiLang = MultiLang;
 
-},{"../engine/utils":12}],14:[function(require,module,exports){
+},{"../engine/utils":13}],15:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -10756,6 +11418,7 @@ class MatrixAmmo {
     _utils.scriptManager.LOAD("./ammojs/ammo.js", "ammojs", undefined, undefined, this.init);
     this.lastRoll = '';
     this.presentScore = '';
+    this.speedUpSimulation = 1;
   }
   init = () => {
     // console.log('pre ammo')
@@ -10817,6 +11480,7 @@ class MatrixAmmo {
     var myMotionState = new Ammo.btDefaultMotionState(startTransform),
       rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, colShape, localInertia),
       body = new Ammo.btRigidBody(rbInfo);
+    console.log("TEST ADDING PHYSICS ");
     body.MEObject = MEObject;
     this.dynamicsWorld.addRigidBody(body);
     this.rigidBodies.push(body);
@@ -10890,8 +11554,6 @@ class MatrixAmmo {
     pos.setX(pos.x() + x);
     pos.setY(pos.y() + y);
     pos.setZ(pos.z() + z);
-    // console.log('position kinematic move : ', pos)
-    // console.log('position localRot  : ', localRot)
     localRot.setX(rx);
     localRot.setY(ry);
     localRot.setZ(rz);
@@ -10899,14 +11561,12 @@ class MatrixAmmo {
     let ms = physicsBody.getMotionState();
     if (ms) {
       var tmpTrans = new Ammo.btTransform();
-
       // quat.setValue(quat.x(), quat.y(), quat.z(), quat.w());
       tmpTrans.setIdentity();
       tmpTrans.setOrigin(pos);
       tmpTrans.setRotation(localRot);
       ms.setWorldTransform(tmpTrans);
     }
-    // console.log('body, ', body)
   }
   getBodyByName(name) {
     var b = null;
@@ -10985,34 +11645,53 @@ class MatrixAmmo {
     }
   }
   updatePhysics() {
-    // Step world
-    this.dynamicsWorld.stepSimulation(1 / 60, 10);
-    // Update rigid bodies
-    var trans = new Ammo.btTransform();
+    if (!Ammo) return;
+    const trans = new Ammo.btTransform();
+    const transform = new Ammo.btTransform();
     this.rigidBodies.forEach(function (body) {
-      if (body.getMotionState()) {
+      if (body.isKinematic) {
+        transform.setIdentity();
+        transform.setOrigin(new Ammo.btVector3(body.MEObject.position.x, body.MEObject.position.y, body.MEObject.position.z));
+        const quat = new Ammo.btQuaternion();
+        quat.setRotation(new Ammo.btVector3(body.MEObject.rotation.axis.x, body.MEObject.rotation.axis.y, body.MEObject.rotation.axis.z), (0, _utils.degToRad)(body.MEObject.rotation.angle));
+        transform.setRotation(quat);
+        body.setWorldTransform(transform);
+        const ms = body.getMotionState();
+        if (ms) ms.setWorldTransform(transform);
+      }
+    });
+    Ammo.destroy(transform);
+
+    // Step simulation AFTER setting kinematic transforms
+    const timeStep = 1 / 60;
+    const maxSubSteps = 10;
+    for (let i = 0; i < this.speedUpSimulation; i++) {
+      this.dynamicsWorld.stepSimulation(timeStep, maxSubSteps);
+    }
+    this.rigidBodies.forEach(function (body) {
+      if (!body.isKinematic && body.getMotionState()) {
         body.getMotionState().getWorldTransform(trans);
-        var _x = trans.getOrigin().x().toFixed(2);
-        var _y = trans.getOrigin().y().toFixed(2);
-        var _z = trans.getOrigin().z().toFixed(2);
+        const _x = +trans.getOrigin().x().toFixed(2);
+        const _y = +trans.getOrigin().y().toFixed(2);
+        const _z = +trans.getOrigin().z().toFixed(2);
         body.MEObject.position.setPosition(_x, _y, _z);
-        var test = trans.getRotation();
-        var testAxis = test.getAxis();
-        test.normalize();
-        body.MEObject.rotation.axis.x = testAxis.x();
-        body.MEObject.rotation.axis.y = testAxis.y();
-        body.MEObject.rotation.axis.z = testAxis.z();
-        body.MEObject.rotation.matrixRotation = (0, _utils.quaternion_rotation_matrix)(test);
-        body.MEObject.rotation.angle = (0, _utils.radToDeg)(parseFloat(test.getAngle().toFixed(2)));
+        const rot = trans.getRotation();
+        const rotAxis = rot.getAxis();
+        rot.normalize();
+        body.MEObject.rotation.axis.x = rotAxis.x();
+        body.MEObject.rotation.axis.y = rotAxis.y();
+        body.MEObject.rotation.axis.z = rotAxis.z();
+        body.MEObject.rotation.matrixRotation = (0, _utils.quaternion_rotation_matrix)(rot);
+        body.MEObject.rotation.angle = (0, _utils.radToDeg)(parseFloat(rot.getAngle().toFixed(2)));
       }
     });
-    // collision detect
+    Ammo.destroy(trans);
     this.detectCollision();
   }
 }
 exports.default = MatrixAmmo;
 
-},{"../engine/utils":12}],15:[function(require,module,exports){
+},{"../engine/utils":13}],16:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -11070,7 +11749,7 @@ fn main(input : FragmentInput) -> @location(0) vec4f {
   // return vec4(textureColor.rgb , 0.5);
 }`;
 
-},{}],16:[function(require,module,exports){
+},{}],17:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -11128,7 +11807,7 @@ fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
   return vec4f(textureColor.rgb * lightColor, textureColor.a);
 }`;
 
-},{}],17:[function(require,module,exports){
+},{}],18:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -11185,7 +11864,7 @@ fn main(
 }
 `;
 
-},{}],18:[function(require,module,exports){
+},{}],19:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -11213,7 +11892,7 @@ fn main(
 }
 `;
 
-},{}],19:[function(require,module,exports){
+},{}],20:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -11224,10 +11903,18 @@ class MatrixSounds {
   constructor() {
     this.volume = 0.5;
     this.audios = {};
+    this.enabled = true; // 🔇 global flag to mute/allow audio
+  }
+  muteAll() {
+    this.enabled = false;
+    Object.values(this.audios).forEach(audio => audio.pause());
+  }
+  unmuteAll() {
+    this.enabled = true;
   }
   createClones(c, name, path) {
-    for (var x = 1; x < c; x++) {
-      let a = new Audio(path);
+    for (let x = 1; x < c; x++) {
+      const a = new Audio(path);
       a.id = name + x;
       a.volume = this.volume;
       this.audios[name + x] = a;
@@ -11235,7 +11922,7 @@ class MatrixSounds {
     }
   }
   createAudio(name, path, useClones) {
-    let a = new Audio(path);
+    const a = new Audio(path);
     a.id = name;
     a.volume = this.volume;
     this.audios[name] = a;
@@ -11245,25 +11932,37 @@ class MatrixSounds {
     }
   }
   play(name) {
-    if (this.audios[name].paused == true) {
-      this.audios[name].play();
+    if (!this.enabled) return; // 🔇 prevent playing if muted
+
+    const audio = this.audios[name];
+    if (!audio) return;
+    if (audio.paused) {
+      audio.play().catch(e => {
+        if (e.name !== 'NotAllowedError') console.warn("sounds error:", e);
+      });
     } else {
       this.tryClone(name);
     }
   }
   tryClone(name) {
-    var cc = 1;
+    if (!this.enabled) return; // 🔇 prevent playing clones
+
+    let cc = 1;
     try {
-      while (this.audios[name + cc].paused == false) {
+      while (this.audios[name + cc] && this.audios[name + cc].paused === false) {
         cc++;
       }
-      if (this.audios[name + cc]) this.audios[name + cc].play();
-    } catch (err) {}
+      if (this.audios[name + cc]) {
+        this.audios[name + cc].play();
+      }
+    } catch (err) {
+      console.warn("Clone play failed:", err);
+    }
   }
 }
 exports.MatrixSounds = MatrixSounds;
 
-},{}],20:[function(require,module,exports){
+},{}],21:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -11453,7 +12152,44 @@ class MatrixEngineWGPU {
       o.entityArgPass = this.entityArgPass;
       o.cameras = this.cameras;
     }
+    if (typeof o.physics === 'undefined') {
+      o.physics = {
+        scale: [1, 1, 1],
+        enabled: true,
+        geometry: "Sphere",
+        radius: o.scale,
+        name: o.name,
+        rotation: o.rotation
+      };
+    }
+    if (typeof o.position !== 'undefined') {
+      o.physics.position = o.position;
+    }
+    if (typeof o.physics.enabled === 'undefined') {
+      o.physics.enabled = true;
+    }
+    if (typeof o.physics.geometry === 'undefined') {
+      o.physics.geometry = "Sphere";
+    }
+    if (typeof o.physics.radius === 'undefined') {
+      o.physics.radius = o.scale;
+    }
+    if (typeof o.physics.mass === 'undefined') {
+      o.physics.mass = 1;
+    }
+    if (typeof o.physics.name === 'undefined') {
+      o.physics.name = o.name;
+    }
+    if (typeof o.physics.scale === 'undefined') {
+      o.physics.scale = o.scale;
+    }
+    if (typeof o.physics.rotation === 'undefined') {
+      o.physics.rotation = o.rotation;
+    }
     let myCube1 = new _cube.default(this.canvas, this.device, this.context, o);
+    if (o.physics.enabled == true) {
+      this.matrixAmmo.addPhysics(myCube1, o.physics);
+    }
     this.mainRenderBundle.push(myCube1);
   };
 
@@ -11516,7 +12252,44 @@ class MatrixEngineWGPU {
       o.entityArgPass = this.entityArgPass;
       o.cameras = this.cameras;
     }
+    if (typeof o.physics === 'undefined') {
+      o.physics = {
+        scale: [1, 1, 1],
+        enabled: true,
+        geometry: "Sphere",
+        radius: o.scale,
+        name: o.name,
+        rotation: o.rotation
+      };
+    }
+    if (typeof o.position !== 'undefined') {
+      o.physics.position = o.position;
+    }
+    if (typeof o.physics.enabled === 'undefined') {
+      o.physics.enabled = true;
+    }
+    if (typeof o.physics.geometry === 'undefined') {
+      o.physics.geometry = "Sphere";
+    }
+    if (typeof o.physics.radius === 'undefined') {
+      o.physics.radius = o.scale;
+    }
+    if (typeof o.physics.mass === 'undefined') {
+      o.physics.mass = 1;
+    }
+    if (typeof o.physics.name === 'undefined') {
+      o.physics.name = o.name;
+    }
+    if (typeof o.physics.scale === 'undefined') {
+      o.physics.scale = o.scale;
+    }
+    if (typeof o.physics.rotation === 'undefined') {
+      o.physics.rotation = o.rotation;
+    }
     let myBall1 = new _ball.default(this.canvas, this.device, this.context, o);
+    if (o.physics.enabled == true) {
+      this.matrixAmmo.addPhysics(myBall1, o.physics);
+    }
     this.mainRenderBundle.push(myBall1);
   };
 
@@ -11700,19 +12473,24 @@ class MatrixEngineWGPU {
     }
   };
   framePassPerObject = () => {
-    // console.log('framePassPerObject')
     let commandEncoder = this.device.createCommandEncoder();
-    this.rbContainer = [];
-    let passEncoder;
+    this.matrixAmmo.updatePhysics();
     this.mainRenderBundle.forEach((meItem, index) => {
-      meItem.draw(commandEncoder);
+      if (index === 0) {
+        if (meItem.renderPassDescriptor) meItem.renderPassDescriptor.colorAttachments[0].loadOp = 'clear';
+      } else {
+        if (meItem.renderPassDescriptor) meItem.renderPassDescriptor.colorAttachments[0].loadOp = 'load';
+      }
+      // Update transforms, physics, etc. (optional)
+      meItem.draw(commandEncoder); // optional: if this does per-frame updates
       if (meItem.renderBundle) {
-        this.rbContainer.push(meItem.renderBundle);
-        passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
-        passEncoder.executeBundles(this.rbContainer);
+        // Set up view per object
+        meItem.renderPassDescriptor.colorAttachments[0].view = this.context.getCurrentTexture().createView();
+        const passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+        passEncoder.executeBundles([meItem.renderBundle]); // ✅ Use only this bundle
         passEncoder.end();
       } else {
-        meItem.draw(commandEncoder);
+        meItem.draw(commandEncoder); // fallback if no renderBundle
       }
     });
     this.device.queue.submit([commandEncoder.finish()]);
@@ -11721,4 +12499,4 @@ class MatrixEngineWGPU {
 }
 exports.default = MatrixEngineWGPU;
 
-},{"./engine/ball.js":4,"./engine/cube.js":5,"./engine/engine.js":6,"./engine/mesh-obj.js":9,"./engine/mesh.js":10,"./engine/utils.js":12,"./multilang/lang.js":13,"./physics/matrix-ammo.js":14,"./sounds/sounds.js":19,"wgpu-matrix":3}]},{},[2]);
+},{"./engine/ball.js":5,"./engine/cube.js":6,"./engine/engine.js":7,"./engine/mesh-obj.js":10,"./engine/mesh.js":11,"./engine/utils.js":13,"./multilang/lang.js":14,"./physics/matrix-ammo.js":15,"./sounds/sounds.js":20,"wgpu-matrix":4}]},{},[3]);