Selector (WIP)

composeApp/src/commonMain/kotlin/App.kt

@@ -1,6 +1,7 @@
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
@@ -14,24 +15,28 @@ import org.jetbrains.compose.resources.ExperimentalResourceApi
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 import ui.DrawItem
+import ui.Selector
 
 import yaep.composeapp.generated.resources.Res
 import yaep.composeapp.generated.resources.compose_multiplatform
 
-@OptIn(ExperimentalResourceApi::class)
 @Composable
 @Preview
-fun App() {
+fun App(modifier: Modifier = Modifier) {
     val size = 6
+    Column(modifier = modifier) {
+        Row {
             val options = remember { Animals.items.shuffled().take(size) }
-    var selectedItem by remember { mutableStateOf<Item<Animals>?>(Item(options.random())) }
+            for (option in options) {
-//    var selectedItem by remember { mutableStateOf<Item<Animals>?>(null) }
+                var selectedItem by remember { mutableStateOf<Item<Animals>?>(Item(option)) }
-//    Selector(
+                Selector(
-//        category = Animals,
+                    category = Animals,
-//        options = Animals.items.map { Item(it) },
+                    options = Animals.items.map { Item(it) },
-//        selectedItem = selectedItem,
+                    selectedItem = selectedItem,
-//        onSelectItem = { selectedItem = it }
+                    onSelectItem = { selectedItem = it },
-//    )
+                    modifier = Modifier.weight(1f)
-    DrawItem(selectedItem!!)
+                )
-
+            }
+        }
+    }
 }

composeApp/src/commonMain/kotlin/ui/selector.kt

@@ -1,9 +1,11 @@
 package ui
 
 import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
 import androidx.compose.material3.OutlinedCard
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -11,16 +13,11 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.nativeCanvas
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.drawText
 import androidx.compose.ui.text.rememberTextMeasurer
-import androidx.compose.ui.unit.TextUnit
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import domain.Animals
 import domain.Item
 import domain.ItemClass
@@ -34,13 +31,22 @@ fun <C : ItemClass<C>> Selector(
     category: ItemClassCompanion<C>,
     options: List<Item<C>>,
     selectedItem: Item<C>?,
-    onSelectItem: (Item<C>) -> Unit
+    onSelectItem: (Item<C>?) -> Unit
 ) {
     if (selectedItem != null) {
-        DrawItem(selectedItem)
+        DrawItem(item = selectedItem, modifier = modifier.clickable { onSelectItem(null) })
     } else {
         OutlinedCard(modifier = modifier.aspectRatio(1f)) {
-
+            LazyHorizontalGrid(rows = GridCells.Fixed(3)) {
+                for (option in options) {
+                    item {
+                        DrawItem(
+                            item = option,
+                            modifier = Modifier.clickable { onSelectItem(option) }
+                        )
+                    }
+                }
+            }
         }
     }
 }
@@ -48,7 +54,6 @@ fun <C : ItemClass<C>> Selector(
 @Composable
 fun <C : ItemClass<C>> DrawItem(item: Item<C>, modifier: Modifier = Modifier) {
     OutlinedCard(modifier = modifier.aspectRatio(1f)) {
-        var textSize by remember { mutableStateOf(12.sp) }
         val emoji = item.symbol
 
         val textMeasurer = rememberTextMeasurer()
@@ -56,20 +61,27 @@ fun <C : ItemClass<C>> DrawItem(item: Item<C>, modifier: Modifier = Modifier) {
         Canvas(
             modifier = Modifier.fillMaxSize(1f),
             onDraw = {
+                drawRect(Color.Red, size = size)
                 val textSize = textMeasurer.measure(text = emoji)
-                val fontSize = min(
+                val minTextSizeDimension = min(
+                    textSize.size.width,
+                    textSize.size.height
+                )
+                val fontSizeBase = minTextSizeDimension * min(
                     size.width / textSize.size.width,
                     size.height / textSize.size.height
-                ).toSp()
+                )
+                val fontSize = (0.9f * fontSizeBase).toDp().toSp()
 
+                val offset = Offset(
+                    x = size.width / 2 - textSize.size.width * fontSizeBase / (2f * minTextSizeDimension),
+                    y = size.height / 2 - textSize.size.height * fontSizeBase / (2f * minTextSizeDimension)
+                )
                 drawText(
                     textMeasurer = textMeasurer,
                     text = emoji,
                     style = TextStyle(fontSize = fontSize),
-                    topLeft = Offset(
+                    topLeft = offset
-                        x = size.width / 2 - 100f - (textSize.size.width / 2),
-                        y = size.height  / 2 - (textSize.size.height / 2)
-                    )
                 )
             }
         )

composeApp/src/desktopMain/kotlin/desktop window.kt

@@ -1,3 +1,4 @@
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -16,7 +17,6 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.WindowPlacement
 import androidx.compose.ui.window.WindowScope
 import androidx.compose.ui.window.WindowState
-import org.jetbrains.compose.resources.ExperimentalResourceApi
 import org.jetbrains.compose.resources.painterResource
 import ui.theme.AppTheme
 import yaep.composeapp.generated.resources.Res
@@ -27,11 +27,10 @@ import yaep.composeapp.generated.resources.window_maximize
 import yaep.composeapp.generated.resources.window_minimize
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class, ExperimentalResourceApi::class)
 fun WindowScope.DesktopWindow(
     useDarkMode: Boolean,
     topBar: @Composable () -> Unit,
-    content: @Composable () -> Unit
+    content: @Composable (PaddingValues) -> Unit
 ) {
     AppTheme(darkTheme = useDarkMode) {
         Scaffold(
@@ -41,7 +40,7 @@ fun WindowScope.DesktopWindow(
                 }
             }
         ) { paddingValues ->
-            content()
+            content(paddingValues)
         }
     }
 }
@@ -58,7 +57,7 @@ fun AppBar(
         navigationIcon = {
             // TODO Icon(painterResource(Res.drawable.heart), null)
         },
-        title = { Text(text = "Health Check Monitor") },
+        title = { Text(text = "Yet Another Einstein Puzzle") },
         actions = {
             Switch(
                 checked = useDarkMode,

composeApp/src/desktopMain/kotlin/main.kt

@@ -1,16 +1,23 @@
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.WindowPlacement
 import androidx.compose.ui.window.application
 import androidx.compose.ui.window.rememberWindowState
+import org.jetbrains.compose.resources.painterResource
+import yaep.composeapp.generated.resources.Res
+import yaep.composeapp.generated.resources.moon
 
 fun main() = application {
     Window(
         onCloseRequest = ::exitApplication,
+        undecorated = true,
         title = "YAEP",
+        icon = painterResource(Res.drawable.moon)
     ) {
         var useDarkMode by remember { mutableStateOf(true) }
         DesktopWindow(
@@ -26,7 +33,7 @@ fun main() = application {
                 )
             }
         ) {
-            App()
+            App(modifier = Modifier.padding(it))
         }
     }
 }