From 799437c85ed2f4543e2e9ec845db6679e86f89a5 Mon Sep 17 00:00:00 2001
From: Michael Jordan <michael.jordan@corp.badoo.com>
Date: Fri, 13 Oct 2023 20:06:04 +0100
Subject: [PATCH] Setup default project

---
 shared/build.gradle.kts                           | 11 ++++++-----
 .../backstackclipper/ClipShapeProgress.kt         |  6 +++---
 .../com/bumble/puzzyx/ui/DottedMeshShape.kt       |  2 +-
 .../bumble/puzzyx/imageloader/toImageBitmap.kt    |  8 ++++++++
 webApp/build.gradle.kts                           |  7 +++++--
 webApp/src/jsMain/resources/index.html            | 15 +++++++++++++++
 webApp/src/jsMain/resources/styles.css            | 12 ++++++++++++
 7 files changed, 50 insertions(+), 11 deletions(-)
 create mode 100644 shared/src/jsMain/kotlin/com/bumble/puzzyx/imageloader/toImageBitmap.kt
 create mode 100644 webApp/src/jsMain/resources/index.html
 create mode 100644 webApp/src/jsMain/resources/styles.css

diff --git a/shared/build.gradle.kts b/shared/build.gradle.kts
index 70b79b67..6786bb8a 100644
--- a/shared/build.gradle.kts
+++ b/shared/build.gradle.kts
@@ -19,11 +19,11 @@ kotlin {
         }
     }
 
-//    js(IR) {
-//        // Adding moduleName as a workaround for this issue: https://youtrack.jetbrains.com/issue/KT-51942
-//        moduleName = "puzzyx-common"
-//        browser()
-//    }
+    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 {
@@ -63,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)
 }
diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/appyx/component/backstackclipper/ClipShapeProgress.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/appyx/component/backstackclipper/ClipShapeProgress.kt
index 7402d079..67419e1f 100644
--- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/appyx/component/backstackclipper/ClipShapeProgress.kt
+++ b/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(
diff --git a/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt b/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt
index 97c2bac7..7da878b4 100644
--- a/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt
+++ b/shared/src/commonMain/kotlin/com/bumble/puzzyx/ui/DottedMeshShape.kt
@@ -12,8 +12,8 @@ import androidx.compose.ui.unit.LayoutDirection
 import com.bumble.appyx.interactions.core.annotations.FloatRange
 import com.bumble.appyx.interactions.core.ui.math.lerpFloat
 import com.bumble.puzzyx.math.mapValueRange
-import java.lang.Integer.max
 import kotlin.math.abs
+import kotlin.math.max
 import kotlin.math.sqrt
 
 /**
diff --git a/shared/src/jsMain/kotlin/com/bumble/puzzyx/imageloader/toImageBitmap.kt b/shared/src/jsMain/kotlin/com/bumble/puzzyx/imageloader/toImageBitmap.kt
new file mode 100644
index 00000000..8af036f6
--- /dev/null
+++ b/shared/src/jsMain/kotlin/com/bumble/puzzyx/imageloader/toImageBitmap.kt
@@ -0,0 +1,8 @@
+package com.bumble.puzzyx.imageloader
+
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.toComposeImageBitmap
+
+actual fun ByteArray.toImageBitmap(): ImageBitmap {
+    return org.jetbrains.skia.Image.makeFromEncoded(this).toComposeImageBitmap()
+}
diff --git a/webApp/build.gradle.kts b/webApp/build.gradle.kts
index d59bd498..bbf6d1df 100644
--- a/webApp/build.gradle.kts
+++ b/webApp/build.gradle.kts
@@ -17,7 +17,7 @@ kotlin {
                 implementation(compose.runtime)
                 implementation(compose.foundation)
                 implementation(compose.material3)
-//                implementation(project(":shared"))
+                implementation(project(":shared"))
                 implementation(libs.appyx.navigation)
                 implementation(libs.appyx.components.backstack)
             }
@@ -39,7 +39,10 @@ tasks.register<Copy>("copyResources") {
     include("**/*")
 }
 
-tasks.named("jsMainClasses") {
+tasks.named("jsBrowserProductionExecutableDistributeResources") {
     dependsOn("copyResources")
 }
 
+tasks.named("compileKotlinJs") {
+    dependsOn("copyResources")
+}
diff --git a/webApp/src/jsMain/resources/index.html b/webApp/src/jsMain/resources/index.html
new file mode 100644
index 00000000..aa9114da
--- /dev/null
+++ b/webApp/src/jsMain/resources/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Puzzyx</title>
+        <script src="skiko.js"></script>
+    <link type="text/css" rel="stylesheet" href="styles.css"/>
+</head>
+<body>
+<div>
+    <canvas id="ComposeTarget" width="512" height="512"></canvas>
+</div>
+<script src="webApp.js"></script>
+</body>
+</html>
diff --git a/webApp/src/jsMain/resources/styles.css b/webApp/src/jsMain/resources/styles.css
new file mode 100644
index 00000000..8655f2e7
--- /dev/null
+++ b/webApp/src/jsMain/resources/styles.css
@@ -0,0 +1,12 @@
+#root {
+    width: 100%;
+    height: 100vh;
+}
+
+body {
+    margin: 0;
+}
+
+#root > .compose-web-column > div {
+    position: relative;
+}