Update dependencies and add a text area to compile with my programming language compiler project

build.gradle.kts

@@ -1,9 +1,9 @@
 plugins {
-    id("org.jetbrains.kotlin.js") version "1.6.0"
+    id("org.jetbrains.kotlin.js") version "1.8.0"
 }
 
 group = "fr.username404"
-version = "0.1"
+version = "1"
 
 repositories {
     mavenCentral()
@@ -12,7 +12,6 @@ repositories {
 dependencies {
     implementation(kotlin("stdlib-js"))
     implementation("org.jetbrains.kotlinx:kotlinx-html:${rootProject.property("kotlinx-html_version")}")
-    implementation("io.ktor:ktor-client-core:${rootProject.property("ktor_version")}")
 }
 
 val outputDirectory = file("$rootDir/compiledOutput")
@@ -21,19 +20,17 @@ kotlin {
     js(IR) {
         moduleName = "Username404_Website"
         compilations.all {
-            with(languageSettings) {
+            with(kotlinOptions) {
                 val secondDot = coreLibrariesVersion.let { it.indexOf('.', startIndex = it.indexOf('.') + 1) }
                 apiVersion = coreLibrariesVersion.run {
-                    substring(0 until secondDot).also { println(it) }
+                    substring(0 until secondDot)
                 }
                 languageVersion = apiVersion!!.substringBefore('.') + '.' + (apiVersion!!.substringAfter('.').toInt() + 1).toString()
-                progressiveMode = true
-            }
-            with(kotlinOptions) {
+
                 moduleKind = "plain"
                 freeCompilerArgs = freeCompilerArgs + listOf(
-                    "-Xopt-in=kotlin.RequiresOptIn",
-                    "-Xopt-in=kotlin.js.ExperimentalJsExport",
+                    "-opt-in=kotlin.RequiresOptIn",
+                    "-opt-in=kotlin.js.ExperimentalJsExport",
                     "-Xir-property-lazy-initialization"
                 )
             }
@@ -43,17 +40,17 @@ kotlin {
                 destinationDirectory = outputDirectory
                 output.library = "Web404"
                 output.libraryTarget = "this"
-                cssSupport.enabled = true
+                cssSupport { isEnabled = true }
             }
 
             runTask {
-                cssSupport.enabled = true
+                cssSupport { isEnabled = true }
             }
 
             testTask {
                 useKarma {
                     useFirefoxNightlyHeadless()
-                    webpackConfig.cssSupport.enabled = true
+                    webpackConfig.cssSupport { isEnabled = true }
                 }
             }
         }

gradle.properties

@@ -7,5 +7,4 @@ org.gradle.parallel=true
 org.gradle.unsafe.configuration-cache=on
 org.gradle.vfs.watch=true
 
-kotlinx-html_version=0.7.3
-ktor_version=1.6.5
+kotlinx-html_version=0.8.0+

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.0-rc-2-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

settings.gradle.kts

@@ -1 +1,6 @@
 rootProject.name = "Username404-Website"
+pluginManagement {
+    repositories {
+        gradlePluginPortal()
+    }
+}

src/main/kotlin/main.kt

@@ -1,12 +1,92 @@
 import kotlinx.browser.document
 import kotlinx.browser.window
+import kotlinx.html.*
 import kotlinx.html.dom.append
 import kotlinx.html.js.div
+import kotlinx.html.js.onClickFunction
+import kotlinx.html.js.onKeyUpFunction
+import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.HTMLTextAreaElement
+import org.w3c.dom.get
+
+external fun callMain(argument: Array<out String>)
+
+fun ybcon(vararg argument: String) = callMain(argument)
+
+val console get() = document.body!!.children["console"] as HTMLDivElement
+
+private var typingTimer: Int = 0
+const val typing_interval = 500
 
 @JsExport
-fun makeBody() {
-    document.body!!.append.div {
-        // TODO Add elements to the body
+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;
+                    }
+                """.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)
+                }
+            }
+            textArea {
+                readonly = true
+                id = "output_box"
+            }
+        }
+        div {
+            style { unsafe {
+                raw("""
+                button {
+                    position: fixed;
+                    bottom: 10px;
+                    right: 10px;
+                    border: none;
+                    background: inherit;
+                }
+                button:hover {
+                    background: #2f5361;
+                }
+                """.trimIndent())
+            } }
+            button {
+                + "Yerbacon programming language project"
+                onClickFunction = {
+                    with(console.style) {
+                        display = when (display) {
+                            "none", "" -> "inline-block"
+                            else -> "none"
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 

src/main/resources/index.html

@@ -9,12 +9,11 @@
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
     <title>www.username404.fr</title>
     <style>
-        html {
-            scroll-behavior: smooth;
-        }
+        html { scroll-behavior: smooth; }
         body {
             text-align: center;
             text-decoration-color: #868e96;
+            color: #35b9ab;
             font-family: 'Noto Sans', sans-serif;
             background: #173f4f;
         }
@@ -22,13 +21,9 @@
             position: fixed;
             bottom: 10px; left: 10px;
         }
-        a {
-            color: #21A4DF;
-            text-decoration: none;
-        }
-        * {
-            box-sizing: border-box;
-        }
+        a, button { color: #21A4DF; }
+        a { text-decoration: none; }
+        * { box-sizing: border-box; }
         .mainBox {
             font-size: xxx-large;
             float: left;
@@ -51,6 +46,6 @@
             Source
         </a>
     </div>
-    <script>Web404.makeBody()</script>
+    <script>Web404.makeConsole()</script>
 </body>
 </html>