Add DisplayView and ConsoleView components, integrate them into MTMCView, and update styles and main initialization logic

src/jsMain/kotlin/mtmc/Main.kt

@@ -17,13 +17,15 @@ class HelloKomponent : Komponent() {
   }
 }
 
+
+val computer = MonTanaMiniComputer()
+val mainView = MTMCView(computer)
+
 fun main() {
-  val computer = MonTanaMiniComputer()
   computer.speed = 1 // default to 1hz
 
-  val view = MTMCView(computer)
+  Komponent.create(document.body!!, mainView)
-  Komponent.create(document.body!!, view)
 
-  computer.start()
+  //computer.start()
 
 }

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

@@ -0,0 +1,63 @@
+package mtmc.view
+
+import kotlinx.html.div
+import kotlinx.html.input
+import kotlinx.html.js.onKeyUpFunction
+import kotlinx.html.span
+import mtmc.emulator.MonTanaMiniComputer
+import mtmc.mainView
+import mtmc.os.shell.Shell
+import nl.astraeus.komp.HtmlBuilder
+import nl.astraeus.komp.Komponent
+import org.w3c.dom.HTMLInputElement
+import org.w3c.dom.events.KeyboardEvent
+
+class ConsoleView(
+  val computer: MonTanaMiniComputer
+) : Komponent() {
+  val history: MutableList<String> = mutableListOf()
+  var input: String = ""
+
+  override fun HtmlBuilder.render() {
+    div("console") {
+      +"Console view"
+
+      div("console-history") {
+        for (line in history) {
+          div {
+            +line
+          }
+        }
+      }
+      div("console-input") {
+        span("console-prompt") {
+          +"mtmc$"
+        }
+        input {
+          value = input
+          onKeyUpFunction = { it ->
+            (it as? KeyboardEvent)?.let { ke ->
+              (ke.target as? HTMLInputElement)?.let { inp ->
+                if (ke.key == "Enter") {
+                  handleCommand()
+                } else {
+                  input = inp.value
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  private fun handleCommand() {
+    history.add(input)
+    input = ""
+
+    Shell.execCommand(input, computer)
+
+    mainView.requestUpdate()
+  }
+
+}

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

@@ -0,0 +1,18 @@
+package mtmc.view
+
+import kotlinx.html.div
+import mtmc.emulator.MonTanaMiniComputer
+import nl.astraeus.komp.HtmlBuilder
+import nl.astraeus.komp.Komponent
+
+class DisplayView(
+  val computer: MonTanaMiniComputer
+) : Komponent() {
+
+  override fun HtmlBuilder.render() {
+    div("display") {
+      +"Display"
+    }
+  }
+
+}

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

@@ -11,6 +11,8 @@ class MTMCView(
   val controlView = ControlView(computer)
   val registerView = RegisterView(computer)
   val memoryView = MemoryView(computer)
+  val displayView = DisplayView(computer)
+  val consoleView = ConsoleView(computer)
 
   override fun HtmlBuilder.render() {
     div("container") {
@@ -20,12 +22,8 @@ class MTMCView(
         include(memoryView)
       }
       div("middle-column") {
-        div {
+        include(displayView)
-          +"Console"
+        include(consoleView)
-        }
-        div {
-          +"Shell"
-        }
       }
       div("right-column") {
         +"Files"

src/jsMain/resources/mtmc.css

@@ -110,6 +110,12 @@ table.register-table tr td.register-lights {
     overflow: auto;
 }
 
+/* display */
+
+.display {
+    min-height: 480px;
+}
+
 /* console */
 
 .small-button {