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

src/commonMain/kotlin/mtmc/emulator/MTMCDisplay.kt

@@ -18,13 +18,8 @@ class MTMCDisplay(private val computer: MonTanaMiniComputer) {
     LIGHT(87, 124, 68),
     LIGHTEST(127, 134, 15);
 
-    val intVal: Int
-    val javaColor: Color
-
-    init {
-      this.intVal = 0xFF shl 24 or (r shl 16) or (g shl 8) or b
-      javaColor = Color(r, g, b)
-    }
+    val intVal: Int = 0xFF shl 24 or (r shl 16) or (g shl 8) or b
+    val javaColor: Color = Color(r, g, b)
 
     fun distance(r: Int, g: Int, b: Int): Int {
       val dr = this.r - r
@@ -56,15 +51,20 @@ class MTMCDisplay(private val computer: MonTanaMiniComputer) {
   }
 
   private fun loadSplashScreen() {
-    /*    try {
-          val bytes: ByteArray = Base64.getDecoder().decode(SPLASH_SCREEN)
-          val bais = ByteArrayInputStream(bytes)
-          var img: BufferedImage? = null
-          img = ImageIO.read(bais)
-          loadScaledImage(img)
-        } catch (e: IOException) {
-          e.printStackTrace()
-        }*/
+    currentColor = DisplayColor.DARK
+    var currentColorCount = 0
+    var currentColor = 0
+    var colorIndex = 0
+    for (col in 0..<COLS) {
+      for (row in 0..<ROWS) {
+        if (currentColorCount == 0) {
+          currentColorCount = SPLASH_SCREEN_COLORS[colorIndex++]
+          currentColor = SPLASH_SCREEN_COLORS[colorIndex++]
+        }
+        setPixel(col, row, DisplayColor.entries[currentColor])
+        currentColorCount--
+      }
+    }
   }
 
   private fun loadImage(data: ByteArray): BufferedImage? {
@@ -107,7 +107,11 @@ class MTMCDisplay(private val computer: MonTanaMiniComputer) {
   }
 
   fun setPixel(col: Int, row: Int, color: DisplayColor) {
-    buffer.setRGB(col, row, color.intVal)
+    try {
+      buffer.setRGB(col, row, color.intVal)
+    } catch (e: Throwable) {
+      throw e
+    }
   }
 
   fun getPixel(col: Int, row: Int): Short {
@@ -173,7 +177,7 @@ class MTMCDisplay(private val computer: MonTanaMiniComputer) {
     //computer.notifyOfDisplayUpdate()
   }
 
-  fun toPng(): ByteArray? {
+  fun toPng(): ByteArray {
     return byteArray
   }
 

src/commonMain/kotlin/mtmc/emulator/MonTanaMiniComputer.kt

@@ -48,7 +48,6 @@ class MonTanaMiniComputer {
     registerFile = ShortArray(Register.entries.size)
     memory = ByteArray(MEMORY_SIZE)
     breakpoints = ByteArray(MEMORY_SIZE)
-    rewindIndex = -1
     setRegisterValue(
       Register.SP,
       MEMORY_SIZE.toShort().toInt()
@@ -792,7 +791,7 @@ class MonTanaMiniComputer {
     val currentValue = memory[address]
     addRewindStep { memory[address] = currentValue }
     memory[address] = value
-    observers!!.forEach { o: MTMCObserver? ->
+    observers.forEach { o: MTMCObserver? ->
       o!!.memoryUpdated(address, value)
     }
   }
@@ -816,7 +815,7 @@ class MonTanaMiniComputer {
       registerFile[register] = currentValue
     }
     registerFile[register] = value.toShort()
-    observers!!.forEach { o: MTMCObserver? ->
+    observers.forEach { o: MTMCObserver? ->
       o!!.registerUpdated(register, value)
     }
   }

src/jsMain/kotlin/mtmc/Main.kt

@@ -11,12 +11,14 @@ val mainView = MTMCView(computer)
 val display = DisplayView(computer)
 
 fun main() {
-  computer.speed = 2000000 // default to 1hz
+  computer.speed = 1000000
   computer.load(lifeCode, lifeData)
+  //computer.load(snakeCode, snakeData)
 
   Komponent.create(document.body!!, mainView)
 
   computer.start()
 
   mainView.requestUpdate()
+  display.requestUpdate()
 }

src/jsMain/kotlin/mtmc/util/PlatformSpecific.js.kt

@@ -13,7 +13,7 @@ actual fun requestAnimationFrame(action: (Double) -> Unit) {
     action(it)
 
     display.requestUpdate()
-    if (currentTimeMillis() - lastMemoryUpdate > 100) {
+    if (currentTimeMillis() - lastMemoryUpdate > 125) {
       mainView.registerView.requestUpdate()
       mainView.memoryView.requestUpdate()
       lastMemoryUpdate = currentTimeMillis()

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

@@ -1,18 +1,136 @@
 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(
   val computer: MonTanaMiniComputer
 ) : Komponent() {
 
   override fun HtmlBuilder.render() {
-    div {
-      +"Controls view"
+    div("control-panel") {
+      div("control-header") {
+        span {
+          +"m"
+        }
+        span {
+          +"s"
+        }
+        span {
+          +"u"
+        }
+        nbsp
+        i {
+          +"MTMC-16"
+        }
+      }
+      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,3 +1,12 @@
+:root {
+    --pdp-blue: #243571;
+    --pdp-light-blue: #3286ce;
+    --pdp-beige: #fdfddc;
+    --pdp-white: #f1f1f6;
+    --pdp-off-white: #F0EBCD;
+    --filetree-gray: #666;
+}
+
 html, body {
     padding: 0;
     margin: 0;
@@ -14,7 +23,7 @@ body {
     grid-template-rows: 1fr;
     overflow-y: auto;
     gap: 5px;
-    background-color: #ccc;
+    background-color: var(--pdp-white);
 }
 
 .left-column {
@@ -52,6 +61,53 @@ body {
     text-align: right;
 }
 
+/* control */
+
+.control-panel > * {
+    margin: 4px;
+}
+
+.control-header {
+    background-color: var(--pdp-blue);
+    color: var(--pdp-white);
+    font-family: monospace;
+    font-size: 32px;
+    padding: 4px 24px;
+    margin-left: 0;
+    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 {