Rework GameBrowser style

Resolves:
https://github.com/joffrey-bion/seven-wonders/issues/68

7 files changed, 179 insertions, 37 deletions

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 1477dd98..f9ea80b5 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,11 @@ import styled.StyleSheet
 
 object GlobalStyles : StyleSheet("GlobalStyles", isStatic = true) {
 
+    val zeusBackground by css {
+        background = "url('images/backgrounds/zeus-temple.jpg') center no-repeat"
+        backgroundSize = "cover"
+    }
+
     val fullscreen by css {
         position = Position.fixed
         top = 0.px
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
index e060af9c..10adb648 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
@@ -44,6 +44,7 @@ private class CreateGameForm(props: CreateGameFormProps) : RComponent<CreateGame
                 }
 
                 bpInputGroup(
+                    large = true,
                     placeholder = "Game name",
                     onChange = { e ->
                         val input = e.currentTarget as HTMLInputElement
@@ -52,7 +53,6 @@ private class CreateGameForm(props: CreateGameFormProps) : RComponent<CreateGame
                     rightElement = createGameButton(),
                 )
             }
-            currentPlayerInfo()
         }
     }
 
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 ab7b3bac..2f1d3d16 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
@@ -1,16 +1,54 @@
 package org.luxons.sevenwonders.ui.components.gameBrowser
 
+import com.palantir.blueprintjs.Classes
+import com.palantir.blueprintjs.bpCard
 import kotlinx.css.*
+import kotlinx.html.classes
+import org.luxons.sevenwonders.ui.components.GlobalStyles
 import react.RBuilder
-import react.dom.*
+import react.dom.h1
 import styled.css
+import styled.getClassName
 import styled.styledDiv
+import styled.styledH2
 
 fun RBuilder.gameBrowser() = styledDiv {
     css {
-        margin(all = 1.rem)
+        +GlobalStyles.fullscreen
+        +GlobalStyles.zeusBackground
+    }
+    styledDiv {
+        attrs {
+            classes += Classes.DARK
+        }
+        css {
+            margin(horizontal = LinearDimension.auto)
+            padding(all = 1.rem)
+            maxWidth = 60.rem
+        }
+        styledDiv {
+            css {
+                display = Display.flex
+                justifyContent = JustifyContent.spaceBetween
+            }
+            h1 { +"Games" }
+            currentPlayerInfo()
+        }
+
+        bpCard(className = GameBrowserStyles.getClassName { it::createGameCard }) {
+            styledH2 {
+                css { +GameBrowserStyles.cardTitle }
+                +"Create a Game"
+            }
+            createGameForm {}
+        }
+
+        bpCard {
+            styledH2 {
+                css { +GameBrowserStyles.cardTitle }
+                +"Join a Game"
+            }
+            gameList()
+        }
     }
-    h1 { +"Games" }
-    createGameForm {}
-    gameList()
 }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowserStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowserStyles.kt
new file mode 100644
index 00000000..611991c2
--- /dev/null
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowserStyles.kt
@@ -0,0 +1,19 @@
+package org.luxons.sevenwonders.ui.components.gameBrowser
+
+import kotlinx.css.*
+import styled.StyleSheet
+
+object GameBrowserStyles : StyleSheet("GameBrowserStyles", isStatic = true) {
+
+    val cardTitle by css {
+        marginTop = 0.px
+    }
+
+    val createGameCard by css {
+        marginBottom = 1.rem
+    }
+
+    val gameTable by css {
+        width = 100.pct
+    }
+}
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt
index 1e74070a..dd93fcc9 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt
@@ -1,26 +1,17 @@
 package org.luxons.sevenwonders.ui.components.gameBrowser
 
-import com.palantir.blueprintjs.Intent
-import com.palantir.blueprintjs.bpButton
-import com.palantir.blueprintjs.bpHtmlTable
-import com.palantir.blueprintjs.bpIcon
-import com.palantir.blueprintjs.bpTag
+import com.palantir.blueprintjs.*
 import kotlinx.css.*
+import kotlinx.html.classes
 import kotlinx.html.title
 import org.luxons.sevenwonders.model.api.ConnectedPlayer
 import org.luxons.sevenwonders.model.api.LobbyDTO
 import org.luxons.sevenwonders.model.api.State
 import org.luxons.sevenwonders.ui.redux.RequestJoinGame
 import org.luxons.sevenwonders.ui.redux.connectStateAndDispatch
-import react.RBuilder
-import react.RComponent
-import react.RProps
-import react.RState
+import react.*
 import react.dom.*
-import styled.css
-import styled.styledDiv
-import styled.styledSpan
-import styled.styledTr
+import styled.*
 
 interface GameListStateProps : RProps {
     var connectedPlayer: ConnectedPlayer
@@ -36,7 +27,37 @@ interface GameListProps : GameListStateProps, GameListDispatchProps
 class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState>(props) {
 
     override fun RBuilder.render() {
+        if (props.games.isEmpty()) {
+            noGamesInfo()
+        } else {
+            gamesTable()
+        }
+    }
+
+    private fun RBuilder.noGamesInfo() {
+        bpNonIdealState(
+            icon = "geosearch",
+            title = "No games to join",
+        ) {
+            styledDiv {
+                attrs {
+                    classes += "bp3-running-text"
+                }
+                css {
+                    maxWidth = 35.rem
+                }
+                +"Nobody seems to be playing at the moment. "
+                +"Don't be disappointed, you can always create your own game, and play with bots if you're alone."
+            }
+        }
+    }
+
+    private fun RBuilder.gamesTable() {
         bpHtmlTable {
+            attrs {
+                className = GameBrowserStyles.getClassName { it::gameTable }
+            }
+            columnWidthsSpec()
             thead {
                 gameListHeaderRow()
             }
@@ -48,24 +69,84 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState
         }
     }
 
+    private fun RElementBuilder<IHTMLTableProps>.columnWidthsSpec() {
+        colGroup {
+            styledCol {
+                css {
+                    width = 40.rem
+                }
+            }
+            styledCol {
+                css {
+                    width = 5.rem
+                    textAlign = TextAlign.center
+                }
+            }
+            styledCol {
+                css {
+                    width = 5.rem
+                    textAlign = TextAlign.center // use inline style on th instead to overcome blueprint style
+                }
+            }
+            styledCol {
+                css {
+                    width = 3.rem
+                    textAlign = TextAlign.center
+                }
+            }
+        }
+    }
+
     private fun RBuilder.gameListHeaderRow() = tr {
-        th { +"Name" }
-        th { +"Status" }
-        th { +"Nb Players" }
-        th { +"Join" }
+        th {
+            +"Name"
+        }
+        th {
+            inlineStyles { gameTableHeaderCellStyle() }
+            +"Status"
+        }
+        th {
+            inlineStyles { gameTableHeaderCellStyle() }
+            +"Players"
+        }
+        th {
+            inlineStyles { gameTableHeaderCellStyle() }
+            +"Join"
+        }
     }
 
     private fun RBuilder.gameListItemRow(lobby: LobbyDTO) = styledTr {
-        css {
-            verticalAlign = VerticalAlign.middle
-        }
         attrs {
             key = lobby.id.toString()
         }
-        td { +lobby.name }
-        td { gameStatus(lobby.state) }
-        td { playerCount(lobby.players.size) }
-        td { joinButton(lobby) }
+        // inline styles necessary to overcome BlueprintJS's verticalAlign=top
+        td {
+            inlineStyles { gameTableCellStyle() }
+            +lobby.name
+        }
+        td {
+            inlineStyles {
+                textAlign = TextAlign.center
+                gameTableCellStyle()
+            }
+            gameStatus(lobby.state)
+        }
+        td {
+            inlineStyles { gameTableCellStyle() }
+            playerCount(lobby.players.size)
+        }
+        td {
+            inlineStyles { gameTableCellStyle() }
+            joinButton(lobby)
+        }
+    }
+
+    private fun StyledElement.gameTableHeaderCellStyle() {
+        textAlign = TextAlign.center
+    }
+
+    private fun StyledElement.gameTableCellStyle() {
+        verticalAlign = VerticalAlign.middle
     }
 
     private fun RBuilder.gameStatus(state: State) {
@@ -84,13 +165,16 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState
             css {
                 display = Display.flex
                 flexDirection = FlexDirection.row
-                alignItems = Align.center
+                justifyContent = JustifyContent.center
             }
             attrs {
                 title = "Number of players"
             }
             bpIcon(name = "people", title = null)
             styledSpan {
+                css {
+                    marginLeft = 0.3.rem
+                }
                 +nPlayers.toString()
             }
         }
@@ -100,6 +184,7 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState
         val joinability = lobby.joinability(props.connectedPlayer.displayName)
         bpButton(
             minimal = true,
+            large = true,
             title = joinability.tooltip,
             icon = "arrow-right",
             disabled = !joinability.canDo,
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
index 43a1592b..4b209979 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
@@ -11,8 +11,8 @@ private const val LOGO = "images/logo-7-wonders.png"
 fun RBuilder.home() = styledDiv {
     css {
         +GlobalStyles.fullscreen
+        +GlobalStyles.zeusBackground
         +HomeStyles.centerChildren
-        +HomeStyles.zeusBackground
     }
 
     img(src = LOGO, alt = "Seven Wonders") {}
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
index e55b9b47..10037b36 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
@@ -5,11 +5,6 @@ import styled.StyleSheet
 
 object HomeStyles : StyleSheet("HomeStyles", isStatic = true) {
 
-    val zeusBackground by css {
-        background = "url('images/backgrounds/zeus-temple.jpg') center no-repeat"
-        backgroundSize = "cover"
-    }
-
     val centerChildren by css {
         display = Display.flex
         flexDirection = FlexDirection.column