feat(ui): improve page styling

mdonadoni · Jan 19, 2025 · a5aca70 · a5aca70
1 parent b8fea52
commit a5aca70
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 32 deletions.
diff --git a/assets/index.html b/assets/index.html
@@ -5,35 +5,75 @@
     <script type="module" src="main.js" defer></script>
   </head>
   <body>
-    <div class="main-container">
-      <div class="settings">
-        <label for="kill">Kill rate</label>
-        <input id="kill" type="range" min="0.01" max="0.1" step="any" />
-        <span id="kill-value"></span>
+    <div class="page">
+      <header>
+        <h1>Reaction Diffusion</h1>
+      </header>
+      <div class="main-content">
+        <div class="lhs-column">
+          <h2>Settings</h2>
+          <div class="settings">
+            <div class="settings-slider">
+              <label for="kill">Kill rate</label>
+              <input id="kill" type="range" min="0.01" max="0.1" step="any" />
+              <span id="kill-value"></span>
+            </div>
 
-        <label for="feed">Feed rate</label>
-        <input id="feed" type="range" min="0.01" max="0.1" step="any" />
-        <span id="feed-value"></span>
+            <div class="settings-slider">
+              <label for="feed">Feed rate</label>
+              <input id="feed" type="range" min="0.01" max="0.1" step="any" />
+              <span id="feed-value"></span>
+            </div>
 
-        <label for="diffusion-a">Diffusion A</label>
-        <input id="diffusion-a" type="range" min="0" max="1" step="any" />
-        <span id="diffusion-a-value"></span>
+            <div class="settings-slider">
+              <label for="diffusion-a">Diffusion A</label>
+              <input
+                id="diffusion-a"
+                type="range"
+                min="0"
+                max="0.5"
+                step="any"
+              />
+              <span id="diffusion-a-value"></span>
+            </div>
 
-        <label for="diffusion-b">Diffusion B</label>
-        <input id="diffusion-b" type="range" min="0" max="1" step="any" />
-        <span id="diffusion-b-value"></span>
+            <div class="settings-slider">
+              <label for="diffusion-b">Diffusion B</label>
+              <input
+                id="diffusion-b"
+                type="range"
+                min="0"
+                max="0.5"
+                step="any"
+              />
+              <span id="diffusion-b-value"></span>
+            </div>
 
-        <label for="timestep">Timestep</label>
-        <input id="timestep" type="range" min="0" max="1" step="any" />
-        <span id="timestep-value"></span>
+            <div class="settings-slider">
+              <label for="timestep">Timestep</label>
+              <input id="timestep" type="range" min="0" max="1" step="any" />
+              <span id="timestep-value"></span>
+            </div>
 
-        <label for="steps-per-frame">Steps per frame</label>
-        <input id="steps-per-frame" type="range" min="0" max="500" step="1" />
-        <span id="steps-per-frame-value"></span>
+            <div class="settings-slider">
+              <label for="steps-per-frame">Steps per frame</label>
+              <input
+                id="steps-per-frame"
+                type="range"
+                min="0"
+                max="500"
+                step="1"
+              />
+              <span id="steps-per-frame-value"></span>
+            </div>
+          </div>
 
-        <button id="reset">Reset</button>
+          <div class="actions">
+            <button id="reset">Reset</button>
+          </div>
+        </div>
+        <div id="canvas-container"></div>
       </div>
-      <div id="canvas-container"></div>
     </div>
   </body>
 </html>
diff --git a/assets/main.js b/assets/main.js
@@ -19,8 +19,8 @@ const outputs = {
 };
 
 const state = {
-  diffusionA: 1.0,
-  diffusionB: 0.5,
+  diffusionA: 0.5,
+  diffusionB: 0.25,
   feed: 0.03,
   kill: 0.09,
   stepsPerFrame: 20,
@@ -41,9 +41,10 @@ const configKeys = [
 function setValue(key, value) {
   console.log(`Setting value ${key} to ${value}`);
   state[key] = value;
-  updateCallbacks[key](value);
-  outputs[key].innerHTML = value.toString();
   inputs[key].value = value;
+  updateCallbacks[key](value);
+  // show rounded value in UI
+  outputs[key].innerHTML = parseFloat(value.toFixed(4)).toString();
 }
 
 // initialise UI

diff --git a/assets/styles.css b/assets/styles.css
@@ -1,10 +1,66 @@
+* {
+  box-sizing: border-box;
+}
+
+h1,
+h2 {
+  margin: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+}
+
+.page {
+  margin: 0 auto;
+  height: 100vh;
+  max-width: 1200px;
+}
+
+header {
+  padding: 0.5em 0;
+  margin-bottom: 2rem;
+  border-bottom: 2px solid #e8e8e8;
+}
+
+.main-content {
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+h2 {
+  padding-bottom: 0.5em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid #e8e8e8;
+}
+
 .settings {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  margin: 0 auto;
+}
+
+.settings-slider {
   display: grid;
-  grid-template-columns: 120px 200px 100px;
+  grid-template-columns: 140px auto 100px;
   column-gap: 1em;
 }
 
-.main-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+.actions {
+  margin: 2em 0;
+  height: 3em;
+  display: flex;
+}
+
+.actions > * {
+  padding: 0 2em;
+}
+
+canvas {
+  display: block;
+  margin: auto;
 }
diff --git a/src/config.rs b/src/config.rs
@@ -13,9 +13,9 @@ pub struct Config {
     pub steps_per_frame: u32,
     #[arg(long, default_value_t = 1.0)]
     pub timestep: f32,
-    #[arg(long, default_value_t = 1.0)]
-    pub diffusion_a: f32,
     #[arg(long, default_value_t = 0.5)]
+    pub diffusion_a: f32,
+    #[arg(long, default_value_t = 0.25)]
     pub diffusion_b: f32,
     #[arg(long, default_value_t = 0.03)]
     pub feed: f32,