Add DiplayControlView for enhanced display rendering, refactor BufferedImage RGB logic, and update related components and styles

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

@@ -1,18 +1,52 @@
 package mtmc.view
 
+import kotlinx.html.canvas
 import kotlinx.html.div
+import mtmc.display
 import mtmc.emulator.MonTanaMiniComputer
 import nl.astraeus.komp.HtmlBuilder
 import nl.astraeus.komp.Komponent
+import nl.astraeus.komp.currentElement
+import org.w3c.dom.CanvasRenderingContext2D
+import org.w3c.dom.HTMLCanvasElement
+import org.w3c.dom.ImageData
 
-class DisplayView(
+class DiplayControlView(
   val computer: MonTanaMiniComputer
 ) : Komponent() {
 
   override fun HtmlBuilder.render() {
     div("display") {
-      +"Display"
+      include(display)
+    }
+  }
+}
+
+class DisplayView(
+  val computer: MonTanaMiniComputer
+) : Komponent() {
+  var ctx: CanvasRenderingContext2D? = null
+  var imageData: ImageData? = null
+
+  override fun HtmlBuilder.render() {
+    canvas("display-canvas") {
+      width = "160px"
+      height = "144px"
+
+      val cv = currentElement() as? HTMLCanvasElement
+
+      ctx = cv?.getContext("2d")?.unsafeCast<CanvasRenderingContext2D>()
+
+      ctx?.fillStyle = "#404040"
+      ctx?.fillRect(0.0, 0.0, 160.0, 144.0)
+      imageData = ctx?.getImageData(0.0, 0.0, 160.0, 144.0)
     }
   }
 
+  override fun renderUpdate() {
+    // move data to canvas
+    imageData?.let { id ->
+      ctx?.putImageData(id, 0.0, 0.0)
+    }
+  }
 }