more structure to forms and views

shared ui got an interface to demo the components
2026-08-28 16:20:35 -04:00
parent d1ef2956d8
commit 2e47b8bfce
50 changed files with 941 additions and 610 deletions
@@ -1,21 +0,0 @@
-<!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>
@@ -1,7 +1,10 @@
 package dev.geekback.dopewars.web

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
@@ -15,6 +18,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import dev.geekback.dopewars.shared.Player
+import dev.geekback.dopewars.ui.PlayerUi
 import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@@ -22,32 +26,43 @@ import kotlinx.coroutines.launch
 fun App() {
    val scope = rememberCoroutineScope()
    var players by mutableStateOf (listOf<Player>())
+    var activePlayer: Player? by mutableStateOf(null)
    MaterialTheme {
        Scaffold(
            modifier = Modifier.padding(16.dp),
            content = {
-                Column {
-                    // List of current Players
-                    Button(onClick = {
-                        println("Reload Players Now")
-                        scope.launch {
-                            players = AdminApi.loadPlayers()
+                Row {
+                    Column(modifier = Modifier.width(250.dp)) {
+                        // List of current Players
+                        Button(onClick = {
+                            scope.launch {
+                                players = AdminApi.loadPlayers()
+                            }
+                        }) {
+                            Text("Reload Players")
                        }
-                    }) {
-                        Text("Reload Players")
-                    }

-                    ApiControlBox {
-                        println("Setting API BaseUrl to $it")
-                        AdminApi.setBaseUrl(it)
-                    }
+                        ApiControlBox {
+                            AdminApi.setBaseUrl(it)
+                        }

-                    PlayersList(players) {
-                        println("Click on $it")
+                        PlayersList(players) {
+                            activePlayer = it
+                        }
+                    }
+                    Column(modifier = Modifier.fillMaxSize()) {
+                        if (players.isEmpty()) {
+                            Text("No Players")
+                        } else {
+                            if (activePlayer != null) {
+                                PlayerUi().view(activePlayer!!) {}
+                            } else {
+                                Text("Select a Player")
+                            }
+                        }
                    }
                }
            }
        )
    }
 }
-
@@ -19,7 +19,7 @@ fun PlayersList(players: List<Player>, onPLayerSelected: (Player) -> Unit) {
                }
            } else {
                items(players.size) { i ->
-                    val item = players[i];
+                    val item = players[i]
                    Text("Player ${item.name}", modifier = Modifier.clickable { onPLayerSelected(item) })
                }
            }