From 755c3de295a351337f713caa83089fed3ada46a8 Mon Sep 17 00:00:00 2001 From: Christian Basler Date: Tue, 18 Jun 2024 23:23:55 +0200 Subject: [PATCH] Selector (WIP) --- composeApp/src/commonMain/kotlin/App.kt | 31 +++++++------ .../src/commonMain/kotlin/ui/selector.kt | 46 ++++++++++++------- .../src/desktopMain/kotlin/desktop window.kt | 9 ++-- composeApp/src/desktopMain/kotlin/main.kt | 9 +++- 4 files changed, 59 insertions(+), 36 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/App.kt b/composeApp/src/commonMain/kotlin/App.kt index ee48312..4e821ee 100644 --- a/composeApp/src/commonMain/kotlin/App.kt +++ b/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 - val options = remember { Animals.items.shuffled().take(size) } - var selectedItem by remember { mutableStateOf?>(Item(options.random())) } -// var selectedItem by remember { mutableStateOf?>(null) } -// Selector( -// category = Animals, -// options = Animals.items.map { Item(it) }, -// selectedItem = selectedItem, -// onSelectItem = { selectedItem = it } -// ) - DrawItem(selectedItem!!) - + Column(modifier = modifier) { + Row { + val options = remember { Animals.items.shuffled().take(size) } + for (option in options) { + var selectedItem by remember { mutableStateOf?>(Item(option)) } + Selector( + category = Animals, + options = Animals.items.map { Item(it) }, + selectedItem = selectedItem, + onSelectItem = { selectedItem = it }, + modifier = Modifier.weight(1f) + ) + } + } + } } \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/ui/selector.kt b/composeApp/src/commonMain/kotlin/ui/selector.kt index e9b63b4..ac0c1d4 100644 --- a/composeApp/src/commonMain/kotlin/ui/selector.kt +++ b/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.nativeCanvas +import androidx.compose.ui.graphics.Color 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 > Selector( category: ItemClassCompanion, options: List>, selectedItem: Item?, - onSelectItem: (Item) -> Unit + onSelectItem: (Item?) -> 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 > Selector( @Composable fun > DrawItem(item: Item, 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 > DrawItem(item: Item, 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( - x = size.width / 2 - 100f - (textSize.size.width / 2), - y = size.height / 2 - (textSize.size.height / 2) - ) + topLeft = offset ) } ) diff --git a/composeApp/src/desktopMain/kotlin/desktop window.kt b/composeApp/src/desktopMain/kotlin/desktop window.kt index 1de5dfc..f26adb8 100644 --- a/composeApp/src/desktopMain/kotlin/desktop window.kt +++ b/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, diff --git a/composeApp/src/desktopMain/kotlin/main.kt b/composeApp/src/desktopMain/kotlin/main.kt index e943442..a3b3f12 100644 --- a/composeApp/src/desktopMain/kotlin/main.kt +++ b/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)) } } } \ No newline at end of file