From 556426dbf7f6733e6a0b07c599f9474f2d237ccc Mon Sep 17 00:00:00 2001
From: Username404 <w.iron.zombie@gmail.com>
Date: Fri, 27 Jan 2023 22:07:37 +0100
Subject: [PATCH] Add a menu to choose the output language

Signed-off-by: Username404 <w.iron.zombie@gmail.com>
---
 build.gradle.kts        |  2 +-
 src/main/kotlin/main.kt | 70 +++++++++++++++++++++++++++--------------
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/build.gradle.kts b/build.gradle.kts
index 7243c3d..1c4d575 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -3,7 +3,7 @@ plugins {
 }
 
 group = "fr.username404"
-version = "1"
+version = "2"
 
 repositories {
     mavenCentral()
diff --git a/src/main/kotlin/main.kt b/src/main/kotlin/main.kt
index e030f43..4e21157 100644
--- a/src/main/kotlin/main.kt
+++ b/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,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 {