Update ConsoleView input behavior with auto-focus, enhance console styling, and refine RegisterView rendering

This commit is contained in:
2025-08-15 21:42:50 +02:00
parent 11da7fd588
commit 40baff5cb0
3 changed files with 29 additions and 4 deletions

View File

@@ -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 ->

View File

@@ -18,8 +18,6 @@ class RegisterView(
override fun HtmlBuilder.render() {
div {
+"Register view"
table("register-table") {
for (index in 0..<16) {
showRegister(index)

View File

@@ -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;
}
}