Move lobby to Zeus temple background

Related:
https://github.com/joffrey-bion/seven-wonders/issues/69

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
+        }
+    }
+}