Skip to content

Commit

Permalink
more conversions
Browse files Browse the repository at this point in the history
  • Loading branch information
@robertfmurdock
robertfmurdock committed Jul 9, 2023
1 parent 795e01e commit e4cf3e5
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 122 deletions.
107 changes: 2 additions & 105 deletions client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/LoadingPage.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<PageProps> { 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) })
}
}

Expand Down Expand Up @@ -107,84 +85,3 @@ sealed class LoadingAnimationState(
)
}
}

data class LoadingPageFrame(val state: LoadingAnimationState) : DataPropsBind<LoadingPageFrame>(loadingPageFrame)

private val loadingPageFrame by ntmFC<LoadingPageFrame> { (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,
)
}
}
109 changes: 109 additions & 0 deletions client/src/jsMain/kotlin/com/zegreatrob/coupling/client/demo/LoadingPageFrameProps.kt
View file
Original file line number Diff line number Diff line change
@@ -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<LoadingPageFrameProps> { (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,
)
}
}
15 changes: 9 additions & 6 deletions client/src/jsMain/kotlin/com/zegreatrob/coupling/client/incubating/Incubating.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -16,18 +16,21 @@ val IncubatingPage by nfc<PageProps> { 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>(incubatingContent)
external interface IncubatingContentProps : Props {
var addToSlackUrl: String
}

val incubatingContent by ntmFC<IncubatingContent> { props ->
@ReactFunc
val IncubatingContent by nfc<IncubatingContentProps> { props ->
PageFrame(borderColor = Color("#e8e8e8"), backgroundColor = Color("#dcd9d9")) {
+"Incubating Features - Best not to touch"
div {
Expand Down
18 changes: 10 additions & 8 deletions client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationContent.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>(integrationContent)
external interface IntegrationContentProps : Props {
var party: PartyDetails
var integration: PartyIntegration?
var addToSlackUrl: String
}

val integrationContent by ntmFC<IntegrationContent> { props ->
@ReactFunc
val IntegrationContent by nfc<IntegrationContentProps> { props ->
val (party, integrations) = props
ConfigFrame {
div {
Expand Down
6 changes: 3 additions & 3 deletions client/src/jsMain/kotlin/com/zegreatrob/coupling/client/integration/IntegrationPage.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit e4cf3e5

Please sign in to comment.