diff --git a/src/jsMain/kotlin/mtmc/Main.kt b/src/jsMain/kotlin/mtmc/Main.kt index 1d4fa1d..e9250ed 100644 --- a/src/jsMain/kotlin/mtmc/Main.kt +++ b/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!!, view) + Komponent.create(document.body!!, mainView) - computer.start() + //computer.start() } diff --git a/src/jsMain/kotlin/mtmc/view/ConsoleView.kt b/src/jsMain/kotlin/mtmc/view/ConsoleView.kt new file mode 100644 index 0000000..a9037db --- /dev/null +++ b/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 = 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() + } + +} diff --git a/src/jsMain/kotlin/mtmc/view/DisplayView.kt b/src/jsMain/kotlin/mtmc/view/DisplayView.kt new file mode 100644 index 0000000..df7a513 --- /dev/null +++ b/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" + } + } + +} diff --git a/src/jsMain/kotlin/mtmc/view/MTMCView.kt b/src/jsMain/kotlin/mtmc/view/MTMCView.kt index b53f6b8..bc154fe 100644 --- a/src/jsMain/kotlin/mtmc/view/MTMCView.kt +++ b/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 { - +"Console" - } - div { - +"Shell" - } + include(displayView) + include(consoleView) } div("right-column") { +"Files" diff --git a/src/jsMain/resources/mtmc.css b/src/jsMain/resources/mtmc.css index 8f28bae..c576541 100644 --- a/src/jsMain/resources/mtmc.css +++ b/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 {