more conversions, and fixing weird frame problem in demo

robertfmurdock · Jul 9, 2023 · 9f778f7 · 9f778f7
1 parent 8bb06ee
commit 9f778f7
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 57 deletions.
diff --git a/client/build.gradle.kts b/client/build.gradle.kts
@@ -170,6 +170,9 @@ tasks {
         outputs.file(outputDirectory.file("client-ktor.js"))
         outputs.cacheIf { true }
     }
+    named("jsBrowserDevelopmentRun") {
+        dependsOn(lookupCdnUrls, jsProcessResources)
+    }
 
     val uploadToS3 by registering(Exec::class) {
         dependsOn(browserProductionWebpack)

diff --git a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/FrameRunner.kt b/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/FrameRunner.kt
@@ -4,15 +4,15 @@ import com.zegreatrob.minreact.DataPropsBind
 import com.zegreatrob.minreact.TMFC
 import com.zegreatrob.minreact.ntmFC
 import kotlinx.browser.window
-import react.ChildrenBuilder
+import react.ReactNode
 import react.useEffectOnce
 import react.useState
 import kotlin.math.round
 
 data class FrameRunner<S>(
     val sequence: Sequence<Frame<S>>,
     val speed: Double,
-    val children: ChildrenBuilder.(value: S) -> Unit,
+    val children: (value: S) -> ReactNode,
 ) : DataPropsBind<FrameRunner<S>>(fR())
 
 private fun <A, B, A2> Pair<A, B>.letFirst(transform: (A) -> A2) = transform(first) to second
@@ -29,7 +29,7 @@ val frameRunnerCached by ntmFC<FrameRunner<Any>> { props ->
     val scheduleStateFunc: (Frame<Any>) -> Unit = scheduleStateFunc({ state = it }, speed)
 
     useEffectOnce { sequence.forEach(scheduleStateFunc) }
-    props.children(this, state)
+    +props.children(state)
 }
 
 private fun fR(): TMFC = frameRunnerCached.unsafeCast<TMFC>()

diff --git a/...c/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/ControlPanel.kt b/...c/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/ControlPanel.kt
@@ -2,7 +2,6 @@ package com.zegreatrob.coupling.client.components.pairassignments
 
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.minreact.ReactFunc
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import emotion.react.css
 import react.Props
@@ -30,7 +29,7 @@ val ControlPanel by nfc<ControlPanelProps> { (party) ->
                 backgroundColor = Color("#d5cdc3")
                 boxShadow = BoxShadow(1.px, 1.px, 3.px, rgb(0, 0, 0, 0.6))
             }
-            div { add(PrepareToSpinButton(party)) }
+            div { PrepareToSpinButton(party) }
         }
     }
 }
diff --git a/...Main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSectionPanel.kt b/...Main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSectionPanel.kt
@@ -7,7 +7,6 @@ import com.zegreatrob.coupling.model.pairassignmentdocument.PairAssignmentDocume
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.minreact.ReactFunc
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import csstype.PropertiesBuilder
 import emotion.react.css
@@ -43,22 +42,20 @@ val PairSectionPanel by nfc<PairSectionPanelProps> { props ->
         if (pairAssignments == null) {
             noPairsHeader()
         } else {
-            add(
-                PairAssignmentsAnimator(
+            PairAssignmentsAnimator(
+                party = party,
+                players = players,
+                pairAssignments = pairAssignments,
+                enabled = party.animationEnabled && allowSave,
+            ) {
+                CurrentPairAssignmentsPanel(
                     party = party,
-                    players = players,
                     pairAssignments = pairAssignments,
-                    enabled = party.animationEnabled && allowSave,
-                ) {
-                    CurrentPairAssignmentsPanel(
-                        party = party,
-                        pairAssignments = pairAssignments,
-                        setPairAssignments = setPairs,
-                        allowSave = allowSave,
-                        dispatchFunc = controls.dispatchFunc,
-                    )
-                },
-            )
+                    setPairAssignments = setPairs,
+                    allowSave = allowSave,
+                    dispatchFunc = controls.dispatchFunc,
+                )
+            }
         }
     }
 }

diff --git a/...n/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PrepareToSpinButton.kt b/...n/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PrepareToSpinButton.kt
@@ -4,20 +4,23 @@ import com.zegreatrob.coupling.client.components.CouplingButton
 import com.zegreatrob.coupling.client.components.pink
 import com.zegreatrob.coupling.client.components.supersize
 import com.zegreatrob.coupling.model.party.PartyDetails
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import csstype.PropertiesBuilder
+import react.Props
 import react.router.dom.Link
 import web.cssom.AnimationIterationCount
 import web.cssom.ClassName
 import web.cssom.ident
 import web.cssom.s
 
-data class PrepareToSpinButton(val party: PartyDetails) : DataPropsBind<PrepareToSpinButton>(prepareToSpinButton)
-
 val prepareToSpinButtonClassName = ClassName("prepare-to-spin")
+external interface PrepareToSpinButtonProps : Props {
+    var party: PartyDetails
+}
 
-private val prepareToSpinButton by ntmFC<PrepareToSpinButton> { (party) ->
+@ReactFunc
+val PrepareToSpinButton by nfc<PrepareToSpinButtonProps> { (party) ->
     Link {
         to = "/${party.id.value}/prepare/"
         tabIndex = -1

diff --git a/...com/zegreatrob/coupling/client/components/pairassignments/spin/PairAssignmentsAnimator.kt b/...com/zegreatrob/coupling/client/components/pairassignments/spin/PairAssignmentsAnimator.kt
@@ -7,32 +7,35 @@ import com.zegreatrob.coupling.client.components.spin.RosteredPairAssignments
 import com.zegreatrob.coupling.model.pairassignmentdocument.PairAssignmentDocument
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.player.Player
-import com.zegreatrob.minreact.DataPropsBind
+import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.add
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.nfc
 import react.ChildrenBuilder
 import react.Consumer
+import react.PropsWithChildren
+import react.ReactNode
 import react.create
-import react.dom.html.ReactHTML
-
-data class PairAssignmentsAnimator(
-    val party: PartyDetails,
-    val players: List<Player>,
-    val pairAssignments: PairAssignmentDocument,
-    val enabled: Boolean,
-    val children: ChildrenBuilder.() -> Unit,
-) : DataPropsBind<PairAssignmentsAnimator>(pairAssignmentsAnimator)
+import react.dom.html.ReactHTML.div
 
 private val animationContextConsumer: Consumer<Boolean> = animationsDisabledContext.Consumer
-val pairAssignmentsAnimator by ntmFC<PairAssignmentsAnimator> { props ->
+
+external interface PairAssignmentsAnimatorProps : PropsWithChildren {
+    var party: PartyDetails
+    var players: List<Player>
+    var pairAssignments: PairAssignmentDocument
+    var enabled: Boolean
+}
+
+@ReactFunc
+val PairAssignmentsAnimator by nfc<PairAssignmentsAnimatorProps> { props ->
     val (party, players, pairAssignments, enabled) = props
     animationContextConsumer {
         children = { animationsDisabled ->
-            ReactHTML.div.create {
+            div.create {
                 if (!animationsDisabled && enabled) {
                     spinFrameRunner(pairAssignments, party, players, props)
                 } else {
-                    props.children(this)
+                    +props.children
                 }
             }
         }
@@ -43,30 +46,37 @@ private fun ChildrenBuilder.spinFrameRunner(
     pairAssignments: PairAssignmentDocument,
     party: PartyDetails,
     players: List<Player>,
-    props: PairAssignmentsAnimator,
+    props: PairAssignmentsAnimatorProps,
 ) {
     add(
-        FrameRunner(
-            SpinAnimationState.sequence(
-                pairAssignments,
-            ),
-            speed = party.animationSpeed,
-        ) { state ->
-            val rosteredPairAssignments = RosteredPairAssignments.rosteredPairAssignments(pairAssignments, players)
-            flipperSpinAnimation(state, props, party, rosteredPairAssignments)
+        FrameRunner(SpinAnimationState.sequence(pairAssignments), speed = party.animationSpeed) { state ->
+            Flipper.create {
+                flipKey = state.toString()
+                if (state == End) {
+                    +props.children
+                } else {
+                    add(
+                        SpinAnimationPanel(
+                            party,
+                            RosteredPairAssignments.rosteredPairAssignments(pairAssignments, players),
+                            state,
+                        ),
+                    )
+                }
+            }
         },
     )
 }
 
-private fun ChildrenBuilder.flipperSpinAnimation(
+private fun flipperSpinAnimation(
     state: SpinAnimationState,
-    props: PairAssignmentsAnimator,
     party: PartyDetails,
     rosteredPairAssignments: RosteredPairAssignments,
-) = Flipper {
+    children: ReactNode?,
+) = Flipper.create {
     flipKey = state.toString()
     if (state == End) {
-        props.children(this)
+        +children
     } else {
         add(SpinAnimationPanel(party, rosteredPairAssignments, state))
     }

diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/DemoPage.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/DemoPage.kt
@@ -14,9 +14,7 @@ val DemoPage by nfc<PageProps> { props ->
         DemoPageFrame(currentFrame.data)
     } else {
         add(
-            FrameRunner(demoSequence, 1.0) { state: DemoAnimationState ->
-                DemoPageFrame(state)
-            },
+            FrameRunner(demoSequence, 1.0, DemoPageFrame::create),
         )
     }
 }
diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/DemoPageFrame.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/DemoPageFrame.kt
@@ -49,6 +49,8 @@ val DemoPageFrame by nfc<DemoPageFrameProps> { (state) ->
 
     val (referenceElement, setReferenceElement) = useState<ReferenceElement?>(null)
 
+    println("STATE IS $state")
+
     val popperInstance = usePopper(referenceElement, popperRef.current, popperOptions(arrowRef, state))
 
     useLayoutEffect(state) {

diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/LoadingPage.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/LoadingPage.kt
@@ -6,6 +6,7 @@ import com.zegreatrob.coupling.client.components.external.reactfliptoolkit.Flipp
 import com.zegreatrob.coupling.client.components.external.reactfliptoolkit.Flipper
 import com.zegreatrob.coupling.client.components.player.PlayerCard
 import com.zegreatrob.coupling.client.components.welcome.playerImage
+import com.zegreatrob.coupling.client.create
 import com.zegreatrob.coupling.client.routing.PageProps
 import com.zegreatrob.coupling.model.pairassignmentdocument.pairOf
 import com.zegreatrob.coupling.model.player.Player
@@ -35,11 +36,11 @@ val LoadingPage by nfc<PageProps> { props ->
     val frameIndex = props.search["frame"]
     val currentFrame = frameIndex?.toIntOrNull()?.let { loadingSequence.toList()[it] }
     if (currentFrame != null) {
-        add(LoadingPageFrame(currentFrame.data))
+        child(LoadingPageFrame(currentFrame.data).create())
     } else {
         add(
             FrameRunner(loadingSequence, 1.0) { state: LoadingAnimationState ->
-                add(LoadingPageFrame(state))
+                LoadingPageFrame(state).create()
             },
         )
     }