From 2beac86a2c6708dbc15a9ee1b1edb2204af0e2fb Mon Sep 17 00:00:00 2001 From: Joffrey Bion Date: Mon, 1 Jun 2020 18:52:47 +0200 Subject: Replace viewport-relative dimensions by percents Resolves: https://github.com/joffrey-bion/seven-wonders/issues/23 --- .../sevenwonders/ui/components/game/Board.kt | 99 ++++++++++------------ .../sevenwonders/ui/components/game/GameScene.kt | 17 +++- 2 files changed, 61 insertions(+), 55 deletions(-) (limited to 'sw-ui') 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
.() -> 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>) { 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>) { private fun RBuilder.tableCardColumn(cards: List, block: StyledDOMBuilder
.() -> 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, block: StyledDOMBui } } -private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: StyledDOMBuilder
.() -> Unit = {}) { - styledDiv { +private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: StyledDOMBuilder.() -> 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
.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