Add board components

3 files changed, 166 insertions, 4 deletions

diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt
new file mode 100644
index 00000000..4324bad2
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt
@@ -0,0 +1,123 @@
+package org.luxons.sevenwonders.ui.components.game
+
+import kotlinx.css.Color
+import kotlinx.css.Display
+import kotlinx.css.Position
+import kotlinx.css.TextAlign
+import kotlinx.css.display
+import kotlinx.css.height
+import kotlinx.css.margin
+import kotlinx.css.maxHeight
+import kotlinx.css.maxWidth
+import kotlinx.css.pct
+import kotlinx.css.position
+import kotlinx.css.properties.boxShadow
+import kotlinx.css.properties.transform
+import kotlinx.css.properties.translate
+import kotlinx.css.rem
+import kotlinx.css.textAlign
+import kotlinx.css.vh
+import kotlinx.css.vw
+import kotlinx.css.width
+import kotlinx.css.zIndex
+import kotlinx.html.DIV
+import kotlinx.html.title
+import org.luxons.sevenwonders.model.boards.Board
+import org.luxons.sevenwonders.model.cards.TableCard
+import org.luxons.sevenwonders.model.wonders.ApiWonder
+import react.RBuilder
+import styled.StyledDOMBuilder
+import styled.css
+import styled.styledDiv
+import styled.styledImg
+
+// card offsets in % of their size when displayed in columns
+private const val xOffset = 20
+private const val yOffset = 21
+
+fun RBuilder.boardComponent(board: Board) {
+    styledDiv {
+        css {
+            width = 100.vw
+        }
+        tableCards(cardColumns = board.playedCards)
+        wonderComponent(wonder = board.wonder)
+    }
+}
+
+private fun RBuilder.tableCards(cardColumns: List<List<TableCard>>) {
+    styledDiv {
+        css {
+            display = Display.flex
+            height = 40.vh
+            width = 100.vw
+        }
+        cardColumns.forEach { cards ->
+            tableCardColumn(cards = cards) {
+                attrs {
+                    key = cards.first().color.toString()
+                }
+            }
+        }
+    }
+}
+
+private fun RBuilder.tableCardColumn(cards: List<TableCard>, block: StyledDOMBuilder<DIV>.() -> Unit = {}) {
+    styledDiv {
+        css {
+            height = 40.vh
+            width = 15.vw
+            margin = "auto"
+            position = Position.relative
+        }
+        block()
+        cards.forEachIndexed { index, card ->
+            tableCard(card = card, indexInColumn = index) {
+                attrs { key = card.name }
+            }
+        }
+    }
+}
+
+private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: StyledDOMBuilder<DIV>.() -> Unit = {}) {
+    styledDiv {
+        css {
+            position = Position.absolute
+            zIndex = indexInColumn
+            transform {
+                translate(
+                    tx = (indexInColumn * xOffset).pct,
+                    ty = (indexInColumn * yOffset).pct
+                )
+            }
+        }
+        block()
+        cardImage(card = card) {
+            css {
+                maxWidth = 10.vw
+                maxHeight = 25.vh
+            }
+        }
+    }
+}
+
+private fun RBuilder.wonderComponent(wonder: ApiWonder) {
+    styledDiv {
+        css {
+            width = 100.vw
+            textAlign = TextAlign.center
+        }
+        styledImg(src="/images/wonders/${wonder.image}") {
+            css {
+                declarations["border-radius"] = "0.5%/1.5%"
+                boxShadow(color = Color.black, offsetX = 0.2.rem, offsetY = 0.2.rem, blurRadius = 0.5.rem)
+                maxHeight = 30.vh
+                maxWidth = 95.vw
+            }
+            attrs {
+                this.title = wonder.name
+                this.alt = "Wonder ${wonder.name}"
+            }
+        }
+    }
+}
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
new file mode 100644
index 00000000..b7abbeff
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
@@ -0,0 +1,39 @@
+package org.luxons.sevenwonders.ui.components.game
+
+import kotlinx.css.CSSBuilder
+import kotlinx.css.Color
+import kotlinx.css.properties.boxShadow
+import kotlinx.css.px
+import kotlinx.css.rem
+import kotlinx.html.IMG
+import kotlinx.html.title
+import org.luxons.sevenwonders.model.cards.TableCard
+import react.RBuilder
+import styled.StyledDOMBuilder
+import styled.css
+import styled.styledImg
+
+fun RBuilder.cardImage(card: TableCard, highlightColor: Color? = null, block: StyledDOMBuilder<IMG>.() -> Unit = {}) {
+    styledImg(src = "/images/cards/${card.image}") {
+        css {
+            highlightStyle(highlightColor)
+        }
+        attrs {
+            title = card.name
+            alt = "Card ${card.name}"
+        }
+        block()
+    }
+}
+
+private fun CSSBuilder.highlightStyle(highlightColor: Color?) {
+    if (highlightColor != null) {
+        boxShadow(
+            offsetX = 0.px,
+            offsetY = 0.px,
+            blurRadius = 1.rem,
+            spreadRadius = 0.1.rem,
+            color = highlightColor
+        )
+    }
+}
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
index 571c2169..2b6136af 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
@@ -80,18 +80,18 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
     }
 
     private fun RBuilder.turnInfoScene(turnInfo: PlayerTurnInfo) {
-        val bd = turnInfo.table.boards[turnInfo.playerIndex];
+        val board = turnInfo.table.boards[turnInfo.playerIndex]
         div {
             p { + turnInfo.message }
-//            boardComponent(board = bd)
+            boardComponent(board = board)
 //            handComponent(
 //                cards = turnInfo.hand,
 //                wonderUpgradable = turnInfo.wonderBuildability.isBuildable,
 //                prepareMove = props.prepareMove
 //            )
             productionBar(
-                gold = bd.gold,
-                production = bd.production
+                gold = board.gold,
+                production = board.production
             )
         }
     }