diff options
3 files changed, 166 insertions, 4 deletions
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt new file mode 100644 index 00000000..4324bad2 --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt @@ -0,0 +1,123 @@ +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.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.title +import org.luxons.sevenwonders.model.boards.Board +import org.luxons.sevenwonders.model.cards.TableCard +import org.luxons.sevenwonders.model.wonders.ApiWonder +import react.RBuilder +import styled.StyledDOMBuilder +import styled.css +import styled.styledDiv +import styled.styledImg + +// card offsets in % of their size when displayed in columns +private const val xOffset = 20 +private const val yOffset = 21 + +fun RBuilder.boardComponent(board: Board) { + styledDiv { + css { + width = 100.vw + } + tableCards(cardColumns = board.playedCards) + wonderComponent(wonder = board.wonder) + } +} + +private fun RBuilder.tableCards(cardColumns: List<List<TableCard>>) { + styledDiv { + css { + display = Display.flex + height = 40.vh + width = 100.vw + } + cardColumns.forEach { cards -> + tableCardColumn(cards = cards) { + attrs { + key = cards.first().color.toString() + } + } + } + } +} + +private fun RBuilder.tableCardColumn(cards: List<TableCard>, block: StyledDOMBuilder<DIV>.() -> Unit = {}) { + styledDiv { + css { + height = 40.vh + width = 15.vw + margin = "auto" + position = Position.relative + } + block() + cards.forEachIndexed { index, card -> + tableCard(card = card, indexInColumn = index) { + attrs { key = card.name } + } + } + } +} + +private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: StyledDOMBuilder<DIV>.() -> Unit = {}) { + styledDiv { + css { + position = Position.absolute + zIndex = indexInColumn + transform { + translate( + tx = (indexInColumn * xOffset).pct, + ty = (indexInColumn * yOffset).pct + ) + } + } + block() + cardImage(card = card) { + css { + maxWidth = 10.vw + maxHeight = 25.vh + } + } + } +} + +private fun RBuilder.wonderComponent(wonder: ApiWonder) { + styledDiv { + css { + width = 100.vw + textAlign = TextAlign.center + } + 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 = 30.vh + maxWidth = 95.vw + } + attrs { + this.title = wonder.name + this.alt = "Wonder ${wonder.name}" + } + } + } +} diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt new file mode 100644 index 00000000..b7abbeff --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt @@ -0,0 +1,39 @@ +package org.luxons.sevenwonders.ui.components.game + +import kotlinx.css.CSSBuilder +import kotlinx.css.Color +import kotlinx.css.properties.boxShadow +import kotlinx.css.px +import kotlinx.css.rem +import kotlinx.html.IMG +import kotlinx.html.title +import org.luxons.sevenwonders.model.cards.TableCard +import react.RBuilder +import styled.StyledDOMBuilder +import styled.css +import styled.styledImg + +fun RBuilder.cardImage(card: TableCard, highlightColor: Color? = null, block: StyledDOMBuilder<IMG>.() -> Unit = {}) { + styledImg(src = "/images/cards/${card.image}") { + css { + highlightStyle(highlightColor) + } + attrs { + title = card.name + alt = "Card ${card.name}" + } + block() + } +} + +private fun CSSBuilder.highlightStyle(highlightColor: Color?) { + if (highlightColor != null) { + boxShadow( + offsetX = 0.px, + offsetY = 0.px, + blurRadius = 1.rem, + spreadRadius = 0.1.rem, + color = highlightColor + ) + } +} diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt index 571c2169..2b6136af 100644 --- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt @@ -80,18 +80,18 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta } private fun RBuilder.turnInfoScene(turnInfo: PlayerTurnInfo) { - val bd = turnInfo.table.boards[turnInfo.playerIndex]; + val board = turnInfo.table.boards[turnInfo.playerIndex] div { p { + turnInfo.message } -// boardComponent(board = bd) + boardComponent(board = board) // handComponent( // cards = turnInfo.hand, // wonderUpgradable = turnInfo.wonderBuildability.isBuildable, // prepareMove = props.prepareMove // ) productionBar( - gold = bd.gold, - production = bd.production + gold = board.gold, + production = board.production ) } } |