Merge branch 'main' of github.com:bumble-tech/puzzyx into star-conten…

…t-layout-adjustments

.github/workflows/build.yml

@@ -19,9 +19,3 @@ jobs:
       - uses: gradle/gradle-build-action@v2
       - name: Build
         run: ./gradlew :desktopApp:packageReleaseStripArchitecture
-      - name: Upload distributable
-        uses: actions/upload-artifact@v3
-        with:
-          name: Distributable
-          path: |
-            desktopApp/build/distributable/

build.gradle.kts

@@ -6,7 +6,3 @@ plugins {
     id("org.jetbrains.compose") version libs.versions.composePlugin.get() apply false
     id("com.google.devtools.ksp") version libs.versions.ksp.get() apply false
 }
-
-tasks.register("clean", Delete::class) {
-    delete(rootProject.buildDir)
-}

gradle.properties

@@ -14,3 +14,4 @@ kotlin.mpp.androidSourceSetLayoutVersion=2
 
 #Compose
 org.jetbrains.compose.experimental.uikit.enabled=true
+org.jetbrains.compose.experimental.jscanvas.enabled=true

settings.gradle.kts

@@ -25,4 +25,5 @@ rootProject.name = "puzzyx"
 
 include(":androidApp")
 include(":desktopApp")
+include(":webApp")
 include(":shared")

shared/build.gradle.kts

@@ -7,7 +7,7 @@ plugins {
 }
 
 kotlin {
-    android {
+    androidTarget {
         compilations.all {
             kotlinOptions.jvmTarget = libs.versions.jvmTarget.get()
         }
@@ -19,6 +19,12 @@ kotlin {
         }
     }
 
+    js(IR) {
+        // Adding moduleName as a workaround for this issue: https://youtrack.jetbrains.com/issue/KT-51942
+        moduleName = "puzzyx-common"
+        browser()
+    }
+
     sourceSets {
         val commonMain by getting {
             dependencies {
@@ -57,4 +63,5 @@ dependencies {
     add("kspCommonMainMetadata", libs.appyx.mutable.ui.processor)
     add("kspAndroid", libs.appyx.mutable.ui.processor)
     add("kspDesktop", libs.appyx.mutable.ui.processor)
+    add("kspJs", libs.appyx.mutable.ui.processor)
 }

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

@@ -0,0 +1,20 @@
+package com.bumble.puzzyx.imageloader
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+
+@Composable
+actual fun EmbeddableResourceImage(
+    path: String,
+    modifier: Modifier,
+    contentDescription: String?,
+    contentScale: ContentScale
+) {
+    ResourceImage(
+        path = path,
+        modifier = modifier,
+        contentScale = contentScale,
+        contentDescription = contentDescription,
+    )
+}

shared/src/commonMain/kotlin/com/bumble/puzzyx/appyx/component/backstackclipper/ClipShapeProgress.kt

@@ -28,7 +28,8 @@ class ClipShapeProgress(
     coroutineScope: CoroutineScope,
     target: Target,
     displacement: StateFlow<Float> = MutableStateFlow(0f),
-    private val shape: @Composable (progress: Float) -> Shape = { RectangleShape },
+    // web-target doesn't like a lambda here for some reason
+    private val shape: @Composable ((progress: Float) -> Shape)? = null,
 ) : MotionProperty<Float, AnimationVector1D>(
     coroutineScope = coroutineScope,
     animatable = Animatable(target.value),
@@ -47,10 +48,9 @@ class ClipShapeProgress(
         get() = Modifier.composed {
             val progress = renderValueFlow.collectAsState().value
             if (progress == 0f) this
-            else this.clip(shape.invoke(progress))
+            else this.clip(shape?.invoke(progress) ?: RectangleShape)
         }
 
-
     override suspend fun lerpTo(start: Target, end: Target, fraction: Float) {
         snapTo(
             lerpFloat(

shared/src/commonMain/kotlin/com/bumble/puzzyx/appyx/component/messages/LinesOfMessagesVisualisation.kt

@@ -1,22 +1,23 @@
 package com.bumble.puzzyx.appyx.component.messages
 
 import androidx.compose.animation.core.SpringSpec
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.DpSize
 import com.bumble.appyx.interactions.core.ui.context.UiContext
 import com.bumble.appyx.interactions.core.ui.property.impl.Alpha
 import com.bumble.appyx.interactions.core.ui.property.impl.RotationX
 import com.bumble.appyx.interactions.core.ui.property.impl.Scale
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionOffset
+import com.bumble.appyx.interactions.core.ui.property.impl.position.BiasAlignment
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MatchedTargetUiState
 import com.bumble.appyx.transitionmodel.BaseVisualisation
 import com.bumble.puzzyx.appyx.component.messages.MessagesModel.ElementState.CREATED
 import com.bumble.puzzyx.appyx.component.messages.MessagesModel.ElementState.FLIPPED
 import com.bumble.puzzyx.appyx.component.messages.MessagesModel.ElementState.REVEALED
 import com.bumble.puzzyx.appyx.component.messages.MessagesModel.State
+import com.bumble.puzzyx.math.mapValueRange
 import com.bumble.puzzyx.model.MessageId
 import kotlin.math.nextUp
+import kotlin.math.roundToInt
 
 class LinesOfMessagesVisualisation(
     uiContext: UiContext,
@@ -30,24 +31,30 @@ class LinesOfMessagesVisualisation(
 ) {
 
     private val created = TargetUiState(
+        linePosition = PositionAlignment.Target(
+            PositionAlignment.Value(insideAlignment = BiasAlignment.InsideAlignment.Center)
+        ),
         rotationX = RotationX.Target(0f),
         scale = Scale.Target(1.2f),
         alpha = Alpha.Target(0f),
-        position = PositionOffset.Target(),
     )
 
     private val revealed = TargetUiState(
+        linePosition = PositionAlignment.Target(
+            PositionAlignment.Value(insideAlignment = BiasAlignment.InsideAlignment.Center)
+        ),
         rotationX = RotationX.Target(0f),
         scale = Scale.Target(1f),
         alpha = Alpha.Target(1f),
-        position = PositionOffset.Target(),
     )
 
     private val flipped = TargetUiState(
+        linePosition = PositionAlignment.Target(
+            PositionAlignment.Value(insideAlignment = BiasAlignment.InsideAlignment.Center)
+        ),
         rotationX = RotationX.Target(-90f),
         scale = Scale.Target(0.8f),
         alpha = Alpha.Target(0f),
-        position = PositionOffset.Target(),
     )
 
     override fun mutableUiStateFor(
@@ -77,30 +84,40 @@ class LinesOfMessagesVisualisation(
              *     Row 1:  0   2   4   6
              *     Row 2:    1   3   5
              */
-            val effectiveMaxWidth = (effectiveEntrySize.width * (elements.size / 2f).nextUp()) / 2f
-            val horizontalOffset = -effectiveMaxWidth + halfEffectiveEntrySize.width * index
-            val verticalOffset = if (index % 2 == parity) {
-                halfEffectiveEntrySize.height
+            val mappedHalfEntryHeight =
+                effectiveEntrySize.height / (transitionBounds.heightDp - effectiveEntrySize.height)
+            val horizontalBias = mapValueRange(
+                value = transitionBounds.widthDp.value / 2f - halfEffectiveEntrySize.width.value * ((elements.size / 2f).nextUp()
+                    .roundToInt()) + index * halfEffectiveEntrySize.width.value,
+                fromRangeMin = 0f,
+                fromRangeMax = transitionBounds.widthDp.value - effectiveEntrySize.width.value,
+                destRangeMin = -1f,
+                destRangeMax = 1f,
+            )
+            val verticalBias = if (index % 2 == parity) {
+                -mappedHalfEntryHeight
             } else {
-                -halfEffectiveEntrySize.height
+                mappedHalfEntryHeight
             }
             MatchedTargetUiState(
                 element = entry.key,
                 targetUiState = when (entry.value) {
-                    CREATED -> created.withUpdatedPosition(horizontalOffset, verticalOffset)
-                    REVEALED -> revealed.withUpdatedPosition(horizontalOffset, verticalOffset)
-                    FLIPPED -> flipped.withUpdatedPosition(horizontalOffset, verticalOffset)
+                    CREATED -> created.withUpdatedPosition(horizontalBias, verticalBias)
+                    REVEALED -> revealed.withUpdatedPosition(horizontalBias, verticalBias)
+                    FLIPPED -> flipped.withUpdatedPosition(horizontalBias, verticalBias)
                 },
             )
         }
     }
 
-    private fun TargetUiState.withUpdatedPosition(horizontalBias: Dp, verticalBias: Dp) =
+    private fun TargetUiState.withUpdatedPosition(horizontalBias: Float, verticalBias: Float) =
         copy(
-            position = PositionOffset.Target(
-                offset = DpOffset(
-                    x = transitionBounds.widthDp / 2f + horizontalBias,
-                    y = transitionBounds.heightDp / 2f + verticalBias,
+            linePosition = PositionAlignment.Target(
+                PositionAlignment.Value(
+                    insideAlignment = BiasAlignment.InsideAlignment(
+                        horizontalBias,
+                        verticalBias
+                    )
                 )
             )
         )

shared/src/commonMain/kotlin/com/bumble/puzzyx/appyx/component/messages/TargetUiState.kt

@@ -3,12 +3,12 @@ package com.bumble.puzzyx.appyx.component.messages
 import com.bumble.appyx.interactions.core.ui.property.impl.Alpha
 import com.bumble.appyx.interactions.core.ui.property.impl.RotationX
 import com.bumble.appyx.interactions.core.ui.property.impl.Scale
-import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionOffset
+import com.bumble.appyx.interactions.core.ui.property.impl.position.PositionAlignment
 import com.bumble.appyx.interactions.core.ui.state.MutableUiStateSpecs
 
 @MutableUiStateSpecs
 data class TargetUiState(
-    val position: PositionOffset.Target,
+    val linePosition: PositionAlignment.Target,
     val rotationX: RotationX.Target,
     val scale: Scale.Target,
     val alpha: Alpha.Target,

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

@@ -25,9 +25,9 @@ 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.imageloader.ResourceImage
 import com.bumble.puzzyx.model.Entry
 import com.bumble.puzzyx.ui.colors
 import kotlinx.coroutines.isActive
@@ -48,7 +48,7 @@ fun EntryCard(
                 paddingTop = size
             )
 
-            is Entry.Image -> ResourceImage(
+            is Entry.Image -> EmbeddableResourceImage(
                 path = "participant/${entry.path}",
                 contentDescription = entry.contentDescription,
                 contentScale = entry.contentScale,
@@ -76,7 +76,7 @@ fun GitHubHeader(
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
     ) {
-        ResourceImage(
+        EmbeddableResourceImage(
             path = "github.png",
             contentScale = ContentScale.Inside,
             modifier = Modifier