Refactor ControlView and update mtmc.css for enhanced control styling, improved layout, and dynamic speed setting functionality.

src/jsMain/kotlin/mtmc/view/ControlView.kt

@@ -1,11 +1,20 @@
 package mtmc.view
 
+import kotlinx.html.button
 import kotlinx.html.div
 import kotlinx.html.i
+import kotlinx.html.js.onChangeFunction
+import kotlinx.html.js.onClickFunction
+import kotlinx.html.label
+import kotlinx.html.option
+import kotlinx.html.select
 import kotlinx.html.span
+import mtmc.display
 import mtmc.emulator.MonTanaMiniComputer
+import mtmc.mainView
 import nl.astraeus.komp.HtmlBuilder
 import nl.astraeus.komp.Komponent
+import org.w3c.dom.HTMLSelectElement
 import kotlin.text.Typography.nbsp
 
 class ControlView(
@@ -13,35 +22,6 @@ class ControlView(
 ) : Komponent() {
 
   override fun HtmlBuilder.render() {
-    /*
-    <div id="control-secondary">
-    MonTana Mini-Computer
-    </div>
-    <div id="control-buttons">
-    <label>
-    <select style="font-family: monospace;background-color: black;color: #ffcc00" name="speed" fx-action="/speed" fx-method="post" fx-swap="outerHTML" fx-target="#controls">
-    <option value="1">1 Hz</option>
-    <option value="10">10 Hz</option>
-    <option value="100">100 Hz</option>
-    <option value="1000">1 Khz</option>
-    <option value="1000000" selected="">1 Mhz</option>
-    </select>
-    </label>
-    <button fx-action="/control/run" fx-method="post" fx-swap="none">
-        run
-    </button>
-    <button fx-action="/control/back" fx-method="post" fx-swap="outerHTML" fx-target="#controls" disabled="disabled">
-    back
-    </button>
-    <button fx-action="/control/step" fx-method="post" fx-swap="outerHTML" fx-target="#controls">
-        step
-    </button>
-    <button fx-action="/control/reset" fx-method="post" fx-swap="outerHTML" fx-target="#controls">
-        reset
-    </button>
-    </div>
-     */
-
     div("control-panel") {
       div("control-header") {
         span {
@@ -59,10 +39,97 @@ class ControlView(
         }
       }
       div("control-secondary") {
-
+        +"MonTana Mini-Computer"
       }
       div("control-buttons") {
+        label {
+          select {
+            name = "speed"
 
+            option {
+              value = "1"
+              +"1 Hz"
+            }
+            option {
+              value = "10"
+              +"10 Hz"
+            }
+            option {
+              value = "100"
+              +"100 Hz"
+            }
+            option {
+              value = "1000"
+              +"1 Khz"
+            }
+            option {
+              value = "1000000"
+              selected = true
+              +"1 Mhz"
+            }
+            option {
+              value = "2000000"
+              +"2 Mhz"
+            }
+            option {
+              value = "5000000"
+              +"5 Mhz"
+            }
+
+            onChangeFunction = {
+              val target = it.target as? HTMLSelectElement
+              target?.value?.toIntOrNull()?.let { speed ->
+                computer.speed = speed
+              }
+            }
+          }
+        }
+
+        // Buttons with fx-* attributes
+        button {
+          if (computer.getStatus() != MonTanaMiniComputer.ComputerStatus.EXECUTING) {
+            +"run"
+            onClickFunction = {
+              computer.run()
+              requestUpdate()
+            }
+          } else {
+            +"pause"
+            onClickFunction = {
+              computer.pause()
+              requestUpdate()
+            }
+          }
+        }
+        button {
+          disabled =
+            computer.getStatus() == MonTanaMiniComputer.ComputerStatus.WAITING && computer.rewindIndex >= 0
+
+          +"back"
+
+          onClickFunction = {
+            computer.back()
+            mainView.requestUpdate()
+            display.requestUpdate()
+          }
+        }
+        button {
+          +"step"
+
+          onClickFunction = {
+            computer.step()
+            mainView.requestUpdate()
+            display.requestUpdate()
+          }
+        }
+        button {
+          disabled = true
+          +"reset"
+
+          onClickFunction = {
+            //computer.reset()
+          }
+        }
       }
     }
   }

src/jsMain/resources/mtmc.css

@@ -1,4 +1,4 @@
-root {
+:root {
     --pdp-blue: #243571;
     --pdp-light-blue: #3286ce;
     --pdp-beige: #fdfddc;
@@ -23,7 +23,7 @@ body {
     grid-template-rows: 1fr;
     overflow-y: auto;
     gap: 5px;
-    background-color: #ccc;
+    background-color: var(--pdp-white);
 }
 
 .left-column {
@@ -63,6 +63,10 @@ body {
 
 /* control */
 
+.control-panel > * {
+    margin: 4px;
+}
+
 .control-header {
     background-color: var(--pdp-blue);
     color: var(--pdp-white);
@@ -73,6 +77,37 @@ body {
     margin-right: 0;
 }
 
+.control-header span {
+    display: inline-block;
+    margin-top: -6px;
+    margin-bottom: -6px;
+    padding: 4px 8px;
+    font-weight: bold;
+    font-size: 38px;
+    border-right: 4px solid white;
+    border-left: 4px solid white;
+}
+
+.control-header span:not(:first-child) {
+    border-left: none;
+}
+
+.control-secondary {
+    background-color: var(--pdp-light-blue);
+    color: var(--pdp-white);
+    font-family: monospace;
+    font-size: 18px;
+    font-style: italic;
+    text-align: center;
+    padding: 4px 4px;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.control-buttons {
+    text-align: right;
+}
+
 /* registers */
 
 table.register-table {