Add a menu to choose the output language

Signed-off-by: Username404 <w.iron.zombie@gmail.com>

build.gradle.kts

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

src/main/kotlin/main.kt

@@ -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,23 +19,31 @@ 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(
+            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, #input_box { border-top-left-radius: 10px; }
-                    #console, #output_box { border-bottom-right-radius: 10px; border-top-right-radius: 10px; }
+                #console, #output_box { border-top-right-radius: 10px; }
-                    textArea {
+                #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;
@@ -42,23 +52,35 @@ fun makeConsole() {
                     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)
+                    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 {
                 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 {