working on web interface

2026-08-24 19:12:37 -04:00
parent 92c14dfc81
commit d62575df16
42 changed files with 5683 additions and 177 deletions
@@ -0,0 +1,66 @@
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
+
+plugins {
+    alias(libs.plugins.kotlin.multiplatform)
+    alias(libs.plugins.compose)
+    alias(libs.plugins.kotlin.compose)
+}
+
+kotlin {
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser()
+        binaries.executable()
+    }
+
+    sourceSets {
+        commonMain.dependencies {
+            implementation(project(":shared"))
+
+            implementation(compose.runtime)
+            implementation(compose.foundation)
+            implementation(compose.material3)
+            implementation(compose.ui)
+        }
+
+        wasmJsMain.dependencies {
+        }
+    }
+}
+
+/*
+ * The directory produced by wasmJsBrowserDistribution.
+ *
+ * This is deliberately kept here rather than being referenced by
+ * the server project. The web project owns its build layout.
+ */
+val webDistributionDirectory =
+    layout.buildDirectory.dir("dist/wasmJs/productionExecutable")
+
+/*
+ * Expose the web distribution as an outgoing artifact.
+ *
+ * Other projects can consume:
+ *
+ *     project(path = ":web", configuration = "webDistribution")
+ *
+ * without knowing where the files actually live.
+ */
+val webDistributionTask =
+    tasks.named("wasmJsBrowserDistribution")
+
+configurations {
+    create("webDistribution") {
+        isCanBeConsumed = true
+        isCanBeResolved = false
+    }
+}
+
+artifacts {
+    add(
+        "webDistribution",
+        webDistributionDirectory
+    ) {
+        builtBy(webDistributionTask)
+    }
+}
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KotlinProject</title>
+    <link type="text/css" rel="stylesheet" href="styles.css">
+</head>
+<body style="text-align: center; align-content: center">
+<h1>Web Client HTML</h1>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50" role="presentation">
+    <circle cx="25" cy="25" r="20" stroke="#ccc" stroke-width="4" fill="none"/>
+    <circle cx="25" cy="25" r="20" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"
+            stroke-dasharray="90 125">
+        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s"
+                          repeatCount="indefinite"/>
+    </circle>
+</svg>
+<script type="application/javascript" src="web.js"></script>
+</body>
+</html>
@@ -0,0 +1,24 @@
+package dev.geekback.dopewars.web
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.material3.Text
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.ComposeViewport
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    ComposeViewport {
+        App()
+    }
+}
+
+@Composable
+fun App() {
+    MaterialTheme {
+        Text(modifier = Modifier.padding(16.dp), text = "Taxation is theft")
+    }
+}
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KotlinProject</title>
+    <link type="text/css" rel="stylesheet" href="styles.css">
+</head>
+<body style="text-align: center; align-content: center">
+<h1>Web Client HTML</h1>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50" role="presentation">
+    <circle cx="25" cy="25" r="20" stroke="#ccc" stroke-width="4" fill="none"/>
+    <circle cx="25" cy="25" r="20" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"
+            stroke-dasharray="90 125">
+        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s"
+                          repeatCount="indefinite"/>
+    </circle>
+</svg>
+<script type="application/javascript" src="web.js"></script>
+</body>
+</html>
@@ -0,0 +1,7 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}