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 {