Add full names and gradient colors to the output language menu
Signed-off-by: Username404 <w.iron.zombie@gmail.com>
This commit is contained in:
parent
556426dbf7
commit
428f264771
|
@ -27,6 +27,9 @@ fun update_output_box(text: String) {
|
||||||
}, typing_interval)
|
}, typing_interval)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const val bright = "white"
|
||||||
|
const val dark = "#323330"
|
||||||
|
|
||||||
@JsExport
|
@JsExport
|
||||||
fun makeConsole() {
|
fun makeConsole() {
|
||||||
with(document.body!!.append) {
|
with(document.body!!.append) {
|
||||||
|
@ -44,7 +47,7 @@ fun makeConsole() {
|
||||||
#console, #output_language { border-bottom-left-radius: 10px; }
|
#console, #output_language { border-bottom-left-radius: 10px; }
|
||||||
#console, #output_language { border-bottom-right-radius: 10px; }
|
#console, #output_language { border-bottom-right-radius: 10px; }
|
||||||
textArea, #output_language {
|
textArea, #output_language {
|
||||||
color: white;
|
color: $bright;
|
||||||
border-color: #2f5361;
|
border-color: #2f5361;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
background: #2f5361;
|
background: #2f5361;
|
||||||
|
@ -52,7 +55,12 @@ fun makeConsole() {
|
||||||
width: 25vw; height: 50vh;
|
width: 25vw; height: 50vh;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
#output_language { position: absolute; top: 100%; left: 0%; width: 100%; height: auto; }
|
#output_language {
|
||||||
|
background-image: linear-gradient(30deg, #02027d 0%, #2f5361 20%);
|
||||||
|
position: absolute;
|
||||||
|
top: 100%; left: 0%;
|
||||||
|
width: 100%; height: auto;
|
||||||
|
}
|
||||||
""".trimIndent()
|
""".trimIndent()
|
||||||
) } }
|
) } }
|
||||||
script(src = "/ybcon.js") {} // Note: ybcon.js and ybcon.worker.js have to be available at this path on the server
|
script(src = "/ybcon.js") {} // Note: ybcon.js and ybcon.worker.js have to be available at this path on the server
|
||||||
|
@ -68,13 +76,23 @@ fun makeConsole() {
|
||||||
}
|
}
|
||||||
select {
|
select {
|
||||||
id = "output_language"
|
id = "output_language"
|
||||||
arrayOf("lua", "js", "py", "gd").forEach { language ->
|
val languagesMap = mapOf(
|
||||||
|
("Lua" to "lua") to ("#02027d 0%" to bright),
|
||||||
|
("Javascript" to "js") to ("#f0db4f 0%" to dark),
|
||||||
|
("Python" to "py") to ("#3776ab 8%, #ffd343 12%" to bright),
|
||||||
|
("GDScript" to "gd") to ("#478cbf 0%" to bright)
|
||||||
|
)
|
||||||
|
languagesMap.forEach { pair ->
|
||||||
option {
|
option {
|
||||||
value = language
|
value = pair.key.second
|
||||||
label = language.replaceFirstChar { it.titlecase() }
|
label = pair.key.first
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
onChangeFunction = {
|
onChangeFunction = { event ->
|
||||||
|
val select = (event.target as HTMLSelectElement)
|
||||||
|
val currentLanguage = languagesMap.entries.find { it.key.second == select.value}!!
|
||||||
|
select.style.color = currentLanguage.value.second
|
||||||
|
select.style.backgroundImage = "linear-gradient(30deg, ${currentLanguage.value.first}, #2f5361 20%)"
|
||||||
val text = (console.children["input_box"] as HTMLTextAreaElement).value
|
val text = (console.children["input_box"] as HTMLTextAreaElement).value
|
||||||
if (text.isNotEmpty()) {
|
if (text.isNotEmpty()) {
|
||||||
update_output_box(text)
|
update_output_box(text)
|
||||||
|
|
Loading…
Reference in New Issue