[Mosaic] Display Mosaic game grid with table borders (fixes #15)

opatry · Jan 3, 2024 · 0257f5c · 0257f5c
1 parent 5bf6c87
commit 0257f5c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/wordle-compose-mosaic/src/main/java/net/opatry/game/wordle/mosaic/component/alphabet.kt b/wordle-compose-mosaic/src/main/java/net/opatry/game/wordle/mosaic/component/alphabet.kt
@@ -25,6 +25,7 @@ package net.opatry.game.wordle.mosaic.component
 import androidx.compose.runtime.Composable
 import com.jakewharton.mosaic.ui.Column
 import com.jakewharton.mosaic.ui.Row
+import com.jakewharton.mosaic.ui.Text
 import net.opatry.game.wordle.AnswerFlag
 
 @Composable
@@ -33,9 +34,12 @@ fun Alphabet(alphabet: Map<Char, AnswerFlag>) {
         alphabet.keys.chunked(9).forEach { row ->
             Row {
                 row.forEach { letter ->
+                    Text(" ")
                     WordleCharCell(letter, alphabet[letter]!!)
+                    Text(" ")
                 }
             }
+            Text(" ")
         }
     }
 }
diff --git a/wordle-compose-mosaic/src/main/java/net/opatry/game/wordle/mosaic/component/wordle.kt b/wordle-compose-mosaic/src/main/java/net/opatry/game/wordle/mosaic/component/wordle.kt
@@ -35,18 +35,29 @@ import net.opatry.game.wordle.AnswerFlag
 @Composable
 fun WordleGrid(grid: List<Answer>) {
     Column {
-        grid.forEach { row ->
-            WordleWordRow(row)
-        }
-    }
-}
+        // Box drawing: https://en.wikipedia.org/wiki/Box-drawing_character#Box_Drawing
+        // FIXME dividers length depends on max of row.letters
+        //  good enough for now given that we know it's a 5x6 grid
+        Text("╭─────┬─────┬─────┬─────┬─────╮")
+        grid.forEachIndexed { rowIndex, row ->
+            if (rowIndex > 0) {
+                Text("├─────┼─────┼─────┼─────┼─────┤")
+            }
+            Row {
+                row.letters.forEachIndexed { cellIndex, char ->
+                    if (cellIndex == 0)
+                        Text("│ ")
+                    else
+                        Text(" │ ")
 
-@Composable
-fun WordleWordRow(row: Answer) {
-    Row {
-        row.letters.forEachIndexed { index, char ->
-            WordleCharCell(char, row.flags[index])
+                    WordleCharCell(char, row.flags[cellIndex])
+
+                    if (cellIndex == row.letters.size - 1)
+                        Text(" │")
+                }
+            }
         }
+        Text("╰─────┴─────┴─────┴─────┴─────╯")
     }
 }
 
@@ -68,15 +79,12 @@ fun WordleCharCell(char: Char, flag: AnswerFlag) {
     // TODO AnnotatedString " $char " https://github.com/JakeWharton/mosaic/issues/9
     Column {
         Row {
-            Text(" ")
             Text(
                 " $char ",
                 color = foregroundColor,
                 background = backgroundColor,
                 style = TextStyle.Bold
             )
-            Text(" ")
         }
-        Text("")
     }
 }
diff --git a/wordle-compose-mosaic/src/main/java/net/opatry/game/wordle/mosaic/gameScreen.kt b/wordle-compose-mosaic/src/main/java/net/opatry/game/wordle/mosaic/gameScreen.kt
@@ -44,6 +44,8 @@ fun GameScreen(viewModel: WordleViewModel) {
             Alphabet(viewModel.alphabet)
         }
 
+        Text("")
+
         when (val state = viewModel.state) {
             is State.Won -> {
                 Text("Wordle <TODO_wordleId> ${state.answers.size}/${state.maxTries}")