small changes - game smoother, changing number boxes is nicer, can cl…

…ick number next to ranges to change them
TitanPlayz100 · Jun 6, 2024 · 6d866f8 · 6d866f8
1 parent 4103ce2
commit 6d866f8
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 52 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,18 +1,3 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
 src-temp/
-
 node_modules/
-dist/
-out/
-target/
-gen/schemas
-
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/
+target/
diff --git a/README.md b/README.md
@@ -2,18 +2,16 @@
 
 Finally a readme  
 Hosted on github pages [here](https://titanplayz100.github.io/teti/)  
-You can literally just open up [index.html](index.html) in a browser as well to play  
-***
-You can build this yourself or download the installer from the latest release
+You can literally just open up [index.html](index.html) in a browser as well to play 
 
-### Self Build With Tauri
+## Build With Tauri
+Build this yourself or download the installer from the latest release
 
-> You need rust installed
+> You need rust installed  
 > https://tauri.app/v1/guides/building/
 
-To build
-- enter tauri-build directory
+- open **tauri-build** directory
 - `npm run build` or run build.bat
 
-should create a file at /target/release/teti.exe
-You can delete /src afterwards
+Creates exe at **/target/release/teti.exe**  
+You can delete **/src-temp**
diff --git a/code.js b/code.js
@@ -683,7 +683,7 @@ function renderToCanvas(cntx, canvas, grid, yPosChange, [dx, dy] = [0, 0]) {
 function renderingLoop() {
     renderToCanvas(ctx, canvasField, boardState, 39)
     if (boardAlphaChange != 0) { updateNext(); updateHold(); }
-    requestAnimationFrame(renderingLoop);
+    setTimeout(()=>requestAnimationFrame(renderingLoop), 1);
 }
 
 //#region Menus
@@ -702,7 +702,7 @@ function openModal(id) {
             setting.value = newValue
             if (setting.classList[1] == 'keybind') setting.textContent = newValue;
             if (setting.classList[1] == 'check') setting.checked = (newValue);
-            if (setting.classList[1] == 'range') sliderChange(setting);
+            if (setting.classList[1] == 'range') {sliderChange(setting); rangeClickListener(setting)};
         });
     const gamemodeSelect = [...document.getElementsByClassName('gamemodeSelect')]
     gamemodeSelect.forEach((setting) => {
@@ -721,27 +721,32 @@ function closeModal(id) {
     [...document.getElementsByClassName('option')]
         .filter((item) => item.parentElement.parentElement.id == id)
         .forEach((setting) => {
-            const settingid = setting.id
+            const settingid = setting.id, type = setting.classList[1];
+            if (type == 'number' && setting.value == '') setting.value = currentRangeOption.min;
             eval(settingGroup)[settingid] =
-                setting.classList[1] == 'check' ? setting.checked :
-                    setting.classList[1] == 'keybind' ? setting.textContent :
+                type == 'check' ? setting.checked :
+                    type == 'keybind' ? setting.textContent :
                         setting.classList[2] == 'exp' ? toExpValue(setting.value) :
                             setting.value;
-            if (setting.id == 'nextQueue') {
+            if (settingid == 'nextQueue') {
                 nextPieces[0] = setting.value.split(' ').filter((p) => pieceNames.includes(p))
                 shuffleRemainingPieces();
                 updateNext();
             }
-            if (setting.id == 'holdQueue') {
+            if (settingid == 'holdQueue') {
                 const filtp = [setting.value].filter((p) => pieceNames.includes(p))
                 holdPiece = { piece: getPiece(filtp), occured: false }; updateHold();
             }
-
+            if (id == 'changeRangeValue') {
+                currentRangeOption.value = document.getElementById('rangeValue').value;
+                sliderChange(currentRangeOption);
+            }
         })
     closeDialog(document.getElementById(id));
     saveSettings();
     if (id == 'displaySettingsDialog') renderStyles();
     if (id == 'gameSettingsDialog' || id == 'gamemodeDialog' || id == 'gameEnd') startGame();
+    if (id == 'changeRangeValue') isDialogOpen = true;
 }
 
 function closeDialog(element) {
@@ -763,6 +768,14 @@ function sliderChange(el) {
     el.parentElement.children[0].textContent = `${text}: ${value}`
 }
 
+function rangeClickListener(el) {
+    el.parentElement.children[0].addEventListener('click', () => {
+        currentRangeOption = el;
+        openModal('changeRangeValue')
+        document.getElementById('rangeValue').value = el.value;
+    })
+}
+
 function buttonInput(el) { document.getElementById('frontdrop').showModal(); bindingKey = el.id; }
 
 function setKeybind(key) {
@@ -830,13 +843,15 @@ function resetSettings(settingGroup) {
 }
 
 function toggleDialog() {
-    if (isDialogOpen) { closeDialog(document.querySelectorAll("dialog[open]")[0]) }
+    if (isDialogOpen) { document.querySelectorAll("dialog[open]").forEach(e=>closeDialog(e)) }
     else { openModal('settingsPanel'); }
 }
 
-function checkValue(el) {
-    if (el.value < currentRangeOption.min) el.value = currentRangeOption.min;
-    if (el.value > currentRangeOption.max) el.value = currentRangeOption.max;
+function checkValue(el, el2 = currentRangeOption) {
+    currentRangeOption = el2;
+    if (el.value == '') return;
+    if (el.value < Number(el2.min)) el.value = Number(el2.min);
+    if (el.value > Number(el2.max)) el.value = Number(el2.max);
 }
 
 // misc functions

diff --git a/index.html b/index.html
@@ -117,13 +117,15 @@ <h1>Select Gamemode</h1>
         <button id="gamemode6" class="gamemodeSelect" onclick="setGamemode(6);closeModal('gamemodeDialog')">Backfire</button>
         <button id="gamemode7" class="gamemodeSelect" onclick="setGamemode(7);closeModal('gamemodeDialog')">4w</button>
         <button id="gamemode8" class="gamemodeSelect" onclick="setGamemode(8);closeModal('gamemodeDialog')">Lookahead</button>
-        <div class="settingLayout"><label>Required Lines (sprint, lookahead)</label> <input class="option number" type="number" id="requiredLines" oninput="if(value<1) value=1" /></div>
-        <div class="settingLayout"><label>Time Limit (ultra, survival)</label> <input class="option number" type="number" id="timeLimit" oninput="if(value<1) value=1" /></div>
-        <div class="settingLayout"><label>Attack (attacker, backfire)</label> <input class="option number" type="number" id="requiredAttack" oninput="if(value<1) value=1" /></div>
-        <div class="settingLayout"><label>Garbage Rows (digger)</label> <input class="option number" type="number" id="requiredGarbage" oninput="if(value<1) value=1" /></div>
-        <div class="settingLayout"><label>APM (survival)</label> <input class="option number" type="number" id="survivalRate" oninput="if(value<1) value=1" /></div>
-        <div class="settingLayout"><label>Multiplier (backfire)</label> <input class="option number" type="number" id="backfireMulti" oninput="if(value<0.1) value=0.1" /></div>
-        <div class="settingLayout"><label>Look ahead pieces</label> <input class="option number" type="number" id="lookAheadPieces" oninput="if(value<1) value=1" /></div>
+        <input id="limiter" type="range" min="1" max="9999" style="display: none;"/>
+        <input id="limiter2" type="range" min="0.1" max="9999" style="display: none;"/>
+        <div class="settingLayout"><label>Required Lines (sprint, lookahead)</label> <input class="option number" type="number" id="requiredLines" oninput="checkValue(this, document.getElementById('limiter'))"/></div>
+        <div class="settingLayout"><label>Time Limit (ultra, survival)</label> <input class="option number" type="number" id="timeLimit" oninput="checkValue(this, document.getElementById('limiter'))" /></div>
+        <div class="settingLayout"><label>Attack (attacker, backfire)</label> <input class="option number" type="number" id="requiredAttack" oninput="checkValue(this, document.getElementById('limiter'))" /></div>
+        <div class="settingLayout"><label>Garbage Rows (digger)</label> <input class="option number" type="number" id="requiredGarbage" oninput="checkValue(this, document.getElementById('limiter'))" /></div>
+        <div class="settingLayout"><label>APM (survival)</label> <input class="option number" type="number" id="survivalRate" oninput="checkValue(this, document.getElementById('limiter'))" /></div>
+        <div class="settingLayout"><label>Multiplier (backfire)</label> <input class="option number" type="number" id="backfireMulti" oninput="checkValue(this, document.getElementById('limiter2'))" /></div>
+        <div class="settingLayout"><label>Look ahead pieces</label> <input class="option number" type="number" id="lookAheadPieces"oninput="checkValue(this, document.getElementById('limiter'))" /></div>
     </dialog>
 
     <dialog id="gameEnd" class="dialog" onkeydown="newGame(event.key, 'gameEnd')">
@@ -148,10 +150,10 @@ <h1><b>GAME ENDED</b></h1>
         <button id="gamemode" class="settingPanelButton" onclick="openModal('gamemodeDialog')" title="Select Gamemode / Change goals">
             <img src="./assets/timer.svg" style="transform: translateY(10%); height: 90%;">
         </button>
-        <button id="downloadloadSettings" class="settingPanelButton smallPanelButton" onclick="downloadSettings()" style=" flex: 0 0 2%;" title="Download / Export Settings">
+        <button id="downloadloadSettings" class="settingPanelButton smallPanelButton" onclick="downloadSettings()" title="Download / Export Settings">
             <img src="./assets/download.svg" style="transform: translateY(10%); height: 90%;">
         </button>
-        <span id="uploadSettings" class="settingPanelButton smallPanelButton" style=" flex: 0 0 2%; height: 4.5vh;" onclick="document.getElementById('fileUpload').click()" title="Upload / Import Settings (only .teti files)">
+        <span id="uploadSettings" class="settingPanelButton smallPanelButton" style="height: 4.5vh; " onclick="document.getElementById('fileUpload').click()" title="Upload / Import Settings (only .teti files)">
             <input type="file" id="fileUpload" onchange="uploadSettings(this)" hidden accept=".teti">
             <img src="./assets/upload.svg" style="transform: translateY(10%); height: 90%;">
         </span>
@@ -166,7 +168,8 @@ <h1><b>Change Queues</b></h1>
 
     <dialog id="changeRangeValue" class="dialog">
         <h1>Enter Value</h1>
-        <input class="option number" type="number" id="rangeValue" oninput="checkValue(this)" />
+        <div class="settingLayout"><input class="option number" type="number" id="rangeValue" oninput="checkValue(this)" /></div>
+        <button class="closeDialog" onclick="closeModal('changeRangeValue')" style="bottom: 10%;" >Save</button>
     </dialog>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -277,6 +277,20 @@ button>img {
     aspect-ratio: 1.5/1;
 }
 
+#changeRangeValue {
+    height: 20vh;
+    aspect-ratio: 1.3/1;
+}
+
+#changeRangeValue>div {
+    height: 1.6vh;
+}
+
+#changeRangeValue>div>input {
+    right: auto;
+    left: 35%;
+}
+
 .dialog.closingAnimation {
     animation: zoomout 0.3s forwards ease;
 }

diff --git a/tauri-build/build.bat b/tauri-build/build.bat
@@ -1,13 +1,13 @@
+echo Starting install
 call npm install
 
 cd ..
-mkdir src
-xcopy assets\ src-temp\assets\
+mkdir src-temp
+xcopy /s assets\ src-temp\assets\
 copy index.html src-temp\index.html
 copy code.js src-temp\code.js
 copy style.css src-temp\style.css
 
+echo Starting build
 cd tauri-build
-call tauri build
-
-cd ..
+call tauri build