Star field layout adjustments + autoscroll

androidApp/build.gradle.kts

@@ -22,6 +22,7 @@ android {
     buildTypes {
         release {
             isMinifyEnabled = true
+            signingConfig = signingConfigs.getByName("debug")
         }
     }
     compileOptions {

shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/EntryCard.kt

@@ -1,5 +1,6 @@
 package com.bumble.puzzyx.composable
 
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -8,31 +9,45 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.bumble.appyx.navigation.integration.LocalScreenSize
+import com.bumble.appyx.navigation.integration.ScreenSize.WindowSizeClass
 import com.bumble.puzzyx.imageloader.ResourceImage
 import com.bumble.puzzyx.model.Entry
 import com.bumble.puzzyx.ui.colors
+import kotlinx.coroutines.isActive
 
 @Composable
 fun EntryCard(
     entry: Entry,
     modifier: Modifier = Modifier,
 ) {
+    val scaleFactor = scaleFactor()
+    val size = 24.dp * scaleFactor
     Box(
         modifier = modifier.clip(RoundedCornerShape(16.dp))
     ) {
         when (entry) {
-            is Entry.Text -> TextEntry(entry)
+            is Entry.Text -> TextEntry(
+                entry = entry,
+                paddingTop = size
+            )
+
             is Entry.Image -> ResourceImage(
                 path = "participant/${entry.path}",
                 contentDescription = entry.contentDescription,
@@ -43,17 +58,20 @@ fun EntryCard(
             is Entry.ComposableContent -> entry.content()
         }
         GitHubHeader(
+            size = size,
             entry = entry,
-            modifier = Modifier.padding(8.dp)
+            modifier = Modifier.padding(8.dp * scaleFactor)
         )
     }
 }
 
 @Composable
 fun GitHubHeader(
+    size: Dp,
     entry: Entry,
     modifier: Modifier = Modifier
 ) {
+    val scaleFactor = scaleFactor()
     Row(
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
@@ -62,36 +80,59 @@ fun GitHubHeader(
             path = "github.png",
             contentScale = ContentScale.Inside,
             modifier = Modifier
-                .size(32.dp)
                 .padding(2.dp)
+                .size(size)
         )
         Spacer(
-            modifier = Modifier.size(4.dp)
+            modifier = Modifier.size(4.dp * scaleFactor)
         )
         Text(
             text = entry.githubUserName,
-            fontSize = 18.sp,
+            fontSize = 16.sp * scaleFactor,
             fontWeight = FontWeight.Bold
         )
     }
 }
 
 @Composable
 fun TextEntry(
+    paddingTop: Dp,
     entry: Entry.Text,
     modifier: Modifier = Modifier
 ) {
     val colorIdx = remember { colors.indices.random() }
+    val state = rememberScrollState()
 
-    Text(
-        text = entry.message,
-        fontSize = 16.sp,
+    LaunchedEffect(Unit) {
+        while (isActive) {
+            state.animateScrollTo(state.maxValue, tween(10000))
+            state.scrollTo(0)
+        }
+    }
+
+    val scaleFactor = scaleFactor()
+
+    Column(
         modifier = modifier
             .fillMaxSize()
             .background(colors[colorIdx])
-            .padding(12.dp)
-            .padding(top = 36.dp),
-    )
+            .padding(12.dp * scaleFactor)
+            .padding(top = paddingTop)
+            .clipToBounds()
+            .verticalScroll(state)
+    ) {
+        Text(
+            text = entry.message,
+            fontSize = 16.sp * scaleFactor,
+        )
+    }
+}
+
+@Composable
+private fun scaleFactor(): Float = when (LocalScreenSize.current.windowSizeClass) {
+    WindowSizeClass.COMPACT -> 1f
+    WindowSizeClass.MEDIUM -> 1.5f
+    WindowSizeClass.EXPANDED -> 2f
 }
 
 @Composable

shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/StarFieldMessageBoard.kt

@@ -30,7 +30,10 @@ import androidx.compose.ui.zIndex
 import com.bumble.appyx.interactions.core.ui.math.smoothstep
 import com.bumble.appyx.navigation.collections.ImmutableList
 import com.bumble.appyx.navigation.collections.toImmutableList
+import com.bumble.appyx.navigation.integration.LocalScreenSize
+import com.bumble.appyx.navigation.integration.ScreenSize.WindowSizeClass
 import com.bumble.puzzyx.composable.StarField.Companion.generateStars
+import com.bumble.puzzyx.composable.StarType.EntryType.Companion.getSize
 import com.bumble.puzzyx.model.Entry
 import com.bumble.puzzyx.model.entries
 import com.bumble.puzzyx.ui.appyx_dark
@@ -49,6 +52,7 @@ private data class StarFieldSpecs(
     val zFadeInEnd: Float = 0.4f,
     val zFadeOutStart: Float = 1.3f,
     val zFadeOutEnd: Float = 1.4f,
+    val windowSize: WindowSizeClass,
 ) {
     val zOffset = (zFadeOutEnd - zFadeInStart) / maxEntries
 }
@@ -72,7 +76,14 @@ private sealed class StarType {
 
     data class EntryType(val entry: Entry) : StarType() {
         companion object {
-            val sizeDp: Dp = 260.dp
+            fun getSize(windowSize: WindowSizeClass): Dp {
+                return when (windowSize) {
+                    WindowSizeClass.COMPACT -> 180.dp
+                    WindowSizeClass.MEDIUM -> 260.dp
+                    WindowSizeClass.EXPANDED -> 400.dp
+                }
+            }
+
             const val aspectRatio: Float = 1.5f
         }
     }
@@ -120,7 +131,7 @@ private data class StarField(
             entries.reversed().mapIndexed { index, entry ->
                 Star(
                     zCoord = starFieldSpecs.zFadeInStart - index * starFieldSpecs.zOffset,
-                    sizeDp = StarType.EntryType.sizeDp,
+                    sizeDp = getSize(starFieldSpecs.windowSize),
                     aspectRatio = StarType.EntryType.aspectRatio,
                     type = StarType.EntryType(entry = entry),
                 )
@@ -130,9 +141,11 @@ private data class StarField(
 
 
 private fun StarField.update(
-    timeInSecs: Float
+    timeInSecs: Float,
+    specs: StarFieldSpecs,
 ): StarField =
     copy(
+        specs = specs,
         stars = stars.map { star ->
             val zUpdatedCoord = star.zCoord + specs.speed * timeInSecs
             if (zUpdatedCoord < specs.zFadeOutEnd) {
@@ -155,7 +168,10 @@ private fun StarField.update(
 fun StarFieldMessageBoard(
     modifier: Modifier = Modifier,
 ) {
-    val starFieldSpecs = remember { StarFieldSpecs() }
+    val windowSize = LocalScreenSize.current.windowSizeClass
+    val starFieldSpecs = remember(windowSize) {
+        StarFieldSpecs(windowSize = windowSize)
+    }
     var starField by remember { mutableStateOf(generateStars(starFieldSpecs)) }
     LaunchedEffect(Unit) {
         var lastFrame = 0L
@@ -166,6 +182,7 @@ fun StarFieldMessageBoard(
                 }
                 starField = starField.update(
                     timeInSecs = (it - lastFrame) / 1_000f,
+                    specs = starFieldSpecs,
                 )
                 lastFrame = it
             }

shared/src/commonMain/kotlin/com/bumble/puzzyx/model/Entries.kt

@@ -29,7 +29,9 @@ val entries = listOf(
     Entry.Text(
         puzzle = Puzzle.PUZZLE1,
         githubUserName = "dataGeek",
-        message = "Shoutout to the organizers for an amazing lineup!"
+        message = "Who's up for a post-conference karaoke session tonight? " +
+                "Mind blown by the innovative ideas shared today. " +
+                "Great to see old friends and make new ones!"
     ),
     Entry.Text(
         puzzle = Puzzle.PUZZLE1,
@@ -39,7 +41,9 @@ val entries = listOf(
     Entry.Text(
         puzzle = Puzzle.PUZZLE1,
         githubUserName = "byteBender",
-        message = "Let's connect! Find me at the networking session!"
+        message = "Who's up for a post-conference karaoke session tonight? " +
+                "Mind blown by the innovative ideas shared today. " +
+                "Great to see old friends and make new ones!"
     ),
     Entry.Text(
         puzzle = Puzzle.PUZZLE1,
@@ -59,7 +63,9 @@ val entries = listOf(
     Entry.Text(
         puzzle = Puzzle.PUZZLE1,
         githubUserName = "cyberPioneer",
-        message = "Who's up for a post-conference karaoke session tonight?"
+        message = "Who's up for a post-conference karaoke session tonight? " +
+                "Mind blown by the innovative ideas shared today. " +
+                "Great to see old friends and make new ones!"
     ),
     Entry.Text(
         puzzle = Puzzle.PUZZLE1,