From 9f778f78443d1182d25690edf26a664e0d384593 Mon Sep 17 00:00:00 2001 From: Rob Murdock Date: Sun, 9 Jul 2023 13:12:04 -0400 Subject: [PATCH] more conversions, and fixing weird frame problem in demo --- client/build.gradle.kts | 3 + .../coupling/client/components/FrameRunner.kt | 6 +- .../pairassignments/ControlPanel.kt | 3 +- .../pairassignments/PairSectionPanel.kt | 27 ++++---- .../pairassignments/PrepareToSpinButton.kt | 13 ++-- .../spin/PairAssignmentsAnimator.kt | 64 +++++++++++-------- .../coupling/client/demo/DemoPage.kt | 4 +- .../coupling/client/demo/DemoPageFrame.kt | 2 + .../coupling/client/demo/LoadingPage.kt | 5 +- 9 files changed, 70 insertions(+), 57 deletions(-) diff --git a/client/build.gradle.kts b/client/build.gradle.kts index 40798f7186..8123eb1286 100644 --- 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 index 5077e58718..561c1ee2e9 100644 --- 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,7 +4,7 @@ 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 @@ -12,7 +12,7 @@ import kotlin.math.round data class FrameRunner( val sequence: Sequence>, val speed: Double, - val children: ChildrenBuilder.(value: S) -> Unit, + val children: (value: S) -> ReactNode, ) : DataPropsBind>(fR()) private fun Pair.letFirst(transform: (A) -> A2) = transform(first) to second @@ -29,7 +29,7 @@ val frameRunnerCached by ntmFC> { props -> val scheduleStateFunc: (Frame) -> Unit = scheduleStateFunc({ state = it }, speed) useEffectOnce { sequence.forEach(scheduleStateFunc) } - props.children(this, state) + +props.children(state) } private fun fR(): TMFC = frameRunnerCached.unsafeCast() diff --git a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/ControlPanel.kt b/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/ControlPanel.kt index bfca3e80a4..b9318db7c6 100644 --- a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/ControlPanel.kt +++ b/client/components/src/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 { (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/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSectionPanel.kt b/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSectionPanel.kt index 1255b1c78e..6cf6310eca 100644 --- a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSectionPanel.kt +++ b/client/components/src/jsMain/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 { 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/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PrepareToSpinButton.kt b/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PrepareToSpinButton.kt index b90a93a083..18c135cca9 100644 --- a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PrepareToSpinButton.kt +++ b/client/components/src/jsMain/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) - val prepareToSpinButtonClassName = ClassName("prepare-to-spin") +external interface PrepareToSpinButtonProps : Props { + var party: PartyDetails +} -private val prepareToSpinButton by ntmFC { (party) -> +@ReactFunc +val PrepareToSpinButton by nfc { (party) -> Link { to = "/${party.id.value}/prepare/" tabIndex = -1 diff --git a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/spin/PairAssignmentsAnimator.kt b/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/spin/PairAssignmentsAnimator.kt index 4b3fdf631b..8da80aaeba 100644 --- a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/spin/PairAssignmentsAnimator.kt +++ b/client/components/src/jsMain/kotlin/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, - val pairAssignments: PairAssignmentDocument, - val enabled: Boolean, - val children: ChildrenBuilder.() -> Unit, -) : DataPropsBind(pairAssignmentsAnimator) +import react.dom.html.ReactHTML.div private val animationContextConsumer: Consumer = animationsDisabledContext.Consumer -val pairAssignmentsAnimator by ntmFC { props -> + +external interface PairAssignmentsAnimatorProps : PropsWithChildren { + var party: PartyDetails + var players: List + var pairAssignments: PairAssignmentDocument + var enabled: Boolean +} + +@ReactFunc +val PairAssignmentsAnimator by nfc { 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, - 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 index 33a1a46862..2ff49d1522 100644 --- 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 { 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 index 1495913163..69e5eec433 100644 --- 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 { (state) -> val (referenceElement, setReferenceElement) = useState(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 index 5cdf5822db..f0b4cfeded 100644 --- 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 { 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() }, ) }