more conversions

robertfmurdock · Jul 9, 2023 · 795e01e · 795e01e
1 parent b8ad061
commit 795e01e
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 71 deletions.
diff --git a/...sMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignments.kt b/...sMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignments.kt
@@ -59,7 +59,7 @@ val PairAssignments by nfc<PairAssignmentsProps> { props ->
                 PairSection(party, players, pairAssignments, allowSave, setPairs, controls)
             }
             ControlPanel(party)
-            add(PlayerRoster(label = "Unpaired players", partyId = party.id, players = notPairedPlayers))
+            PlayerRoster(label = "Unpaired players", partyId = party.id, players = notPairedPlayers)
             ServerMessage(message, key = "${message.text} ${message.players.size}")
         }
     }

diff --git a/...rc/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSection.kt b/...rc/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSection.kt
@@ -11,7 +11,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 emotion.react.css
 import kotlinx.browser.window
@@ -56,7 +55,7 @@ val PairSection by nfc<PairSectionProps> { (party, players, pairs, allowSave, se
         div {
             css { float = Float.right; width = 0.px }
             div { copyToClipboardButton(pairSectionNode) }
-            add(TinyPlayerList(party, players))
+            TinyPlayerList(party, players)
         }
     }
 }

diff --git a/...onents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/PlayerConfig.kt b/...onents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/player/PlayerConfig.kt
@@ -15,7 +15,6 @@ import com.zegreatrob.coupling.json.toSerializable
 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 js.core.jso
 import react.Props
@@ -54,6 +53,6 @@ val PlayerConfig by nfc<PlayerConfigProps<*>> { props ->
     if (redirectUrl != null) {
         Navigate { to = redirectUrl }
     } else {
-        add(PlayerConfigContent(party, updatedPlayer, players, onChange, onSubmit, onRemove))
+        PlayerConfigContent(party, updatedPlayer, players, onChange, onSubmit, onRemove)
     }
 }
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
@@ -10,11 +10,12 @@ import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.player.AvatarType
 import com.zegreatrob.coupling.model.player.Badge
 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 csstype.PropertiesBuilder
 import emotion.react.css
 import react.ChildrenBuilder
+import react.Props
 import react.dom.aria.ariaLabel
 import react.dom.events.ChangeEvent
 import react.dom.html.ReactHTML.a
@@ -30,7 +31,7 @@ import web.cssom.ClassName
 import web.cssom.Clear
 import web.cssom.Display
 import web.cssom.FontSize
-import web.cssom.LineStyle.Companion.outset
+import web.cssom.LineStyle
 import web.cssom.NamedColor
 import web.cssom.None
 import web.cssom.Position
@@ -40,18 +41,19 @@ import web.cssom.number
 import web.cssom.px
 import web.html.InputType
 
-data class PlayerConfigContent(
-    val party: PartyDetails,
-    val player: Player,
-    val players: List<Player>,
-    val onChange: (ChangeEvent<*>) -> Unit,
-    val onSubmit: () -> Unit,
-    val onRemove: () -> Unit,
-) : DataPropsBind<PlayerConfigContent>(playerConfigContent)
-
 val playerConfigContentClassName = ClassName("player-config-content")
 
-val playerConfigContent by ntmFC<PlayerConfigContent> { (party, player, players, onChange, onSubmit, onRemove) ->
+external interface PlayerConfigContentProps : Props {
+    var party: PartyDetails
+    var player: Player
+    var players: List<Player>
+    var onChange: (ChangeEvent<*>) -> Unit
+    var onSubmit: () -> Unit
+    var onRemove: () -> Unit
+}
+
+@ReactFunc
+val PlayerConfigContent by nfc<PlayerConfigContentProps> { (party, player, players, onChange, onSubmit, onRemove) ->
     ConfigFrame {
         css(playerConfigContentClassName) {
             "input[type=text]" {
@@ -84,15 +86,13 @@ val playerConfigContent by ntmFC<PlayerConfigContent> { (party, player, players,
             }
         }
         div {
-            add(
-                PlayerRoster(players = players, partyId = party.id) {
-                    display = Display.inlineBlock
-                    borderRadius = 20.px
-                    padding = 10.px
-                    border = Border(11.px, outset, NamedColor.tan)
-                    backgroundColor = NamedColor.wheat
-                },
-            )
+            PlayerRoster(players = players, partyId = party.id, cssOverrides = fun PropertiesBuilder.() {
+                display = Display.inlineBlock
+                borderRadius = 20.px
+                padding = 10.px
+                border = Border(11.px, LineStyle.outset, NamedColor.tan)
+                backgroundColor = NamedColor.wheat
+            })
         }
     }
 }

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
@@ -4,10 +4,11 @@ import com.zegreatrob.coupling.client.components.Paths.playerConfigPage
 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.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import csstype.PropertiesBuilder
 import emotion.react.css
+import react.Props
 import react.dom.html.ReactHTML.div
 import react.router.dom.Link
 import react.useState
@@ -18,22 +19,23 @@ import web.cssom.em
 import kotlin.js.Date
 import kotlin.random.Random
 
-data class PlayerRoster(
-    val label: String? = null,
-    val players: List<Player>,
-    val partyId: PartyId,
-    val className: ClassName? = null,
-    val cssOverrides: PropertiesBuilder.() -> Unit = {},
-) : DataPropsBind<PlayerRoster>(playerRoster)
+external interface PlayerRosterProps : Props {
+    var label: String?
+    var players: List<Player>
 
-val playerRoster by ntmFC { (label, players, partyId, className, overrides): PlayerRoster ->
+    @Suppress("INLINE_CLASS_IN_EXTERNAL_DECLARATION_WARNING")
+    var partyId: PartyId
+    var className: ClassName?
+    var cssOverrides: ((PropertiesBuilder) -> Unit)?
+}
+
+@ReactFunc
+val PlayerRoster by nfc<PlayerRosterProps> { (label, players, partyId, className, overrides) ->
     val ref by useState { Date.now().toLong() }
     val random = Random(ref)
 
     div {
-        css(className) {
-            overrides()
-        }
+        css(className) { overrides?.invoke(this) }
         div {
             if (players.isNotEmpty()) {
                 div {

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
@@ -4,17 +4,22 @@ import com.zegreatrob.coupling.client.components.Paths.playerConfigPage
 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.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
+import react.Props
 import react.router.dom.Link
 import react.useState
 import web.cssom.deg
 import kotlin.js.Date
 import kotlin.random.Random
 
-data class TinyPlayerList(val party: PartyDetails, val players: List<Player>) : DataPropsBind<TinyPlayerList>(tinyPlayerList)
+external interface TinyPlayerListProps : Props {
+    var party: PartyDetails
+    var players: List<Player>
+}
 
-val tinyPlayerList by ntmFC<TinyPlayerList> { (party, players) ->
+@ReactFunc
+val TinyPlayerList by nfc<TinyPlayerListProps> { (party, players) ->
     val ref by useState { Date.now().toLong() }
     val random = Random(ref)
     players.forEach { player ->

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
@@ -3,11 +3,8 @@ package com.zegreatrob.coupling.client.components.stats
 import com.zegreatrob.coupling.client.components.player.PlayerCard
 import com.zegreatrob.coupling.client.components.stats.heatmap.Heatmap
 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.nfc
-import com.zegreatrob.minreact.ntmFC
 import emotion.css.ClassName
 import emotion.react.css
 import react.Props
@@ -52,25 +49,28 @@ val PlayerHeatmap by nfc<PlayerHeatmapProps> { (players, heatmapData) ->
                     width = 62.px
                 }
             }
-            players.forEach { player -> add(TopRowPlayer(player)) }
+            players.forEach { player -> TopRowPlayer(player) }
         }
         div {
             className = heatmapSideRow
-            players.forEach { player -> add(SidePlayer(player)) }
+            players.forEach { player -> SidePlayer(player) }
         }
-        add(
-            Heatmap(
-                heatmapData,
-                ClassName {
-                    display = Display.inlineBlock
-                    verticalAlign = VerticalAlign.top
-                },
-            ),
+        Heatmap(
+            heatmapData,
+            ClassName {
+                display = Display.inlineBlock
+                verticalAlign = VerticalAlign.top
+            },
         )
     }
 }
 
-val topRowPlayer by ntmFC<TopRowPlayer> { props ->
+external interface TopRowPlayerProps : Props {
+    var player: Player
+}
+
+@ReactFunc
+val TopRowPlayer by nfc<TopRowPlayerProps> { props ->
     val tweak = useMemo { Random.nextInt(6).toDouble() - 3.0 }
     div {
         css {
@@ -83,9 +83,12 @@ val topRowPlayer by ntmFC<TopRowPlayer> { props ->
     }
 }
 
-data class TopRowPlayer(val player: Player) : DataPropsBind<TopRowPlayer>(topRowPlayer)
+external interface SidePlayerProps : Props {
+    var player: Player
+}
 
-val sidePlayer by ntmFC<SidePlayer> { props ->
+@ReactFunc
+val SidePlayer by nfc<SidePlayerProps> { props ->
     val tweak = useMemo(props.player.id) { 1.5 - Random.nextInt(6).toDouble() }
     div {
         css {
@@ -99,5 +102,3 @@ val sidePlayer by ntmFC<SidePlayer> { props ->
         PlayerCard(props.player, size = 50, tilt = tweak.deg)
     }
 }
-
-data class SidePlayer(val player: Player) : DataPropsBind<SidePlayer>(sidePlayer)
diff --git a/...ents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/heatmap/Heatmap.kt b/...ents/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/heatmap/Heatmap.kt
@@ -1,7 +1,7 @@
 package com.zegreatrob.coupling.client.components.stats.heatmap
 
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import emotion.css.ClassName
 import emotion.react.css
 import js.import.import
@@ -12,6 +12,7 @@ import kotlinx.coroutines.MainScope
 import kotlinx.coroutines.async
 import kotlinx.coroutines.launch
 import org.w3c.dom.Element
+import react.Props
 import react.dom.html.ReactHTML.div
 import react.useLayoutEffect
 import react.useRef
@@ -81,9 +82,13 @@ suspend fun renderD3Heatmap(element: HTMLElement, data: List<Double?>, cellClass
         }
 }
 
-data class Heatmap(val data: List<List<Double?>>, val className: ClassName) : DataPropsBind<Heatmap>(heatmap)
+external interface HeatmapProps : Props {
+    var data: List<List<Double?>>
+    var className: ClassName
+}
 
-val heatmap by ntmFC<Heatmap> { (data, className) ->
+@ReactFunc
+val Heatmap by nfc<HeatmapProps> { (data, className) ->
     val rowSize = data.size * 90
     val rootRef = useRef<HTMLElement>(null)
     useLayoutEffect { MainScope().launch { rootRef.current?.renderD3Heatmap(data.flatten()) } }

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
@@ -14,7 +14,6 @@ import com.zegreatrob.coupling.client.components.spin.PrepareSpinContent
 import com.zegreatrob.coupling.model.CouplingSocketMessage
 import com.zegreatrob.coupling.model.pin.Pin
 import com.zegreatrob.minreact.ReactFunc
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import com.zegreatrob.testmints.action.async.SuspendAction
 import emotion.react.css
@@ -113,9 +112,8 @@ private fun ChildrenBuilder.prepareSpinFrame(state: PrepareToSpin) {
     PrepareSpinContent(party, players, pins, pins.map(Pin::id), {}, {}, {})
 }
 
-private fun ChildrenBuilder.playerConfigFrame(state: AddPlayer) = add(
-    PlayerConfigContent(state.party, state.newPlayer, state.players, {}, {}, {}),
-)
+private fun ChildrenBuilder.playerConfigFrame(state: AddPlayer) =
+    PlayerConfigContent(state.party, state.newPlayer, state.players, {}, {}, {})
 
 private fun ChildrenBuilder.pinConfigFrame(state: AddPin) =
     PinConfigContent(state.party, state.newPin, state.pins, {}, {}, {})