Add prepared card indicator

Resolves:
https://github.com/joffrey-bion/seven-wonders/issues/62

4 files changed, 137 insertions, 12 deletions

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt
index 4f1459de..ee69622e 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt
@@ -11,11 +11,7 @@ import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo
 import react.RBuilder
 import react.ReactElement
 import react.buildElement
-import styled.StyledDOMBuilder
-import styled.css
-import styled.getClassName
-import styled.styledDiv
-import styled.styledHr
+import styled.*
 
 enum class BoardSummarySide(
     val tokenCountPosition: TokenCountPosition,
@@ -71,25 +67,62 @@ private fun RBuilder.boardSummary(
             }
         }
 
-        playerInfo(player, iconSize = 25)
+        topBar(player, side)
         styledHr {
             css {
                 margin(vertical = 0.5.rem)
                 width = 100.pct
             }
         }
+        bottomBar(side, board, player)
+        block()
+    }
+}
+
+private fun RBuilder.topBar(player: PlayerDTO, side: BoardSummarySide) {
+    val playerIconSize = 25
+    if (side == BoardSummarySide.TOP) {
         styledDiv {
             css {
                 display = Display.flex
-                flexDirection = if (side == BoardSummarySide.TOP) FlexDirection.row else FlexDirection.column
-                alignItems = side.alignment
+                flexDirection = FlexDirection.row
+                justifyContent = JustifyContent.spaceBetween
+                width = 100.pct
+            }
+            playerInfo(player, iconSize = playerIconSize)
+            playerPreparedCard(player)
+        }
+    } else {
+        playerInfo(player, iconSize = playerIconSize)
+    }
+}
+
+private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: PlayerDTO) {
+    styledDiv {
+        css {
+            display = Display.flex
+            flexDirection = if (side == BoardSummarySide.TOP) FlexDirection.row else FlexDirection.column
+            alignItems = side.alignment
+            if (side != BoardSummarySide.TOP) {
+                width = 100.pct
             }
-            val tokenSize = 2.rem
-            generalCounts(board, tokenSize, side.tokenCountPosition)
+        }
+        val tokenSize = 2.rem
+        generalCounts(board, tokenSize, side.tokenCountPosition)
+        bpDivider()
+        scienceTokens(board, tokenSize, side.tokenCountPosition)
+        if (side != BoardSummarySide.TOP) {
             bpDivider()
-            scienceTokens(board, tokenSize, side.tokenCountPosition)
+            styledDiv {
+                css {
+                    width = 100.pct
+                    alignItems = Align.center
+                    display = Display.flex
+                    flexDirection = FlexDirection.column
+                }
+                playerPreparedCard(player)
+            }
         }
-        block()
     }
 }
 
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt
new file mode 100644
index 00000000..3da63a38
--- /dev/null
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt
@@ -0,0 +1,84 @@
+package org.luxons.sevenwonders.ui.components.game
+
+import kotlinx.css.*
+import kotlinx.css.properties.*
+import kotlinx.html.title
+import org.luxons.sevenwonders.model.api.PlayerDTO
+import org.luxons.sevenwonders.model.cards.CardBack
+import org.luxons.sevenwonders.ui.redux.connectStateWithOwnProps
+import react.RBuilder
+import react.RComponent
+import react.RProps
+import react.RState
+import styled.animation
+import styled.css
+import styled.styledDiv
+import styled.styledImg
+
+interface PlayerPreparedCardProps : RProps {
+    var playerDisplayName: String
+    var cardBack: CardBack?
+}
+
+interface PlayerPreparedCardContainerProps : RProps {
+    var playerDisplayName: String
+    var username: String
+}
+
+fun RBuilder.playerPreparedCard(player: PlayerDTO) = playerPreparedCard {
+    attrs {
+        this.playerDisplayName = player.displayName
+        this.username = player.username
+    }
+}
+
+private class PlayerPreparedCard(props: PlayerPreparedCardProps) : RComponent<PlayerPreparedCardProps, RState>(props) {
+
+    override fun RBuilder.render() {
+        val cardBack = props.cardBack
+        val sideSize = 30.px
+        styledDiv {
+            css {
+                width = sideSize
+                height = sideSize
+            }
+            attrs {
+                title = if (cardBack == null) {
+                    "${props.playerDisplayName} is still thinking…"
+                } else {
+                    "${props.playerDisplayName} has prepared his move"
+                }
+            }
+            if (cardBack != null) {
+                cardBackImage(cardBack) {
+                    css {
+                        maxHeight = sideSize
+                    }
+                }
+            } else {
+                styledImg(src = "images/gear-50.png") {
+                    css {
+                        maxHeight = sideSize
+                        animation(
+                            duration = 1.5.s,
+                            iterationCount = IterationCount.infinite,
+                            timing = cubicBezier(0.2, 0.9, 0.7, 1.3)
+                        ) {
+                            to {
+                                transform { rotate(360.deg) }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+private val playerPreparedCard = connectStateWithOwnProps(
+    clazz = PlayerPreparedCard::class,
+    mapStateToProps = { state, ownProps: PlayerPreparedCardContainerProps ->
+        playerDisplayName = ownProps.playerDisplayName
+        cardBack = state.gameState?.preparedCardsByUsername?.get(ownProps.username)
+    },
+)
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt
index b748c3a5..064e3391 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt
@@ -26,6 +26,14 @@ inline fun <reified SP : RProps> connectState(
     return connect.invoke(clazz.js.unsafeCast<RClass<SP>>())
 }
 
+inline fun <reified SP : RProps, OP : RProps> connectStateWithOwnProps(
+    clazz: KClass<out RComponent<SP, out RState>>,
+    noinline mapStateToProps: SP.(SwState, OP) -> Unit,
+): RClass<OP> {
+    val connect = rConnect(mapStateToProps = mapStateToProps)
+    return connect.invoke(clazz.js.unsafeCast<RClass<SP>>())
+}
+
 inline fun <reified SP : RProps, reified DP : RProps, reified P : RProps> connectStateAndDispatch(
     clazz: KClass<out RComponent<P, out RState>>,
     noinline mapStateToProps: SP.(SwState, RProps) -> Unit,
diff --git a/sw-ui/src/main/resources/images/gear-50.png b/sw-ui/src/main/resources/images/gear-50.png
new file mode 100644
index 00000000..93a4a186
--- /dev/null
+++ b/sw-ui/src/main/resources/images/gear-50.png