Merge pull request #39 from bumble-tech/star-content-layout-adjustments

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.puzzyx.imageloader.EmbeddableResourceImage
+import com.bumble.appyx.navigation.integration.LocalScreenSize
+import com.bumble.appyx.navigation.integration.ScreenSize.WindowSizeClass
 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 -> EmbeddableResourceImage(
                 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
+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

@@ -47,6 +47,7 @@ private data class StarFieldSpecs(
     val zFadeInEnd: Float = 0.4f,
     val zFadeOutStart: Float = 1.3f,
     val zFadeOutEnd: Float = 1.4f,
+    val scaleFactor: Float,
 ) {
     val zOffset = (zFadeOutEnd - zFadeInStart) / maxEntries
 }
@@ -70,7 +71,7 @@ private sealed class StarType {
 
     data class EntryType(val entry: Entry) : StarType() {
         companion object {
-            val sizeDp: Dp = 260.dp
+            val sizeDp: Dp = 200.dp
             const val aspectRatio: Float = 1.5f
         }
     }
@@ -115,7 +116,7 @@ private data class StarField(
             entries.mapIndexed { index, entry ->
                 Star(
                     zCoord = starFieldSpecs.zFadeInStart - index * starFieldSpecs.zOffset,
-                    sizeDp = StarType.EntryType.sizeDp,
+                    sizeDp = StarType.EntryType.sizeDp * starFieldSpecs.scaleFactor,
                     aspectRatio = StarType.EntryType.aspectRatio,
                     type = StarType.EntryType(entry = entry),
                 )
@@ -125,9 +126,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) {
@@ -147,7 +150,13 @@ fun StarFieldMessageBoard(
     entries: ImmutableList<Entry>,
     modifier: Modifier = Modifier,
 ) {
-    val starFieldSpecs = remember { StarFieldSpecs(maxEntries = entries.size) }
+    val scaleFactor = scaleFactor()
+    val starFieldSpecs = remember(scaleFactor, entries) {
+        StarFieldSpecs(
+            maxEntries = entries.size,
+            scaleFactor = scaleFactor
+        )
+    }
     var starField by remember { mutableStateOf(generateStars(starFieldSpecs, entries)) }
     var running by remember { mutableStateOf(true) }
     LaunchedEffect(Unit) {
@@ -159,6 +168,7 @@ fun StarFieldMessageBoard(
                 }
                 starField = starField.update(
                     timeInSecs = (it - lastFrame) / 1_000f,
+                    specs = starFieldSpecs,
                 )
                 lastFrame = it
             }

shared/src/commonMain/kotlin/com/bumble/puzzyx/imageloader/EmdeddableResourceImage.kt

@@ -0,0 +1,13 @@
+package com.bumble.puzzyx.imageloader
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+
+@Composable
+expect fun EmbeddableResourceImage(
+    path: String,
+    modifier: Modifier = Modifier,
+    contentDescription: String? = null,
+    contentScale: ContentScale = ContentScale.Fit,
+)

shared/src/commonMain/kotlin/com/bumble/puzzyx/imageloader/ResourceImage.kt

@@ -15,14 +15,6 @@ import kotlinx.coroutines.withContext
 import org.jetbrains.compose.resources.ExperimentalResourceApi
 import org.jetbrains.compose.resources.resource
 
-@Composable
-expect fun EmbeddableResourceImage(
-    path: String,
-    modifier: Modifier = Modifier,
-    contentDescription: String? = null,
-    contentScale: ContentScale = ContentScale.Fit,
-)
-
 @OptIn(ExperimentalResourceApi::class)
 @Composable
 internal fun ResourceImage(

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,