diff --git a/src/jsMain/kotlin/mtmc/view/ControlView.kt b/src/jsMain/kotlin/mtmc/view/ControlView.kt
index f13215b..52f8d0b 100644
--- a/src/jsMain/kotlin/mtmc/view/ControlView.kt
+++ b/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() {
- /*
-
- MonTana Mini-Computer
-
-
-
-
-
-
-
-
- */
-
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()
+ }
+ }
}
}
}
diff --git a/src/jsMain/resources/mtmc.css b/src/jsMain/resources/mtmc.css
index 6c2ad17..8773a21 100644
--- a/src/jsMain/resources/mtmc.css
+++ b/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 {