diff options
| -rw-r--r-- | sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt | 70 | ||||
| -rw-r--r-- | sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt | 47 | ||||
| -rw-r--r-- | sw-ui/src/main/resources/images/cards/back/placeholder.png | bin | 0 -> 9622 bytes |
3 files changed, 86 insertions, 31 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 fb5a0494..c5d4dd4a 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,31 +1,18 @@ 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.* 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.HTMLTag 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 org.luxons.sevenwonders.model.wonders.ApiWonderStage import react.RBuilder +import react.dom.* import styled.StyledDOMBuilder import styled.css import styled.styledDiv @@ -83,7 +70,7 @@ private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: Style styledDiv { css { position = Position.absolute - zIndex = indexInColumn + zIndex = indexInColumn + 2 // go above the board and the built wonder cards transform { translate( tx = (indexInColumn * xOffset).pct, @@ -105,20 +92,65 @@ private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: Style private fun RBuilder.wonderComponent(wonder: ApiWonder) { styledDiv { css { + position = Position.relative width = 100.vw - textAlign = TextAlign.center } 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}" } } + 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 + } + wonder.stages.forEach { + wonderStageElement(it) { + css { + wonderCardStyle() + } + } + } + } } } + +private fun StyledDOMBuilder<DIV>.wonderStageElement(it: ApiWonderStage, block: StyledDOMBuilder<HTMLTag>.() -> Unit) { + val back = it.cardBack + if (back != null) { + cardBackImage(back) { + block() + } + } else { + cardPlaceholderImage { + block() + } + } +} + +fun CSSBuilder.wonderCardStyle() { + maxWidth = 10.vw + maxHeight = 25.vh + margin(vertical = 0.px, horizontal = 6.3.pct) +} diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt index 9c31d51a..a2d0b8f2 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt @@ -1,15 +1,11 @@ package org.luxons.sevenwonders.ui.components.game -import kotlinx.css.CSSBuilder -import kotlinx.css.Color -import kotlinx.css.borderRadius -import kotlinx.css.pct +import kotlinx.css.* import kotlinx.css.properties.* -import kotlinx.css.px -import kotlinx.css.rem import kotlinx.html.IMG import kotlinx.html.title import org.luxons.sevenwonders.model.cards.Card +import org.luxons.sevenwonders.model.cards.CardBack import react.RBuilder import styled.StyledDOMBuilder import styled.css @@ -21,22 +17,49 @@ fun RBuilder.cardImage( highlightColor: Color? = null, block: StyledDOMBuilder<IMG>.() -> Unit = {} ) { - styledImg(src = card.imageSrc(faceDown)) { + if (faceDown) { + cardBackImage(card.back, highlightColor, block) + return + } + styledImg(src = "/images/cards/${card.image}") { css { cardImageStyle(highlightColor) } attrs { title = card.name - alt = if (faceDown) "Card back (${card.back.image})" else "Card ${card.name}" + alt = "Card ${card.name}" } block() } } -private fun Card.imageSrc(faceDown: Boolean): String = if (faceDown) { - "/images/cards/back/${back.image}" -} else { - "/images/cards/$image" +fun RBuilder.cardBackImage( + cardBack: CardBack, + highlightColor: Color? = null, + block: StyledDOMBuilder<IMG>.() -> Unit = {} +) { + styledImg(src = "/images/cards/back/${cardBack.image}") { + css { + cardImageStyle(highlightColor) + } + attrs { + alt = "Card back (${cardBack.image})" + } + block() + } +} + +fun RBuilder.cardPlaceholderImage(block: StyledDOMBuilder<IMG>.() -> Unit = {}) { + styledImg(src = "/images/cards/back/placeholder.png") { + css { + opacity = 0.20 + borderRadius = 5.pct + } + attrs { + alt = "Card placeholder" + } + block() + } } private fun CSSBuilder.cardImageStyle(highlightColor: Color?) { diff --git a/sw-ui/src/main/resources/images/cards/back/placeholder.png b/sw-ui/src/main/resources/images/cards/back/placeholder.png Binary files differnew file mode 100644 index 00000000..9bfcf9c6 --- /dev/null +++ b/sw-ui/src/main/resources/images/cards/back/placeholder.png |
