#118 integrated dots in composition

app/src/main/java/be/ugent/sel/studeez/screens/session/sessionScreens/composables/BreakTimerScreenComposable.kt

@@ -1,6 +1,14 @@
 package be.ugent.sel.studeez.screens.session.sessionScreens.composables
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 import be.ugent.sel.studeez.R
 import be.ugent.sel.studeez.data.local.models.timer_functional.FunctionalPomodoroTimer
 import be.ugent.sel.studeez.resources
@@ -14,12 +22,39 @@ fun BreakSessionScreenComposable(
 ) {
     SessionScreen(
         open = open,
-        sessionActions = sessionActions
+        sessionActions = sessionActions,
+        midSection = { Dots(pomodoroTimer) },
+        motivationString = { motivationString(pomodoroTimer = pomodoroTimer) }
+    )
+}
+
+@Composable
+private fun Dots(pomodoroTimer: FunctionalPomodoroTimer) {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Center,
     ) {
-        motivationString(pomodoroTimer = pomodoroTimer)
+        repeat(pomodoroTimer.repeats - pomodoroTimer.breaksRemaining) {
+            Dot(color = Color.DarkGray)
+        }
+        if (!pomodoroTimer.isInBreak) Dot(Color.Green) else Dot(Color.DarkGray)
+        repeat(pomodoroTimer.breaksRemaining - 1) {
+            Dot(color = Color.Gray)
+        }
     }
 }
 
+@Composable
+private fun Dot(color: Color) {
+    Box(modifier = Modifier
+        .padding(5.dp)
+        .size(10.dp)
+        .clip(CircleShape)
+        .background(color))
+}
+
+
 @Composable
 private fun motivationString(pomodoroTimer: FunctionalPomodoroTimer): String {
     if (pomodoroTimer.isInBreak) {

app/src/main/java/be/ugent/sel/studeez/screens/session/sessionScreens/composables/SessionScreenComposable.kt

@@ -23,12 +23,18 @@ import be.ugent.sel.studeez.screens.session.SessionActions
 fun SessionScreen(
     open: (String) -> Unit,
     sessionActions: SessionActions,
-    motivationString: @Composable () -> String
+    midSection: @Composable () -> Unit = {},
+    motivationString: @Composable () -> String,
+
 ) {
     Column(
         modifier = Modifier.padding(10.dp)
     ) {
-        Timer(sessionActions = sessionActions, motivationString = motivationString)
+        Timer(
+            sessionActions = sessionActions,
+            motivationString = motivationString,
+            midSection = midSection
+        )
         Box(
             contentAlignment = Alignment.Center, modifier = Modifier
                 .fillMaxWidth()

app/src/main/java/be/ugent/sel/studeez/screens/session/sessionScreens/composables/TimerComposable.kt

@@ -23,7 +23,8 @@ import kotlin.time.Duration.Companion.seconds
 @Composable
 fun Timer(
     sessionActions: SessionActions,
-    motivationString: @Composable () -> String
+    motivationString: @Composable () -> String,
+    midSection: @Composable () -> Unit
 ) {
     var tikker by remember { mutableStateOf(false) }
     LaunchedEffect(tikker) {
@@ -39,6 +40,7 @@ fun Timer(
         TimerClock(hms)
         MotivationText(text = motivationString())
 
+
         Box(
             contentAlignment = Alignment.Center, modifier = Modifier
                 .fillMaxWidth()