diff options
Diffstat (limited to 'sw-ui-kt/src/main/kotlin/org')
4 files changed, 89 insertions, 48 deletions
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt index 318f49f4..c1bbf460 100644 --- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt @@ -1,17 +1,28 @@ package org.luxons.sevenwonders.ui.components.gameBrowser -import kotlinx.html.InputType -import kotlinx.html.js.onChangeFunction +import com.palantir.blueprintjs.Intent +import com.palantir.blueprintjs.bpButton +import com.palantir.blueprintjs.bpInputGroup +import com.palantir.blueprintjs.org.luxons.sevenwonders.ui.utils.createElement +import kotlinx.css.Display +import kotlinx.css.FlexDirection +import kotlinx.css.JustifyContent +import kotlinx.css.display +import kotlinx.css.flexDirection +import kotlinx.css.justifyContent import kotlinx.html.js.onSubmitFunction import org.luxons.sevenwonders.ui.redux.RequestCreateGameAction import org.luxons.sevenwonders.ui.redux.connectDispatch import org.w3c.dom.HTMLInputElement +import org.w3c.dom.events.Event import react.RBuilder import react.RClass import react.RComponent import react.RProps import react.RState import react.dom.* +import styled.css +import styled.styledDiv private interface CreateGameFormProps: RProps { var createGame: (String) -> Unit @@ -26,22 +37,40 @@ private class CreateGameForm(props: CreateGameFormProps): RComponent<CreateGameF } override fun RBuilder.render() { - form { - attrs.onSubmitFunction = { props.createGame(state.gameName) } - - input(type = InputType.text) { + styledDiv { + css { + display = Display.flex + flexDirection = FlexDirection.row + justifyContent = JustifyContent.spaceBetween + } + form { attrs { - value = state.gameName - onChangeFunction = { e -> + onSubmitFunction = { e -> createGame(e) } + } + + bpInputGroup( + placeholder = "Game name", + onChange = { e -> val input = e.currentTarget as HTMLInputElement setState(transformState = { CreateGameFormState(input.value) }) - } - } + }, + rightElement = createGameButton() + ) } - - input(type = InputType.submit) {} + // TODO + div { +"PLAYER INFO HERE" } + //playerInfo() } } + + private fun createGameButton() = createElement { + bpButton(minimal = true, intent = Intent.PRIMARY, icon = "add", onClick = { e -> createGame(e) }) + } + + private fun createGame(e: Event) { + e.preventDefault() // prevents refreshing the page when pressing Enter + props.createGame(state.gameName) + } } val createGameForm: RClass<RProps> = connectDispatch(CreateGameForm::class) { dispatch, _ -> diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt index 206ef749..e32409e4 100644 --- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt @@ -1,8 +1,19 @@ package org.luxons.sevenwonders.ui.components.gameBrowser +import com.palantir.blueprintjs.Classes +import com.palantir.blueprintjs.Intent +import com.palantir.blueprintjs.bpButton +import com.palantir.blueprintjs.bpIcon +import com.palantir.blueprintjs.bpTag +import kotlinx.css.Align +import kotlinx.css.Display +import kotlinx.css.FlexDirection import kotlinx.css.VerticalAlign +import kotlinx.css.alignItems +import kotlinx.css.display +import kotlinx.css.flexDirection import kotlinx.css.verticalAlign -import kotlinx.html.js.onClickFunction +import kotlinx.html.classes import kotlinx.html.title import org.luxons.sevenwonders.model.api.LobbyDTO import org.luxons.sevenwonders.model.api.State @@ -14,7 +25,9 @@ import react.RProps import react.RState import react.dom.* import styled.css +import styled.styledDiv import styled.styledSpan +import styled.styledTr interface GameListStateProps : RProps { var games: List<LobbyDTO> @@ -30,6 +43,9 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState override fun RBuilder.render() { table { + attrs { + classes = setOf(Classes.HTML_TABLE) + } thead { gameListHeaderRow() } @@ -49,58 +65,54 @@ private fun RBuilder.gameListHeaderRow() = tr { th { +"Join" } } -private fun RBuilder.gameListItemRow(lobby: LobbyDTO, joinGame: (Long) -> Unit) = tr { +private fun RBuilder.gameListItemRow(lobby: LobbyDTO, joinGame: (Long) -> Unit) = styledTr { + css { + verticalAlign = VerticalAlign.middle + } attrs { key = lobby.id.toString() } - th { +lobby.name } - th { gameStatus(lobby.state) } - th { playerCount(lobby.players.size) } - th { joinButton(lobby, joinGame) } + td { +lobby.name } + td { gameStatus(lobby.state) } + td { playerCount(lobby.players.size) } + td { joinButton(lobby, joinGame) } } private fun RBuilder.gameStatus(state: State) { - // TODO - // <Tag minimal intent={statusIntents[state]}>{state}</Tag> - // const statusIntents = { - // 'LOBBY': Intent.SUCCESS, - // 'PLAYING': Intent.WARNING, - // }; - span { + val intent = when(state) { + State.LOBBY -> Intent.SUCCESS + State.PLAYING -> Intent.WARNING + } + bpTag(minimal = true, intent = intent) { +state.toString() } } private fun RBuilder.playerCount(nPlayers: Int) { - //<div title='Number of players'> - // <Icon className="playerCountIcon" icon="people" title={false} /> - // <span className="playerCount"> {nbPlayers}</span> - //</div>; - - // CSS: - // .playerCountIcon, .playerCount { - // vertical-align: middle; - // } - div { + styledDiv { + css { + display = Display.flex + flexDirection = FlexDirection.row + alignItems = Align.center + } attrs { title = "Number of players" } + bpIcon(name = "people", title = null) styledSpan { - css { - verticalAlign = VerticalAlign.middle - } +nPlayers.toString() } } } private fun RBuilder.joinButton(lobby: LobbyDTO, joinGame: (Long) -> Unit) { - button { - attrs { - disabled = lobby.state != State.LOBBY - onClickFunction = { joinGame(lobby.id) } - } - } + bpButton( + minimal = true, + title = "Join Game", + icon = "arrow-right", + disabled = lobby.state != State.LOBBY, + onClick = { joinGame(lobby.id) } + ) } val gameList = connect<GameListStateProps, GameListDispatchProps, GameListProps>( diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt index 91f6e291..b0a7b5e2 100644 --- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt @@ -2,7 +2,7 @@ package org.luxons.sevenwonders.ui.components.home import com.palantir.blueprintjs.Intent import com.palantir.blueprintjs.bpButton -import com.palantir.blueprintjs.inputGroup +import com.palantir.blueprintjs.bpInputGroup import com.palantir.blueprintjs.org.luxons.sevenwonders.ui.utils.createElement import kotlinx.html.js.onSubmitFunction import org.luxons.sevenwonders.ui.redux.RequestChooseName @@ -32,7 +32,7 @@ private class ChooseNameForm(props: ChooseNameFormProps): RComponent<ChooseNameF override fun RBuilder.render() { form { attrs.onSubmitFunction = { e -> chooseUsername(e) } - inputGroup( + bpInputGroup( large = true, placeholder = "Username", rightElement = submitButton(), diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt index f096c5db..7c6d688f 100644 --- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt @@ -2,7 +2,7 @@ package org.luxons.sevenwonders.ui.components.lobby import com.palantir.blueprintjs.IconName import com.palantir.blueprintjs.Intent -import com.palantir.blueprintjs.icon +import com.palantir.blueprintjs.bpIcon import kotlinx.css.Align import kotlinx.css.Display import kotlinx.css.FlexDirection @@ -104,5 +104,5 @@ private fun RBuilder.playerPlaceholder(): ReactElement = styledDiv { private fun RBuilder.userIcon(isUser: Boolean, isOwner: Boolean, title: String?): ReactElement { val iconName: IconName = if (isOwner) "badge" else "user" val intent: Intent = if (isUser) Intent.WARNING else Intent.NONE - return icon(name = iconName, intent = intent, size = 50, title = title) + return bpIcon(name = iconName, intent = intent, size = 50, title = title) } |