From f88ad3b5bdf7857f6cfb51475da6da939a56500e Mon Sep 17 00:00:00 2001 From: andreykovalev Date: Tue, 24 Oct 2023 10:25:00 +0100 Subject: [PATCH 1/3] Star field layout adjustments + autoscroll --- androidApp/build.gradle.kts | 1 + .../com/bumble/puzzyx/composable/EntryCard.kt | 63 +++++++++++++++---- .../composable/StarFieldMessageBoard.kt | 25 ++++++-- .../kotlin/com/bumble/puzzyx/model/Entries.kt | 12 +++- 4 files changed, 83 insertions(+), 18 deletions(-) diff --git a/androidApp/build.gradle.kts b/androidApp/build.gradle.kts index ae19f4d5..b61b4f52 100644 --- a/androidApp/build.gradle.kts +++ b/androidApp/build.gradle.kts @@ -22,6 +22,7 @@ android { buildTypes { release { isMinifyEnabled = true + signingConfig = signingConfigs.getByName("debug") } } compileOptions { diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/EntryCard.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/EntryCard.kt index b60ca85c..3001640c 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/EntryCard.kt +++ b/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,15 +80,15 @@ 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 ) } @@ -78,20 +96,43 @@ fun GitHubHeader( @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 diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/StarFieldMessageBoard.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/StarFieldMessageBoard.kt index 925f8839..02db290d 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/StarFieldMessageBoard.kt +++ b/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 } diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/model/Entries.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/model/Entries.kt index 93921523..5dd678e8 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/model/Entries.kt +++ b/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, From e7885c66717e6467f0e090c7dcc62121d6357826 Mon Sep 17 00:00:00 2001 From: andreykovalev Date: Tue, 24 Oct 2023 10:56:08 +0100 Subject: [PATCH 2/3] Use scale factor for card size --- .../com/bumble/puzzyx/composable/EntryCard.kt | 2 +- .../composable/StarFieldMessageBoard.kt | 22 +++++-------------- 2 files changed, 7 insertions(+), 17 deletions(-) diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/EntryCard.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/EntryCard.kt index 3001640c..6105ad35 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/EntryCard.kt +++ b/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/EntryCard.kt @@ -129,7 +129,7 @@ fun TextEntry( } @Composable -private fun scaleFactor(): Float = when (LocalScreenSize.current.windowSizeClass) { +fun scaleFactor(): Float = when (LocalScreenSize.current.windowSizeClass) { WindowSizeClass.COMPACT -> 1f WindowSizeClass.MEDIUM -> 1.5f WindowSizeClass.EXPANDED -> 2f diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/StarFieldMessageBoard.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/StarFieldMessageBoard.kt index 02db290d..441db447 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/StarFieldMessageBoard.kt +++ b/shared/src/commonMain/kotlin/com/bumble/puzzyx/composable/StarFieldMessageBoard.kt @@ -30,10 +30,7 @@ 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 @@ -52,7 +49,7 @@ private data class StarFieldSpecs( val zFadeInEnd: Float = 0.4f, val zFadeOutStart: Float = 1.3f, val zFadeOutEnd: Float = 1.4f, - val windowSize: WindowSizeClass, + val scaleFactor: Float, ) { val zOffset = (zFadeOutEnd - zFadeInStart) / maxEntries } @@ -76,14 +73,7 @@ private sealed class StarType { data class EntryType(val entry: Entry) : StarType() { companion object { - fun getSize(windowSize: WindowSizeClass): Dp { - return when (windowSize) { - WindowSizeClass.COMPACT -> 180.dp - WindowSizeClass.MEDIUM -> 260.dp - WindowSizeClass.EXPANDED -> 400.dp - } - } - + val sizeDp: Dp = 200.dp const val aspectRatio: Float = 1.5f } } @@ -131,7 +121,7 @@ private data class StarField( entries.reversed().mapIndexed { index, entry -> Star( zCoord = starFieldSpecs.zFadeInStart - index * starFieldSpecs.zOffset, - sizeDp = getSize(starFieldSpecs.windowSize), + sizeDp = StarType.EntryType.sizeDp * starFieldSpecs.scaleFactor, aspectRatio = StarType.EntryType.aspectRatio, type = StarType.EntryType(entry = entry), ) @@ -168,9 +158,9 @@ private fun StarField.update( fun StarFieldMessageBoard( modifier: Modifier = Modifier, ) { - val windowSize = LocalScreenSize.current.windowSizeClass - val starFieldSpecs = remember(windowSize) { - StarFieldSpecs(windowSize = windowSize) + val scaleFactor = scaleFactor() + val starFieldSpecs = remember(scaleFactor) { + StarFieldSpecs(scaleFactor = scaleFactor) } var starField by remember { mutableStateOf(generateStars(starFieldSpecs)) } LaunchedEffect(Unit) { From 4b03ffaf3a98e60fc1995f8263015efaee60a3b5 Mon Sep 17 00:00:00 2001 From: andreykovalev Date: Tue, 24 Oct 2023 17:15:52 +0100 Subject: [PATCH 3/3] Fix expect actual files --- ...{ResourceImage.kt => EmdeddableResourceImage.kt} | 0 .../puzzyx/imageloader/EmdeddableResourceImage.kt | 13 +++++++++++++ .../com/bumble/puzzyx/imageloader/ResourceImage.kt | 8 -------- 3 files changed, 13 insertions(+), 8 deletions(-) rename shared/src/androidMain/kotlin/com/bumble/puzzyx/imageloader/{ResourceImage.kt => EmdeddableResourceImage.kt} (100%) create mode 100644 shared/src/commonMain/kotlin/com/bumble/puzzyx/imageloader/EmdeddableResourceImage.kt diff --git a/shared/src/androidMain/kotlin/com/bumble/puzzyx/imageloader/ResourceImage.kt b/shared/src/androidMain/kotlin/com/bumble/puzzyx/imageloader/EmdeddableResourceImage.kt similarity index 100% rename from shared/src/androidMain/kotlin/com/bumble/puzzyx/imageloader/ResourceImage.kt rename to shared/src/androidMain/kotlin/com/bumble/puzzyx/imageloader/EmdeddableResourceImage.kt diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/imageloader/EmdeddableResourceImage.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/imageloader/EmdeddableResourceImage.kt new file mode 100644 index 00000000..eebe0911 --- /dev/null +++ b/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, +) diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/imageloader/ResourceImage.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/imageloader/ResourceImage.kt index ff9c72eb..e06c2eb3 100644 --- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/imageloader/ResourceImage.kt +++ b/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(