summaryrefslogtreecommitdiff
path: root/sw-ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'sw-ui/src')
-rw-r--r--sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt99
-rw-r--r--sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt17
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
}
bgstack15