Username404-59
/
Username404-Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Username404 2023-01-27 22:35:24 +01:00
parent 556426dbf7
commit 428f264771
Signed by: Username404-59
GPG Key ID: 7AB361FBB257A5D1
1 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/main/kotlin/main.kt
View File

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