Add full board preview

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

4 files changed, 95 insertions, 30 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 67f94848..715fc25d 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
@@ -1,27 +1,53 @@
 package org.luxons.sevenwonders.ui.components.game
 
+import com.palantir.blueprintjs.PopoverPosition
 import com.palantir.blueprintjs.bpDivider
+import com.palantir.blueprintjs.bpPopover
 import kotlinx.css.*
 import kotlinx.html.DIV
 import org.luxons.sevenwonders.model.api.PlayerDTO
 import org.luxons.sevenwonders.model.boards.Board
 import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo
 import react.RBuilder
-import styled.StyledDOMBuilder
-import styled.css
-import styled.styledDiv
-import styled.styledHr
+import react.ReactElement
+import react.buildElement
+import styled.*
 
 enum class BoardSummarySide(
     val tokenCountPosition: TokenCountPosition,
-    val alignment: Align
+    val alignment: Align,
+    val popoverPosition: PopoverPosition
 ) {
-    LEFT(TokenCountPosition.RIGHT, Align.flexStart),
-    TOP(TokenCountPosition.OVER, Align.flexStart),
-    RIGHT(TokenCountPosition.LEFT, Align.flexEnd)
+    LEFT(TokenCountPosition.RIGHT, Align.flexStart, PopoverPosition.RIGHT),
+    TOP(TokenCountPosition.OVER, Align.flexStart, PopoverPosition.BOTTOM),
+    RIGHT(TokenCountPosition.LEFT, Align.flexEnd, PopoverPosition.LEFT)
 }
 
-fun RBuilder.boardSummary(
+fun RBuilder.boardSummaryWithPopover(
+    player: PlayerDTO,
+    board: Board,
+    boardSummarySide: BoardSummarySide,
+    block: StyledDOMBuilder<DIV>.() -> Unit = {}
+) {
+    val popoverClass = GameStyles.getClassName { it::fullBoardPreviewPopover }
+    bpPopover(
+        content = createFullBoardPreview(board),
+        position = boardSummarySide.popoverPosition,
+        popoverClassName = popoverClass
+    ) {
+        boardSummary(player, board, boardSummarySide, block)
+    }
+}
+
+private fun createFullBoardPreview(board: Board): ReactElement = buildElement {
+    boardComponent(board = board) {
+        css {
+            +GameStyles.fullBoardPreview
+        }
+    }
+}
+
+private fun RBuilder.boardSummary(
     player: PlayerDTO,
     board: Board,
     boardSummarySide: BoardSummarySide,
@@ -35,8 +61,11 @@ fun RBuilder.boardSummary(
             padding(all = 0.5.rem)
             backgroundColor = Color.paleGoldenrod.withAlpha(0.5)
             zIndex = 50 // above table cards
+
+            hover {
+                backgroundColor = Color.paleGoldenrod
+            }
         }
-        val tokenSize = 2.rem
 
         playerInfo(player, iconSize = 25)
         styledHr {
@@ -51,6 +80,7 @@ fun RBuilder.boardSummary(
                 flexDirection = if (boardSummarySide == BoardSummarySide.TOP) FlexDirection.row else FlexDirection.column
                 alignItems = boardSummarySide.alignment
             }
+            val tokenSize = 2.rem
             generalCounts(board, tokenSize, boardSummarySide.tokenCountPosition)
             bpDivider()
             scienceTokens(board, tokenSize, boardSummarySide.tokenCountPosition)
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 afc3b157..b4e432df 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
@@ -116,25 +116,33 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
     }
 
     private fun RBuilder.leftPlayerBoardSummary(board: Board) {
-        boardSummary(props.players[board.playerIndex], board, BoardSummarySide.LEFT) {
+        styledDiv {
             css {
                 position = Position.absolute
                 left = 0.px
                 bottom = 40.pct
-                borderTopRightRadius = 0.4.rem
-                borderBottomRightRadius = 0.4.rem
+            }
+            boardSummaryWithPopover(props.players[board.playerIndex], board, BoardSummarySide.LEFT) {
+                css {
+                    borderTopRightRadius = 0.4.rem
+                    borderBottomRightRadius = 0.4.rem
+                }
             }
         }
     }
 
     private fun RBuilder.rightPlayerBoardSummary(board: Board) {
-        boardSummary(props.players[board.playerIndex], board, BoardSummarySide.RIGHT) {
+        styledDiv {
             css {
                 position = Position.absolute
                 right = 0.px
                 bottom = 40.pct
-                borderTopLeftRadius = 0.4.rem
-                borderBottomLeftRadius = 0.4.rem
+            }
+            boardSummaryWithPopover(props.players[board.playerIndex], board, BoardSummarySide.RIGHT) {
+                css {
+                    borderTopLeftRadius = 0.4.rem
+                    borderBottomLeftRadius = 0.4.rem
+                }
             }
         }
     }
@@ -150,7 +158,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
                 flexDirection = FlexDirection.row
             }
             boards.forEach { board ->
-                boardSummary(props.players[board.playerIndex], board, BoardSummarySide.TOP) {
+                boardSummaryWithPopover(props.players[board.playerIndex], board, BoardSummarySide.TOP) {
                     css {
                         borderBottomLeftRadius = 0.4.rem
                         borderBottomRightRadius = 0.4.rem
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
index dc52a83a..2fae1fb8 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
@@ -1,10 +1,48 @@
 package org.luxons.sevenwonders.ui.components.game
 
 import kotlinx.css.*
+import kotlinx.css.properties.*
 import styled.StyleSheet
 
 object GameStyles : StyleSheet("GameStyles", isStatic = true) {
 
+    val fullBoardPreviewPopover by css {
+        val bgColor = Color.paleGoldenrod.withAlpha(0.7)
+        backgroundColor = bgColor
+        borderRadius = 0.5.rem
+        padding(all = 0.5.rem)
+
+        children(".bp3-popover-content") {
+            background = "none" // overrides default white background
+        }
+        descendants(".bp3-popover-arrow-fill") {
+            put("fill", bgColor.toString()) // overrides default white arrow
+        }
+        descendants(".bp3-popover-arrow::before") {
+            boxShadow(Color.transparent)
+        }
+    }
+
+    val fullBoardPreview by css {
+        width = 40.vw
+        height = 50.vh
+    }
+
+    val dimmedCard by css {
+        filter = "brightness(60%) grayscale(50%)"
+    }
+
+    val discardMoveText by css {
+        display = Display.flex
+        alignItems = Align.center
+        height = 3.rem
+        fontSize = 2.rem
+        color = Color.goldenrod
+        fontWeight = FontWeight.bold
+        borderTop(0.2.rem, BorderStyle.solid, Color.goldenrod)
+        borderBottom(0.2.rem, BorderStyle.solid, Color.goldenrod)
+    }
+
     val scoreBoard by css {
         backgroundColor = Color.paleGoldenrod
     }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt
index a27c7393..083338a8 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt
@@ -25,7 +25,7 @@ fun RBuilder.preparedMove(
         block()
         cardImage(card) {
             if (move.type == MoveType.DISCARD || move.type == MoveType.UPGRADE_WONDER) {
-                css { discardedCardStyle() }
+                css { +GameStyles.dimmedCard }
             }
         }
         if (move.type == MoveType.DISCARD) {
@@ -51,22 +51,11 @@ fun RBuilder.preparedMove(
     }
 }
 
-private fun CSSBuilder.discardedCardStyle() {
-    filter = "brightness(60%) grayscale(50%)"
-}
-
 private fun StyledDOMBuilder<DIV>.discardText() {
     styledDiv {
         css {
             +GlobalStyles.centerInParent
-            display = Display.flex
-            alignItems = Align.center
-            height = 3.rem
-            fontSize = 2.rem
-            color = Color.goldenrod
-            fontWeight = FontWeight.bold
-            borderTop(0.2.rem, BorderStyle.solid, Color.goldenrod)
-            borderBottom(0.2.rem, BorderStyle.solid, Color.goldenrod)
+            +GameStyles.discardMoveText
         }
         +"DISCARD"
     }