Fix some rendering issues

commonUI/build.gradle.kts

@@ -8,6 +8,8 @@ kotlin {
     jvmToolchain(11)
 
     dependencies {
+        api(projects.domain)
+
         implementation(compose.components.resources)
         implementation(compose.runtime)
         implementation(compose.foundation)
@@ -16,7 +18,6 @@ kotlin {
         implementation(compose.components.resources)
         implementation(compose.components.uiToolingPreview)
 //        implementation(libs.compose.ui.text.googlefonts)
-        implementation(projects.domain)
 
         testImplementation(libs.kotlin.test)
         testImplementation(libs.atrium)

commonUI/src/main/composeResources/drawable/lightbulb.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#fff"
+      android:pathData="M480,880Q447,880 423.5,856.5Q400,833 400,800L560,800Q560,833 536.5,856.5Q513,880 480,880ZM320,760L320,680L640,680L640,760L320,760ZM330,640Q261,599 220.5,530Q180,461 180,380Q180,255 267.5,167.5Q355,80 480,80Q605,80 692.5,167.5Q780,255 780,380Q780,461 739.5,530Q699,599 630,640L330,640ZM354,560L606,560Q651,528 675.5,481Q700,434 700,380Q700,288 636,224Q572,160 480,160Q388,160 324,224Q260,288 260,380Q260,434 284.5,481Q309,528 354,560ZM480,560Q480,560 480,560Q480,560 480,560Q480,560 480,560Q480,560 480,560Q480,560 480,560Q480,560 480,560Q480,560 480,560Q480,560 480,560Z"/>
+</vector>

commonUI/src/main/kotlin/ch/dissem/yaep/ui/common/App.kt

@@ -5,11 +5,15 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.OutlinedCard
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -43,8 +47,8 @@ fun App(modifier: Modifier = Modifier) {
     val horizontalClues = remember { game.horizontalClues.map { DisplayClue(it) } }
     val verticalClues = remember { game.verticalClues.map { DisplayClue(it) } }
     Row(modifier = modifier) {
-        PuzzleGrid(modifier = Modifier.weight(1f), game.grid)
-        PuzzleClues(modifier = Modifier.weight(1f), horizontalClues, verticalClues)
+        PuzzleGrid(modifier = Modifier.aspectRatio(1f).weight(0.6f).fillMaxHeight(), game.grid)
+        PuzzleClues(modifier = Modifier.weight(0.4f).fillMaxHeight(), horizontalClues, verticalClues)
     }
 }
 
@@ -63,7 +67,7 @@ fun PuzzleGrid(
                 for (item in row) {
                     Selector(
                         modifier = Modifier
-                            .padding(4.dp)
+                            .padding(8.dp)
                             .weight(1f),
                         category = row.category,
                         options = item.options,
@@ -84,13 +88,15 @@ fun PuzzleClues(
 ) {
     Column(modifier = modifier) {
         LazyVerticalGrid(
-            modifier = Modifier.fillMaxWidth().weight(1f),
-            columns = GridCells.Adaptive(32.dp)
+            modifier = Modifier.fillMaxSize(),
+            columns = GridCells.Fixed(4)
         ) {
             for (clue in horizontalClues.filter { it.isActive }) {
                 item {
                     HorizontalClue(
-                        modifier = Modifier.clickable { clue.isActive = false },
+                        modifier = Modifier
+                            .padding(8.dp)
+                            .clickable { clue.isActive = false },
                         clue = clue.clue
                     )
                 }
@@ -100,21 +106,22 @@ fun PuzzleClues(
                     HorizontalClue(
                         modifier = Modifier
                             .alpha(0.5f)
+                            .padding(8.dp)
                             .clickable { clue.isActive = true },
                         clue = clue.clue
                     )
                 }
             }
-        }
-
-        LazyVerticalGrid(
-            modifier = Modifier.fillMaxWidth().weight(1f),
-            columns = GridCells.Adaptive(32.dp)
-        ) {
+            item(span = { GridItemSpan(maxLineSpan) }) {
+                HorizontalDivider()
+            }
             for (clue in verticalClues.filter { it.isActive }) {
                 item {
                     VerticalClue(
-                        modifier = Modifier.clickable { clue.isActive = false },
+                        modifier = Modifier
+                            .padding(8.dp)
+                            .aspectRatio(0.3333f)
+                            .clickable { clue.isActive = false },
                         clue = clue.clue
                     )
                 }
@@ -124,6 +131,8 @@ fun PuzzleClues(
                     VerticalClue(
                         modifier = Modifier
                             .alpha(0.5f)
+                            .padding(8.dp)
+                            .aspectRatio(0.3333f)
                             .clickable { clue.isActive = true },
                         clue = clue.clue
                     )
@@ -135,31 +144,34 @@ fun PuzzleClues(
 
 @Composable
 fun HorizontalClue(modifier: Modifier = Modifier, clue: HorizontalClue) {
-    Column {
-        when (clue) {
-            is NeighbourClue<*, *> -> {
-                DrawItem(modifier = Modifier.weight(1f), clue.a)
-                OutlinedCard(modifier = modifier.aspectRatio(1f).weight(1f)) {
+    OutlinedCard(modifier) {
+        Row {
+            when (clue) {
+                is NeighbourClue<*, *> -> {
+                    DrawItem(modifier = Modifier.weight(1f), clue.a)
                     Image(
+                        modifier = Modifier.aspectRatio(1f).weight(1f),
                         painter = painterResource(Res.drawable.neighbour),
                         contentDescription = null
                     )
+                    DrawItem(modifier = Modifier.weight(1f), clue.b)
                 }
-                DrawItem(modifier = Modifier.weight(1f), clue.b)
-            }
 
-            is OrderClue<*, *> -> {
-                DrawItem(modifier = Modifier.weight(1f), clue.left)
-                OutlinedCard(modifier = modifier.aspectRatio(1f).weight(1f)) {
-                    Image(painter = painterResource(Res.drawable.order), contentDescription = null)
+                is OrderClue<*, *> -> {
+                    DrawItem(modifier = Modifier.weight(1f), clue.left)
+                    Image(
+                        modifier = Modifier.aspectRatio(1f).weight(1f),
+                        painter = painterResource(Res.drawable.order),
+                        contentDescription = null
+                    )
+                    DrawItem(modifier = Modifier.weight(1f), clue.right)
                 }
-                DrawItem(modifier = Modifier.weight(1f), clue.right)
-            }
 
-            is TripletClue<*, *, *> -> {
-                DrawItem(modifier = Modifier.weight(1f), clue.a)
-                DrawItem(modifier = Modifier.weight(1f), clue.b)
-                DrawItem(modifier = Modifier.weight(1f), clue.c)
+                is TripletClue<*, *, *> -> {
+                    DrawItem(modifier = Modifier.weight(1f), clue.a)
+                    DrawItem(modifier = Modifier.weight(1f), clue.b)
+                    DrawItem(modifier = Modifier.weight(1f), clue.c)
+                }
             }
         }
     }
@@ -167,8 +179,10 @@ fun HorizontalClue(modifier: Modifier = Modifier, clue: HorizontalClue) {
 
 @Composable
 fun VerticalClue(modifier: Modifier = Modifier, clue: SameColumnClue<*, *>) {
-    Column(modifier = modifier) {
-        DrawItem(modifier = Modifier.weight(1f), clue.a)
-        DrawItem(modifier = Modifier.weight(1f), clue.b)
+    OutlinedCard(modifier) {
+        Column {
+            DrawItem(modifier = Modifier.weight(1f), clue.a)
+            DrawItem(modifier = Modifier.weight(1f), clue.b)
+        }
     }
 }

commonUI/src/main/kotlin/ch/dissem/yaep/ui/common/selector.kt

@@ -88,3 +88,4 @@ fun <C : ItemClass<C>> DrawItem(
         )
     }
 }
+