Add built wonder stage (cards below wonder)

3 files changed, 86 insertions, 31 deletions

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt
index fb5a0494..c5d4dd4a 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt
@@ -1,31 +1,18 @@
 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.*
 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.HTMLTag
 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 org.luxons.sevenwonders.model.wonders.ApiWonderStage
 import react.RBuilder
+import react.dom.*
 import styled.StyledDOMBuilder
 import styled.css
 import styled.styledDiv
@@ -83,7 +70,7 @@ private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: Style
     styledDiv {
         css {
             position = Position.absolute
-            zIndex = indexInColumn
+            zIndex = indexInColumn + 2 // go above the board and the built wonder cards
             transform {
                 translate(
                     tx = (indexInColumn * xOffset).pct,
@@ -105,20 +92,65 @@ private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: Style
 private fun RBuilder.wonderComponent(wonder: ApiWonder) {
     styledDiv {
         css {
+            position = Position.relative
             width = 100.vw
-            textAlign = TextAlign.center
         }
         styledImg(src = "/images/wonders/${wonder.image}") {
             css {
+                position = Position.absolute
+                left = 50.pct
+                top = 0.px
+                transform { translate((-50).pct) }
                 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
+                zIndex = 1 // go above the built wonder cards, but below the table cards
             }
             attrs {
                 this.title = wonder.name
                 this.alt = "Wonder ${wonder.name}"
             }
         }
+        styledDiv {
+            css {
+                position = Position.absolute
+                left = 50.pct
+                top = 0.px
+                transform { translate((-50).pct, (60).pct) }
+                display = Display.flex
+                justifyContent = JustifyContent.spaceAround
+                flexWrap = FlexWrap.nowrap
+                maxHeight = 30.vh // same as wonder
+                maxWidth = 95.vw // same as wonder
+                zIndex = 0 // below wonder
+            }
+            wonder.stages.forEach {
+                wonderStageElement(it) {
+                    css {
+                        wonderCardStyle()
+                    }
+                }
+            }
+        }
     }
 }
+
+private fun StyledDOMBuilder<DIV>.wonderStageElement(it: ApiWonderStage, block: StyledDOMBuilder<HTMLTag>.() -> Unit) {
+    val back = it.cardBack
+    if (back != null) {
+        cardBackImage(back) {
+            block()
+        }
+    } else {
+        cardPlaceholderImage {
+            block()
+        }
+    }
+}
+
+fun CSSBuilder.wonderCardStyle() {
+    maxWidth = 10.vw
+    maxHeight = 25.vh
+    margin(vertical = 0.px, horizontal = 6.3.pct)
+}
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
index 9c31d51a..a2d0b8f2 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
@@ -1,15 +1,11 @@
 package org.luxons.sevenwonders.ui.components.game
 
-import kotlinx.css.CSSBuilder
-import kotlinx.css.Color
-import kotlinx.css.borderRadius
-import kotlinx.css.pct
+import kotlinx.css.*
 import kotlinx.css.properties.*
-import kotlinx.css.px
-import kotlinx.css.rem
 import kotlinx.html.IMG
 import kotlinx.html.title
 import org.luxons.sevenwonders.model.cards.Card
+import org.luxons.sevenwonders.model.cards.CardBack
 import react.RBuilder
 import styled.StyledDOMBuilder
 import styled.css
@@ -21,22 +17,49 @@ fun RBuilder.cardImage(
     highlightColor: Color? = null,
     block: StyledDOMBuilder<IMG>.() -> Unit = {}
 ) {
-    styledImg(src = card.imageSrc(faceDown)) {
+    if (faceDown) {
+        cardBackImage(card.back, highlightColor, block)
+        return
+    }
+    styledImg(src = "/images/cards/${card.image}") {
         css {
             cardImageStyle(highlightColor)
         }
         attrs {
             title = card.name
-            alt = if (faceDown) "Card back (${card.back.image})" else "Card ${card.name}"
+            alt = "Card ${card.name}"
         }
         block()
     }
 }
 
-private fun Card.imageSrc(faceDown: Boolean): String = if (faceDown) {
-    "/images/cards/back/${back.image}"
-} else {
-    "/images/cards/$image"
+fun RBuilder.cardBackImage(
+    cardBack: CardBack,
+    highlightColor: Color? = null,
+    block: StyledDOMBuilder<IMG>.() -> Unit = {}
+) {
+    styledImg(src = "/images/cards/back/${cardBack.image}") {
+        css {
+            cardImageStyle(highlightColor)
+        }
+        attrs {
+            alt = "Card back (${cardBack.image})"
+        }
+        block()
+    }
+}
+
+fun RBuilder.cardPlaceholderImage(block: StyledDOMBuilder<IMG>.() -> Unit = {}) {
+    styledImg(src = "/images/cards/back/placeholder.png") {
+        css {
+            opacity = 0.20
+            borderRadius = 5.pct
+        }
+        attrs {
+            alt = "Card placeholder"
+        }
+        block()
+    }
 }
 
 private fun CSSBuilder.cardImageStyle(highlightColor: Color?) {
diff --git a/sw-ui/src/main/resources/images/cards/back/placeholder.png b/sw-ui/src/main/resources/images/cards/back/placeholder.png
new file mode 100644
index 00000000..9bfcf9c6
--- /dev/null
+++ b/sw-ui/src/main/resources/images/cards/back/placeholder.png