Tweak UI

fornwall · Jun 22, 2023 · 9c98df2 · 9c98df2
1 parent ae6ed1a
commit 9c98df2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 29 deletions.
diff --git a/site/index.html b/site/index.html
@@ -12,10 +12,10 @@
             padding: 0;
         }
 
-        html,
-        body {
+        html {
             width: 100%;
             height: 100%;
+            user-select: none;
             background: black;
         }
 
@@ -50,7 +50,7 @@
         }
 
         #overlay {
-            padding: 0.4em;
+            padding: 0.6em;
             color: white;
             position: absolute;
             top: 0px;
@@ -62,6 +62,11 @@
         .hidden {
             display: none;
         }
+
+        .input-row {
+            display: flex;
+            align-items: center;
+        }
     </style>
 </head>
 
@@ -82,17 +87,20 @@ <h1>wgpu Game of life</h1>
         <span id="hideableControls">
             <br />
             <br />
-            <label for="rule">Rule: </label><select id="rule"></select>
-            <br />
+            <span class="input-row">
+                <label for="rule">Rule:&nbsp;</label><select id="rule"></select>
+            </span>
             <br />
             Size: <span id="size"></span>
             <br />
             <br />
-            <label for="density">Density: </label><input type="range" id="density" min="1" max="99"></input>
-            <span id="density-display"></span>
-            <br />
-            <br />
-            <a href="https://github.com/fornwall/wgpu-game-of-life">Source</a>
+            <span class="input-row">
+                <label for="density">Density:&nbsp;</label>
+                <input type="range" id="density" min="1" max="99"></input>
+                <label for="density" id="density-display"></span>
+        </span>
+        <br />
+        <a href="https://github.com/fornwall/wgpu-game-of-life">Source</a>
         </span>
     </div>
 </body>

diff --git a/site/index.js b/site/index.js
@@ -13,9 +13,10 @@ globalThis.setNewState = function (ruleIdx, size, seed, density) {
   document.title = ruleSelect.options[ruleIdx].textContent;
   sizeElement.textContent = size + 'x' + size;
   ruleSelect.value = ruleIdx;
-  window.location.hash = `rule=${ruleIdx}&size=${size}&seed=${seed}&density=${density}`;
+  const queryString = `?rule=${ruleIdx}&size=${size}&seed=${seed}&density=${density}`;
+  window.history.replaceState({}, '', queryString);
   densityInput.value = density;
-  densityDisplay.textContent = '0.' + density;
+  densityDisplay.innerHTML = '&nbsp;0.' + density;
   overlayElement.style.display = 'block';
 }
 
@@ -43,15 +44,10 @@ try {
   document.getElementById('fullscreenButton').addEventListener('click', toggleFullscreen);
   document.getElementById('hideControlsButton').addEventListener('click', toggleControls);
 
-  let rule = null;
-  let seed = null;
-  let density = null;
-  if (window.location.hash) {
-    const urlParams = new URLSearchParams(window.location.hash.substring(1));
-    rule = parseInt(urlParams.get('rule'));
-    seed = parseInt(urlParams.get('seed'));
-    density = parseInt(urlParams.get('density'));
-  }
+  const urlParams = new URLSearchParams(window.location.search);
+  const rule = parseInt(urlParams.get('rule'));
+  const seed = parseInt(urlParams.get('seed'));
+  const density = parseInt(urlParams.get('density'));
 
   await run(rule, seed, density);
 

diff --git a/src/event_loop.rs b/src/event_loop.rs
@@ -130,22 +130,14 @@ pub fn handle_event_loop(
                 state.paused = !state.paused;
             }
             WindowEvent::Resized(physical_size) => {
-                log::info!("resize: {:?}", physical_size);
                 state.resize(*physical_size);
             }
             WindowEvent::ScaleFactorChanged { new_inner_size, .. } => {
-                log::info!("scale factor: {:?}", new_inner_size);
                 state.resize(**new_inner_size);
             }
             WindowEvent::CursorMoved { position, .. } => {
                 state.cursor_position = *position;
             }
-            WindowEvent::MouseInput {
-                state: winit::event::ElementState::Pressed,
-                ..
-            } => {
-                log::error!("Mouse pressed: {:?}", state.cursor_position);
-            }
             WindowEvent::KeyboardInput {
                 event:
                     winit::event::KeyEvent {