more conversions

robertfmurdock · Jul 9, 2023 · b8ad061 · b8ad061
1 parent 5e15b65
commit b8ad061
Show file tree

Hide file tree

Showing 19 changed files with 88 additions and 124 deletions.
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
@@ -1,20 +1,14 @@
 package com.zegreatrob.coupling.client.components
 
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.TMFC
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import kotlinx.browser.window
+import react.Props
 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: (value: S) -> ReactNode,
-) : DataPropsBind<FrameRunner<S>>(fR())
-
 private fun <A, B, A2> Pair<A, B>.letFirst(transform: (A) -> A2) = transform(first) to second
 private fun <A, B, B2> Pair<A, B>.letSecond(transform: (B) -> B2) = first to transform(second)
 private fun <A, B, C> Pair<A, B>.let(transform: (A, B) -> C) = transform(first, second)
@@ -23,17 +17,22 @@ private fun <I> ((I) -> Unit).curryOneArgToNoArgsFunc(): (I) -> () -> Unit = { i
 
 data class Frame<out T>(val data: T, val delay: Int)
 
-val frameRunnerCached by ntmFC<FrameRunner<Any>> { props ->
-    val (sequence, speed) = props
+external interface FrameRunnerProps<S> : Props {
+    var sequence: Sequence<Frame<S>>
+    var speed: Double
+    var child: (value: S) -> ReactNode
+}
+
+@ReactFunc
+val FrameRunner by nfc<FrameRunnerProps<Any>> { props ->
+    val (sequence, speed, children: (Nothing) -> ReactNode) = props
     var state by useState(sequence.first().data)
     val scheduleStateFunc: (Frame<Any>) -> Unit = scheduleStateFunc({ state = it }, speed)
 
     useEffectOnce { sequence.forEach(scheduleStateFunc) }
-    +props.children(state)
+    +children(state)
 }
 
-private fun fR(): TMFC = frameRunnerCached.unsafeCast<TMFC>()
-
 private fun scheduleStateFunc(setState: (Any) -> Unit, speed: Double) = setState.statePairToTimeoutArgsFunc()
     .join(pairTransformSecondFunc { it.applySpeed(speed) })
     .join { args -> args.let(::setTimeout); Unit }

diff --git a/...t/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/ServerMessage.kt b/...t/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/ServerMessage.kt
@@ -3,7 +3,6 @@ package com.zegreatrob.coupling.client.components
 import com.zegreatrob.coupling.client.components.player.PlayerCard
 import com.zegreatrob.coupling.model.CouplingSocketMessage
 import com.zegreatrob.minreact.ReactFunc
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import react.Props
 import react.dom.html.ReactHTML.div
@@ -18,9 +17,7 @@ val ServerMessage by nfc<ServerMessageProps> { (message) ->
     div {
         span { +message.text }
         div {
-            message.players.forEach {
-                add(PlayerCard(it, size = 50))
-            }
+            message.players.forEach { PlayerCard(it, size = 50) }
         }
     }
 }
diff --git a/...c/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/AssignedPair.kt b/...c/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/AssignedPair.kt
@@ -6,6 +6,7 @@ import com.zegreatrob.coupling.client.components.pairassignments.spin.placeholde
 import com.zegreatrob.coupling.client.components.pin.PinSection
 import com.zegreatrob.coupling.client.components.pin.pinDragItemType
 import com.zegreatrob.coupling.client.components.player.PlayerCard
+import com.zegreatrob.coupling.client.components.player.create
 import com.zegreatrob.coupling.client.components.pngPath
 import com.zegreatrob.coupling.model.pairassignmentdocument.PinnedCouplingPair
 import com.zegreatrob.coupling.model.pairassignmentdocument.PinnedPlayer
@@ -14,7 +15,6 @@ import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.coupling.model.player.callsign.CallSign
 import com.zegreatrob.minreact.ReactFunc
-import com.zegreatrob.minreact.create
 import com.zegreatrob.minreact.nfc
 import emotion.react.css
 import react.ChildrenBuilder
@@ -158,10 +158,7 @@ private fun playerCardComponent(
     }
 } else {
     { player, tilt ->
-        playerFlipped(player.player) {
-            notSwappablePlayer(player.player, tilt)
-                .create()
-        }
+        playerFlipped(player.player) { notSwappablePlayer(player.player, tilt) }
     }
 }
 
@@ -179,4 +176,4 @@ private fun ChildrenBuilder.playerFlipped(player: Player, handler: () -> ReactNo
     }
 }
 
-private fun notSwappablePlayer(player: Player, tilt: Angle) = PlayerCard(player, tilt = tilt)
+private fun notSwappablePlayer(player: Player, tilt: Angle) = PlayerCard.create(player, tilt = tilt)
diff --git a/...sMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/DraggablePlayer.kt b/...sMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/DraggablePlayer.kt
@@ -1,9 +1,9 @@
 package com.zegreatrob.coupling.client.components.pairassignments
 
 import com.zegreatrob.coupling.client.components.player.PlayerCard
+import com.zegreatrob.coupling.client.components.player.create
 import com.zegreatrob.coupling.model.pairassignmentdocument.PinnedPlayer
 import com.zegreatrob.minreact.ReactFunc
-import com.zegreatrob.minreact.create
 import com.zegreatrob.minreact.nfc
 import emotion.css.ClassName
 import react.Props
@@ -33,7 +33,7 @@ val DraggablePlayer by nfc<DraggablePlayerProps> { (pinnedPlayer, zoomOnHover, t
         itemId = pinnedPlayer.player.id,
         dropCallback = onPlayerDrop,
         handler = { isOver: Boolean ->
-            PlayerCard(
+            PlayerCard.create(
                 player = pinnedPlayer.player,
                 tilt = tilt,
                 className = ClassName {
@@ -57,7 +57,8 @@ val DraggablePlayer by nfc<DraggablePlayerProps> { (pinnedPlayer, zoomOnHover, t
                         animationIterationCount = AnimationIterationCount.infinite
                     }
                 },
-            ).create(key = pinnedPlayer.player.id)
+                key = pinnedPlayer.player.id,
+            )
         },
     )
 }
diff --git a/...com/zegreatrob/coupling/client/components/pairassignments/spin/PairAssignmentsAnimator.kt b/...com/zegreatrob/coupling/client/components/pairassignments/spin/PairAssignmentsAnimator.kt
@@ -8,12 +8,10 @@ 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 react.ChildrenBuilder
 import react.Consumer
 import react.PropsWithChildren
-import react.ReactNode
 import react.create
 import react.dom.html.ReactHTML.div
 
@@ -48,36 +46,22 @@ private fun ChildrenBuilder.spinFrameRunner(
     players: List<Player>,
     props: PairAssignmentsAnimatorProps,
 ) {
-    add(
-        FrameRunner(SpinAnimationState.sequence(pairAssignments), speed = party.animationSpeed) { state ->
+    FrameRunner(
+        sequence = SpinAnimationState.sequence(pairAssignments),
+        speed = party.animationSpeed,
+        child = { state ->
             Flipper.create {
                 flipKey = state.toString()
                 if (state == End) {
                     +props.children
                 } else {
-                    add(
-                        SpinAnimationPanel(
-                            party,
-                            RosteredPairAssignments.rosteredPairAssignments(pairAssignments, players),
-                            state,
-                        ),
+                    SpinAnimationPanel(
+                        party,
+                        RosteredPairAssignments.rosteredPairAssignments(pairAssignments, players),
+                        state,
                     )
                 }
             }
         },
     )
 }
-
-private fun flipperSpinAnimation(
-    state: SpinAnimationState,
-    party: PartyDetails,
-    rosteredPairAssignments: RosteredPairAssignments,
-    children: ReactNode?,
-) = Flipper.create {
-    flipKey = state.toString()
-    if (state == End) {
-        +children
-    } else {
-        add(SpinAnimationPanel(party, rosteredPairAssignments, state))
-    }
-}
diff --git a/...tlin/com/zegreatrob/coupling/client/components/pairassignments/spin/SpinAnimationPanel.kt b/...tlin/com/zegreatrob/coupling/client/components/pairassignments/spin/SpinAnimationPanel.kt
@@ -8,12 +8,12 @@ import com.zegreatrob.coupling.client.components.spin.RosteredPairAssignments
 import com.zegreatrob.coupling.model.pairassignmentdocument.PinnedCouplingPair
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.player.Player
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.add
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import emotion.css.ClassName
 import emotion.react.css
 import react.ChildrenBuilder
+import react.Props
 import react.dom.html.ReactHTML.div
 import web.cssom.Display
 import web.cssom.Position
@@ -22,13 +22,14 @@ import web.cssom.integer
 import web.cssom.pct
 import web.cssom.translate
 
-data class SpinAnimationPanel(
-    val party: PartyDetails,
-    val rosteredPairAssignments: RosteredPairAssignments,
-    val state: SpinAnimationState,
-) : DataPropsBind<SpinAnimationPanel>(spinAnimationPanel)
+external interface SpinAnimationPanelProps : Props {
+    var party: PartyDetails
+    var rosteredPairAssignments: RosteredPairAssignments
+    var state: SpinAnimationState
+}
 
-val spinAnimationPanel by ntmFC<SpinAnimationPanel> { (party, rosteredPairAssignments, state) ->
+@ReactFunc
+val SpinAnimationPanel by nfc<SpinAnimationPanelProps> { (party, rosteredPairAssignments, state) ->
     val pairAssignments = rosteredPairAssignments.pairAssignments
     val players = rosteredPairAssignments.selectedPlayers
     val (rosterPlayers, revealedPairs, shownPlayer) = state.stateData(players, pairAssignments)
@@ -75,7 +76,7 @@ private fun ChildrenBuilder.flippedPlayer(player: Player, key: String? = null) =
     div {
         this.key = key ?: ""
         css { display = Display.inlineBlock }
-        add(PlayerCard(player))
+        PlayerCard(player)
     }
 }
 

diff --git a/...mponents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/PlayerCard.kt b/...mponents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/PlayerCard.kt
@@ -6,12 +6,13 @@ import com.zegreatrob.coupling.client.components.gravatar.myGravatarUrl
 import com.zegreatrob.coupling.client.components.pngPath
 import com.zegreatrob.coupling.model.player.AvatarType
 import com.zegreatrob.coupling.model.player.Player
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import csstype.PropertiesBuilder
 import emotion.react.css
 import js.core.jso
 import react.ChildrenBuilder
+import react.Props
 import react.dom.events.MouseEvent
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.img
@@ -43,17 +44,22 @@ import web.cssom.s
 import web.cssom.url
 import kotlin.random.Random
 
-data class PlayerCard(
-    val player: Player,
-    val className: ClassName? = null,
-    val size: Int = 100,
-    val onClick: () -> Unit = {},
-    val deselected: Boolean = false,
-    val tilt: Angle = 0.deg,
-) : DataPropsBind<PlayerCard>(playerCard)
-
-val playerCard by ntmFC<PlayerCard> { (player, className, size, onClick, deselected, tilt) ->
-    val onClickFunc: (MouseEvent<*, *>) -> Unit = useCallback(onClick) { onClick() }
+external interface PlayerCardProps : Props {
+    var player: Player
+    var className: ClassName?
+    var onClick: (() -> Unit)?
+    var size: Int?
+    var deselected: Boolean?
+    var tilt: Angle?
+}
+
+@ReactFunc
+val PlayerCard by nfc<PlayerCardProps> { props ->
+    val (player, className, onClick) = props
+    val onClickFunc: (MouseEvent<*, *>) -> Unit = useCallback(onClick) { onClick?.invoke() }
+    val size = props.size ?: 100
+    val tilt = props.tilt ?: 0.deg
+    val deselected = props.deselected ?: false
     div {
         css(className) {
             playerCardStyles(tilt, deselected)

diff --git a/...src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/PlayerConfigContent.kt b/...src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/PlayerConfigContent.kt
@@ -80,7 +80,7 @@ val playerConfigContent by ntmFC<PlayerConfigContent> { (party, player, players,
                     }
                     playerConfigForm(player, party, onChange, onSubmit, onRemove)
                 }
-                add(PlayerCard(player, size = 250))
+                PlayerCard(player, size = 250)
             }
         }
         div {

diff --git a/...onents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/PlayerRoster.kt b/...onents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/PlayerRoster.kt
@@ -5,7 +5,6 @@ import com.zegreatrob.coupling.model.party.PartyId
 import com.zegreatrob.coupling.model.party.with
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.ntmFC
 import csstype.PropertiesBuilder
 import emotion.react.css
@@ -52,7 +51,7 @@ val playerRoster by ntmFC { (label, players, partyId, className, overrides): Pla
                         draggable = false
                         key = player.id
                         val tilt = random.nextInt(7) - 3
-                        add(PlayerCard(player, tilt = tilt.deg))
+                        PlayerCard(player, tilt = tilt.deg)
                     }
                 }
             }

diff --git a/...ents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/TinyPlayerList.kt b/...ents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/TinyPlayerList.kt
@@ -5,7 +5,6 @@ import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.party.with
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.ntmFC
 import react.router.dom.Link
 import react.useState
@@ -24,7 +23,7 @@ val tinyPlayerList by ntmFC<TinyPlayerList> { (party, players) ->
             to = party.id.with(player).playerConfigPage()
             draggable = false
             val tilt = random.nextInt(7) - 3
-            add(PlayerCard(player, size = 40, tilt = tilt.deg))
+            PlayerCard(player, size = 40, tilt = tilt.deg)
         }
     }
 }
diff --git a/...ts/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/spin/PrepareSpinContent.kt b/...ts/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/spin/PrepareSpinContent.kt
@@ -9,12 +9,12 @@ import com.zegreatrob.coupling.client.components.pin.PinButton
 import com.zegreatrob.coupling.client.components.pin.PinButtonScale
 import com.zegreatrob.coupling.client.components.pink
 import com.zegreatrob.coupling.client.components.player.PlayerCard
+import com.zegreatrob.coupling.client.components.player.create
 import com.zegreatrob.coupling.client.components.supersize
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.pin.Pin
 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.css.ClassName
@@ -242,7 +242,7 @@ private fun ChildrenBuilder.selectablePlayerCardList(
 ) = playerSelections.map { (player, isSelected) ->
     div {
         css { paddingBottom = 30.px; display = Display.inlineBlock }
-        add(playerCard(player, isSelected, setPlayerSelections, playerSelections))
+        +playerCard(player, isSelected, setPlayerSelections, playerSelections)
     }
 }
 
@@ -251,7 +251,7 @@ private fun playerCard(
     isSelected: Boolean,
     setPlayerSelections: (List<Pair<Player, Boolean>>) -> Unit,
     playerSelections: List<Pair<Player, Boolean>>,
-) = PlayerCard(
+) = PlayerCard.create(
     player,
     className = ClassName {
         transitionProperty = TransitionProperty.all

diff --git a/...ents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/PairReportTable.kt b/...ents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/PairReportTable.kt
@@ -7,7 +7,6 @@ import com.zegreatrob.coupling.model.pairassignmentdocument.TimeResult
 import com.zegreatrob.coupling.model.pairassignmentdocument.TimeResultValue
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.minreact.ReactFunc
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import emotion.react.css
 import react.ChildrenBuilder
@@ -92,5 +91,5 @@ private fun ChildrenBuilder.reportPlayerCard(player: Player, tilt: Angle) = div
         display = Display.inlineBlock
     }
     key = player.id
-    add(PlayerCard(player, size = 50, tilt = tilt))
+    PlayerCard(player, size = 50, tilt = tilt)
 }
diff --git a/...onents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmap.kt b/...onents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmap.kt
@@ -79,7 +79,7 @@ val topRowPlayer by ntmFC<TopRowPlayer> { props ->
             textAlign = TextAlign.center
         }
         key = props.player.id
-        add(PlayerCard(props.player, size = 50, tilt = tweak.deg))
+        PlayerCard(props.player, size = 50, tilt = tweak.deg)
     }
 }
 
@@ -96,7 +96,7 @@ val sidePlayer by ntmFC<SidePlayer> { props ->
             }
         }
         key = props.player.id
-        add(PlayerCard(props.player, size = 50, tilt = tweak.deg))
+        PlayerCard(props.player, size = 50, tilt = tweak.deg)
     }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                         }
                         playerConfigForm(player, party, onChange, onSubmit, onRemove)
                     }
-                    add(PlayerCard(player, size = 250))
+                    PlayerCard(player, size = 250)
                 }
             }
             div {
@@ Expand Down @@