Add military tokens to the board

10 files changed, 66 insertions, 20 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 03177cca..30efc894 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
@@ -7,6 +7,7 @@ import kotlinx.html.HTMLTag
 import kotlinx.html.IMG
 import kotlinx.html.title
 import org.luxons.sevenwonders.model.boards.Board
+import org.luxons.sevenwonders.model.boards.Military
 import org.luxons.sevenwonders.model.cards.TableCard
 import org.luxons.sevenwonders.model.wonders.ApiWonder
 import org.luxons.sevenwonders.model.wonders.ApiWonderStage
@@ -25,7 +26,7 @@ fun RBuilder.boardComponent(board: Board, block: StyledDOMBuilder<DIV>.() -> Uni
     styledDiv {
         block()
         tableCards(cardColumns = board.playedCards)
-        wonderComponent(wonder = board.wonder)
+        wonderComponent(wonder = board.wonder, military = board.military)
     }
 }
 
@@ -83,7 +84,7 @@ private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: Style
     }
 }
 
-private fun RBuilder.wonderComponent(wonder: ApiWonder) {
+private fun RBuilder.wonderComponent(wonder: ApiWonder, military: Military) {
     styledDiv {
         css {
             position = Position.relative
@@ -112,11 +113,26 @@ private fun RBuilder.wonderComponent(wonder: ApiWonder) {
                     this.alt = "Wonder ${wonder.name}"
                 }
             }
+            victoryPoints(military.totalPoints) {
+                css {
+                    position = Position.absolute
+                    top = 25.pct // below the wonder name
+                    left = 60.pct
+                    zIndex = 2 // go above the wonder, but below the table cards
+                }
+            }
+            defeatTokenCount(military.nbDefeatTokens) {
+                css {
+                    position = Position.absolute
+                    top = 25.pct // below the wonder name
+                    left = 80.pct
+                    zIndex = 2 // go above the wonder, but below the table cards
+                }
+            }
             wonder.stages.forEachIndexed { index, stage ->
                 wonderStageElement(stage) {
                     css {
-                        wonderCardStyle()
-                        left = stagePositionPercent(index, wonder.stages.size).pct
+                        wonderCardStyle(index, wonder.stages.size)
                     }
                 }
             }
@@ -124,6 +140,38 @@ private fun RBuilder.wonderComponent(wonder: ApiWonder) {
     }
 }
 
+private fun RBuilder.victoryPoints(points: Int, block: StyledDOMBuilder<DIV>.() -> Unit = {}) {
+    boardToken("military/victory1", points, block)
+}
+
+private fun RBuilder.defeatTokenCount(nbDefeatTokens: Int, block: StyledDOMBuilder<DIV>.() -> Unit = {}) {
+    boardToken("military/defeat1", nbDefeatTokens, block)
+}
+
+private fun RBuilder.boardToken(tokenName: String, count: Int, block: StyledDOMBuilder<DIV>.() -> Unit) {
+    tokenWithCount(
+        tokenName = tokenName,
+        count = count,
+        countPosition = TokenCountPosition.RIGHT,
+        brightText = true
+    ) {
+        css {
+            filter = "drop-shadow(0.2rem 0.2rem 0.5rem black)"
+            height = 15.pct
+        }
+        block()
+    }
+}
+
+private fun CSSBuilder.wonderCardStyle(stageIndex: Int, nbStages: Int) {
+    position = Position.absolute
+    top = 60.pct
+    left = stagePositionPercent(stageIndex, nbStages).pct
+    maxWidth = 24.pct
+    maxHeight = 90.pct
+    zIndex = -1
+}
+
 private fun RBuilder.wonderStageElement(stage: ApiWonderStage, block: StyledDOMBuilder<HTMLTag>.() -> Unit) {
     val back = stage.cardBack
     if (back != null) {
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 715fc25d..05a043bf 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
@@ -103,7 +103,7 @@ private fun StyledDOMBuilder<DIV>.generalCounts(
         brightText = countPosition == TokenCountPosition.OVER
     )
     tokenWithCount(
-        tokenName = "military",
+        tokenName = "military/shield",
         count = board.military.nbShields,
         imgSize = tokenSize,
         countPosition = countPosition,
@@ -117,21 +117,21 @@ private fun RBuilder.scienceTokens(
     sciencePosition: TokenCountPosition
 ) {
     tokenWithCount(
-        tokenName = "compass",
+        tokenName = "science/compass",
         count = board.science.nbCompasses,
         imgSize = tokenSize,
         countPosition = sciencePosition,
         brightText = sciencePosition == TokenCountPosition.OVER
     )
     tokenWithCount(
-        tokenName = "cog",
+        tokenName = "science/cog",
         count = board.science.nbWheels,
         imgSize = tokenSize,
         countPosition = sciencePosition,
         brightText = sciencePosition == TokenCountPosition.OVER
     )
     tokenWithCount(
-        tokenName = "tablet",
+        tokenName = "science/tablet",
         count = board.science.nbTablets,
         imgSize = tokenSize,
         countPosition = sciencePosition,
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
index a3e4cd11..b7684b2b 100644
--- 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
@@ -54,7 +54,7 @@ private fun RBuilder.fixedResources(resources: List<CountedResource>) {
             display = Display.flex
         }
         resources.forEach {
-            tokenWithCount(tokenName = getResourceTokenName(it.type), count = it.count) {
+            tokenWithCount(tokenName = getResourceTokenName(it.type), count = it.count, imgSize = 3.rem) {
                 attrs { key = it.type.toString() }
                 css { marginLeft = 1.rem }
             }
@@ -85,7 +85,7 @@ private fun RBuilder.resourceChoice(types: Set<ResourceType>, block: StyledDOMBu
         }
         block()
         for ((i, t) in types.withIndex()) {
-            tokenImage(tokenName = getResourceTokenName(t)) {
+            tokenImage(tokenName = getResourceTokenName(t), size = 3.rem) {
                 attrs { this.key = t.toString() }
             }
             if (i < types.indices.last) {
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt
index d8ace2ee..7d19b17a 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt
@@ -34,7 +34,7 @@ fun RBuilder.tokenWithCount(
     tokenName: String,
     count: Int,
     title: String = tokenName,
-    imgSize: LinearDimension = 3.rem,
+    imgSize: LinearDimension? = null,
     countPosition: TokenCountPosition = TokenCountPosition.RIGHT,
     brightText: Boolean = false,
     customCountStyle: CSSBuilder.() -> Unit = {},
@@ -42,7 +42,7 @@ fun RBuilder.tokenWithCount(
 ) {
     styledDiv {
         block()
-        val tokenCountSize = imgSize * 0.6
+        val tokenCountSize = if (imgSize != null) imgSize * 0.6 else 1.5.rem
         when (countPosition) {
             TokenCountPosition.RIGHT -> {
                 tokenImage(tokenName, title = title, size = imgSize)
@@ -84,12 +84,16 @@ fun RBuilder.tokenWithCount(
 fun RBuilder.tokenImage(
     tokenName: String,
     title: String = tokenName,
-    size: LinearDimension = 3.rem,
+    size: LinearDimension?,
     block: StyledDOMBuilder<IMG>.() -> Unit = {}
 ) {
     styledImg(src = getTokenImagePath(tokenName)) {
         css {
-            tokenImageStyle(size)
+            height = size ?: 100.pct
+            if (size != null) {
+                width = size
+            }
+            verticalAlign = VerticalAlign.middle
         }
         attrs {
             this.title = title
@@ -101,12 +105,6 @@ fun RBuilder.tokenImage(
 
 private fun getTokenImagePath(tokenName: String) = "/images/tokens/$tokenName.png"
 
-private fun CSSBuilder.tokenImageStyle(size: LinearDimension) {
-    height = size
-    width = size
-    verticalAlign = VerticalAlign.middle
-}
-
 private fun CSSBuilder.tokenCountStyle(
     size: LinearDimension,
     brightText: Boolean,
diff --git a/sw-ui/src/main/resources/images/tokens/military/defeat1.png b/sw-ui/src/main/resources/images/tokens/military/defeat1.png
new file mode 100644
index 00000000..00a615c7
--- /dev/null
+++ b/sw-ui/src/main/resources/images/tokens/military/defeat1.png
diff --git a/sw-ui/src/main/resources/images/tokens/military.png b/sw-ui/src/main/resources/images/tokens/military/shield.png
index 3a0e1dea..3a0e1dea 100644
--- a/sw-ui/src/main/resources/images/tokens/military.png
+++ b/sw-ui/src/main/resources/images/tokens/military/shield.png
diff --git a/sw-ui/src/main/resources/images/tokens/military/victory1.png b/sw-ui/src/main/resources/images/tokens/military/victory1.png
new file mode 100644
index 00000000..6b9aff29
--- /dev/null
+++ b/sw-ui/src/main/resources/images/tokens/military/victory1.png
diff --git a/sw-ui/src/main/resources/images/tokens/cog.png b/sw-ui/src/main/resources/images/tokens/science/cog.png
index 61250d8a..61250d8a 100644
--- a/sw-ui/src/main/resources/images/tokens/cog.png
+++ b/sw-ui/src/main/resources/images/tokens/science/cog.png
diff --git a/sw-ui/src/main/resources/images/tokens/compass.png b/sw-ui/src/main/resources/images/tokens/science/compass.png
index 6497e34f..6497e34f 100644
--- a/sw-ui/src/main/resources/images/tokens/compass.png
+++ b/sw-ui/src/main/resources/images/tokens/science/compass.png
diff --git a/sw-ui/src/main/resources/images/tokens/tablet.png b/sw-ui/src/main/resources/images/tokens/science/tablet.png
index 954fd9ef..954fd9ef 100644
--- a/sw-ui/src/main/resources/images/tokens/tablet.png
+++ b/sw-ui/src/main/resources/images/tokens/science/tablet.png