Replace ProductionBar by self BoardSummary

Resolves #66

4 files changed, 45 insertions, 111 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 ee69622e..9573c12a 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
@@ -20,7 +20,8 @@ enum class BoardSummarySide(
 ) {
     LEFT(TokenCountPosition.RIGHT, Align.flexStart, PopoverPosition.RIGHT),
     TOP(TokenCountPosition.OVER, Align.flexStart, PopoverPosition.BOTTOM),
-    RIGHT(TokenCountPosition.LEFT, Align.flexEnd, PopoverPosition.LEFT)
+    RIGHT(TokenCountPosition.LEFT, Align.flexEnd, PopoverPosition.LEFT),
+    BOTTOM(TokenCountPosition.OVER, Align.flexStart, PopoverPosition.TOP),
 }
 
 fun RBuilder.boardSummaryWithPopover(
@@ -35,7 +36,12 @@ fun RBuilder.boardSummaryWithPopover(
         position = boardSummarySide.popoverPosition,
         popoverClassName = popoverClass,
     ) {
-        boardSummary(player, board, boardSummarySide, block)
+        boardSummary(
+            player = player,
+            board = board,
+            side = boardSummarySide,
+            block = block,
+        )
     }
 }
 
@@ -47,10 +53,11 @@ private fun createFullBoardPreview(board: Board): ReactElement = buildElement {
     }
 }
 
-private fun RBuilder.boardSummary(
+fun RBuilder.boardSummary(
     player: PlayerDTO,
     board: Board,
     side: BoardSummarySide,
+    showPreparationStatus: Boolean = true,
     block: StyledDOMBuilder<DIV>.() -> Unit = {},
 ) {
     styledDiv {
@@ -67,21 +74,21 @@ private fun RBuilder.boardSummary(
             }
         }
 
-        topBar(player, side)
+        topBar(player, side, showPreparationStatus)
         styledHr {
             css {
                 margin(vertical = 0.5.rem)
                 width = 100.pct
             }
         }
-        bottomBar(side, board, player)
+        bottomBar(side, board, player, showPreparationStatus)
         block()
     }
 }
 
-private fun RBuilder.topBar(player: PlayerDTO, side: BoardSummarySide) {
+private fun RBuilder.topBar(player: PlayerDTO, side: BoardSummarySide, showPreparationStatus: Boolean) {
     val playerIconSize = 25
-    if (side == BoardSummarySide.TOP) {
+    if (showPreparationStatus && side == BoardSummarySide.TOP) {
         styledDiv {
             css {
                 display = Display.flex
@@ -97,11 +104,11 @@ private fun RBuilder.topBar(player: PlayerDTO, side: BoardSummarySide) {
     }
 }
 
-private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: PlayerDTO) {
+private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: PlayerDTO, showPreparationStatus: Boolean) {
     styledDiv {
         css {
             display = Display.flex
-            flexDirection = if (side == BoardSummarySide.TOP) FlexDirection.row else FlexDirection.column
+            flexDirection = if (side == BoardSummarySide.TOP || side == BoardSummarySide.BOTTOM) FlexDirection.row else FlexDirection.column
             alignItems = side.alignment
             if (side != BoardSummarySide.TOP) {
                 width = 100.pct
@@ -111,7 +118,7 @@ private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: Pla
         generalCounts(board, tokenSize, side.tokenCountPosition)
         bpDivider()
         scienceTokens(board, tokenSize, side.tokenCountPosition)
-        if (side != BoardSummarySide.TOP) {
+        if (showPreparationStatus && side != BoardSummarySide.TOP) {
             bpDivider()
             styledDiv {
                 css {
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
index 79e003cf..d26fc81d 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
@@ -89,7 +89,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
             if (turnInfo.action == Action.SAY_READY) {
                 sayReadyButton()
             }
-            productionBar(gold = board.gold, production = board.production)
+            selfBoardSummary(turnInfo)
         }
     }
 
@@ -194,6 +194,30 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
         }
     }
 
+    private fun RBuilder.selfBoardSummary(turnInfo: PlayerTurnInfo) {
+        styledDiv {
+            css {
+                position = Position.absolute
+                bottom = 0.px
+                left = 0.px
+                display = Display.flex
+                flexDirection = FlexDirection.row
+            }
+            val board = turnInfo.getOwnBoard()
+            boardSummary(
+                player = props.players[board.playerIndex],
+                board = board, BoardSummarySide.BOTTOM,
+                showPreparationStatus = false,
+            ) {
+                css {
+                    borderTopLeftRadius = 0.4.rem
+                    borderTopRightRadius = 0.4.rem
+                    margin(horizontal = 2.rem)
+                }
+            }
+        }
+    }
+
     private fun RBuilder.preparedMove(card: HandCard, move: PlayerMove) {
         bpOverlay(isOpen = true, onClose = props.unprepareMove) {
             preparedMove(card, move, props.unprepareMove) {
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt
index 85f78cb3..8800c92e 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt
@@ -213,13 +213,14 @@ private fun CSSBuilder.handStyle() {
     maxHeight = 25.vw
     position = Position.absolute
     transform {
-        translate(tx = (-50).pct, ty = 55.pct)
+        translate(tx = (-50).pct, ty = 65.pct)
     }
     transition(duration = 0.5.s)
     zIndex = 30
 
     hover {
-        bottom = 4.rem
+        bottom = 1.rem
+        zIndex = 60
         transform {
             translate(tx = (-50).pct, ty = 0.pct)
         }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ProductionBar.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ProductionBar.kt
deleted file mode 100644
index c3cd9911..00000000
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ProductionBar.kt
+++ /dev/null
@@ -1,98 +0,0 @@
-package org.luxons.sevenwonders.ui.components.game
-
-import kotlinx.css.*
-import kotlinx.css.properties.borderTop
-import kotlinx.css.properties.boxShadow
-import kotlinx.html.DIV
-import org.luxons.sevenwonders.model.boards.Production
-import org.luxons.sevenwonders.model.resources.CountedResource
-import org.luxons.sevenwonders.model.resources.ResourceType
-import react.RBuilder
-import react.dom.key
-import styled.StyledDOMBuilder
-import styled.css
-import styled.styledDiv
-import styled.styledSpan
-
-fun RBuilder.productionBar(gold: Int, production: Production) {
-    styledDiv {
-        css {
-            productionBarStyle()
-        }
-        goldIndicator(gold)
-        fixedResources(production.fixedResources)
-        alternativeResources(production.alternativeResources)
-    }
-}
-
-private fun RBuilder.fixedResources(resources: List<CountedResource>) {
-    styledDiv {
-        css {
-            margin = "auto"
-            display = Display.flex
-        }
-        resources.forEach {
-            resourceWithCount(resourceType = it.type, count = it.count, imgSize = 3.rem) {
-                attrs { key = it.type.toString() }
-                css { marginLeft = 1.rem }
-            }
-        }
-    }
-}
-
-private fun RBuilder.alternativeResources(resources: List<Set<ResourceType>>) {
-    styledDiv {
-        css {
-            margin = "auto"
-            display = Display.flex
-        }
-        resources.forEachIndexed { index, res ->
-            resourceChoice(types = res) {
-                attrs {
-                    key = index.toString()
-                }
-            }
-        }
-    }
-}
-
-private fun RBuilder.resourceChoice(types: Set<ResourceType>, block: StyledDOMBuilder<DIV>.() -> Unit = {}) {
-    styledDiv {
-        css {
-            marginLeft = (1.5).rem
-        }
-        block()
-        for ((i, t) in types.withIndex()) {
-            resourceImage(resourceType = t, size = 3.rem) {
-                attrs { this.key = t.toString() }
-            }
-            if (i < types.indices.last) {
-                styledSpan {
-                    css { choiceSeparatorStyle() }
-                    +"/"
-                }
-            }
-        }
-    }
-}
-
-private fun CSSBuilder.productionBarStyle() {
-    alignItems = Align.center
-    background = "linear-gradient(#eaeaea, #888 7%)"
-    bottom = 0.px
-    borderTop(width = 1.px, color = Color("#8b8b8b"), style = BorderStyle.solid)
-    boxShadow(blurRadius = 15.px, color = Color("#747474"))
-    display = Display.flex
-    height = (3.5).rem
-    width = 100.vw
-    position = Position.fixed
-    zIndex = 99
-}
-
-private fun CSSBuilder.choiceSeparatorStyle() {
-    fontSize = 2.rem
-    verticalAlign = VerticalAlign.middle
-    margin(all = 5.px)
-    color = Color("#c29929")
-    declarations["text-shadow"] = "0 0 1px black"
-}