diff options
Diffstat (limited to 'sw-ui-kt')
6 files changed, 182 insertions, 74 deletions
diff --git a/sw-ui-kt/src/main/kotlin/blueprintjs.kt b/sw-ui-kt/src/main/kotlin/blueprintjs.kt index 37892fde..81227835 100644 --- a/sw-ui-kt/src/main/kotlin/blueprintjs.kt +++ b/sw-ui-kt/src/main/kotlin/blueprintjs.kt @@ -1,8 +1,6 @@ @file:JsModule("@blueprintjs/core") package com.palantir.blueprintjs -import org.w3c.dom.HTMLAnchorElement -import org.w3c.dom.HTMLButtonElement import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLInputElement import org.w3c.dom.events.Event @@ -158,6 +156,8 @@ external class Icon : PureComponent<IIconProps, RState> { } external interface IButtonProps : IActionProps { + // artificially added to allow title on button (should probably be on more general props) + var title: String? /** * If set to `true`, the button will display in an active state. * This is equivalent to setting `className={Classes.ACTIVE}`. @@ -258,3 +258,72 @@ external interface IInputGroupState : RState { external class InputGroup : PureComponent<IInputGroupProps, IInputGroupState> { override fun render(): ReactElement } + +external interface ITagProps : IProps, IIntentProps { + /** + * Whether the tag should appear in an active state. + * @default false + */ + var active: Boolean? + /** + * Whether the tag should take up the full width of its container. + * @default false + */ + var fill: Boolean? + /** Name of a Blueprint UI icon (or an icon element) to render before the children. */ + var icon: IconName? + /** + * Whether the tag should visually respond to user interactions. If set + * to `true`, hovering over the tag will change its color and mouse cursor. + * + * Recommended when `onClick` is also defined. + * + * @default false + */ + var interactive: Boolean? + /** + * Whether this tag should use large styles. + * @default false + */ + var large: Boolean? + /** + * Whether this tag should use minimal styles. + * @default false + */ + var minimal: Boolean? + /** + * Whether tag content should be allowed to occupy multiple lines. + * If false, a single line of text will be truncated with an ellipsis if + * it overflows. Note that icons will be vertically centered relative to + * multiline text. + * @default false + */ + var multiline: Boolean? + /** + * Callback invoked when the tag is clicked. + * Recommended when `interactive` is `true`. + */ + var onClick: ((e: MouseEvent) -> Unit)?; + /** + * Click handler for remove button. + * The remove button will only be rendered if this prop is defined. + */ + var onRemove: ((e: MouseEvent, tagProps: ITagProps) -> Unit)? + /** Name of a Blueprint UI icon (or an icon element) to render after the children. */ + var rightIcon: IconName? + /** + * Whether this tag should have rounded ends. + * @default false + */ + var round: Boolean? +} + +external class Tag : PureComponent<ITagProps, RState> { + override fun render(): ReactElement +} + +external class Classes { + companion object { + val HTML_TABLE: String = definedExternally + } +} diff --git a/sw-ui-kt/src/main/kotlin/blueprintjsHelpers.kt b/sw-ui-kt/src/main/kotlin/blueprintjsHelpers.kt index 5344b64e..0d9cb9bd 100644 --- a/sw-ui-kt/src/main/kotlin/blueprintjsHelpers.kt +++ b/sw-ui-kt/src/main/kotlin/blueprintjsHelpers.kt @@ -1,21 +1,21 @@ package com.palantir.blueprintjs -import org.w3c.dom.HTMLElement import org.w3c.dom.events.Event import org.w3c.dom.events.MouseEvent import react.RBuilder -import react.RElementBuilder import react.RHandler import react.ReactElement typealias IconName = String -fun RBuilder.icon( +fun RBuilder.bpIcon( name: IconName, size: Int = Icon.SIZE_STANDARD, intent: Intent = Intent.NONE, title: String? = null, - alt: String? = null + alt: String? = null, + className: String? = null, + block: RHandler<IIconProps> = {} ): ReactElement = child(Icon::class) { attrs { this.icon = name @@ -23,13 +23,16 @@ fun RBuilder.icon( this.htmlTitle = title this.intent = intent this.title = alt + this.className = className } + block() } fun RBuilder.bpButton( minimal: Boolean = false, large: Boolean = false, disabled: Boolean = false, + title: String? = null, icon: IconName? = null, rightIcon: IconName? = null, intent: Intent = Intent.NONE, @@ -37,6 +40,7 @@ fun RBuilder.bpButton( block: RHandler<IButtonProps> = {} ): ReactElement = child(Button::class) { attrs { + this.title = title this.minimal = minimal this.large = large this.disabled = disabled @@ -48,7 +52,7 @@ fun RBuilder.bpButton( block() } -fun RBuilder.inputGroup( +fun RBuilder.bpInputGroup( large: Boolean = false, placeholder: String = "", rightElement: ReactElement? = null, @@ -62,22 +66,16 @@ fun RBuilder.inputGroup( } } -data class ButtonProps( - override var className: String? = null, - override var intent: Intent? = Intent.NONE, - override var disabled: Boolean? = false, - override var icon: IconName? = null, - override var onClick: ((event: MouseEvent) -> Unit)? = null, - override var text: String? = null, - override var active: Boolean? = true, - override var alignText: Alignment? = null, - override var elementRef: ((ref: HTMLElement?) -> Any)? = null, - override var fill: Boolean? = null, - override var large: Boolean? = null, - override var loading: Boolean? = null, - override var minimal: Boolean? = null, - override var outlined: Boolean? = null, - override var rightIcon: IconName? = null, - override var small: Boolean? = null, - override var type: String? = null -) : IButtonProps +fun RBuilder.bpTag( + intent: Intent? = null, + minimal: Boolean? = null, + active: Boolean? = null, + block: RHandler<ITagProps> = {} +): ReactElement = child(Tag::class) { + attrs { + this.intent = intent + this.minimal = minimal + this.active = active + } + block() +} 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) } |