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

Add a menu to choose the output language 

Signed-off-by: Username404 <w.iron.zombie@gmail.com>
This commit is contained in:
Username404 2023-01-27 22:07:37 +01:00
parent 356c7e21b7
commit 556426dbf7
Signed by: Username404-59
GPG Key ID: 7AB361FBB257A5D1
2 changed files with 47 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.gradle.kts
View File

@ -3,7 +3,7 @@ plugins {
} }
group = "fr.username404" group = "fr.username404"
version = "1" version = "2"
repositories { repositories {
mavenCentral() mavenCentral()

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

@ -3,9 +3,11 @@ import kotlinx.browser.window
import kotlinx.html.* import kotlinx.html.*
import kotlinx.html.dom.append import kotlinx.html.dom.append
import kotlinx.html.js.div import kotlinx.html.js.div
import kotlinx.html.js.onChangeFunction
import kotlinx.html.js.onClickFunction import kotlinx.html.js.onClickFunction
import kotlinx.html.js.onKeyUpFunction import kotlinx.html.js.onKeyUpFunction
import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLDivElement
import org.w3c.dom.HTMLSelectElement
import org.w3c.dom.HTMLTextAreaElement import org.w3c.dom.HTMLTextAreaElement
import org.w3c.dom.get import org.w3c.dom.get
@ -17,48 +19,68 @@ val console get() = document.body!!.children["console"] as HTMLDivElement
private var typingTimer: Int = 0 private var typingTimer: Int = 0
const val typing_interval = 500 const val typing_interval = 500
fun update_output_box(text: String) {
window.clearTimeout(typingTimer)
ybcon("--target=${(console.children["output_language"] as HTMLSelectElement).value}", "-t", text)
typingTimer = window.setTimeout({
(console.children["output_box"] as HTMLTextAreaElement).value = js("yerbacon_output") as String
}, typing_interval)
}
@JsExport @JsExport
fun makeConsole() { fun makeConsole() {
with(document.body!!.append) { with(document.body!!.append) {
div { div {
id = "console" id = "console"
style { unsafe { raw( style { unsafe { raw("""
""" #console {
#console { position: relative;
position: relative; display: none; filter: blur(0px);
display: none; filter: blur(0px); transition: all 0.25s ease-in;
transition: all 0.25s ease-in; }
} #console:hover { box-shadow: 0 0 50px #2f5361; }
#console:hover { box-shadow: 0 0 50px #2f5361; } #console, #input_box { border-top-left-radius: 10px; }
#console, #input_box { border-bottom-left-radius: 10px; border-top-left-radius: 10px; } #console, #output_box { border-top-right-radius: 10px; }
#console, #output_box { border-bottom-right-radius: 10px; border-top-right-radius: 10px; } #console, #output_language { border-bottom-left-radius: 10px; }
textArea { #console, #output_language { border-bottom-right-radius: 10px; }
color: white; textArea, #output_language {
border-color: #2f5361; color: white;
outline: none !important; border-color: #2f5361;
background: #2f5361; outline: none !important;
font-family:"Noto Sans Mono SemiBold", Noto, mono; background: #2f5361;
width: 25vw; height: 50vh; font-family: "Noto Sans Mono SemiBold", Noto, mono;
resize: none; width: 25vw; height: 50vh;
} resize: none;
}
#output_language { 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
textArea { textArea {
id = "input_box" id = "input_box"
onKeyUpFunction = { event -> onKeyUpFunction = { event ->
window.clearTimeout(typingTimer) update_output_box((event.target as HTMLTextAreaElement).value)
ybcon("-t", (event.target!! as HTMLTextAreaElement).value)
typingTimer = window.setTimeout({
(console.children["output_box"] as HTMLTextAreaElement).value = js("yerbacon_output") as String
}, typing_interval)
} }
} }
textArea { textArea {
readonly = true readonly = true
id = "output_box" id = "output_box"
} }
select {
id = "output_language"
arrayOf("lua", "js", "py", "gd").forEach { language ->
option {
value = language
label = language.replaceFirstChar { it.titlecase() }
}
}
onChangeFunction = {
val text = (console.children["input_box"] as HTMLTextAreaElement).value
if (text.isNotEmpty()) {
update_output_box(text)
}
}
}
} }
div { div {
style { unsafe { style { unsafe {