Replace viewport-relative dimensions by percents

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

2 files changed, 61 insertions, 55 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 bd6a9c2f..29bfb13a 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,11 +1,10 @@
 package org.luxons.sevenwonders.ui.components.game
 
 import kotlinx.css.*
-import kotlinx.css.properties.boxShadow
-import kotlinx.css.properties.transform
-import kotlinx.css.properties.translate
+import kotlinx.css.properties.*
 import kotlinx.html.DIV
 import kotlinx.html.HTMLTag
+import kotlinx.html.IMG
 import kotlinx.html.title
 import org.luxons.sevenwonders.model.boards.Board
 import org.luxons.sevenwonders.model.cards.TableCard
@@ -22,12 +21,9 @@ import styled.styledImg
 private const val xOffset = 20
 private const val yOffset = 21
 
-fun RBuilder.boardComponent(board: Board) {
+fun RBuilder.boardComponent(board: Board, block: StyledDOMBuilder<DIV>.() -> Unit = {}) {
     styledDiv {
-        css {
-            paddingTop = 3.rem
-            width = 100.vw
-        }
+        block()
         tableCards(cardColumns = board.playedCards)
         wonderComponent(wonder = board.wonder)
     }
@@ -37,8 +33,9 @@ private fun RBuilder.tableCards(cardColumns: List<List<TableCard>>) {
     styledDiv {
         css {
             display = Display.flex
-            height = 40.vh
-            width = 100.vw
+            justifyContent = JustifyContent.spaceAround
+            height = 45.pct
+            width = 100.pct
         }
         cardColumns.forEach { cards ->
             tableCardColumn(cards = cards) {
@@ -53,9 +50,9 @@ private fun RBuilder.tableCards(cardColumns: List<List<TableCard>>) {
 private fun RBuilder.tableCardColumn(cards: List<TableCard>, block: StyledDOMBuilder<DIV>.() -> Unit = {}) {
     styledDiv {
         css {
-            height = 40.vh
-            width = 15.vw
-            margin = "auto"
+            height = 100.pct
+            width = 13.pct
+            marginRight = 4.pct
             position = Position.relative
         }
         block()
@@ -67,8 +64,9 @@ private fun RBuilder.tableCardColumn(cards: List<TableCard>, block: StyledDOMBui
     }
 }
 
-private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: StyledDOMBuilder<DIV>.() -> Unit = {}) {
-    styledDiv {
+private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: StyledDOMBuilder<IMG>.() -> Unit = {}) {
+    val highlightColor = if (card.playedDuringLastMove) Color.gold else null
+    cardImage(card = card, highlightColor = highlightColor) {
         css {
             position = Position.absolute
             zIndex = indexInColumn + 2 // go above the board and the built wonder cards
@@ -78,15 +76,10 @@ private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: Style
                     ty = (indexInColumn * yOffset).pct
                 )
             }
+            maxWidth = 100.pct
+            maxHeight = 70.pct
         }
         block()
-        val highlightColor = if (card.playedDuringLastMove) Color.gold else null
-        cardImage(card = card, highlightColor = highlightColor) {
-            css {
-                maxWidth = 10.vw
-                maxHeight = 25.vh
-            }
-        }
     }
 }
 
@@ -94,42 +87,36 @@ private fun RBuilder.wonderComponent(wonder: ApiWonder) {
     styledDiv {
         css {
             position = Position.relative
-            width = 100.vw
-        }
-        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}"
-            }
+            width = 100.pct
+            height = 40.pct
         }
         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
+                transform { translateX((-50).pct) }
+                height = 100.pct
+                maxWidth = 95.pct // same as wonder
+            }
+            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 = 100.pct
+                    maxWidth = 100.pct
+                    zIndex = 1 // go above the built wonder cards, but below the table cards
+                }
+                attrs {
+                    this.title = wonder.name
+                    this.alt = "Wonder ${wonder.name}"
+                }
             }
-            wonder.stages.forEach {
-                wonderStageElement(it) {
+            wonder.stages.forEachIndexed { index, stage ->
+                wonderStageElement(stage) {
                     css {
                         wonderCardStyle()
+                        left = stagePositionPercent(index, wonder.stages.size).pct
                     }
                 }
             }
@@ -151,7 +138,15 @@ private fun StyledDOMBuilder<DIV>.wonderStageElement(it: ApiWonderStage, block:
 }
 
 fun CSSBuilder.wonderCardStyle() {
-    maxWidth = 10.vw
-    maxHeight = 25.vh
-    margin(vertical = 0.px, horizontal = 6.3.pct)
+    position = Position.absolute
+    top = 60.pct // makes the cards stick out of the bottom of the wonder
+    maxWidth = 24.pct // ratio of card width to wonder width
+    maxHeight = 90.pct // ratio of card height to wonder height
+    zIndex = -1 // below wonder
+}
+
+private fun stagePositionPercent(stageIndex: Int, nbStages: Int): Double = when(nbStages) {
+    2 -> 37.5 + stageIndex * 29.8 // 37.5 (29.8) 67.3
+    4 -> -1.5 + stageIndex * 26.7 // -1.5 (26.6) 25.1 (26.8) 51.9 (26.7) 78.6
+    else -> 7.9 + stageIndex * 30.0
 }
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 fe274913..2bf98009 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
@@ -56,12 +56,21 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
         val leftBoard = turnInfo.getBoard(RelativeBoardPosition.LEFT)
         val rightBoard = turnInfo.getBoard(RelativeBoardPosition.RIGHT)
         val topBoards = (turnInfo.table.boards - board - leftBoard - rightBoard).reversed()
-        div {
+        styledDiv {
+            css {
+                height = 100.pct
+            }
             turnInfo.scoreBoard?.let {
                 scoreTableOverlay(it, props.players, props.leaveGame)
             }
             actionInfo(turnInfo.message)
-            boardComponent(board = board)
+            boardComponent(board = board) {
+                css {
+                    padding(all = 7.rem) // to fit the action info message & board summaries
+                    width = 100.pct
+                    height = 100.pct
+                }
+            }
             leftPlayerBoardSummary(leftBoard)
             rightPlayerBoardSummary(rightBoard)
             if (topBoards.isNotEmpty()) {
@@ -85,7 +94,9 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
         styledDiv {
             css {
                 classes.add("bp3-dark")
-                display = Display.inlineBlock // so that the cards below don't overlap, but the width is not full
+                position = Position.fixed
+                top = 0.pct
+                left = 0.pct
                 margin(all = 0.4.rem)
                 maxWidth = 25.pct // leave space for 4 board summaries when there are 7 players
             }