matrix-engine-wgpu 1.2.0 → 1.2.1

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

@@ -1,8 +1,8 @@
 
 export let settingsBox = `
-<div>
+<div style="">
   <span style="font-size:170%" data-label="settings"></span>
-  <div style="margin:20px;" >
+  <div style="justify-items: flex-end;margin:20px;" >
     <div>
       <span data-label="sounds"></span>
       <label class="switch">
@@ -10,25 +10,29 @@ export let settingsBox = `
         <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>
+      <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>
 
-      <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>
+        <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>
@@ -92,13 +96,14 @@ export let settingsBox = `
         <option value="270deg">270°</option>
       </select>
       </div>
-
-    </div>
-    <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>`;
 

package/examples/games/jamb/jamb.js

@@ -151,6 +151,7 @@ export let dices = {
       this.C = 0;
     }
   },
+
   validatePass: function() {
     if(Object.keys(this.SAVED_DICES).length !== 5) {
       console.log('%cBLOCK', LOG_FUNNY)
@@ -193,6 +194,21 @@ export let myDom = {
     help.id = 'HELP';
     help.classList.add('btn')
     help.innerHTML = `<span data-label="help"></span>`;
+    help.addEventListener('click', () => {
+      if(byId('helpBox').style.display != 'none') {
+        byId('helpBox').style.display = 'none';
+      } else {
+        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';
@@ -218,13 +234,31 @@ export let myDom = {
         }
       });
       setupCanvasFilters();
-      byId('messageBox').setAttribute('data-loaded', 'loaded')
+      byId('messageBox').setAttribute('data-loaded', 'loaded');
+      document.getElementById('physicsSpeed').value = app.matrixAmmo.speedUpSimulation;
       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', () => {
+      byId('helpBox').style.display = 'none';
+    });
+    document.body.appendChild(helpBox)
+    typeText('helpBox', app.label.get.about, 10);
+    //
     var roll = document.createElement('div')
     roll.id = 'hud-roll';
     roll.classList.add('btn');
@@ -237,6 +271,7 @@ export let myDom = {
     separator.innerHTML = `✨maximumroulette.com✨`;
 
     root.append(settings)
+    root.append(table);
     root.append(help)
     root.append(separator)
     root.append(roll)
@@ -291,6 +326,12 @@ export let myDom = {
     root.id = 'jambTable';
     root.style.position = 'absolute';
 
+    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';
@@ -376,12 +417,15 @@ export let myDom = {
     topTitleDOM.style.width = 'auto';
     topTitleDOM.style.position = 'absolute';
     topTitleDOM.style.left = '35%';
-    topTitleDOM.style.top = '5%';
+    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) => {
-      typeText('topTitleDOM', e.detail);
+      typeText('topTitleDOM', e.detail.text);
+      topTitleDOM.setAttribute('data-gamestatus', e.detail.status);
     })
   },
 
@@ -783,9 +827,8 @@ export let 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';
@@ -1039,7 +1082,7 @@ export let 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;
@@ -1056,11 +1099,11 @@ export let myDom = {
   calcDownRowMax: (e) => {
     if(dices.validatePass() == false) return;
     e.target.classList.remove('canPlay');
-    this.rowMin.classList.add('canPlay');
+    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]);
       }
@@ -1069,8 +1112,8 @@ export let myDom = {
     // now attach next event.
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}));
-    this.rowMax.removeEventListener("click", this.calcDownRowMax);
-    byId('down-rowMin').addEventListener('click', this.calcDownRowMin);
+    byId('down-rowMax').removeEventListener("click", myDom.calcDownRowMax);
+    byId('down-rowMin').addEventListener('click', myDom.calcDownRowMin);
   },
 
   incrasePoints: function(arg) {
@@ -1079,32 +1122,33 @@ export let myDom = {
 
   calcDownRowMin: () => {
     if(dices.validatePass() == false) return;
-    this.rowMin.classList.remove('canPlay')
+    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])
-      }
+      // if(key != maxTestKey) {
+      test += parseFloat(dices.R[key])
+      // } else {
+      //   console.log('not calc dice ', dices.R[key])
+      // }
     }
-    this.rowMin.innerHTML = test;
-    byId('down-rowMin').removeEventListener('click', this.calcDownRowMin);
+    byId('down-rowMin').innerHTML = test;
+    byId('down-rowMin').removeEventListener('click', myDom.calcDownRowMin);
     // calc max min dont forget rules for bonus +30
-    var SUMMINMAX = parseFloat(this.rowMax.innerHTML) - parseFloat(this.rowMin.innerHTML)
+    var SUMMINMAX = parseFloat(byId('down-rowMax').innerHTML) - parseFloat(byId('down-rowMin').innerHTML)
     byId('down-rowMaxMinSum').innerHTML = SUMMINMAX;
     myDom.incrasePoints(SUMMINMAX);
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}))
     byId('down-largeStraight').classList.add('canPlay');
-    byId('down-largeStraight').addEventListener('click', this.attachKenta)
+    byId('down-largeStraight').addEventListener('click', myDom.attachKenta)
+    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]};
       testArray.push(gen);
     }
@@ -1120,7 +1164,7 @@ export let 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]};
       testArray.push(gen);
     }
@@ -1143,13 +1187,13 @@ export let myDom = {
   },
 
   attachKenta: function() {
-    console.log('Test kenta  ', dices.R)
+    console.log('Test kenta  ', dices.SAVED_DICES)
     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) {
@@ -1158,24 +1202,8 @@ export let 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) {
-        byId('down-largeStraight').innerHTML = `0`;
-      } else if(test1 == true) {
-        byId('down-largeStraight').innerHTML = 15 + 50;
-        myDom.incrasePoints(15 + 50);
-      } else if(test6 == true) {
-        byId('down-largeStraight').innerHTML = 20 + 50;
-        myDom.incrasePoints(20 + 50);
-      }
+      byId('down-largeStraight').innerHTML = `0`;
+
     } else if(result < 2) {
       byId('down-largeStraight').innerHTML = 66;
       myDom.incrasePoints(66);
@@ -1183,8 +1211,8 @@ export let myDom = {
       // zero value
       byId('down-largeStraight').innerHTML = `0`;
     }
-    byId('down-threeOfAKind').addEventListener('click', this.attachDownTrilling)
-    byId('down-largeStraight').removeEventListener('click', this.attachKenta)
+    byId('down-threeOfAKind').addEventListener('click', myDom.attachDownTrilling)
+    byId('down-largeStraight').removeEventListener('click', myDom.attachKenta)
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}))
   },
@@ -1210,8 +1238,8 @@ export let myDom = {
     } else {
       byId('down-threeOfAKind').innerHTML = 0;
     }
-    byId('down-threeOfAKind').removeEventListener('click', this.attachDownTrilling)
-    byId('down-fullHouse').addEventListener('click', this.attachDownFullHouse)
+    byId('down-threeOfAKind').removeEventListener('click', myDom.attachDownTrilling)
+    byId('down-fullHouse').addEventListener('click', myDom.attachDownFullHouse)
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}))
   },
@@ -1243,8 +1271,8 @@ export let myDom = {
     } else {
       byId('down-fullHouse').innerHTML = 0;
     }
-    byId('down-poker').addEventListener('click', this.attachDownPoker)
-    byId('down-fullHouse').removeEventListener('click', this.attachDownFullHouse)
+    byId('down-poker').addEventListener('click', myDom.attachDownPoker)
+    byId('down-fullHouse').removeEventListener('click', myDom.attachDownFullHouse)
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}))
   },
@@ -1261,14 +1289,14 @@ export let myDom = {
         myDom.incrasePoints(win + 40);
       }
     }
-    byId('down-poker').removeEventListener('click', this.attachDownPoker)
-    byId('down-jamb').addEventListener('click', this.attachDownJamb)
+    byId('down-poker').removeEventListener('click', myDom.attachDownPoker)
+    byId('down-jamb').addEventListener('click', myDom.attachDownJamb)
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}))
   },
 
   attachDownJamb: function() {
-    byId('down-jamb').removeEventListener('click', this.attachDownJamb)
+    byId('down-jamb').removeEventListener('click', myDom.attachDownJamb)
     console.log('<GAMEPLAY><DOWN ROW IS FEELED>')
     var TEST = app.myDom.checkForAllDuplicate();
     for(var key in TEST) {
@@ -1282,5 +1310,31 @@ export let myDom = {
     }
     dices.STATUS = "FREE_TO_PLAY";
     dispatchEvent(new CustomEvent('FREE_TO_PLAY', {}))
+  },
+
+  isDragging: false,
+  offsetX: 0,
+  offsetY: 0,
+  addDraggerForTable: () => {
+    byId('dragHandler').addEventListener('pointerdown', (e) => {
+      myDom.isDragging = true;
+      const rect = byId('jambTable').getBoundingClientRect();
+      myDom.offsetX = e.clientX - rect.left;
+      myDom.offsetY = e.clientY - rect.top;
+      byId('dragHandler').setPointerCapture(e.pointerId);
+    });
+
+    byId('dragHandler').addEventListener('pointermove', (e) => {
+      if(myDom.isDragging) {
+        byId('jambTable').style.left = `${e.clientX - myDom.offsetX}px`;
+        byId('jambTable').style.top = `${e.clientY - myDom.offsetY}px`;
+      }
+    });
+
+    byId('dragHandler').addEventListener('pointerup', (e) => {
+      myDom.isDragging = false;
+      byId('dragHandler').releasePointerCapture(e.pointerId);
+    });
   }
+
 }

package/examples/games/jamb/readme.md

@@ -0,0 +1,3 @@
+
+
+Sound Effect by <a href="https://pixabay.com/users/u_qpfzpydtro-29496424/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=142528">u_qpfzpydtro</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=142528">Pixabay</a>

package/index.js

@@ -6,7 +6,7 @@
 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";
+import {addRaycastListener, getRayFromMouse, rayIntersectsSphere} from "./src/engine/raycast.js";
 
 var about = () => {
   console.log("Hi npm. matrix-engine for webgpu is ready...")