Add keyboard control (WIP, broken)

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

@@ -1,5 +1,6 @@
 package ch.dissem.yaep.ui.common
 
+import SelectionManager
 import androidx.compose.foundation.layout.Box
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -10,21 +11,23 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.key.Key
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.TextUnitType
 import ch.dissem.yaep.domain.Game
+import focus
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlin.coroutines.CoroutineContext
 import kotlin.time.ExperimentalTime
 
-
 @Composable
 @OptIn(ExperimentalTime::class)
 fun App(
     modifier: Modifier = Modifier,
+    selectionManager: SelectionManager,
     selectDirectly: Boolean,
     spacing: Dp,
     game: Game,
@@ -55,10 +58,14 @@ fun App(
         AdaptiveGameLayout(
             modifier = Modifier.blurOnFinished(isSolved),
             grid = {
+                val focusable = remember { selectionManager.add() }
                 PuzzleGrid(
+                    modifier = Modifier
+                        .focus(focusable),
+                    selectDirectly = selectDirectly,
+                    selectionManager = selectionManager,
                     grid = game.grid,
                     spacing = spacing,
-                    selectDirectly = selectDirectly,
                     onUpdate = {
                         horizontalClues.forEach { it.update(game.grid) }
                         verticalClues.forEach { it.update(game.grid) }
@@ -66,9 +73,12 @@ fun App(
                 )
             },
             horizontalClues = {
+                val focusable = remember { selectionManager.add() }
                 for (clue in horizontalClues) {
                     HorizontalClue(
-                        modifier = Modifier.forClue(clue, spacing),
+                        modifier = Modifier
+                            .focus(focusable)
+                            .forClue(clue, spacing),
                         spacing = spacing,
                         clue = clue.clue,
                         isClueViolated = clue.isViolated
@@ -76,9 +86,12 @@ fun App(
                 }
             },
             verticalClues = {
+                val focusable = remember { selectionManager.add() }
                 for (clue in verticalClues) {
                     VerticalClue(
-                        modifier = Modifier.forClue(clue, spacing),
+                        modifier = Modifier
+                            .focus(focusable)
+                            .forClue(clue, spacing),
                         spacing = spacing,
                         clue = clue.clue,
                         isClueViolated = clue.isViolated

commonUI/src/commonMain/kotlin/ch/dissem/yaep/ui/common/grid.kt

@@ -1,5 +1,6 @@
 package ch.dissem.yaep.ui.common
 
+import SelectionManager
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -12,6 +13,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.key.Key
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import ch.dissem.yaep.domain.GameCell
@@ -19,11 +21,13 @@ import ch.dissem.yaep.domain.GameRow
 import ch.dissem.yaep.domain.Grid
 import ch.dissem.yaep.domain.Item
 import ch.dissem.yaep.domain.ItemClass
+import focus
 
 @Composable
 fun PuzzleGrid(
     modifier: Modifier = Modifier,
     selectDirectly: Boolean,
+    selectionManager: SelectionManager,
     spacing: Dp = 8.dp,
     grid: Grid,
     onUpdate: () -> Unit
@@ -36,7 +40,8 @@ fun PuzzleGrid(
                 onSnapshot = { grid.snapshot() },
                 onUndo = { grid.undo() },
                 spacing = spacing,
-                selectDirectly = selectDirectly
+                selectDirectly = selectDirectly,
+                selectionManager = selectionManager
             )
         }
     }
@@ -49,15 +54,20 @@ private fun PuzzleRow(
     onSnapshot: () -> Unit,
     onUndo: () -> Boolean,
     spacing: Dp,
-    selectDirectly: Boolean
+    selectDirectly: Boolean,
+    selectionManager: SelectionManager
 ) {
+    val focusableRow = remember { selectionManager.add() }
     Row(
         modifier = Modifier
             .fillMaxWidth()
             .wrapContentHeight()
     ) {
         val allOptions = row.options
+        val columnSelectionManager =
+            remember { focusableRow.createChild(Key.DirectionRight, Key.DirectionLeft) }
         for (cell in row) {
+            val focusableItem = remember { columnSelectionManager.add() }
             var selection by remember(cell) { mutableStateOf(cell.selection) }
             val options = remember(cell) {
                 allOptions.map { Toggleable(it, cell.options.contains(it)) }
@@ -73,6 +83,7 @@ private fun PuzzleRow(
             }
             Selector(
                 modifier = Modifier
+                    .focus(focusableItem)
                     .padding(spacing)
                     .weight(1f),
                 spacing,

commonUI/src/commonMain/kotlin/ch/dissem/yaep/ui/common/puzzle clues.kt

@@ -0,0 +1,136 @@
+package ch.dissem.yaep.ui.common
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedCard
+import androidx.compose.runtime.Composable
+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.draw.alpha
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.unit.dp
+import ch.dissem.yaep.domain.Clue
+import ch.dissem.yaep.domain.Grid
+import ch.dissem.yaep.domain.HorizontalClue
+import ch.dissem.yaep.domain.NeighbourClue
+import ch.dissem.yaep.domain.OrderClue
+import ch.dissem.yaep.domain.SameColumnClue
+import ch.dissem.yaep.domain.TripletClue
+import org.jetbrains.compose.resources.painterResource
+import yaep.commonui.generated.resources.Res
+import yaep.commonui.generated.resources.neighbour
+import yaep.commonui.generated.resources.order
+
+class DisplayClue<C : Clue>(val clue: C) {
+    var isActive: Boolean by mutableStateOf(true)
+
+    var isViolated: Boolean by mutableStateOf(false)
+
+    fun update(grid: Grid) {
+        isViolated = !clue.isValid(grid)
+        if (isViolated) {
+            isActive = true
+        }
+    }
+}
+
+internal fun Modifier.forClue(clue: DisplayClue<out Clue>): Modifier = this
+    .alpha(if (clue.isActive) 1f else 0.2f)
+    .padding(8.dp)
+    .onEitherPointerAction { clue.isActive = !clue.isActive }
+
+@Composable
+fun HorizontalClue(
+    modifier: Modifier = Modifier,
+    clue: HorizontalClue,
+    isClueViolated: Boolean
+) {
+    ClueCard(
+        modifier = modifier,
+        isClueViolated = isClueViolated
+    ) {
+        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)
+                }
+
+                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)
+                }
+
+                is TripletClue<*, *, *> -> {
+                    DrawItem(modifier = Modifier.weight(1f), clue.a)
+                    DrawItem(modifier = Modifier.weight(1f), clue.b)
+                    DrawItem(modifier = Modifier.weight(1f), clue.c)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun VerticalClue(
+    modifier: Modifier = Modifier,
+    clue: SameColumnClue<*, *>,
+    isClueViolated: Boolean = false
+) {
+    ClueCard(
+        modifier = modifier.aspectRatio(0.5f),
+        isClueViolated = isClueViolated
+    ) {
+        Column {
+            DrawItem(modifier = Modifier.weight(1f), clue.a)
+            DrawItem(modifier = Modifier.weight(1f), clue.b)
+        }
+    }
+}
+
+@Composable
+fun ClueCard(
+    modifier: Modifier = Modifier,
+    isClueViolated: Boolean,
+    content: @Composable () -> Unit
+) {
+    val colors = MaterialTheme.colorScheme
+    OutlinedCard(
+        modifier = if (isClueViolated) {
+            modifier.shadow(
+                8.dp,
+                shape = CardDefaults.outlinedShape,
+                ambientColor = colors.error,
+                spotColor = colors.error
+            )
+        } else {
+            modifier
+        },
+        border = if (isClueViolated) {
+            remember { BorderStroke(1.0.dp, colors.error) }
+        } else {
+            CardDefaults.outlinedCardBorder()
+        }
+    ) {
+        content()
+    }
+}

commonUI/src/commonMain/kotlin/ch/dissem/yaep/ui/common/puzzle grid.kt

@@ -0,0 +1,88 @@
+package ch.dissem.yaep.ui.common
+
+import SelectionManager
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+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.input.key.Key
+import androidx.compose.ui.unit.dp
+import ch.dissem.yaep.domain.Grid
+import focus
+
+@Composable
+fun PuzzleGrid(
+    modifier: Modifier = Modifier,
+    selectionManager: SelectionManager,
+    grid: Grid,
+    onUpdate: () -> Unit
+) {
+    Column(modifier = modifier) {
+        for (row in grid) {
+            val focusableRow = remember { selectionManager.add() }
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .wrapContentHeight()
+            ) {
+                val allOptions = row.options
+                val columnSelectionManager =
+                    remember { focusableRow.createChild(Key.DirectionRight, Key.DirectionLeft) }
+                for (item in row) {
+                    val focusableItem = remember { columnSelectionManager.add() }
+                    var selection by remember(item) { mutableStateOf(item.selection) }
+                    val options = remember(item) {
+                        allOptions.map { Toggleable(it, item.options.contains(it)) }
+                    }
+                    LaunchedEffect(item) {
+                        item.optionsChangedListeners.add { enabled ->
+                            options.forEach { it.enabled = enabled.contains(it.item) }
+                        }
+                        item.selectionChangedListeners.add {
+                            selection = it
+                            onUpdate()
+                        }
+                    }
+                    Selector(
+                        modifier = Modifier
+                            .focus(focusableItem)
+                            .padding(8.dp)
+                            .weight(1f),
+                        options = options,
+                        onOptionRemoved = {
+                            grid.snapshot()
+                            item.options.remove(it)
+                            row.cleanupOptions()
+                        },
+                        onOptionAdded = {
+                            item.options.add(it)
+                        },
+                        selectedItem = selection,
+                        onSelectItem = {
+                            if (it != null) {
+                                grid.snapshot()
+                                item.selection = it
+                                row.cleanupOptions()
+                            } else {
+                                while (item.selection != null) {
+                                    if (!grid.undo()) break
+                                }
+                                options.forEach {
+                                    it.enabled = item.options.contains(it.item)
+                                }
+                            }
+                        }
+                    )
+                }
+            }
+        }
+    }
+}

commonUI/src/commonMain/kotlin/ch/dissem/yaep/ui/common/widget status.kt

@@ -0,0 +1,128 @@
+import androidx.compose.foundation.border
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.input.key.Key
+import androidx.compose.ui.input.key.KeyEvent
+import androidx.compose.ui.input.key.KeyEventType
+import androidx.compose.ui.input.key.isShiftPressed
+import androidx.compose.ui.input.key.key
+import androidx.compose.ui.input.key.type
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.combine
+import kotlin.IllegalStateException
+
+class SelectionManager(
+    val keyNext: Key,
+    val keyPrevious: Key? = null
+) {
+    var isActiveFlow = MutableStateFlow<Boolean>(false)
+    var isActive: Boolean
+        get() = isActiveFlow.value
+        set(value) {
+            isActiveFlow.value = value
+        }
+
+    var focusedFlow = MutableStateFlow<Focusable?>(null)
+
+    var focused: Focusable?
+        get() = focusedFlow.value
+        set(value) {
+            val previous = focusedFlow.value
+            if (previous != value) {
+                previous?.child?.isActive = false
+                value?.child?.isActive = true
+            }
+            focusedFlow.value = value
+        }
+
+    val last: Focusable
+        get() = focused?.previous ?: throw IllegalStateException("not initialized")
+
+    val child: SelectionManager?
+        get() = focused?.child
+
+    fun focusNext() {
+        focused = focused?.next
+    }
+
+    fun focusPrevious() {
+        focused = focused?.previous
+    }
+
+    fun add(): Focusable {
+        val new = Focusable(this)
+        if (focused != null) {
+            new.next = focused!!
+        } else {
+            focused = new
+        }
+        return new
+    }
+
+    fun onKeyEvent(event: KeyEvent): Boolean {
+        if (event.type != KeyEventType.KeyUp) return false
+
+        if (event.key == keyNext) {
+            if (keyPrevious == null && event.isShiftPressed) {
+                focusPrevious()
+            } else {
+                focusNext()
+            }
+        } else if (event.key == keyPrevious) {
+            focusPrevious()
+        } else {
+            return child?.onKeyEvent(event) == true
+        }
+        return true
+    }
+}
+
+class Focusable(
+    private val manager: SelectionManager,
+) {
+    val hasFocus: Flow<Boolean> =
+        combine(manager.isActiveFlow, manager.focusedFlow) { isActive, focused ->
+            isActive && focused == this
+        }
+
+    var previous: Focusable = this
+        private set
+
+    private var _next: Focusable = this
+    var next: Focusable
+        get() = _next
+        set(value) {
+            previous = value.previous
+            previous._next = this
+            value.previous = this
+            _next = value
+        }
+
+    var child: SelectionManager? = null
+        private set
+
+    fun createChild(
+        keyNext: Key,
+        keyPrevious: Key? = null
+    ): SelectionManager {
+        child = SelectionManager(keyNext, keyPrevious)
+        child!!.isActive = manager.isActive && manager.focused == this
+        return child!!
+    }
+}
+
+@Composable
+fun Modifier.focus(holder: Focusable): Modifier = if (holder.hasFocus.collectAsState(false).value) {
+    border(
+        width = 2.dp,
+        color = MaterialTheme.colorScheme.primary,
+        shape = RectangleShape
+    )
+} else {
+    this
+}

desktop/src/main/kotlin/ch/dissem/yaep/ui/desktop/desktop window.kt

@@ -1,5 +1,6 @@
 package ch.dissem.yaep.ui.desktop
 
+import SelectionManager
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
@@ -16,6 +17,8 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.input.key.onKeyEvent
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.WindowPlacement
 import androidx.compose.ui.window.WindowScope
@@ -40,11 +43,13 @@ import yaep.desktop.generated.resources.Res as DRes
 @Composable
 fun WindowScope.DesktopWindow(
     useDarkMode: Boolean,
+    selectionManager: SelectionManager,
     topBar: @Composable () -> Unit,
     content: @Composable (PaddingValues) -> Unit
 ) {
     AppTheme(darkTheme = useDarkMode) {
         Scaffold(
+            modifier = Modifier.onKeyEvent { event -> selectionManager.onKeyEvent(event) },
             topBar = {
                 WindowDraggableArea {
                     topBar()

desktop/src/main/kotlin/ch/dissem/yaep/ui/desktop/main.kt

@@ -1,11 +1,13 @@
 package ch.dissem.yaep.ui.desktop
 
+import SelectionManager
 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.input.key.Key
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
@@ -47,10 +49,12 @@ fun main(): Unit = application {
         state = windowState,
         icon = painterResource(DRes.drawable.ic_launcher)
     ) {
+        val selectionManager = remember { SelectionManager(Key.Tab).apply { isActive = true } }
         var useDarkMode by remember { mutableStateOf(true) }
         var resetCluesBeacon by remember { mutableStateOf(Any()) }
         DesktopWindow(
             useDarkMode = useDarkMode,
+            selectionManager = selectionManager,
             topBar = {
                 AppBar(
                     useDarkMode = useDarkMode,
@@ -67,6 +71,7 @@ fun main(): Unit = application {
         ) {
             App(
                 modifier = Modifier.padding(it),
+                selectionManager = selectionManager,
                 spacing = 8.dp,
                 selectDirectly = true,
                 game = game,