feat: fps throttle ui

Kaetram · Sep 29, 2023 · 84e8531 · 84e8531
1 parent 89449f2
commit 84e8531
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 11 deletions.
diff --git a/packages/client/components/game.astro b/packages/client/components/game.astro
@@ -76,7 +76,6 @@
 
         <div id="in-app-store" class="slice-container-fancy">
             <div id="close-in-app-store" class="close-container-fancy"></div>
-
         </div>
 
         <div id="player-info">
@@ -347,6 +346,19 @@
                             <input type="checkbox" aria-labelledby="webgl-text" />
                             <span class="checkmark"></span>
                         </label>
+
+                        <label id="frame-throttle">
+                            <span id="frame-throttle-text">FPS Throttle</span>
+
+                            <select
+                                id="frame-throttle-select"
+                                aria-labelledby="frame-throttle-text"
+                            >
+                                <option value="0">OFF</option>
+                                <option value="1">45 FPS</option>
+                                <option value="2">30 FPS</option>
+                            </select>
+                        </label>
                     </div>
                 </div>
 

diff --git a/packages/client/scss/app/impl/_intro.scss b/packages/client/scss/app/impl/_intro.scss
@@ -21,14 +21,9 @@
     top: 1em;
     right: 1em;
 
-    padding: 0.25em;
-
-    font-size: 1em;
-    color: #c6c0a3;
-
-    background-color: #000;
-    border: none;
-    border-radius: 0.25em;
+    &[hidden] {
+        display: none;
+    }
 }
 
 body.intro {
@@ -109,7 +104,7 @@ body.intro {
 @media (--portrait) {
     body.intro {
         footer {
-            //bottom: 3.5em;
+            // bottom: 3.5em;
         }
     }
 }
diff --git a/packages/client/scss/base/_index.scss b/packages/client/scss/base/_index.scss
@@ -21,6 +21,17 @@ h3 {
     font-family: Fibberish, Monogram, AdvoCut, arial, sans-serif;
 }
 
+select {
+    padding: 0.25em;
+
+    font-size: 1em;
+    color: #c6c0a3;
+
+    background-color: #000;
+    border: none;
+    border-radius: 0.25em;
+}
+
 @each $size, $scale in media.$sizes {
     @media ($size) {
         body {

diff --git a/packages/client/src/app.ts b/packages/client/src/app.ts
@@ -57,6 +57,7 @@ export default class App {
 
     private validation: NodeListOf<HTMLElement> = document.querySelectorAll('.validation-summary')!;
     private loading: HTMLElement = document.querySelector('.loader')!;
+    private langSelect: HTMLElement = document.querySelector('#lang-select')!;
     private worldSelectButton: HTMLElement = document.querySelector('#world-select-button')!;
     private gameVersion: HTMLElement = document.querySelector('#game-version')!;
 
@@ -263,6 +264,7 @@ export default class App {
         this.body.className = 'intro';
 
         this.menuHidden = false;
+        this.langSelect.hidden = false;
         this.worldSelectButton.hidden = false;
         this.gameVersion.hidden = false;
     }
@@ -278,6 +280,7 @@ export default class App {
         this.body.className = 'game';
 
         this.menuHidden = true;
+        this.langSelect.hidden = true;
         this.worldSelectButton.hidden = true;
         this.gameVersion.hidden = true;
 
@@ -775,7 +778,7 @@ export default class App {
      */
 
     private validateNumberInput(input: HTMLInputElement) {
-        input.value = input.value.replace(/\D/g, '');
+        input.value = input.value.replaceAll(/\D/g, '');
     }
 
     /**