diff --git a/src/jsMain/kotlin/mtmc/view/ConsoleView.kt b/src/jsMain/kotlin/mtmc/view/ConsoleView.kt index d68cf75..e2964ae 100644 --- a/src/jsMain/kotlin/mtmc/view/ConsoleView.kt +++ b/src/jsMain/kotlin/mtmc/view/ConsoleView.kt @@ -1,5 +1,6 @@ package mtmc.view +import kotlinx.browser.window import kotlinx.html.div import kotlinx.html.input import kotlinx.html.js.onKeyUpFunction @@ -9,6 +10,7 @@ import mtmc.mainView import mtmc.os.shell.Shell import nl.astraeus.komp.HtmlBuilder import nl.astraeus.komp.Komponent +import nl.astraeus.komp.currentElement import org.w3c.dom.HTMLInputElement import org.w3c.dom.events.KeyboardEvent @@ -33,8 +35,13 @@ class ConsoleView( span("console-prompt") { +"mtmc$" } - input { + input(classes = "console-input") { value = input + autoFocus = true + val inputElement = currentElement() as? HTMLInputElement + window.setTimeout({ + inputElement?.focus() + }, 0) onKeyUpFunction = { it -> (it as? KeyboardEvent)?.let { ke -> (ke.target as? HTMLInputElement)?.let { inp -> diff --git a/src/jsMain/kotlin/mtmc/view/RegisterView.kt b/src/jsMain/kotlin/mtmc/view/RegisterView.kt index 4702a72..e002797 100644 --- a/src/jsMain/kotlin/mtmc/view/RegisterView.kt +++ b/src/jsMain/kotlin/mtmc/view/RegisterView.kt @@ -18,8 +18,6 @@ class RegisterView( override fun HtmlBuilder.render() { div { - +"Register view" - table("register-table") { for (index in 0..<16) { showRegister(index) diff --git a/src/jsMain/resources/mtmc.css b/src/jsMain/resources/mtmc.css index c576541..43605ea 100644 --- a/src/jsMain/resources/mtmc.css +++ b/src/jsMain/resources/mtmc.css @@ -118,6 +118,26 @@ table.register-table tr td.register-lights { /* console */ +.console { + color: #ffcc00; + background-color: #35291c; + white-space: pre-wrap; + font-family: monospace; + font-weight: bold; + padding: 5px; +} + +.console-prompt { + margin-right: 10px; +} + +input.console-input { + color: #ffcc00; + background-color: #35291c; + border: none; + outline: none; +} + .small-button { transform: rotate(-25deg) translateY(20px) translateX(-20px); margin: 2px; @@ -127,4 +147,4 @@ table.register-table tr td.register-lights { border-radius: 8px; color: whitesmoke; box-shadow: rgb(0, 0, 0, .2) 2px 2px 1px 1px; -} \ No newline at end of file +}