diff options
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 |