- BoggleTheme object implemented to handle BoggleDimensions.

- Project updated to use BoggleDimensions.
- Constants created for better organization.

Author: alejandro-rios

composeApp/src/commonMain/composeResources/values/strings.xml

@@ -19,4 +19,5 @@
     <string name="word_counter_6">6</string>
     <string name="word_counter_7">7</string>
     <string name="word_counter_more">8+</string>
+    <string name="game_progress">%1$d%</string>
 </resources>

composeApp/src/commonMain/kotlin/com/alejandrorios/bogglemultiplatform/App.kt

@@ -13,7 +13,7 @@ import com.alejandrorios.bogglemultiplatform.di.networkModule
 import com.alejandrorios.bogglemultiplatform.ui.screen.BoggleScreen
 import com.alejandrorios.bogglemultiplatform.ui.screen.BoggleUiState
 import com.alejandrorios.bogglemultiplatform.ui.screen.BoggleViewModel
-import com.alejandrorios.bogglemultiplatform.ui.theme.AppTheme
+import com.alejandrorios.bogglemultiplatform.ui.theme.BoggleTheme
 import io.github.xxfast.kstore.KStore
 import org.koin.compose.KoinApplication
 import org.koin.compose.viewmodel.koinViewModel
@@ -23,7 +23,7 @@ internal fun App() {
     KoinApplication(application = {
         modules(commonModule(), networkModule(), databaseModule())
     }) {
-        AppTheme {
+        BoggleTheme {
             val boggleViewModel: BoggleViewModel = koinViewModel()
             val boggleUiState by boggleViewModel.uiState.collectAsStateWithLifecycle()
 

composeApp/src/commonMain/kotlin/com/alejandrorios/bogglemultiplatform/ui/components/AnimatedBorderBox.kt

@@ -31,8 +31,8 @@ import androidx.compose.ui.graphics.drawscope.rotate
 import androidx.compose.ui.graphics.drawscope.scale
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
 import com.alejandrorios.bogglemultiplatform.currentPlatform
+import com.alejandrorios.bogglemultiplatform.ui.theme.BoggleTheme
 
 @Composable
 fun AnimatedBorderBox(
@@ -41,8 +41,8 @@ fun AnimatedBorderBox(
     backgroundColor: Color = Color(0xFF1F4E78),
     borderColor: Color = Color(0xFF9C9C9C),
     progressColor: Color = Color(0xFFD28B2D),
-    cornerRadius: Dp = 16.dp,
-    strokeWidth: Dp = 10.dp,
+    cornerRadius: Dp = BoggleTheme.dimensions.cornerRadius.md,
+    strokeWidth: Dp = BoggleTheme.dimensions.strokeWidth.borderBox,
     onProgressComplete: () -> Unit = {},
     onRotationComplete: () -> Unit = {},
     modifier: Modifier = Modifier,

composeApp/src/commonMain/kotlin/com/alejandrorios/bogglemultiplatform/ui/components/BoggleBoard.kt

@@ -11,8 +11,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
-import androidx.compose.ui.unit.dp
 import com.alejandrorios.bogglemultiplatform.ui.screen.BoggleUiState
+import com.alejandrorios.bogglemultiplatform.ui.theme.BoggleTheme
+import com.alejandrorios.bogglemultiplatform.utils.BoggleBoardGridSize
 import com.alejandrorios.bogglemultiplatform.utils.boggleBoardDragHandler
 import com.alejandrorios.bogglemultiplatform.utils.boggleDieModifier
 
@@ -29,8 +30,11 @@ fun BoggleBoard(
     val listState = rememberLazyGridState()
 
     val borderProgress = remember(state.wordsGuessed.size, state.result.size) {
-        if (state.result.isEmpty()) 0f
-        else state.wordsGuessed.size / state.result.size.toFloat()
+        if (state.result.isEmpty()) {
+            0f
+        } else {
+            state.wordsGuessed.size / state.result.size.toFloat()
+        }
     }
 
     AnimatedBorderBox(
@@ -45,10 +49,10 @@ fun BoggleBoard(
 
         LazyVerticalGrid(
             state = listState,
-            columns = GridCells.Fixed(4),
-            verticalArrangement = Arrangement.spacedBy(18.dp),
-            horizontalArrangement = Arrangement.spacedBy(18.dp),
-            contentPadding = PaddingValues(20.dp),
+            columns = GridCells.Fixed(BoggleBoardGridSize),
+            verticalArrangement = Arrangement.spacedBy(BoggleTheme.dimensions.spacing.md),
+            horizontalArrangement = Arrangement.spacedBy(BoggleTheme.dimensions.spacing.md),
+            contentPadding = PaddingValues(BoggleTheme.dimensions.spacing.lg),
             modifier = modifier.boggleBoardDragHandler(listState, selectedIds, onDragEnded, updateKeys),
             userScrollEnabled = false
         ) {

composeApp/src/commonMain/kotlin/com/alejandrorios/bogglemultiplatform/ui/components/BoggleDie.kt

@@ -19,6 +19,8 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.alejandrorios.bogglemultiplatform.ui.theme.BoggleTheme
+import com.alejandrorios.bogglemultiplatform.utils.cardElevationZero
 import com.alejandrorios.bogglemultiplatform.utils.isQ
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
@@ -31,23 +33,16 @@ fun BoggleDie(
 ) {
     Card(
         modifier = modifier,
-        shape = RoundedCornerShape(16.dp),
-        elevation = CardDefaults.cardElevation(
-            defaultElevation = 0.dp,
-            pressedElevation = 0.dp,
-            focusedElevation = 0.dp,
-            hoveredElevation = 0.dp,
-            draggedElevation = 0.dp,
-            disabledElevation = 0.dp
-        ),
+        shape = RoundedCornerShape(BoggleTheme.dimensions.cornerRadius.md),
+        elevation = CardDefaults.cardElevation(cardElevationZero.dp),
         colors = CardDefaults.cardColors(
             containerColor = getCardColor(selected, isAWord),
         ),
     ) {
         Box(
             contentAlignment = Alignment.Center,
             modifier = Modifier
-                .padding(4.dp)
+                .padding(BoggleTheme.dimensions.spacing.xxs)
                 .clip(CircleShape)
                 .background(color = getBoxColor(selected, isAWord))
                 .fillMaxSize()
@@ -71,7 +66,7 @@ fun BoggleDie(
                 color = getLetterColor(selected),
                 fontWeight = FontWeight.Bold,
                 textAlign = TextAlign.Center,
-                modifier = Modifier.padding(4.dp)
+                modifier = Modifier.padding(BoggleTheme.dimensions.spacing.xxs)
             )
         }
     }
@@ -97,17 +92,17 @@ fun getLetterColor(selected: Boolean): Color = when {
 @Preview(showBackground = true)
 @Composable
 fun NormalDie() {
-    BoggleDie(letter = "Qu", selected = false, modifier = Modifier.padding(10.dp))
+    BoggleDie(letter = "Qu", selected = false, modifier = Modifier.padding(BoggleTheme.dimensions.spacing.sm))
 }
 
 @Preview(showBackground = true)
 @Composable
 fun SelectedDie() {
-    BoggleDie(letter = "B", selected = true, modifier = Modifier.padding(10.dp))
+    BoggleDie(letter = "B", selected = true, modifier = Modifier.padding(BoggleTheme.dimensions.spacing.sm))
 }
 
 @Preview(showBackground = true)
 @Composable
 fun WordDie() {
-    BoggleDie(letter = "B", selected = true, isAWord = true, modifier = Modifier.padding(10.dp))
+    BoggleDie(letter = "B", selected = true, isAWord = true, modifier = Modifier.padding(BoggleTheme.dimensions.spacing.sm))
 }

composeApp/src/commonMain/kotlin/com/alejandrorios/bogglemultiplatform/ui/components/Spacers.kt

@@ -6,10 +6,10 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
+import com.alejandrorios.bogglemultiplatform.ui.theme.BoggleTheme
 
 @Composable
-fun VerticalSpacer(spacing: Dp = 10.dp) = Spacer(modifier = Modifier.height(spacing))
+fun VerticalSpacer(spacing: Dp = BoggleTheme.dimensions.spacing.sm) = Spacer(modifier = Modifier.height(spacing))
 
 @Composable
-fun HorizontalSpacer(spacing: Dp = 10.dp) = Spacer(modifier = Modifier.width(spacing))
+fun HorizontalSpacer(spacing: Dp = BoggleTheme.dimensions.spacing.sm) = Spacer(modifier = Modifier.width(spacing))

composeApp/src/commonMain/kotlin/com/alejandrorios/bogglemultiplatform/ui/components/WordCounter.kt

@@ -24,9 +24,9 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.withStyle
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.alejandrorios.bogglemultiplatform.data.models.WordPair
+import com.alejandrorios.bogglemultiplatform.ui.theme.BoggleTheme
 
 @Composable
 fun WordCounter(
@@ -44,7 +44,7 @@ fun WordCounter(
         ).value
 
         Column(
-            modifier = Modifier.padding(horizontal = 16.dp),
+            modifier = Modifier.padding(horizontal = BoggleTheme.dimensions.spacing.md),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
             Text(
@@ -53,7 +53,10 @@ fun WordCounter(
             )
             VerticalSpacer()
             Box(
-                modifier = Modifier.background(color = Color(0xFFEBEBEB), shape = RoundedCornerShape(100)),
+                modifier = Modifier.background(
+                    color = Color(0xFFEBEBEB),
+                    shape = RoundedCornerShape(BoggleTheme.dimensions.cornerRadius.full)
+                ),
                 contentAlignment = Alignment.Center
             ) {
                 Text(
@@ -62,7 +65,7 @@ fun WordCounter(
                 )
                 CircularProgressIndicator(
                     progress = { animatedProgress },
-                    strokeWidth = 6.dp,
+                    strokeWidth = BoggleTheme.dimensions.strokeWidth.wordCounterProgress,
                     trackColor = Color(0xFFEBEBEB),
                     strokeCap = StrokeCap.Round
                 )

composeApp/src/commonMain/kotlin/com/alejandrorios/bogglemultiplatform/ui/components/WordCounterRow.kt

@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 import boggle_multiplatform.composeapp.generated.resources.Res
 import boggle_multiplatform.composeapp.generated.resources.word_counter_3
 import boggle_multiplatform.composeapp.generated.resources.word_counter_4
@@ -17,6 +16,7 @@ import boggle_multiplatform.composeapp.generated.resources.word_counter_6
 import boggle_multiplatform.composeapp.generated.resources.word_counter_7
 import boggle_multiplatform.composeapp.generated.resources.word_counter_more
 import com.alejandrorios.bogglemultiplatform.data.models.WordsCount
+import com.alejandrorios.bogglemultiplatform.ui.theme.BoggleTheme
 import org.jetbrains.compose.resources.stringResource
 
 @Composable
@@ -26,7 +26,10 @@ fun WordCounterRow(
     onWordClick: (String) -> Unit
 ) {
     Row(
-        modifier = modifier.padding(horizontal = 16.dp).fillMaxWidth().horizontalScroll(rememberScrollState()),
+        modifier = modifier
+            .padding(horizontal = BoggleTheme.dimensions.spacing.md)
+            .fillMaxWidth()
+            .horizontalScroll(rememberScrollState()),
         horizontalArrangement = Arrangement.Center
     ) {
         WordCounter(