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 8227436368..28a608f288 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 @@ -2,44 +2,22 @@ package com.zegreatrob.coupling.client.demo import com.zegreatrob.coupling.client.components.Frame import com.zegreatrob.coupling.client.components.FrameRunner -import com.zegreatrob.coupling.client.components.external.reactfliptoolkit.Flipped -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 -import com.zegreatrob.minreact.DataPropsBind import com.zegreatrob.minreact.nfc -import com.zegreatrob.minreact.ntmFC -import emotion.css.ClassName -import emotion.react.css -import react.create -import react.dom.html.ReactHTML.div -import web.cssom.AlignItems import web.cssom.Angle -import web.cssom.ClassName -import web.cssom.Display -import web.cssom.JustifyContent import web.cssom.Left -import web.cssom.Position import web.cssom.Top import web.cssom.deg -import web.cssom.pct import web.cssom.px -import web.cssom.translate val loadingSequence by lazy { LoadingAnimationState.generateSequence() } val LoadingPage by nfc { props -> val frameIndex = props.search["frame"] val currentFrame = frameIndex?.toIntOrNull()?.let { loadingSequence.toList()[it] } if (currentFrame != null) { - child(LoadingPageFrame(currentFrame.data).create()) + LoadingPageFrame(currentFrame.data) } else { - FrameRunner(loadingSequence, 1.0, { state: LoadingAnimationState -> - LoadingPageFrame(state).create() - }) + FrameRunner(loadingSequence, 1.0, { state: LoadingAnimationState -> LoadingPageFrame.create(state) }) } } @@ -107,84 +85,3 @@ sealed class LoadingAnimationState( ) } } - -data class LoadingPageFrame(val state: LoadingAnimationState) : DataPropsBind(loadingPageFrame) - -private val loadingPageFrame by ntmFC { (state) -> - div { - css { - display = Display.flex - justifyContent = JustifyContent.center - alignItems = AlignItems.center - } - div { - css { - position = Position.absolute - top = 50.pct - left = 50.pct - transform = translate((-50).pct, (-50).pct) - } - val rob by playerImage() - val autumn by playerImage() - val pair = pairOf( - player1 = Player(id = "rob", name = "rob", imageURL = rob, avatarType = null), - player2 = Player(id = "autumn", name = "autumn", imageURL = autumn, avatarType = null), - ) - Flipper { - flipKey = "${state.data}" - div { - div { - css { - display = Display.inlineFlex - } - listOf( - flippedPlayer( - ClassName {}, - pair.player1, - state.data.player1Top, - state.data.player1Tilt, - state.data.player1Left, - ), - flippedPlayer( - ClassName {}, - pair.player2, - state.data.player2Top, - state.data.player2Tilt, - state.data.player2Left, - ), - ).let { - if (state.data.swapped) { - it.reversed() - } else { - it - } - }.forEach { child(it) } - } - } - } - } - } -} - -private fun flippedPlayer( - leftCardStyles: ClassName, - player: Player, - top: Top, - tilt: Angle, - left: Left, -) = Flipped.create { - flipId = player.id - div { - css { - position = Position.relative - this@css.top = top - this@css.left = left - } - PlayerCard( - player = player, - className = leftCardStyles, - size = 50, - tilt = tilt, - ) - } -} diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/LoadingPageFrameProps.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/LoadingPageFrameProps.kt new file mode 100644 index 0000000000..0a32df072b --- /dev/null +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/LoadingPageFrameProps.kt @@ -0,0 +1,109 @@ +package com.zegreatrob.coupling.client.demo + +import com.zegreatrob.coupling.client.components.external.reactfliptoolkit.Flipped +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.model.pairassignmentdocument.pairOf +import com.zegreatrob.coupling.model.player.Player +import com.zegreatrob.minreact.ReactFunc +import com.zegreatrob.minreact.nfc +import emotion.css.ClassName +import emotion.react.css +import react.Props +import react.create +import react.dom.html.ReactHTML.div +import web.cssom.AlignItems +import web.cssom.Angle +import web.cssom.ClassName +import web.cssom.Display +import web.cssom.JustifyContent +import web.cssom.Left +import web.cssom.Position +import web.cssom.Top +import web.cssom.pct +import web.cssom.translate + +external interface LoadingPageFrameProps : Props { + var state: LoadingAnimationState +} + +@ReactFunc +val LoadingPageFrame by nfc { (state) -> + div { + css { + display = Display.flex + justifyContent = JustifyContent.center + alignItems = AlignItems.center + } + div { + css { + position = Position.absolute + top = 50.pct + left = 50.pct + transform = translate((-50).pct, (-50).pct) + } + val rob by playerImage() + val autumn by playerImage() + val pair = pairOf( + player1 = Player(id = "rob", name = "rob", imageURL = rob, avatarType = null), + player2 = Player(id = "autumn", name = "autumn", imageURL = autumn, avatarType = null), + ) + Flipper { + flipKey = "${state.data}" + div { + div { + css { + display = Display.inlineFlex + } + listOf( + flippedPlayer( + ClassName {}, + pair.player1, + state.data.player1Top, + state.data.player1Tilt, + state.data.player1Left, + ), + flippedPlayer( + ClassName {}, + pair.player2, + state.data.player2Top, + state.data.player2Tilt, + state.data.player2Left, + ), + ).let { + if (state.data.swapped) { + it.reversed() + } else { + it + } + }.forEach { child(it) } + } + } + } + } + } +} + +private fun flippedPlayer( + leftCardStyles: ClassName, + player: Player, + top: Top, + tilt: Angle, + left: Left, +) = Flipped.create { + flipId = player.id + div { + css { + position = Position.relative + this@css.top = top + this@css.left = left + } + PlayerCard( + player = player, + className = leftCardStyles, + size = 50, + tilt = tilt, + ) + } +} diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/incubating/Incubating.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/incubating/Incubating.kt index e00a461f44..97cd20a50d 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/incubating/Incubating.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/incubating/Incubating.kt @@ -4,10 +4,10 @@ import com.zegreatrob.coupling.client.components.PageFrame import com.zegreatrob.coupling.client.routing.CouplingQuery import com.zegreatrob.coupling.client.routing.PageProps import com.zegreatrob.coupling.sdk.gql.graphQuery -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 react.Props import react.dom.html.ReactHTML.div import web.cssom.Color @@ -16,18 +16,21 @@ val IncubatingPage by nfc { props -> CouplingQuery( commander = props.commander, query = graphQuery { addToSlackUrl() }, - toDataprops = { _, _, result -> + build = { _, _, result -> IncubatingContent( - addToSlackUrl = result.addToSlackUrl ?: return@CouplingQuery null, + addToSlackUrl = result.addToSlackUrl ?: return@CouplingQuery, ) }, ), ) } -data class IncubatingContent(val addToSlackUrl: String) : DataPropsBind(incubatingContent) +external interface IncubatingContentProps : Props { + var addToSlackUrl: String +} -val incubatingContent by ntmFC { props -> +@ReactFunc +val IncubatingContent by nfc { props -> PageFrame(borderColor = Color("#e8e8e8"), backgroundColor = Color("#dcd9d9")) { +"Incubating Features - Best not to touch" div { diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationContent.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationContent.kt index a4e675c1d6..a350548264 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationContent.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationContent.kt @@ -8,9 +8,10 @@ import com.zegreatrob.coupling.client.components.integrations.slackTeam import com.zegreatrob.coupling.client.incubating.AddToSlackButton import com.zegreatrob.coupling.model.party.PartyDetails import com.zegreatrob.coupling.model.party.PartyIntegration -import com.zegreatrob.minreact.DataPropsBind -import com.zegreatrob.minreact.ntmFC +import com.zegreatrob.minreact.ReactFunc +import com.zegreatrob.minreact.nfc import emotion.react.css +import react.Props import react.dom.html.ReactHTML.div import react.dom.html.ReactHTML.h2 import react.dom.html.ReactHTML.li @@ -19,13 +20,14 @@ import web.cssom.Display import web.cssom.TextAlign import web.cssom.number -data class IntegrationContent( - val party: PartyDetails, - val integration: PartyIntegration?, - val addToSlackUrl: String, -) : DataPropsBind(integrationContent) +external interface IntegrationContentProps : Props { + var party: PartyDetails + var integration: PartyIntegration? + var addToSlackUrl: String +} -val integrationContent by ntmFC { props -> +@ReactFunc +val IntegrationContent by nfc { props -> val (party, integrations) = props ConfigFrame { div { diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationPage.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationPage.kt index b47dcd1d8c..3febce847b 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationPage.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationPage.kt @@ -15,11 +15,11 @@ val IntegrationPage = partyPageFunction { props, partyId -> } addToSlackUrl() }, - toDataprops = { _, _, result -> + build = { _, _, result -> IntegrationContent( - party = result.party?.details?.data ?: return@CouplingQuery null, + party = result.party?.details?.data ?: return@CouplingQuery, integration = result.party?.integration?.data, - addToSlackUrl = result.addToSlackUrl ?: return@CouplingQuery null, + addToSlackUrl = result.addToSlackUrl ?: return@CouplingQuery, ) }, ).create(key = partyId.value)