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)
}
const val bright = "white"
const val dark = "#323330"
@JsExport
fun makeConsole() {
with(document.body!!.append) {
@ -44,7 +47,7 @@ fun makeConsole() {
#console, #output_language { border-bottom-left-radius: 10px; }
#console, #output_language { border-bottom-right-radius: 10px; }
textArea, #output_language {
color: white;
color: $bright;
border-color: #2f5361;
outline: none !important;
background: #2f5361;
@ -52,7 +55,12 @@ fun makeConsole() {
width: 25vw; height: 50vh;
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()
) } }
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 {
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 {
value = language
label = language.replaceFirstChar { it.titlecase() }
value = pair.key.second
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
if (text.isNotEmpty()) {
update_output_box(text)