diff options
Diffstat (limited to 'sw-ui-kt/src/main')
5 files changed, 225 insertions, 7 deletions
diff --git a/sw-ui-kt/src/main/kotlin/blueprintjs.kt b/sw-ui-kt/src/main/kotlin/blueprintjs.kt index 2a2bfdce..eaf36618 100644 --- a/sw-ui-kt/src/main/kotlin/blueprintjs.kt +++ b/sw-ui-kt/src/main/kotlin/blueprintjs.kt @@ -213,6 +213,45 @@ external class Button : AbstractButton { external class AnchorButton : AbstractButton { override fun render(): ReactElement } + +external interface IButtonGroupProps : IProps { + /** + * Text alignment within button. By default, icons and text will be centered + * within the button. Passing `"left"` or `"right"` will align the button + * text to that side and push `icon` and `rightIcon` to either edge. Passing + * `"center"` will center the text and icons together. + */ + var alignText: Alignment? + + /** + * Whether the button group should take up the full width of its container. + * @default false + */ + var fill: Boolean? + + /** + * Whether the child buttons should appear with minimal styling. + * @default false + */ + var minimal: Boolean? + + /** + * Whether the child buttons should appear with large styling. + * @default false + */ + var large: Boolean? + + /** + * Whether the button group should appear with vertical styling. + * @default false + */ + var vertical: Boolean? +} + +external class ButtonGroup : PureComponent<IButtonGroupProps, RState> { + override fun render(): ReactElement? +} + external interface IInputGroupProps : IControlledProps, IIntentProps, IProps { /** * Whether the input is non-interactive. diff --git a/sw-ui-kt/src/main/kotlin/blueprintjsHelpers.kt b/sw-ui-kt/src/main/kotlin/blueprintjsHelpers.kt index 1b20423c..22489c86 100644 --- a/sw-ui-kt/src/main/kotlin/blueprintjsHelpers.kt +++ b/sw-ui-kt/src/main/kotlin/blueprintjsHelpers.kt @@ -52,6 +52,12 @@ fun RBuilder.bpButton( block() } +fun RBuilder.bpButtonGroup( + block: RHandler<IButtonGroupProps> = {} +): ReactElement = child(ButtonGroup::class) { + block() +} + fun RBuilder.bpInputGroup( large: Boolean = false, placeholder: String = "", diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt index b7abbeff..38afe028 100644 --- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt @@ -2,20 +2,24 @@ package org.luxons.sevenwonders.ui.components.game import kotlinx.css.CSSBuilder import kotlinx.css.Color +import kotlinx.css.borderRadius +import kotlinx.css.pct import kotlinx.css.properties.boxShadow import kotlinx.css.px import kotlinx.css.rem import kotlinx.html.IMG import kotlinx.html.title -import org.luxons.sevenwonders.model.cards.TableCard +import org.luxons.sevenwonders.model.cards.Card import react.RBuilder import styled.StyledDOMBuilder import styled.css import styled.styledImg -fun RBuilder.cardImage(card: TableCard, highlightColor: Color? = null, block: StyledDOMBuilder<IMG>.() -> Unit = {}) { +fun RBuilder.cardImage(card: Card, highlightColor: Color? = null, block: StyledDOMBuilder<IMG>.() -> Unit = {}) { styledImg(src = "/images/cards/${card.image}") { css { + borderRadius = 5.pct + boxShadow(offsetX = 2.px, offsetY = 2.px, blurRadius = 5.px, color = Color.black) highlightStyle(highlightColor) } attrs { diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt index 2b6136af..11ce09c1 100644 --- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt @@ -3,6 +3,7 @@ package org.luxons.sevenwonders.ui.components.game import com.palantir.blueprintjs.Intent import com.palantir.blueprintjs.bpButton import com.palantir.blueprintjs.bpNonIdealState +import com.palantir.blueprintjs.org.luxons.sevenwonders.ui.components.game.handComponent import kotlinx.css.CSSBuilder import kotlinx.css.Overflow import kotlinx.css.Position @@ -84,11 +85,11 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta div { p { + turnInfo.message } boardComponent(board = board) -// handComponent( -// cards = turnInfo.hand, -// wonderUpgradable = turnInfo.wonderBuildability.isBuildable, -// prepareMove = props.prepareMove -// ) + handComponent( + cards = turnInfo.hand, + wonderUpgradable = turnInfo.wonderBuildability.isBuildable, + prepareMove = props.prepareMove + ) productionBar( gold = board.gold, production = board.production diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt new file mode 100644 index 00000000..9aac310a --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt @@ -0,0 +1,168 @@ +package com.palantir.blueprintjs.org.luxons.sevenwonders.ui.components.game + +import com.palantir.blueprintjs.Intent +import com.palantir.blueprintjs.bpButton +import com.palantir.blueprintjs.bpButtonGroup +import kotlinx.css.Align +import kotlinx.css.CSSBuilder +import kotlinx.css.Color +import kotlinx.css.Display +import kotlinx.css.GridColumn +import kotlinx.css.GridRow +import kotlinx.css.Position +import kotlinx.css.alignItems +import kotlinx.css.bottom +import kotlinx.css.display +import kotlinx.css.filter +import kotlinx.css.gridColumn +import kotlinx.css.gridRow +import kotlinx.css.height +import kotlinx.css.left +import kotlinx.css.margin +import kotlinx.css.maxHeight +import kotlinx.css.maxWidth +import kotlinx.css.pct +import kotlinx.css.position +import kotlinx.css.properties.boxShadow +import kotlinx.css.properties.s +import kotlinx.css.properties.transform +import kotlinx.css.properties.transition +import kotlinx.css.properties.translate +import kotlinx.css.px +import kotlinx.css.rem +import kotlinx.css.vh +import kotlinx.css.vw +import kotlinx.css.width +import kotlinx.css.zIndex +import kotlinx.html.DIV +import org.luxons.sevenwonders.model.MoveType +import org.luxons.sevenwonders.model.PlayerMove +import org.luxons.sevenwonders.model.cards.HandCard +import org.luxons.sevenwonders.ui.components.game.cardImage +import react.RBuilder +import styled.StyledDOMBuilder +import styled.css +import styled.styledDiv + +fun RBuilder.handComponent( + cards: List<HandCard>, + wonderUpgradable: Boolean, + prepareMove: (PlayerMove) -> Unit +) { + styledDiv { + css { + handStyle() + } + cards.forEachIndexed { index, c -> + handCard(card = c, wonderUpgradable = wonderUpgradable, prepareMove = prepareMove) { + attrs { + key = index.toString() + } + } + } + } +} + +private fun RBuilder.handCard( + card: HandCard, + wonderUpgradable: Boolean, + prepareMove: (PlayerMove) -> Unit, + block: StyledDOMBuilder<DIV>.() -> Unit +) { + styledDiv { + css { + handCardStyle() + } + block() + cardImage(card) { + css { + handCardImgStyle(card.playability.isPlayable) + } + } + actionButtons(card, wonderUpgradable, prepareMove) + } +} + +private fun RBuilder.actionButtons(card: HandCard, wonderUpgradable: Boolean, prepareMove: (PlayerMove) -> Unit) { + // class: action-buttons + styledDiv { + css { + alignItems = Align.flexEnd + display = Display.none + gridRow = GridRow("1") + gridColumn = GridColumn("1") + + ancestorHover(".hand-card") { + display = Display.flex + } + } + bpButtonGroup { + bpButton(title = "PLAY", + large = true, + intent = Intent.SUCCESS, + icon = "play", + disabled = !card.playability.isPlayable, + onClick = { prepareMove(PlayerMove(MoveType.PLAY, card.name)) }) + bpButton(title = "UPGRADE WONDER", + large = true, + intent = Intent.PRIMARY, + icon = "key-shift", + disabled = !wonderUpgradable, + onClick = { prepareMove(PlayerMove(MoveType.UPGRADE_WONDER, card.name)) }) + bpButton(title = "DISCARD", + large = true, + intent = Intent.DANGER, + icon = "cross", + onClick = { prepareMove(PlayerMove(MoveType.DISCARD, card.name)) }) + } + } +} + +private fun CSSBuilder.handStyle() { + alignItems = Align.center + bottom = 0.px + display = Display.flex + height = 345.px + left = 50.pct + maxHeight = 25.vw + position = Position.absolute + transform { + translate(tx = (-50).pct, ty = 55.pct) + } + transition(duration = 0.5.s) + zIndex = 30 + + hover { + bottom = 4.rem + transform { + translate(tx = (-50).pct, ty = 0.pct) + } + } +} + +private fun CSSBuilder.handCardStyle() { + classes.add("hand-card") + alignItems = Align.flexEnd + display = Display.grid + margin(all = 0.2.rem) +} + +private fun CSSBuilder.handCardImgStyle(isPlayable: Boolean) { + gridRow = GridRow("1") + gridColumn = GridColumn("1") + maxWidth = 13.vw + maxHeight = 60.vh + transition(duration = 0.1.s) + width = 11.rem + + ancestorHover(".hand-card") { + boxShadow(offsetX = 0.px, offsetY = 10.px, blurRadius = 40.px, color = Color.black) + width = 14.rem + maxWidth = 15.vw + maxHeight = 90.vh + } + + if (!isPlayable) { + filter = "grayscale(50%) contrast(50%)" + } +} |