diff options
Diffstat (limited to 'sw-ui/src/main/kotlin')
7 files changed, 143 insertions, 46 deletions
diff --git a/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjsHelpers.kt b/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjsHelpers.kt index 7869198f..721fdaca 100644 --- a/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjsHelpers.kt +++ b/sw-ui/src/main/kotlin/com/palantir/blueprintjs/blueprintjsHelpers.kt @@ -92,16 +92,18 @@ fun RBuilder.bpTag( fill: Boolean? = null, active: Boolean? = null, icon: String? = null, + className: String? = null, block: RHandler<ITagProps> = {}, ): ReactElement = child(Tag::class) { attrs { - this.intent = intent - this.minimal = minimal - this.large = large - this.round = round - this.fill = fill - this.icon = icon - this.active = active + intent?.let { this.intent = it } + minimal?.let { this.minimal = it } + large?.let { this.large = it } + round?.let { this.round = it } + fill?.let { this.fill = it } + icon?.let { this.icon = it } + active?.let { this.active = it } + className?.let { this.className = it } } block() } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt index a4ffed64..9ba5951a 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt @@ -6,6 +6,8 @@ import styled.StyleSheet object GlobalStyles : StyleSheet("GlobalStyles", isStatic = true) { + val preGameWidth = 60.rem + val zeusBackground by css { background = "url('images/backgrounds/zeus-temple.jpg') center no-repeat" backgroundSize = "cover" diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt index 479c7ea0..1a38853e 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt @@ -24,7 +24,7 @@ fun RBuilder.gameBrowser() = styledDiv { } css { margin(horizontal = LinearDimension.auto) - maxWidth = 60.rem + maxWidth = GlobalStyles.preGameWidth } styledDiv { css { diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt index a50a803d..0cd9b066 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt @@ -16,9 +16,7 @@ import react.RState import react.dom.h1 import react.dom.h3 import react.dom.h4 -import styled.css -import styled.styledDiv -import styled.styledH2 +import styled.* private val BOT_NAMES = listOf("Wall-E", "B-Max", "Sonny", "T-800", "HAL", "GLaDOS") @@ -50,14 +48,30 @@ class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props) styledDiv { css { +GlobalStyles.fullscreen - +GlobalStyles.papyrusBackground + +GlobalStyles.zeusBackground padding(all = 1.rem) } - h1 { +"${currentGame.name} — Lobby" } - radialPlayerList(currentGame.players, currentPlayer) - actionButtons(currentPlayer, currentGame) - if (currentPlayer.isGameOwner) { - setupPanel(currentGame) + styledDiv { + css { + classes.add(Classes.DARK) + +LobbyStyles.contentContainer + } + h1 { +"${currentGame.name} — Lobby" } + + radialPlayerList(currentGame.players, currentPlayer) { + css { + // to make players more readable on the background + background = "radial-gradient(closest-side, black 20%, transparent)" + // make it bigger so the background covers more ground + width = 40.rem + height = 40.rem + } + } + actionButtons(currentPlayer, currentGame) + + if (currentPlayer.isGameOwner) { + setupPanel(currentGame) + } } } } @@ -65,7 +79,7 @@ class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props) private fun RBuilder.actionButtons(currentPlayer: PlayerDTO, currentGame: LobbyDTO) { styledDiv { css { - position = Position.fixed + position = Position.absolute bottom = 2.rem left = 50.pct transform { translate((-50).pct) } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt index 1d9d8e4c..bbfc491f 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt @@ -1,22 +1,20 @@ package org.luxons.sevenwonders.ui.components.lobby import kotlinx.css.* +import org.luxons.sevenwonders.ui.components.GlobalStyles import styled.StyleSheet object LobbyStyles : StyleSheet("LobbyStyles", isStatic = true) { + val contentContainer by css { + margin(horizontal = LinearDimension.auto) + maxWidth = GlobalStyles.preGameWidth + } + val setupPanel by css { position = Position.fixed top = 2.rem right = 1.rem - width = 15.rem - } - - val wonderTagSideA by css { - backgroundColor = Color.seaGreen - } - - val wonderTagSideB by css { - backgroundColor = Color.darkRed + width = 20.rem } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt index c316f6e5..c75577da 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt @@ -3,6 +3,7 @@ package org.luxons.sevenwonders.ui.components.lobby import com.palantir.blueprintjs.bpIcon import com.palantir.blueprintjs.bpTag import kotlinx.css.* +import kotlinx.html.DIV import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.model.api.actions.Icon import org.luxons.sevenwonders.model.wonders.WonderSide @@ -12,13 +13,17 @@ import react.buildElement import react.dom.* import styled.* -fun RBuilder.radialPlayerList(players: List<PlayerDTO>, currentPlayer: PlayerDTO): ReactElement { +fun RBuilder.radialPlayerList( + players: List<PlayerDTO>, + currentPlayer: PlayerDTO, + block: StyledDOMBuilder<DIV>.() -> Unit = {}, +): ReactElement { val playerItems = players // - .map { PlayerItem.Player(it, it.username == currentPlayer.username) } + .map { PlayerItem.Player(it) } .growWithPlaceholders(targetSize = 3) .withUserFirst(currentPlayer) - val tableImg = buildElement { roundTableImg() } + val tableImg = buildElement { table(200.px, 15.px) } return radialList( items = playerItems, @@ -32,16 +37,10 @@ fun RBuilder.radialPlayerList(players: List<PlayerDTO>, currentPlayer: PlayerDTO firstItemAngleDegrees = 180, // self at the bottom direction = Direction.COUNTERCLOCKWISE, // new players sit to the right of last player ), + block = block, ) } -private fun RBuilder.roundTableImg(): ReactElement = img(src = "images/round-table.png", alt = "Round table") { - attrs { - width = "200" - height = "200" - } -} - private fun List<PlayerItem>.growWithPlaceholders(targetSize: Int): List<PlayerItem> = when { size < targetSize -> this + List(targetSize - size) { PlayerItem.Placeholder(size + it) } else -> this @@ -60,7 +59,7 @@ private sealed class PlayerItem { abstract val opacity: Double abstract val icon: ReactElement - data class Player(val player: PlayerDTO, val isMe: Boolean) : PlayerItem() { + data class Player(val player: PlayerDTO) : PlayerItem() { override val key = player.username override val playerText = player.displayName override val wonderText = "${player.wonder.name} ${player.wonder.side.name}" @@ -118,16 +117,17 @@ private fun RBuilder.playerElement(playerItem: PlayerItem) { styledDiv { css { margin(top = 0.3.rem) - } - bpTag(round = true) { - attrs { - className = LobbyStyles.getClassName { - when (playerItem.player.wonder.side) { - WonderSide.A -> it::wonderTagSideA - WonderSide.B -> it::wonderTagSideB - } + + // this is to overcome ".bp3-dark .bp3-tag" on the nested bpTag + children(".wonder-tag") { + color = Color("#f5f8fa") // blueprintjs dark theme color (removed by .bp3-tag) + backgroundColor = when (playerItem.player.wonder.side) { + WonderSide.A -> Color.seaGreen + WonderSide.B -> Color.darkRed } } + } + bpTag(round = true, className = "wonder-tag") { +playerItem.wonderText } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt new file mode 100644 index 00000000..7051652a --- /dev/null +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt @@ -0,0 +1,81 @@ +package org.luxons.sevenwonders.ui.components.lobby + +import kotlinx.css.* +import kotlinx.css.properties.* +import kotlinx.html.DIV +import react.RBuilder +import styled.StyledDOMBuilder +import styled.animation +import styled.css +import styled.styledDiv + +private const val FIRE_REFLECTION_COLOR = "#b85e00" + +fun RBuilder.table(diameter: LinearDimension, borderSize: LinearDimension = 20.px) { + circle(diameter) { + css { + backgroundColor = Color("#3d1e0e") + } + circle(diameter = diameter - borderSize) { + css { + position = Position.absolute + top = borderSize / 2 + left = borderSize / 2 + background = "linear-gradient(45deg, #88541e, #995645, #52251a)" + } + } + + // flame reflection coming from bottom-right + overlayCircle(diameter) { + css { + background = "linear-gradient(-45deg, $FIRE_REFLECTION_COLOR 10%, transparent 50%)" + opacityAnimation(duration = 1.3.s) + } + } + // flame reflection coming from bottom-left + overlayCircle(diameter) { + css { + background = "linear-gradient(45deg, $FIRE_REFLECTION_COLOR 20%, transparent 40%)" + opacityAnimation(duration = 0.8.s) + } + } + } +} + +private fun RBuilder.overlayCircle(diameter: LinearDimension, block: StyledDOMBuilder<DIV>.() -> Unit) { + circle(diameter) { + css { + position = Position.absolute + top = 0.px + left = 0.px + } + block() + } +} + +private fun RBuilder.circle(diameter: LinearDimension, block: StyledDOMBuilder<DIV>.() -> Unit) { + styledDiv { + css { + width = diameter + height = diameter + borderRadius = 50.pct + } + block() + } +} + +private fun CSSBuilder.opacityAnimation(duration: Time) { + animation( + duration = duration, + direction = AnimationDirection.alternate, + iterationCount = IterationCount.infinite, + timing = cubicBezier(0.4, 0.4, 0.4, 2.0) + ) { + from { + opacity = 0.0 + } + to { + opacity = 0.35 + } + } +} |