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"
version = "1"
version = "2"
repositories {
mavenCentral()

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

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