diff options
Diffstat (limited to 'sw-ui')
33 files changed, 1909 insertions, 1918 deletions
diff --git a/sw-ui/build.gradle.kts b/sw-ui/build.gradle.kts index d1c4e6a8..6fb7d8b8 100644 --- a/sw-ui/build.gradle.kts +++ b/sw-ui/build.gradle.kts @@ -20,9 +20,9 @@ kotlin { implementation(libs.kotlin.wrappers.react.dom) implementation(libs.kotlin.wrappers.react.redux) implementation(libs.kotlin.wrappers.react.router.dom) - implementation(libs.kotlin.wrappers.styled.next) implementation(libs.kotlin.wrappers.blueprintjs.core) implementation(libs.kotlin.wrappers.blueprintjs.icons) + implementation(libs.kotlin.wrappers.emotion) } } test { diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt index 44faede8..0bd3400e 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt @@ -5,35 +5,33 @@ import kotlinx.coroutines.* import org.luxons.sevenwonders.ui.components.* import org.luxons.sevenwonders.ui.redux.* import org.luxons.sevenwonders.ui.redux.sagas.* -import react.dom.* +import react.* +import react.dom.client.* import react.redux.* import redux.* -import web.dom.* import web.dom.document +import web.html.* fun main() { - window.onload = { - val rootElement = document.getElementById("root") - if (rootElement != null) { - initializeAndRender(rootElement) - } else { - console.error("Element with ID 'root' was not found, cannot bootstrap react app") - } + window.onload = { init() } +} + +private fun init() { + val rootElement = document.getElementById("root") + if (rootElement == null) { + console.error("Element with ID 'root' was not found, cannot bootstrap react app") + return } + renderRoot(rootElement) } -private fun initializeAndRender(rootElement: Element) { +private fun renderRoot(rootElement: HTMLElement) { val store = initRedux() - - // With the new API this might look something like: - // createRoot(rootElement).render(FC<Props> { .. }.create()) - // See: https://github.com/karakum-team/kotlin-mui-showcase/blob/main/src/main/kotlin/team/karakum/App.kt - @Suppress("DEPRECATION") - render(rootElement) { - provider(store) { - application() - } + val connectedApp = Provider.create { + this.store = store + Application() } + createRoot(rootElement).render(connectedApp) } @OptIn(DelicateCoroutinesApi::class) diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt index 51e7e78f..9c210538 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt @@ -1,40 +1,43 @@ package org.luxons.sevenwonders.ui.components -import org.luxons.sevenwonders.ui.components.errors.errorDialog -import org.luxons.sevenwonders.ui.components.game.gameScene -import org.luxons.sevenwonders.ui.components.gameBrowser.gameBrowser -import org.luxons.sevenwonders.ui.components.home.home -import org.luxons.sevenwonders.ui.components.lobby.lobby -import org.luxons.sevenwonders.ui.router.SwRoute -import react.Props -import react.RBuilder -import react.RElementBuilder -import react.createElement -import react.router.Navigate -import react.router.Route -import react.router.Routes -import react.router.RoutesProps +import org.luxons.sevenwonders.ui.components.errors.* +import org.luxons.sevenwonders.ui.components.game.* +import org.luxons.sevenwonders.ui.components.gameBrowser.* +import org.luxons.sevenwonders.ui.components.home.* +import org.luxons.sevenwonders.ui.components.lobby.* +import org.luxons.sevenwonders.ui.router.* +import react.* +import react.router.* import react.router.dom.* -fun RBuilder.application() = HashRouter { - errorDialog() - Routes { - route(SwRoute.GAME_BROWSER.path) { gameBrowser() } - route(SwRoute.GAME.path) { gameScene() } - route(SwRoute.LOBBY.path) { lobby() } - route(SwRoute.HOME.path) { home() } - route("*") { - Navigate { - attrs.to = "/" - attrs.replace = true +val Application = VFC("Application") { + HashRouter { + ErrorDialog() + Routes { + Route { + path = SwRoute.GAME_BROWSER.path + element = GameBrowser.create() + } + Route { + path = SwRoute.GAME.path + element = GameScene.create() + } + Route { + path = SwRoute.LOBBY.path + element = Lobby.create() + } + Route { + path = SwRoute.HOME.path + element = Home.create() + } + Route { + path = "*" + element = Navigate.create { + to = "/" + replace = true + } } } } } -private fun RElementBuilder<RoutesProps>.route(path: String, render: RBuilder.() -> Unit) { - Route { - attrs.path = path - attrs.element = createElement<Props>(render) - } -} 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 9ba5951a..bd12537e 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 @@ -1,19 +1,20 @@ package org.luxons.sevenwonders.ui.components -import kotlinx.css.* -import kotlinx.css.properties.* -import styled.StyleSheet +import csstype.* +import emotion.css.* +import org.luxons.sevenwonders.ui.utils.* -object GlobalStyles : StyleSheet("GlobalStyles", isStatic = true) { + +object GlobalStyles { val preGameWidth = 60.rem - val zeusBackground by css { - background = "url('images/backgrounds/zeus-temple.jpg') center no-repeat" - backgroundSize = "cover" + val zeusBackground = ClassName { + background = "url('images/backgrounds/zeus-temple.jpg') center no-repeat".unsafeCast<Background>() + backgroundSize = BackgroundSize.cover } - val fullscreen by css { + val fullscreen = ClassName { position = Position.fixed top = 0.px left = 0.px @@ -22,30 +23,26 @@ object GlobalStyles : StyleSheet("GlobalStyles", isStatic = true) { overflow = Overflow.hidden } - val papyrusBackground by css { - background = "url('images/backgrounds/papyrus.jpg')" - backgroundSize = "cover" + val papyrusBackground = ClassName { + background = "url('images/backgrounds/papyrus.jpg')".unsafeCast<Background>() + backgroundSize = BackgroundSize.cover } - val fixedCenter by css { - position = Position.fixed - +centerLeftTopTransform + val centerLeftTopTransform = ClassName { + left = 50.pct + top = 50.pct + transform = translate((-50).pct, (-50).pct) } - val centerInPositionedParent by css { - position = Position.absolute - +centerLeftTopTransform + val fixedCenter = ClassName(centerLeftTopTransform) { + position = Position.fixed } - val centerLeftTopTransform by css { - left = 50.pct - top = 50.pct - transform { - translate((-50).pct, (-50).pct) - } + val centerInPositionedParent = ClassName(centerLeftTopTransform) { + position = Position.absolute } - val noPadding by css { - padding(all = 0.px) + val noPadding = ClassName { + padding = Padding(all = 0.px) } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt index 5ff56055..5399f60d 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt @@ -6,44 +6,46 @@ import kotlinx.browser.* import org.luxons.sevenwonders.ui.redux.* import org.luxons.sevenwonders.ui.router.* import react.* -import react.dom.p -import styled.* +import react.dom.html.ReactHTML.p +import react.redux.* +import redux.* -external interface ErrorDialogStateProps : PropsWithChildren { - var errorMessage: String? +val ErrorDialog = VFC { + val dispatch = useDispatch<RAction, WrapperAction>() + + ErrorDialogPresenter { + errorMessage = useSwSelector { it.fatalError } + goHome = { dispatch(Navigate(SwRoute.HOME)) } + } } -external interface ErrorDialogDispatchProps : PropsWithChildren { +private external interface ErrorDialogProps : Props { + var errorMessage: String? var goHome: () -> Unit } -external interface ErrorDialogProps : ErrorDialogDispatchProps, ErrorDialogStateProps +private val ErrorDialogPresenter = FC<ErrorDialogProps>("ErrorDialogPresenter") { props -> + val errorMessage = props.errorMessage + BpDialog { + isOpen = errorMessage != null + titleText = "Oops!" + icon = BpIcon.create { + icon = IconNames.ERROR + intent = Intent.DANGER + } + onClose = { goHomeAndRefresh() } -class ErrorDialogPresenter(props: ErrorDialogProps) : RComponent<ErrorDialogProps, State>(props) { - override fun RBuilder.render() { - val errorMessage = props.errorMessage - bpDialog( - isOpen = errorMessage != null, - title = "Oops!", - icon = IconNames.ERROR, - iconIntent = Intent.DANGER, - onClose = { goHomeAndRefresh() } - ) { - styledDiv { - css { - classes.add(Classes.DIALOG_BODY) - } - p { - +(errorMessage ?: "fatal error") - } + BpDialogBody { + p { + +(errorMessage ?: "fatal error") } - styledDiv { - css { - classes.add(Classes.DIALOG_FOOTER) - } - bpButton(icon = IconNames.LOG_OUT, onClick = { goHomeAndRefresh() }) { - +"HOME" - } + } + BpDialogFooter { + BpButton { + icon = IconNames.LOG_OUT + onClick = { goHomeAndRefresh() } + + +"HOME" } } } @@ -53,15 +55,3 @@ private fun goHomeAndRefresh() { // we don't use a redux action here because we actually want to redirect and refresh the page window.location.href = SwRoute.HOME.path } - -fun RBuilder.errorDialog() = errorDialog {} - -private val errorDialog = connectStateAndDispatch<ErrorDialogStateProps, ErrorDialogDispatchProps, ErrorDialogProps>( - clazz = ErrorDialogPresenter::class, - mapStateToProps = { state, _ -> - errorMessage = state.fatalError - }, - mapDispatchToProps = { dispatch, _ -> - goHome = { dispatch(Navigate(SwRoute.HOME)) } - }, -) diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt index c3dc6460..9ca56efa 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt @@ -1,37 +1,34 @@ package org.luxons.sevenwonders.ui.components.game -import kotlinx.css.* -import kotlinx.css.properties.* -import kotlinx.html.DIV -import kotlinx.html.HTMLTag -import kotlinx.html.IMG -import kotlinx.html.title -import org.luxons.sevenwonders.model.boards.Board -import org.luxons.sevenwonders.model.boards.Military -import org.luxons.sevenwonders.model.cards.TableCard -import org.luxons.sevenwonders.model.wonders.ApiWonder -import org.luxons.sevenwonders.model.wonders.ApiWonderStage -import react.RBuilder -import react.dom.* -import styled.StyledDOMBuilder -import styled.css -import styled.styledDiv -import styled.styledImg +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.model.boards.* +import org.luxons.sevenwonders.model.cards.* +import org.luxons.sevenwonders.model.wonders.* +import react.* +import react.dom.html.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.img +import web.html.* // card offsets in % of their size when displayed in columns private const val xOffset = 20 private const val yOffset = 21 -fun RBuilder.boardComponent(board: Board, block: StyledDOMBuilder<DIV>.() -> Unit = {}) { - styledDiv { - block() - tableCards(cardColumns = board.playedCards) - wonderComponent(wonder = board.wonder, military = board.military) +external interface BoardComponentProps : PropsWithClassName { + var board: Board +} + +val BoardComponent = FC<BoardComponentProps>("Board") { props -> + div { + className = props.className + tableCards(cardColumns = props.board.playedCards) + wonderComponent(wonder = props.board.wonder, military = props.board.military) } } -private fun RBuilder.tableCards(cardColumns: List<List<TableCard>>) { - styledDiv { +private fun ChildrenBuilder.tableCards(cardColumns: List<List<TableCard>>) { + div { css { display = Display.flex justifyContent = JustifyContent.spaceAround @@ -39,101 +36,109 @@ private fun RBuilder.tableCards(cardColumns: List<List<TableCard>>) { width = 100.pct } cardColumns.forEach { cards -> - tableCardColumn(cards = cards) { - attrs { - key = cards.first().color.toString() - } + TableCardColumn { + this.key = cards.first().color.toString() + this.cards = cards } } } } -private fun RBuilder.tableCardColumn(cards: List<TableCard>, block: StyledDOMBuilder<DIV>.() -> Unit = {}) { - styledDiv { +private external interface TableCardColumnProps : PropsWithClassName { + var cards: List<TableCard> +} + +private val TableCardColumn = FC<TableCardColumnProps>("TableCardColumn") { props -> + div { css { height = 100.pct width = 13.pct marginRight = 4.pct position = Position.relative } - block() - cards.forEachIndexed { index, card -> - tableCard(card = card, indexInColumn = index) { - attrs { key = card.name } + props.cards.forEachIndexed { index, card -> + TableCard { + this.card = card + this.indexInColumn = index + this.key = card.name } } } } -private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: StyledDOMBuilder<IMG>.() -> Unit = {}) { - val highlightColor = if (card.playedDuringLastMove) Color.gold else null - cardImage(card = card, highlightColor = highlightColor) { +private external interface TableCardProps : PropsWithClassName { + var card: TableCard + var indexInColumn: Int +} + +private val TableCard = FC<TableCardProps>("TableCard") { props -> + val highlightColor = if (props.card.playedDuringLastMove) NamedColor.gold else null + CardImage { + this.card = props.card + this.highlightColor = highlightColor + css { position = Position.absolute - zIndex = indexInColumn + 2 // go above the board and the built wonder cards - transform { - translate( - tx = (indexInColumn * xOffset).pct, - ty = (indexInColumn * yOffset).pct, - ) - } + zIndex = integer(props.indexInColumn + 2) // go above the board and the built wonder cards + transform = translate( + tx = (props.indexInColumn * xOffset).pct, + ty = (props.indexInColumn * yOffset).pct, + ) maxWidth = 100.pct maxHeight = 70.pct hover { - zIndex = 1000 + zIndex = integer(1000) maxWidth = 110.pct maxHeight = 75.pct hoverHighlightStyle() } } - block() } } -private fun RBuilder.wonderComponent(wonder: ApiWonder, military: Military) { - styledDiv { +private fun ChildrenBuilder.wonderComponent(wonder: ApiWonder, military: Military) { + div { css { position = Position.relative width = 100.pct height = 40.pct } - styledDiv { + div { css { position = Position.absolute left = 50.pct top = 0.px - transform { translateX((-50).pct) } + transform = translatex((-50).pct) height = 100.pct maxWidth = 95.pct // same as wonder // bring to the foreground on hover - hover { zIndex = 1000 } + hover { zIndex = integer(1000) } } - styledImg(src = "/images/wonders/${wonder.image}") { + img { + src = "/images/wonders/${wonder.image}" + title = wonder.name + alt = "Wonder ${wonder.name}" + css { - classes.add("wonder-image") - declarations["border-radius"] = "0.5%/1.5%" - boxShadow(color = Color.black, offsetX = 0.2.rem, offsetY = 0.2.rem, blurRadius = 0.5.rem) + borderRadius = "0.5%/1.5%".unsafeCast<BorderRadius>() + boxShadow = BoxShadow(color = NamedColor.black, offsetX = 0.2.rem, offsetY = 0.2.rem, blurRadius = 0.5.rem) maxHeight = 100.pct maxWidth = 100.pct - zIndex = 1 // go above the built wonder cards, but below the table cards + zIndex = integer(1) // go above the built wonder cards, but below the table cards hover { hoverHighlightStyle() } } - attrs { - this.title = wonder.name - this.alt = "Wonder ${wonder.name}" - } } - styledDiv { + div { css { position = Position.absolute top = 20.pct right = (-80).px display = Display.flex flexDirection = FlexDirection.column - alignItems = Align.start + alignItems = AlignItems.start } victoryPoints(military.victoryPoints) { css { @@ -147,7 +152,8 @@ private fun RBuilder.wonderComponent(wonder: ApiWonder, military: Military) { } } wonder.stages.forEachIndexed { index, stage -> - wonderStageElement(stage) { + WonderStageElement { + this.stage = stage css { wonderCardStyle(index, wonder.stages.size) } @@ -157,15 +163,15 @@ private fun RBuilder.wonderComponent(wonder: ApiWonder, military: Military) { } } -private fun RBuilder.victoryPoints(points: Int, block: StyledDOMBuilder<DIV>.() -> Unit = {}) { +private fun ChildrenBuilder.victoryPoints(points: Int, block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}) { boardToken("military/victory1", points, block) } -private fun RBuilder.defeatTokenCount(nbDefeatTokens: Int, block: StyledDOMBuilder<DIV>.() -> Unit = {}) { +private fun ChildrenBuilder.defeatTokenCount(nbDefeatTokens: Int, block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}) { boardToken("military/defeat1", nbDefeatTokens, block) } -private fun RBuilder.boardToken(tokenName: String, count: Int, block: StyledDOMBuilder<DIV>.() -> Unit) { +private fun ChildrenBuilder.boardToken(tokenName: String, count: Int, block: HTMLAttributes<HTMLDivElement>.() -> Unit) { tokenWithCount( tokenName = tokenName, count = count, @@ -173,34 +179,40 @@ private fun RBuilder.boardToken(tokenName: String, count: Int, block: StyledDOMB brightText = true, ) { css { - filter = "drop-shadow(0.2rem 0.2rem 0.5rem black)" + filter = dropShadow(0.2.rem, 0.2.rem, 0.5.rem, NamedColor.black) height = 15.pct } block() } } -private fun RBuilder.wonderStageElement(stage: ApiWonderStage, block: StyledDOMBuilder<HTMLTag>.() -> Unit) { - val back = stage.cardBack +private external interface WonderStageElementProps : PropsWithClassName { + var stage: ApiWonderStage +} + +private val WonderStageElement = FC<WonderStageElementProps>("WonderStageElement") { props -> + val back = props.stage.cardBack if (back != null) { - val highlightColor = if (stage.builtDuringLastMove) Color.gold else null - cardBackImage(cardBack = back, highlightColor = highlightColor) { - block() + val highlightColor = if (props.stage.builtDuringLastMove) NamedColor.gold else null + CardBackImage { + this.cardBack = back + this.highlightColor = highlightColor + this.className = props.className } } else { - cardPlaceholderImage { - block() + CardPlaceholderImage { + this.className = props.className } } } -private fun CssBuilder.wonderCardStyle(stageIndex: Int, nbStages: Int) { +private fun PropertiesBuilder.wonderCardStyle(stageIndex: Int, nbStages: Int) { position = Position.absolute top = 60.pct // makes the cards stick out of the bottom of the wonder left = stagePositionPercent(stageIndex, nbStages).pct maxWidth = 24.pct // ratio of card width to wonder width maxHeight = 90.pct // ratio of card height to wonder height - zIndex = -1 // below wonder (somehow 0 is not sufficient) + zIndex = integer(-1) // below wonder (somehow 0 is not sufficient) } private fun stagePositionPercent(stageIndex: Int, nbStages: Int): Double = when (nbStages) { @@ -209,6 +221,6 @@ private fun stagePositionPercent(stageIndex: Int, nbStages: Int): Double = when else -> 7.9 + stageIndex * 30.0 } -private fun CssBuilder.hoverHighlightStyle() { - highlightStyle(Color.paleGoldenrod) +private fun PropertiesBuilder.hoverHighlightStyle() { + highlightStyle(NamedColor.palegoldenrod) } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt index ec7ea464..76487db5 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt @@ -1,109 +1,134 @@ package org.luxons.sevenwonders.ui.components.game -import blueprintjs.core.PopoverPosition -import blueprintjs.core.bpDivider -import blueprintjs.core.bpPopover -import kotlinx.css.* -import kotlinx.html.* -import org.luxons.sevenwonders.model.api.PlayerDTO -import org.luxons.sevenwonders.model.boards.Board -import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo +import blueprintjs.core.* +import csstype.* +import emotion.css.* +import emotion.react.* +import org.luxons.sevenwonders.model.api.* +import org.luxons.sevenwonders.model.boards.* +import org.luxons.sevenwonders.ui.components.gameBrowser.* +import org.luxons.sevenwonders.ui.utils.* import react.* -import styled.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.hr enum class BoardSummarySide( val tokenCountPosition: TokenCountPosition, - val alignment: Align, + val alignment: AlignItems, val popoverPosition: PopoverPosition, ) { - LEFT(TokenCountPosition.RIGHT, Align.flexStart, PopoverPosition.RIGHT), - TOP(TokenCountPosition.OVER, Align.flexStart, PopoverPosition.BOTTOM), - RIGHT(TokenCountPosition.LEFT, Align.flexEnd, PopoverPosition.LEFT), - BOTTOM(TokenCountPosition.OVER, Align.flexStart, PopoverPosition.TOP), + LEFT(TokenCountPosition.RIGHT, AlignItems.flexStart, PopoverPosition.RIGHT), + TOP(TokenCountPosition.OVER, AlignItems.flexStart, PopoverPosition.BOTTOM), + RIGHT(TokenCountPosition.LEFT, AlignItems.flexEnd, PopoverPosition.LEFT), + BOTTOM(TokenCountPosition.OVER, AlignItems.flexStart, PopoverPosition.TOP), } -fun RBuilder.boardSummaryWithPopover( - player: PlayerDTO, - board: Board, - boardSummarySide: BoardSummarySide, - block: StyledDOMBuilder<DIV>.() -> Unit = {}, -) { - val popoverClass = GameStyles.getClassName { it::fullBoardPreviewPopover } - bpPopover( - content = createFullBoardPreview(board), - position = boardSummarySide.popoverPosition, - popoverClassName = popoverClass, - ) { - boardSummary( - player = player, - board = board, - side = boardSummarySide, - block = block, - ) - } +external interface BoardSummaryWithPopoverProps : PropsWithClassName { + var player: PlayerDTO + var board: Board + var side: BoardSummarySide } -private fun createFullBoardPreview(board: Board): ReactElement<*> = buildElement { - boardComponent(board = board) { - css { - +GameStyles.fullBoardPreview +val BoardSummaryWithPopover = FC<BoardSummaryWithPopoverProps>("BoardSummaryWithPopover") { props -> + BpPopover { + content = BoardComponent.create { + className = GameStyles.fullBoardPreview + board = props.board + } + position = props.side.popoverPosition + interactionKind = PopoverInteractionKind.HOVER + popoverClassName = ClassName { + val bgColor = GameStyles.sandBgColor.withAlpha(0.7) + backgroundColor = bgColor + borderRadius = 0.5.rem + padding = Padding(all = 0.5.rem) + + children(".bp4-popover-content") { + background = None.none // overrides default white background + } + descendants(".bp4-popover-arrow-fill") { + set(Variable("fill"), bgColor.toString()) // overrides default white arrow + } + descendants(".bp4-popover-arrow::before") { + // The popover arrow is implemented with a simple square rotated 45 degrees (like a rhombus). + // Since we use a semi-transparent background, we can see the box shadow of the rest of the arrow through + // the popover, and thus we see the square. This boxShadow(transparent) is to avoid that. + boxShadow = BoxShadow(0.px, 0.px, 0.px, 0.px, NamedColor.transparent) + } + }.toString() + + BoardSummary { + this.className = props.className + this.player = props.player + this.board = props.board + this.side = props.side } } } -fun RBuilder.boardSummary( - player: PlayerDTO, - board: Board, - side: BoardSummarySide, - showPreparationStatus: Boolean = true, - block: StyledDOMBuilder<DIV>.() -> Unit = {}, -) { - styledDiv { - css { +external interface BoardSummaryProps : PropsWithClassName { + var player: PlayerDTO + var board: Board + var side: BoardSummarySide + var showPreparationStatus: Boolean? +} + +val BoardSummary = FC<BoardSummaryProps>("BoardSummary") { props -> + div { + css(props.className) { display = Display.flex flexDirection = FlexDirection.column - alignItems = side.alignment - padding(all = 0.5.rem) - backgroundColor = Color.paleGoldenrod.withAlpha(0.5) - zIndex = 50 // above table cards + alignItems = props.side.alignment + padding = Padding(all = 0.5.rem) + backgroundColor = NamedColor.palegoldenrod.withAlpha(0.5) + zIndex = integer(50) // above table cards hover { - backgroundColor = Color.paleGoldenrod + backgroundColor = NamedColor.palegoldenrod } } - topBar(player, side, showPreparationStatus) - styledHr { + val showPreparationStatus = props.showPreparationStatus ?: true + topBar(props.player, props.side, showPreparationStatus) + hr { css { - margin(vertical = 0.5.rem) + margin = Margin(vertical = 0.5.rem, horizontal = 0.rem) width = 100.pct } } - bottomBar(side, board, player, showPreparationStatus) - block() + bottomBar(props.side, props.board, props.player, showPreparationStatus) } } -private fun RBuilder.topBar(player: PlayerDTO, side: BoardSummarySide, showPreparationStatus: Boolean) { +private fun ChildrenBuilder.topBar(player: PlayerDTO, side: BoardSummarySide, showPreparationStatus: Boolean) { val playerIconSize = 25 if (showPreparationStatus && side == BoardSummarySide.TOP) { - styledDiv { + div { css { display = Display.flex flexDirection = FlexDirection.row justifyContent = JustifyContent.spaceBetween width = 100.pct } - playerInfo(player, iconSize = playerIconSize) - playerPreparedCard(player) + PlayerInfo { + this.player = player + this.iconSize = playerIconSize + } + PlayerPreparedCard { + this.playerDisplayName = player.displayName + this.username = player.username + } } } else { - playerInfo(player, iconSize = playerIconSize) + PlayerInfo { + this.player = player + this.iconSize = playerIconSize + } } } -private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: PlayerDTO, showPreparationStatus: Boolean) { - styledDiv { +private fun ChildrenBuilder.bottomBar(side: BoardSummarySide, board: Board, player: PlayerDTO, showPreparationStatus: Boolean) { + div { css { display = Display.flex flexDirection = if (side == BoardSummarySide.TOP || side == BoardSummarySide.BOTTOM) FlexDirection.row else FlexDirection.column @@ -114,26 +139,29 @@ private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: Pla } val tokenSize = 2.rem generalCounts(board, tokenSize, side.tokenCountPosition) - bpDivider() + BpDivider() scienceTokens(board, tokenSize, side.tokenCountPosition) if (showPreparationStatus && side != BoardSummarySide.TOP) { - bpDivider() - styledDiv { + BpDivider() + div { css { width = 100.pct - alignItems = Align.center + alignItems = AlignItems.center display = Display.flex flexDirection = FlexDirection.column } - playerPreparedCard(player) + PlayerPreparedCard { + this.playerDisplayName = player.displayName + this.username = player.username + } } } } } -private fun StyledDOMBuilder<DIV>.generalCounts( +private fun ChildrenBuilder.generalCounts( board: Board, - tokenSize: LinearDimension, + tokenSize: Length, countPosition: TokenCountPosition, ) { goldIndicator(amount = board.gold, imgSize = tokenSize, amountPosition = countPosition) @@ -153,9 +181,9 @@ private fun StyledDOMBuilder<DIV>.generalCounts( ) } -private fun RBuilder.scienceTokens( +private fun ChildrenBuilder.scienceTokens( board: Board, - tokenSize: LinearDimension, + tokenSize: Length, sciencePosition: TokenCountPosition, ) { tokenWithCount( diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt index 409c4dac..093384a2 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt @@ -1,77 +1,72 @@ package org.luxons.sevenwonders.ui.components.game -import kotlinx.css.* -import kotlinx.css.properties.* -import kotlinx.html.IMG -import kotlinx.html.title -import org.luxons.sevenwonders.model.cards.Card -import org.luxons.sevenwonders.model.cards.CardBack -import react.RBuilder -import react.dom.attrs -import styled.StyledDOMBuilder -import styled.css -import styled.styledImg +import csstype.* +import csstype.Color +import emotion.react.* +import org.luxons.sevenwonders.model.cards.* +import react.* +import react.dom.html.ReactHTML.img -fun RBuilder.cardImage( - card: Card, - faceDown: Boolean = false, - highlightColor: Color? = null, - block: StyledDOMBuilder<IMG>.() -> Unit = {}, -) { - if (faceDown) { - cardBackImage(card.back, highlightColor, block) - return - } - styledImg(src = "/images/cards/${card.image}") { - css { - cardImageStyle(highlightColor) +external interface CardImageProps : PropsWithClassName { + var card: Card + var faceDown: Boolean? + var highlightColor: Color? +} + +val CardImage = FC<CardImageProps>("CardImage") { props -> + if (props.faceDown == true) { + CardBackImage { + cardBack = props.card.back + highlightColor = props.highlightColor } - attrs { - title = card.name - alt = "Card ${card.name}" + } else { + img { + src = "/images/cards/${props.card.image}" + title = props.card.name + alt = "Card ${props.card.name}" + + css(props.className) { + cardImageStyle(props.highlightColor) + } } - block() } } -fun RBuilder.cardBackImage( - cardBack: CardBack, - highlightColor: Color? = null, - block: StyledDOMBuilder<IMG>.() -> Unit = {}, -) { - styledImg(src = "/images/cards/back/${cardBack.image}") { - css { - cardImageStyle(highlightColor) - } - attrs { - alt = "Card back (${cardBack.image})" +external interface CardBackImageProps : PropsWithClassName { + var cardBack: CardBack + var highlightColor: Color? +} + +val CardBackImage = FC<CardBackImageProps>("CardBackImage") { props -> + img { + src = "/images/cards/back/${props.cardBack.image}" + alt = "Card back (${props.cardBack.image})" + css(props.className) { + cardImageStyle(props.highlightColor) } - block() } } -fun RBuilder.cardPlaceholderImage(block: StyledDOMBuilder<IMG>.() -> Unit = {}) { - styledImg(src = "/images/cards/back/placeholder.png") { - css { - opacity = 0.20 +val CardPlaceholderImage = FC<PropsWithClassName>("CardPlaceholderImage") { props -> + img { + src = "/images/cards/back/placeholder.png" + alt = "Card placeholder" + css(props.className) { + opacity = number(0.20) borderRadius = 5.pct } - attrs { - alt = "Card placeholder" - } - block() } } -private fun CssBuilder.cardImageStyle(highlightColor: Color?) { +private fun PropertiesBuilder.cardImageStyle(highlightColor: Color?) { borderRadius = 5.pct - boxShadow(offsetX = 2.px, offsetY = 2.px, blurRadius = 5.px, color = Color.black) + boxShadow = BoxShadow(offsetX = 2.px, offsetY = 2.px, blurRadius = 5.px, color = NamedColor.black) highlightStyle(highlightColor) } -internal fun CssBuilder.highlightStyle(highlightColor: Color?) { +internal fun PropertiesBuilder.highlightStyle(highlightColor: Color?) { if (highlightColor != null) { - boxShadow( + boxShadow = BoxShadow( offsetX = 0.px, offsetY = 0.px, blurRadius = 1.rem, diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt index cec41d6a..843caaf7 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt @@ -1,309 +1,309 @@ package org.luxons.sevenwonders.ui.components.game import blueprintjs.core.* -import blueprintjs.icons.IconNames -import kotlinx.css.* -import kotlinx.css.Position -import kotlinx.css.properties.transform -import kotlinx.css.properties.translate -import org.luxons.sevenwonders.client.GameState -import org.luxons.sevenwonders.client.getBoard -import org.luxons.sevenwonders.client.getNonNeighbourBoards -import org.luxons.sevenwonders.client.getOwnBoard -import org.luxons.sevenwonders.model.MoveType -import org.luxons.sevenwonders.model.PlayerMove -import org.luxons.sevenwonders.model.TurnAction -import org.luxons.sevenwonders.model.api.PlayerDTO -import org.luxons.sevenwonders.model.boards.Board -import org.luxons.sevenwonders.model.boards.RelativeBoardPosition -import org.luxons.sevenwonders.model.cards.HandCard -import org.luxons.sevenwonders.model.resources.ResourceTransactionOptions -import org.luxons.sevenwonders.ui.components.GlobalStyles +import blueprintjs.icons.* +import csstype.* +import csstype.Position +import emotion.react.* +import org.luxons.sevenwonders.client.* +import org.luxons.sevenwonders.model.* +import org.luxons.sevenwonders.model.api.* +import org.luxons.sevenwonders.model.boards.* +import org.luxons.sevenwonders.model.cards.* +import org.luxons.sevenwonders.model.resources.* +import org.luxons.sevenwonders.ui.components.* import org.luxons.sevenwonders.ui.redux.* import org.luxons.sevenwonders.ui.utils.* import react.* -import styled.css -import styled.styledDiv +import react.dom.html.ReactHTML.div -external interface GameSceneStateProps : PropsWithChildren { +external interface GameSceneProps : Props { var currentPlayer: PlayerDTO? var players: List<PlayerDTO> - var game: GameState? + var game: GameState var preparedMove: PlayerMove? var preparedCard: HandCard? -} - -external interface GameSceneDispatchProps : PropsWithChildren { var sayReady: () -> Unit var prepareMove: (move: PlayerMove) -> Unit var unprepareMove: () -> Unit var leaveGame: () -> Unit } -interface GameSceneProps : GameSceneStateProps, GameSceneDispatchProps - -data class GameSceneState( - var transactionSelector: TransactionSelectorState? -) : State - data class TransactionSelectorState( val moveType: MoveType, val card: HandCard, val transactionsOptions: ResourceTransactionOptions, ) -private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, GameSceneState>(props) { +val GameScene = VFC("GameScene") { - override fun GameSceneState.init() { - transactionSelector = null - } + val player = useSwSelector { it.currentPlayer } + val gameState = useSwSelector { it.gameState } + val dispatch = useSwDispatch() - override fun RBuilder.render() { - styledDiv { - css { - +GlobalStyles.papyrusBackground - +GlobalStyles.fullscreen + div { + css(GlobalStyles.papyrusBackground, GlobalStyles.fullscreen) {} + + if (gameState == null) { + BpNonIdealState { + icon = IconNames.ERROR + titleText = "Error: no game data" } - val game = props.game - if (game == null) { - bpNonIdealState(icon = IconNames.ERROR, title = "Error: no game data") - } else { - boardScene(game) + } else { + GameScenePresenter { + currentPlayer = player + players = gameState.players + game = gameState + preparedMove = gameState.currentPreparedMove + preparedCard = gameState.currentPreparedCard + + prepareMove = { move -> dispatch(RequestPrepareMove(move)) } + unprepareMove = { dispatch(RequestUnprepareMove()) } + sayReady = { dispatch(RequestSayReady()) } + leaveGame = { dispatch(RequestLeaveGame()) } } } } +} - private fun RBuilder.boardScene(game: GameState) { - val board = game.getOwnBoard() - styledDiv { +private val GameScenePresenter = FC<GameSceneProps>("GameScenePresenter") { props -> + var transactionSelectorState by useState<TransactionSelectorState>() + + val game = props.game + val board = game.getOwnBoard() + div { + val maybeRed = GameStyles.pulsatingRed.takeIf { game.everyoneIsWaitingForMe() } + css(maybeRed) { + height = 100.pct + } + val action = game.action + if (action is TurnAction.WatchScore) { + scoreTableOverlay(action.scoreBoard, props.players, props.leaveGame) + } + actionInfo(game.action.message) + BoardComponent { + this.board = board css { + padding = Padding(vertical = 7.rem, horizontal = 7.rem) // to fit the action info message & board summaries + width = 100.pct height = 100.pct - if (everyoneIsWaitingForMe()) { - +GameStyles.pulsatingRed - } } - val action = game.action - if (action is TurnAction.WatchScore) { - scoreTableOverlay(action.scoreBoard, props.players, props.leaveGame) + } + transactionsSelectorDialog( + state = transactionSelectorState, + neighbours = playerNeighbours(props.currentPlayer, props.players), + prepareMove = { move -> + props.prepareMove(move) + transactionSelectorState = null + }, + cancelTransactionSelection = { transactionSelectorState = null }, + ) + boardSummaries(game) + handRotationIndicator(game.handRotationDirection) + handCards( + game = game, + prepareMove = props.prepareMove, + startTransactionsSelection = { + transactionSelectorState = it } - actionInfo(game.action.message) - boardComponent(board = board) { - css { - padding(all = 7.rem) // to fit the action info message & board summaries - width = 100.pct - height = 100.pct + ) + val card = props.preparedCard + val move = props.preparedMove + if (card != null && move != null) { + BpOverlay { + isOpen = true + onClose = { props.unprepareMove() } + + preparedMove(card, move, props.unprepareMove) { + css(GlobalStyles.fixedCenter) {} } } - transactionsSelectorDialog( - state = state.transactionSelector, - neighbours = playerNeighbours(), - prepareMove = ::prepareMoveAndCloseTransactions, - cancelTransactionSelection = ::resetTransactionSelector, - ) - boardSummaries(game) - handRotationIndicator(game.handRotationDirection) - handCards(game, props.prepareMove, ::startTransactionSelection) - val card = props.preparedCard - val move = props.preparedMove - if (card != null && move != null) { - preparedMove(card, move) - } - if (game.action is TurnAction.SayReady) { - sayReadyButton() + } + if (game.action is TurnAction.SayReady) { + SayReadyButton { + currentPlayer = props.currentPlayer + players = props.players + sayReady = props.sayReady } } } +} - private fun prepareMoveAndCloseTransactions(move: PlayerMove) { - props.prepareMove(move) - setState { transactionSelector = null } +private fun GameState.everyoneIsWaitingForMe(): Boolean { + val onlyMeInTheGame = players.count { it.isHuman } == 1 + if (onlyMeInTheGame || currentPreparedMove != null) { + return false } + return preparedCardsByUsername.values.count { it != null } == players.size - 1 +} - private fun startTransactionSelection(selectorState: TransactionSelectorState) { - setState { transactionSelector = selectorState } - } +private fun playerNeighbours(currentPlayer: PlayerDTO?, players: List<PlayerDTO>): Pair<PlayerDTO, PlayerDTO> { + val me = currentPlayer?.username ?: error("we shouldn't be trying to display this if there is no player") + val size = players.size + val myIndex = players.indexOfFirst { it.username == me } + return players[(myIndex - 1 + size) % size] to players[(myIndex + 1) % size] +} - private fun resetTransactionSelector() { - setState { transactionSelector = null } - } +private fun ChildrenBuilder.actionInfo(message: String) { + div { + css(ClassName(Classes.DARK)) { + position = Position.fixed + top = 0.pct + left = 0.pct + margin = Margin(vertical = 0.4.rem, horizontal = 0.4.rem) + maxWidth = 25.pct // leave space for 4 board summaries when there are 7 players + } + BpCard { + elevation = Elevation.TWO + css { + padding = Padding(all = 0.px) + } - private fun everyoneIsWaitingForMe(): Boolean { - val onlyMeInTheGame = props.players.count { it.isHuman } == 1 - if (onlyMeInTheGame || props.preparedMove != null) { - return false + BpCallout { + intent = Intent.PRIMARY + icon = IconNames.INFO_SIGN + +message + } } - val gameState = props.game ?: return false - return gameState.preparedCardsByUsername.values.count { it != null } == props.players.size - 1 } +} - private fun playerNeighbours(): Pair<PlayerDTO, PlayerDTO> { - val me = props.currentPlayer?.username ?: error("we shouldn't be trying to display this if there is no player") - val players = props.players - val size = players.size - val myIndex = players.indexOfFirst { it.username == me } - return players[(myIndex - 1 + size) % size] to players[(myIndex + 1) % size] +private fun ChildrenBuilder.boardSummaries(game: GameState) { + val leftBoard = game.getBoard(RelativeBoardPosition.LEFT) + val rightBoard = game.getBoard(RelativeBoardPosition.RIGHT) + val topBoards = game.getNonNeighbourBoards().reversed() + selfBoardSummary(game.getOwnBoard(), game.players) + leftPlayerBoardSummary(leftBoard, game.players) + rightPlayerBoardSummary(rightBoard, game.players) + if (topBoards.isNotEmpty()) { + topPlayerBoardsSummaries(topBoards, game.players) } +} + +private fun ChildrenBuilder.leftPlayerBoardSummary(board: Board, players: List<PlayerDTO>) { + div { + css { + position = Position.absolute + left = 0.px + bottom = 40.pct + } + BoardSummaryWithPopover { + this.player = players[board.playerIndex] + this.board = board + this.side = BoardSummarySide.LEFT - private fun RBuilder.actionInfo(message: String) { - styledDiv { css { - classes.add(Classes.DARK) - position = Position.fixed - top = 0.pct - left = 0.pct - margin(all = 0.4.rem) - maxWidth = 25.pct // leave space for 4 board summaries when there are 7 players - } - bpCard(elevation = Elevation.TWO) { - attrs { - this.className = GlobalStyles.getTypedClassName { it::noPadding } - } - bpCallout(intent = Intent.PRIMARY, icon = IconNames.INFO_SIGN) { +message } + borderTopRightRadius = 0.4.rem + borderBottomRightRadius = 0.4.rem } } } +} - private fun RBuilder.boardSummaries(game: GameState) { - val leftBoard = game.getBoard(RelativeBoardPosition.LEFT) - val rightBoard = game.getBoard(RelativeBoardPosition.RIGHT) - val topBoards = game.getNonNeighbourBoards().reversed() - selfBoardSummary(game.getOwnBoard()) - leftPlayerBoardSummary(leftBoard) - rightPlayerBoardSummary(rightBoard) - if (topBoards.isNotEmpty()) { - topPlayerBoardsSummaries(topBoards) +private fun ChildrenBuilder.rightPlayerBoardSummary(board: Board, players: List<PlayerDTO>) { + div { + css { + position = Position.absolute + right = 0.px + bottom = 40.pct } - } + BoardSummaryWithPopover { + this.player = players[board.playerIndex] + this.board = board + this.side = BoardSummarySide.RIGHT - private fun RBuilder.leftPlayerBoardSummary(board: Board) { - styledDiv { css { - position = Position.absolute - left = 0.px - bottom = 40.pct - } - boardSummaryWithPopover(props.players[board.playerIndex], board, BoardSummarySide.LEFT) { - css { - borderTopRightRadius = 0.4.rem - borderBottomRightRadius = 0.4.rem - } + borderTopLeftRadius = 0.4.rem + borderBottomLeftRadius = 0.4.rem } } } +} + +private fun ChildrenBuilder.topPlayerBoardsSummaries(boards: List<Board>, players: List<PlayerDTO>) { + div { + css { + position = Position.absolute + top = 0.px + left = 50.pct + transform = translate((-50).pct) + display = Display.flex + flexDirection = FlexDirection.row + } + boards.forEach { board -> + BoardSummaryWithPopover { + this.player = players[board.playerIndex] + this.board = board + this.side = BoardSummarySide.TOP - private fun RBuilder.rightPlayerBoardSummary(board: Board) { - styledDiv { - css { - position = Position.absolute - right = 0.px - bottom = 40.pct - } - boardSummaryWithPopover(props.players[board.playerIndex], board, BoardSummarySide.RIGHT) { css { - borderTopLeftRadius = 0.4.rem borderBottomLeftRadius = 0.4.rem + borderBottomRightRadius = 0.4.rem + margin = Margin(vertical = 0.rem, horizontal = 2.rem) } } } } +} - private fun RBuilder.topPlayerBoardsSummaries(boards: List<Board>) { - styledDiv { - css { - position = Position.absolute - top = 0.px - left = 50.pct - transform { translate((-50).pct) } - display = Display.flex - flexDirection = FlexDirection.row - } - boards.forEach { board -> - boardSummaryWithPopover(props.players[board.playerIndex], board, BoardSummarySide.TOP) { - css { - borderBottomLeftRadius = 0.4.rem - borderBottomRightRadius = 0.4.rem - margin(horizontal = 2.rem) - } - } - } +private fun ChildrenBuilder.selfBoardSummary(board: Board, players: List<PlayerDTO>) { + div { + css { + position = Position.absolute + bottom = 0.px + left = 0.px } - } + BoardSummary { + this.player = players[board.playerIndex] + this.board = board + this.side = BoardSummarySide.BOTTOM + this.showPreparationStatus = false - private fun RBuilder.selfBoardSummary(board: Board) { - styledDiv { css { - position = Position.absolute - bottom = 0.px - left = 0.px - } - boardSummary( - player = props.players[board.playerIndex], - board = board, BoardSummarySide.BOTTOM, - showPreparationStatus = false, - ) { - css { - borderTopLeftRadius = 0.4.rem - borderTopRightRadius = 0.4.rem - margin(horizontal = 2.rem) - } + borderTopLeftRadius = 0.4.rem + borderTopRightRadius = 0.4.rem + margin = Margin(vertical = 0.rem, horizontal = 2.rem) } } } +} - private fun RBuilder.preparedMove(card: HandCard, move: PlayerMove) { - bpOverlay(isOpen = true, onClose = props.unprepareMove) { - preparedMove(card, move, props.unprepareMove) { - css { +GlobalStyles.fixedCenter } - } +private external interface SayReadyButtonProps : Props { + var currentPlayer: PlayerDTO? + var players: List<PlayerDTO> + var sayReady: () -> Unit +} + +private val SayReadyButton = FC<SayReadyButtonProps>("SayReadyButton") { props -> + val isReady = props.currentPlayer?.isReady == true + val intent = if (isReady) Intent.SUCCESS else Intent.PRIMARY + div { + css { + position = Position.absolute + bottom = 6.rem + left = 50.pct + transform = translate(tx = (-50).pct) + zIndex = integer(2) // go above the wonder (1) and wonder-upgrade cards (0) } - } + BpButtonGroup { + BpButton { + this.large = true + this.disabled = isReady + this.intent = intent + this.icon = if (isReady) IconNames.TICK_CIRCLE else IconNames.PLAY + this.onClick = { props.sayReady() } - private fun RBuilder.sayReadyButton() { - val isReady = props.currentPlayer?.isReady == true - val intent = if (isReady) Intent.SUCCESS else Intent.PRIMARY - styledDiv { - css { - position = Position.absolute - bottom = 6.rem - left = 50.pct - transform { translate(tx = (-50).pct) } - zIndex = 2 // go above the wonder (1) and wonder-upgrade cards (0) + +"READY" } - bpButtonGroup { - bpButton( - large = true, - disabled = isReady, - intent = intent, - icon = if (isReady) IconNames.TICK_CIRCLE else IconNames.PLAY, - onClick = { props.sayReady() }, - ) { - +"READY" - } - // not really a button, but nice for style - bpButton(large = true, icon = IconNames.PEOPLE, disabled = isReady, intent = intent) { - +"${props.players.count { it.isReady }}/${props.players.size}" - } + // not really a button, but nice for style + BpButton { + this.large = true + this.icon = IconNames.PEOPLE + this.disabled = isReady + this.intent = intent + + +"${props.players.count { it.isReady }}/${props.players.size}" } } } } - -fun RBuilder.gameScene() = gameScene {} - -private val gameScene: ComponentClass<GameSceneProps> = - connectStateAndDispatch<GameSceneStateProps, GameSceneDispatchProps, GameSceneProps>( - clazz = GameScene::class, - mapDispatchToProps = { dispatch, _ -> - prepareMove = { move -> dispatch(RequestPrepareMove(move)) } - unprepareMove = { dispatch(RequestUnprepareMove()) } - sayReady = { dispatch(RequestSayReady()) } - leaveGame = { dispatch(RequestLeaveGame()) } - }, - mapStateToProps = { state, _ -> - currentPlayer = state.currentPlayer - players = state.gameState?.players ?: emptyList() - game = state.gameState - preparedMove = state.gameState?.currentPreparedMove - preparedCard = state.gameState?.currentPreparedCard - }, - ) diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt index 86d2d101..bccee3f1 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt @@ -1,100 +1,86 @@ package org.luxons.sevenwonders.ui.components.game -import kotlinx.css.* -import kotlinx.css.properties.* -import styled.StyleSheet -import styled.animation +import csstype.* +import emotion.css.* +import org.luxons.sevenwonders.ui.utils.* -object GameStyles : StyleSheet("GameStyles", isStatic = true) { +object GameStyles { - val totalScore by css { + val totalScore = ClassName { fontWeight = FontWeight.bold } - val civilScore by scoreTagColorCss(Color("#2a73c9")) - val scienceScore by scoreTagColorCss(Color("#0f9960")) - val militaryScore by scoreTagColorCss(Color("#d03232")) - val tradeScore by scoreTagColorCss(Color("#e2c11b")) - val guildScore by scoreTagColorCss(Color("#663399")) - val wonderScore by scoreTagColorCss(Color.darkCyan) - val goldScore by scoreTagColorCss(Color.goldenrod) + val civilScore = scoreTagColorCss(Color("#2a73c9")) + val scienceScore = scoreTagColorCss(Color("#0f9960")) + val militaryScore = scoreTagColorCss(Color("#d03232")) + val tradeScore = scoreTagColorCss(Color("#e2c11b")) + val guildScore = scoreTagColorCss(Color("#663399")) + val wonderScore = scoreTagColorCss(NamedColor.darkcyan) + val goldScore = scoreTagColorCss(NamedColor.goldenrod) - private val sandBgColor = Color.paleGoldenrod + val sandBgColor = NamedColor.palegoldenrod - val fullBoardPreviewPopover by css { - val bgColor = sandBgColor.withAlpha(0.7) - backgroundColor = bgColor - borderRadius = 0.5.rem - padding(all = 0.5.rem) - children(".bp4-popover-content") { - background = "none" // overrides default white background - } - descendants(".bp4-popover-arrow-fill") { - put("fill", bgColor.toString()) // overrides default white arrow - } - descendants(".bp4-popover-arrow::before") { - // The popover arrow is implemented with a simple square rotated 45 degrees (like a rhombus). - // Since we use a semi-transparent background, we can see the box shadow of the rest of the arrow through - // the popover, and thus we see the square. This boxShadow(transparent) is to avoid that. - boxShadow(Color.transparent) - } - } - - val fullBoardPreview by css { + val fullBoardPreview = ClassName { width = 40.vw height = 50.vh } - val dimmedCard by css { - filter = "brightness(60%) grayscale(50%)" + val dimmedCard = ClassName { + filter = brightness(60.pct) + grayscale(50.pct) } - val transactionsSelector by css { + val transactionsSelector = ClassName { backgroundColor = sandBgColor width = 40.rem // default is 500px, we want to fit players on the side children(".bp4-dialog-header") { - background = "none" // overrides default white background + background = None.none // overrides default white background } } - val bestPrice by css { + val bestPrice = ClassName { fontWeight = FontWeight.bold color = rgb(50, 120, 50) - transform { - rotate((-20).deg) - } + transform = rotate((-20).deg) } - val discardMoveText by css { + val discardMoveText = ClassName { display = Display.flex - alignItems = Align.center + alignItems = AlignItems.center height = 3.rem fontSize = 2.rem - color = Color.goldenrod + color = NamedColor.goldenrod fontWeight = FontWeight.bold - borderTop(0.2.rem, BorderStyle.solid, Color.goldenrod) - borderBottom(0.2.rem, BorderStyle.solid, Color.goldenrod) + borderTop = Border(0.2.rem, LineStyle.solid, NamedColor.goldenrod) + borderBottom = Border(0.2.rem, LineStyle.solid, NamedColor.goldenrod) } - val scoreBoard by css { + val scoreBoard = ClassName { backgroundColor = sandBgColor } - private fun scoreTagColorCss(color: Color) = css { + private fun scoreTagColorCss(color: Color) = ClassName { backgroundColor = color } - val pulsatingRed by css { - animation( + val pulsatingRed = ClassName { + animation = Animation( + name = keyframes { + to { + boxShadow = BoxShadow( + inset = BoxShadowInset.inset, + offsetX = 0.px, + offsetY = 0.px, + blurRadius = 20.px, + spreadRadius = 8.px, + color = NamedColor.red, + ) + } + }, duration = 2.s, - iterationCount = IterationCount.infinite, - direction = AnimationDirection.alternate, - ) { - to { - boxShadowInset(color = Color.red, blurRadius = 20.px, spreadRadius = 8.px) - } - } + ) + animationIterationCount = AnimationIterationCount.infinite + animationDirection = AnimationDirection.alternate } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt index da17c987..a136465d 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt @@ -1,26 +1,38 @@ package org.luxons.sevenwonders.ui.components.game import blueprintjs.core.* -import blueprintjs.icons.IconNames -import kotlinx.css.* -import kotlinx.css.Position -import kotlinx.css.properties.* -import kotlinx.html.DIV -import org.luxons.sevenwonders.client.GameState -import org.luxons.sevenwonders.client.getOwnBoard +import blueprintjs.icons.* +import csstype.* +import csstype.Position +import emotion.react.* +import org.luxons.sevenwonders.client.* import org.luxons.sevenwonders.model.* -import org.luxons.sevenwonders.model.boards.Board -import org.luxons.sevenwonders.model.cards.CardPlayability -import org.luxons.sevenwonders.model.cards.HandCard -import org.luxons.sevenwonders.model.resources.ResourceTransactionOptions -import org.luxons.sevenwonders.model.wonders.WonderBuildability +import org.luxons.sevenwonders.model.boards.* +import org.luxons.sevenwonders.model.cards.* +import org.luxons.sevenwonders.model.resources.* +import org.luxons.sevenwonders.model.wonders.* +import org.luxons.sevenwonders.ui.utils.* import react.* -import react.dom.attrs -import styled.StyledDOMBuilder -import styled.css -import styled.styledDiv -import web.html.* -import kotlin.math.absoluteValue +import react.dom.html.ReactHTML.div +import kotlin.math.* + +fun ChildrenBuilder.handCards( + game: GameState, + prepareMove: (PlayerMove) -> Unit, + startTransactionsSelection: (TransactionSelectorState) -> Unit, +) { + HandCards { + this.action = game.action + this.ownBoard = game.getOwnBoard() + this.preparedMove = game.currentPreparedMove + this.prepareMove = { moveType: MoveType, card: HandCard, transactionOptions: ResourceTransactionOptions -> + when (transactionOptions.size) { + 1 -> prepareMove(PlayerMove(moveType, card.name, transactionOptions.single())) + else -> startTransactionsSelection(TransactionSelectorState(moveType, card, transactionOptions)) + } + } + } +} private enum class HandAction( val buttonTitle: String, @@ -33,145 +45,154 @@ private enum class HandAction( COPY_GUILD("Copy this guild card", MoveType.COPY_GUILD, "duplicate") } -external interface HandProps : PropsWithChildren { +external interface HandCardsProps : Props { var action: TurnAction var ownBoard: Board var preparedMove: PlayerMove? - var prepareMove: (PlayerMove) -> Unit - var startTransactionsSelection: (TransactionSelectorState) -> Unit + var prepareMove: (MoveType, HandCard, ResourceTransactionOptions) -> Unit } -class HandComponent(props: HandProps) : RComponent<HandProps, State>(props) { - - override fun RBuilder.render() { - val hand = props.action.cardsToPlay() ?: return - styledDiv { - css { - handStyle() - } - hand.filter { it.name != props.preparedMove?.cardName }.forEachIndexed { index, c -> - handCard(card = c) { - attrs { - key = index.toString() - } - } +private val HandCards = FC<HandCardsProps>("HandCards") { props -> + val hand = props.action.cardsToPlay() ?: return@FC + div { + css { + handStyle() + } + hand.filter { it.name != props.preparedMove?.cardName }.forEachIndexed { index, c -> + HandCard { + card = c + action = props.action + ownBoard = props.ownBoard + prepareMove = props.prepareMove + key = index.toString() } } } +} - private fun TurnAction.cardsToPlay(): List<HandCard>? = when (this) { - is TurnAction.PlayFromHand -> hand - is TurnAction.PlayFromDiscarded -> discardedCards - is TurnAction.PickNeighbourGuild -> neighbourGuildCards - is TurnAction.SayReady, - is TurnAction.Wait, - is TurnAction.WatchScore -> null - } +private fun TurnAction.cardsToPlay(): List<HandCard>? = when (this) { + is TurnAction.PlayFromHand -> hand + is TurnAction.PlayFromDiscarded -> discardedCards + is TurnAction.PickNeighbourGuild -> neighbourGuildCards + is TurnAction.SayReady, + is TurnAction.Wait, + is TurnAction.WatchScore -> null +} - private fun RBuilder.handCard( - card: HandCard, - block: StyledDOMBuilder<DIV>.() -> Unit, - ) { - styledDiv { +private external interface HandCardProps : Props { + var card: HandCard + var action: TurnAction + var ownBoard: Board + var prepareMove: (MoveType, HandCard, ResourceTransactionOptions) -> Unit +} + +private val HandCard = FC<HandCardProps>("HandCard") { props -> + div { + css(ClassName("hand-card")) { + alignItems = AlignItems.flexEnd + display = Display.grid + margin = Margin(all = 0.2.rem) + } + CardImage { css { - handCardStyle() - } - block() - cardImage(card) { - css { - val isPlayable = card.playability.isPlayable || props.ownBoard.canPlayAnyCardForFree - handCardImgStyle(isPlayable) - } + val isPlayable = props.card.playability.isPlayable || props.ownBoard.canPlayAnyCardForFree + handCardImgStyle(isPlayable) } - actionButtons(card) + this.card = props.card } + actionButtons(props.card, props.action, props.ownBoard, props.prepareMove) } +} - private fun RBuilder.actionButtons(card: HandCard) { - styledDiv { - css { - justifyContent = JustifyContent.center - alignItems = Align.flexEnd - display = Display.none - gridRow = GridRow("1") - gridColumn = GridColumn("1") +private fun ChildrenBuilder.actionButtons( + card: HandCard, + action: TurnAction, + ownBoard: Board, + prepareMove: (MoveType, HandCard, ResourceTransactionOptions) -> Unit, +) { + div { + css { + justifyContent = JustifyContent.center + alignItems = AlignItems.flexEnd + display = None.none + gridRow = integer(1) + gridColumn = integer(1) - ancestorHover(".hand-card") { - display = Display.flex - } + ancestorHover(".hand-card") { + display = Display.flex } - bpButtonGroup { - val action = props.action - when (action) { - is TurnAction.PlayFromHand -> { - playCardButton(card, HandAction.PLAY) - if (props.ownBoard.canPlayAnyCardForFree) { - playCardButton(card.copy(playability = CardPlayability.SPECIAL_FREE), HandAction.PLAY_FREE) - } + } + BpButtonGroup { + when (action) { + is TurnAction.PlayFromHand -> { + playCardButton(card, HandAction.PLAY, prepareMove) + if (ownBoard.canPlayAnyCardForFree) { + playCardButton(card.copy(playability = CardPlayability.SPECIAL_FREE), HandAction.PLAY_FREE, prepareMove) } - is TurnAction.PlayFromDiscarded -> playCardButton(card, HandAction.PLAY_FREE_DISCARDED) - is TurnAction.PickNeighbourGuild -> playCardButton(card, HandAction.COPY_GUILD) - is TurnAction.SayReady, - is TurnAction.Wait, - is TurnAction.WatchScore -> error("unsupported action in hand card: $action") - } - - if (action.allowsBuildingWonder()) { - upgradeWonderButton(card) - } - if (action.allowsDiscarding()) { - discardButton(card) } + is TurnAction.PlayFromDiscarded -> playCardButton(card, HandAction.PLAY_FREE_DISCARDED, prepareMove) + is TurnAction.PickNeighbourGuild -> playCardButton(card, HandAction.COPY_GUILD, prepareMove) + is TurnAction.SayReady, + is TurnAction.Wait, + is TurnAction.WatchScore -> error("unsupported action in hand card: $action") } - } - } - private fun RElementBuilder<ButtonGroupProps>.playCardButton(card: HandCard, handAction: HandAction) { - bpButton( - title = "${handAction.buttonTitle} (${cardPlayabilityInfo(card.playability)})", - large = true, - intent = Intent.SUCCESS, - disabled = !card.playability.isPlayable, - onClick = { prepareMove(handAction.moveType, card, card.playability.transactionOptions) }, - ) { - bpIcon(handAction.icon) - if (card.playability.isPlayable && !card.playability.isFree) { - priceInfo(card.playability.minPrice) + if (action.allowsBuildingWonder()) { + upgradeWonderButton(card, ownBoard.wonder.buildability, prepareMove) + } + if (action.allowsDiscarding()) { + discardButton(card, prepareMove) } } } +} - private fun RElementBuilder<ButtonGroupProps>.upgradeWonderButton(card: HandCard) { - val wonderBuildability = props.ownBoard.wonder.buildability - bpButton( - title = "UPGRADE WONDER (${wonderBuildabilityInfo(wonderBuildability)})", - large = true, - intent = Intent.PRIMARY, - disabled = !wonderBuildability.isBuildable, - onClick = { prepareMove(MoveType.UPGRADE_WONDER, card, wonderBuildability.transactionsOptions) }, - ) { - bpIcon("key-shift") - if (wonderBuildability.isBuildable && !wonderBuildability.isFree) { - priceInfo(wonderBuildability.minPrice) - } +private fun ChildrenBuilder.playCardButton( + card: HandCard, + handAction: HandAction, + prepareMove: (MoveType, HandCard, ResourceTransactionOptions) -> Unit, +) { + BpButton { + title = "${handAction.buttonTitle} (${cardPlayabilityInfo(card.playability)})" + large = true + intent = Intent.SUCCESS + disabled = !card.playability.isPlayable + onClick = { prepareMove(handAction.moveType, card, card.playability.transactionOptions) } + + BpIcon { icon = handAction.icon } + + if (card.playability.isPlayable && !card.playability.isFree) { + priceInfo(card.playability.minPrice) } } +} - private fun prepareMove(moveType: MoveType, card: HandCard, transactionOptions: ResourceTransactionOptions) { - when (transactionOptions.size) { - 1 -> props.prepareMove(PlayerMove(moveType, card.name, transactionOptions.single())) - else -> props.startTransactionsSelection(TransactionSelectorState(moveType, card, transactionOptions)) +private fun ChildrenBuilder.upgradeWonderButton( + card: HandCard, + wonderBuildability: WonderBuildability, + prepareMove: (MoveType, HandCard, ResourceTransactionOptions) -> Unit, +) { + BpButton { + title = "UPGRADE WONDER (${wonderBuildabilityInfo(wonderBuildability)})" + large = true + intent = Intent.PRIMARY + disabled = !wonderBuildability.isBuildable + onClick = { prepareMove(MoveType.UPGRADE_WONDER, card, wonderBuildability.transactionsOptions) } + + BpIcon { icon = IconNames.KEY_SHIFT } + if (wonderBuildability.isBuildable && !wonderBuildability.isFree) { + priceInfo(wonderBuildability.minPrice) } } +} - private fun RElementBuilder<ButtonGroupProps>.discardButton(card: HandCard) { - bpButton( - title = "DISCARD (+3 coins)", // TODO remove hardcoded value - large = true, - intent = Intent.DANGER, - icon = IconNames.CROSS, - onClick = { props.prepareMove(PlayerMove(MoveType.DISCARD, card.name)) }, - ) +private fun ChildrenBuilder.discardButton(card: HandCard, prepareMove: (MoveType, HandCard, ResourceTransactionOptions) -> Unit) { + BpButton { + title = "DISCARD (+3 coins)" // TODO remove hardcoded value + large = true + intent = Intent.DANGER + icon = IconNames.CROSS + onClick = { prepareMove(MoveType.DISCARD, card, emptyList()) } } } @@ -196,15 +217,14 @@ private fun pricePrefix(amount: Int) = when { else -> "" } -private fun RElementBuilder<ButtonProps<HTMLButtonElement>>.priceInfo(amount: Int) { - val size = 1.rem +private fun ChildrenBuilder.priceInfo(amount: Int) { goldIndicator( amount = amount, amountPosition = TokenCountPosition.OVER, - imgSize = size, + imgSize = 1.rem, customCountStyle = { - fontFamily = "sans-serif" - fontSize = size * 0.8 + fontFamily = FontFamily.sansSerif + fontSize = 0.8.rem }, ) { css { @@ -215,68 +235,41 @@ private fun RElementBuilder<ButtonProps<HTMLButtonElement>>.priceInfo(amount: In } } -private fun CssBuilder.handStyle() { - alignItems = Align.center +private fun PropertiesBuilder.handStyle() { + alignItems = AlignItems.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 = 65.pct) - } - transition(duration = 0.5.s) - zIndex = 30 + transform = translate(tx = (-50).pct, ty = 65.pct) + transition = Transition(TransitionProperty.all, duration = 0.5.s, timingFunction = TransitionTimingFunction.ease) + zIndex = integer(30) hover { bottom = 1.rem - zIndex = 60 - transform { - translate(tx = (-50).pct, ty = 0.pct) - } + zIndex = integer(60) + 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") +private fun PropertiesBuilder.handCardImgStyle(isPlayable: Boolean) { + gridRow = integer(1) + gridColumn = integer(1) maxWidth = 13.vw maxHeight = 60.vh - transition(duration = 0.1.s) + transition = Transition(TransitionProperty.all, duration = 0.1.s, timingFunction = TransitionTimingFunction.ease) width = 11.rem ancestorHover(".hand-card") { - boxShadow(offsetX = 0.px, offsetY = 10.px, blurRadius = 40.px, color = Color.black) + boxShadow = BoxShadow(offsetX = 0.px, offsetY = 10.px, blurRadius = 40.px, color = NamedColor.black) width = 14.rem maxWidth = 15.vw maxHeight = 90.vh } if (!isPlayable) { - filter = "grayscale(50%) contrast(50%)" - } -} - -fun RBuilder.handCards( - game: GameState, - prepareMove: (PlayerMove) -> Unit, - startTransactionsSelection: (TransactionSelectorState) -> Unit, -) { - child(HandComponent::class) { - attrs { - this.action = game.action - this.ownBoard = game.getOwnBoard() - this.preparedMove = game.currentPreparedMove - this.prepareMove = prepareMove - this.startTransactionsSelection = startTransactionsSelection - } + filter = grayscale(50.pct) + contrast(50.pct) } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt index 4761ac13..9e6874d3 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt @@ -1,44 +1,51 @@ package org.luxons.sevenwonders.ui.components.game -import blueprintjs.core.bpIcon -import kotlinx.css.* -import kotlinx.html.title -import org.luxons.sevenwonders.model.cards.HandRotationDirection -import react.RBuilder -import react.dom.attrs -import styled.css -import styled.styledDiv -import styled.styledImg +import blueprintjs.core.* +import blueprintjs.icons.* +import csstype.* +import csstype.Position +import emotion.react.* +import org.luxons.sevenwonders.model.cards.* +import react.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.img -fun RBuilder.handRotationIndicator(direction: HandRotationDirection) { - styledDiv { +fun ChildrenBuilder.handRotationIndicator(direction: HandRotationDirection) { + div { css { position = Position.absolute display = Display.flex - alignItems = Align.center + alignItems = AlignItems.center bottom = 25.vh } - attrs { - title = "Your hand will be passed to the player on your $direction after playing this card." - } + + title = "Your hand will be passed to the player on your $direction after playing this card." + val sideDistance = 2.rem when (direction) { HandRotationDirection.LEFT -> { css { left = sideDistance } - bpIcon("arrow-left", size = 25) + BpIcon { + icon = IconNames.ARROW_LEFT + size = 25 + } handCardsImg() } HandRotationDirection.RIGHT -> { css { right = sideDistance } handCardsImg() - bpIcon("arrow-right", size = 25) + BpIcon { + icon = IconNames.ARROW_RIGHT + size = 25 + } } } } } -private fun RBuilder.handCardsImg() { - styledImg(src = "images/hand-cards5.png") { +private fun ChildrenBuilder.handCardsImg() { + img { + src = "images/hand-cards5.png" css { width = 4.rem } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt deleted file mode 100644 index b42d3b81..00000000 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt +++ /dev/null @@ -1,82 +0,0 @@ -package org.luxons.sevenwonders.ui.components.game - -import kotlinx.css.* -import kotlinx.css.properties.* -import kotlinx.html.title -import org.luxons.sevenwonders.model.api.PlayerDTO -import org.luxons.sevenwonders.model.cards.CardBack -import org.luxons.sevenwonders.ui.redux.connectStateWithOwnProps -import react.* -import react.dom.attrs -import styled.animation -import styled.css -import styled.styledDiv -import styled.styledImg - -external interface PlayerPreparedCardProps : PropsWithChildren { - var playerDisplayName: String - var cardBack: CardBack? -} - -external interface PlayerPreparedCardContainerProps : PropsWithChildren { - var playerDisplayName: String - var username: String -} - -fun RBuilder.playerPreparedCard(player: PlayerDTO) = playerPreparedCard { - attrs { - this.playerDisplayName = player.displayName - this.username = player.username - } -} - -private class PlayerPreparedCard(props: PlayerPreparedCardProps) : RComponent<PlayerPreparedCardProps, State>(props) { - - override fun RBuilder.render() { - val cardBack = props.cardBack - val sideSize = 30.px - styledDiv { - css { - width = sideSize - height = sideSize - } - attrs { - title = if (cardBack == null) { - "${props.playerDisplayName} is still thinking…" - } else { - "${props.playerDisplayName} is ready to play this turn" - } - } - if (cardBack != null) { - cardBackImage(cardBack) { - css { - maxHeight = sideSize - } - } - } else { - styledImg(src = "images/gear-50.png") { - css { - maxHeight = sideSize - animation( - duration = 1.5.s, - iterationCount = IterationCount.infinite, - timing = cubicBezier(0.2, 0.9, 0.7, 1.3) - ) { - to { - transform { rotate(360.deg) } - } - } - } - } - } - } - } -} - -private val playerPreparedCard = connectStateWithOwnProps( - clazz = PlayerPreparedCard::class, - mapStateToProps = { state, ownProps: PlayerPreparedCardContainerProps -> - playerDisplayName = ownProps.playerDisplayName - cardBack = state.gameState?.preparedCardsByUsername?.get(ownProps.username) - }, -) diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt new file mode 100644 index 00000000..26678309 --- /dev/null +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt @@ -0,0 +1,79 @@ +package org.luxons.sevenwonders.ui.components.game + +import csstype.* +import emotion.css.* +import emotion.react.* +import org.luxons.sevenwonders.model.cards.* +import org.luxons.sevenwonders.ui.redux.* +import org.luxons.sevenwonders.ui.utils.* +import react.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.img + +external interface PlayerPreparedCardProps : Props { + var playerDisplayName: String + var username: String +} + +val PlayerPreparedCard = FC<PlayerPreparedCardProps>("PlayerPreparedCard") { props -> + val cardBack = useSwSelector { it.gameState?.preparedCardsByUsername?.get(props.username) } + + PlayerPreparedCardPresenter { + this.playerDisplayName = props.playerDisplayName + this.cardBack = cardBack + } +} + +external interface PlayerPreparedCardPresenterProps : Props { + var playerDisplayName: String + var cardBack: CardBack? +} + +private val PlayerPreparedCardPresenter = FC<PlayerPreparedCardPresenterProps>("PlayerPreparedCardPresenter") { props -> + val cardBack = props.cardBack + val sideSize = 30.px + div { + css { + width = sideSize + height = sideSize + } + title = if (cardBack == null) { + "${props.playerDisplayName} is still thinking…" + } else { + "${props.playerDisplayName} is ready to play this turn" + } + + if (cardBack != null) { + CardBackImage { + this.cardBack = cardBack + css { + maxHeight = sideSize + } + } + } else { + RotatingGear { + css { + maxHeight = sideSize + } + } + } + } +} + +private val RotatingGear = FC<PropsWithClassName> { props -> + img { + src = "images/gear-50.png" + css(props.className) { + animation = Animation( + name = keyframes { + to { + transform = rotate(360.deg) + } + }, + duration = 1.5.s, + timingFunction = cubicBezier(0.2, 0.9, 0.7, 1.3), + ) + animationIterationCount = AnimationIterationCount.infinite + } + } +} diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt index a56bbc00..b03505d6 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt @@ -1,32 +1,31 @@ package org.luxons.sevenwonders.ui.components.game -import blueprintjs.core.Intent -import blueprintjs.core.bpButton -import blueprintjs.icons.IconNames -import kotlinx.css.* -import kotlinx.css.properties.* -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.GlobalStyles -import react.RBuilder -import styled.StyledDOMBuilder -import styled.css -import styled.styledDiv -import styled.styledImg +import blueprintjs.core.* +import blueprintjs.icons.* +import csstype.* +import csstype.Position +import emotion.react.* +import org.luxons.sevenwonders.model.* +import org.luxons.sevenwonders.model.cards.* +import org.luxons.sevenwonders.ui.components.* +import react.* +import react.dom.html.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.img +import web.html.* -fun RBuilder.preparedMove( +fun ChildrenBuilder.preparedMove( card: HandCard, move: PlayerMove, unprepareMove: () -> Unit, - block: StyledDOMBuilder<DIV>.() -> Unit, + block: HTMLAttributes<HTMLDivElement>.() -> Unit, ) { - styledDiv { + div { block() - cardImage(card) { + CardImage { + this.card = card if (move.type == MoveType.DISCARD || move.type == MoveType.UPGRADE_WONDER) { - css { +GameStyles.dimmedCard } + this.className = GameStyles.dimmedCard } } if (move.type == MoveType.DISCARD) { @@ -35,43 +34,39 @@ fun RBuilder.preparedMove( if (move.type == MoveType.UPGRADE_WONDER) { upgradeWonderSymbol() } - styledDiv { + div { css { position = Position.absolute top = 0.px right = 0.px } - bpButton( - icon = IconNames.CROSS, - title = "Cancel prepared move", - small = true, - intent = Intent.DANGER, - onClick = { unprepareMove() }, - ) + BpButton { + icon = IconNames.CROSS + title = "Cancel prepared move" + small = true + intent = Intent.DANGER + onClick = { unprepareMove() } + } } } } -private fun StyledDOMBuilder<DIV>.discardText() { - styledDiv { - css { - +GlobalStyles.centerInPositionedParent - +GameStyles.discardMoveText - } +private fun ChildrenBuilder.discardText() { + div { + css(GlobalStyles.centerInPositionedParent, GameStyles.discardMoveText) {} +"DISCARD" } } -private fun StyledDOMBuilder<DIV>.upgradeWonderSymbol() { - styledImg(src = "/images/wonder-upgrade-bright.png") { +private fun ChildrenBuilder.upgradeWonderSymbol() { + img { + src = "/images/wonder-upgrade-bright.png" css { width = 8.rem position = Position.absolute left = 10.pct top = 50.pct - transform { - translate((-50).pct, (-50).pct) - } + transform = translate((-50).pct, (-50).pct) } } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt index 01bf139b..c9e530ce 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt @@ -1,52 +1,55 @@ package org.luxons.sevenwonders.ui.components.game import blueprintjs.core.* +import blueprintjs.icons.* import csstype.* -import kotlinx.css.* -import kotlinx.css.Display -import kotlinx.css.FlexDirection -import kotlinx.css.TextAlign -import kotlinx.css.VerticalAlign -import kotlinx.css.px -import kotlinx.css.rem -import kotlinx.html.TD -import kotlinx.html.TH -import org.luxons.sevenwonders.model.api.PlayerDTO -import org.luxons.sevenwonders.model.score.ScoreBoard -import org.luxons.sevenwonders.model.score.ScoreCategory -import org.luxons.sevenwonders.ui.components.GlobalStyles +import emotion.react.* +import org.luxons.sevenwonders.model.api.* +import org.luxons.sevenwonders.model.score.* +import org.luxons.sevenwonders.ui.components.* import org.luxons.sevenwonders.ui.utils.* -import react.RBuilder -import react.dom.* -import styled.* - -fun RBuilder.scoreTableOverlay(scoreBoard: ScoreBoard, players: List<PlayerDTO>, leaveGame: () -> Unit) { - bpOverlay(isOpen = true) { - bpCard { - attrs { - val fixedCenterClass = GlobalStyles.getClassName { it::fixedCenter } - val scoreBoardClass = GameStyles.getClassName { it::scoreBoard } - className = ClassName("$fixedCenterClass $scoreBoardClass") - } - styledDiv { - css { +import react.* +import react.dom.html.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.h1 +import react.dom.html.ReactHTML.sup +import react.dom.html.ReactHTML.tbody +import react.dom.html.ReactHTML.td +import react.dom.html.ReactHTML.th +import react.dom.html.ReactHTML.thead +import react.dom.html.ReactHTML.tr + +fun ChildrenBuilder.scoreTableOverlay(scoreBoard: ScoreBoard, players: List<PlayerDTO>, leaveGame: () -> Unit) { + BpOverlay { + isOpen = true + + BpCard { + css(GlobalStyles.fixedCenter, GameStyles.scoreBoard) {} + + div { + // FIXME this doesn't look right, the scoreBoard class is applied at both levels + css(GameStyles.scoreBoard) { // loads the styles so that they can be picked up by bpCard display = Display.flex flexDirection = FlexDirection.column - alignItems = Align.center - +GameStyles.scoreBoard // loads the styles so that they can be picked up by bpCard + alignItems = AlignItems.center } - styledH1 { + h1 { css { marginTop = 0.px } +"Score Board" } scoreTable(scoreBoard, players) - styledDiv { + div { css { marginTop = 1.rem } - bpButton(intent = Intent.WARNING, rightIcon = "log-out", large = true, onClick = { leaveGame() }) { + BpButton { + intent = Intent.WARNING + rightIcon = "log-out" + large = true + onClick = { leaveGame() } + +"LEAVE" } } @@ -55,18 +58,32 @@ fun RBuilder.scoreTableOverlay(scoreBoard: ScoreBoard, players: List<PlayerDTO>, } } -private fun RBuilder.scoreTable(scoreBoard: ScoreBoard, players: List<PlayerDTO>) { - bpHtmlTable(bordered = false, interactive = true) { +private fun ChildrenBuilder.scoreTable(scoreBoard: ScoreBoard, players: List<PlayerDTO>) { + BpHTMLTable { + bordered = false + interactive = true + thead { tr { - centeredTh { +"Rank" } - centeredTh { - attrs { colSpan = "2" } + th { + fullCenterInlineStyle() + +"Rank" + } + th { + fullCenterInlineStyle() + colSpan = 2 + +"Player" } - centeredTh { +"Score" } + th { + fullCenterInlineStyle() + +"Score" + } ScoreCategory.values().forEach { - centeredTh { +it.title } + th { + fullCenterInlineStyle() + +it.title + } } } } @@ -74,28 +91,44 @@ private fun RBuilder.scoreTable(scoreBoard: ScoreBoard, players: List<PlayerDTO> scoreBoard.scores.forEachIndexed { index, score -> val player = players[score.playerIndex] tr { - centeredTd { ordinal(scoreBoard.ranks[index]) } - centeredTd { bpIcon(player.icon?.name ?: "user", size = 25) } - styledTd { + td { + fullCenterInlineStyle() + ordinal(scoreBoard.ranks[index]) + } + td { + fullCenterInlineStyle() + BpIcon { + icon = player.icon?.name ?: IconNames.USER + size = 25 + } + } + td { inlineStyles { verticalAlign = VerticalAlign.middle } +player.displayName } - centeredTd { - bpTag(large = true, round = true, minimal = true) { - attrs { - this.className = GameStyles.getTypedClassName { it::totalScore } - } + td { + fullCenterInlineStyle() + BpTag { + large = true + round = true + minimal = true + className = GameStyles.totalScore + +"${score.totalPoints}" } } ScoreCategory.values().forEach { cat -> - centeredTd { - bpTag(large = true, round = true, icon = cat.icon, fill = true) { - attrs { - this.className = classNameForCategory(cat) - } + td { + fullCenterInlineStyle() + BpTag { + large = true + round = true + fill = true + icon = cat.icon + className = classNameForCategory(cat) + +"${score.pointsByCategory[cat]}" } } @@ -106,7 +139,7 @@ private fun RBuilder.scoreTable(scoreBoard: ScoreBoard, players: List<PlayerDTO> } } -private fun RBuilder.ordinal(value: Int) { +private fun ChildrenBuilder.ordinal(value: Int) { +"$value" sup { +value.ordinalIndicator() } } @@ -118,49 +151,33 @@ private fun Int.ordinalIndicator() = when { else -> "th" } -private fun RBuilder.centeredTh(block: RDOMBuilder<TH>.() -> Unit) { - th { - // inline styles necessary to overcome blueprintJS overrides - inlineStyles { - textAlign = TextAlign.center - verticalAlign = VerticalAlign.middle - } - block() +private fun HTMLAttributes<*>.fullCenterInlineStyle() { + // inline styles necessary to overcome blueprintJS overrides + inlineStyles { + textAlign = TextAlign.center + verticalAlign = VerticalAlign.middle } } -private fun RBuilder.centeredTd(block: RDOMBuilder<TD>.() -> Unit) { - td { - // inline styles necessary to overcome blueprintJS overrides - inlineStyles { - textAlign = TextAlign.center - verticalAlign = VerticalAlign.middle - } - block() - } -} - -private fun classNameForCategory(cat: ScoreCategory): ClassName = GameStyles.getTypedClassName { - when (cat) { - ScoreCategory.CIVIL -> it::civilScore - ScoreCategory.SCIENCE -> it::scienceScore - ScoreCategory.MILITARY -> it::militaryScore - ScoreCategory.TRADE -> it::tradeScore - ScoreCategory.GUILD -> it::guildScore - ScoreCategory.WONDER -> it::wonderScore - ScoreCategory.GOLD -> it::goldScore - } +private fun classNameForCategory(cat: ScoreCategory): ClassName = when (cat) { + ScoreCategory.CIVIL -> GameStyles.civilScore + ScoreCategory.SCIENCE -> GameStyles.scienceScore + ScoreCategory.MILITARY -> GameStyles.militaryScore + ScoreCategory.TRADE -> GameStyles.tradeScore + ScoreCategory.GUILD -> GameStyles.guildScore + ScoreCategory.WONDER -> GameStyles.wonderScore + ScoreCategory.GOLD -> GameStyles.goldScore } private val ScoreCategory.icon: String get() = when (this) { - ScoreCategory.CIVIL -> "office" - ScoreCategory.SCIENCE -> "lab-test" - ScoreCategory.MILITARY -> "cut" - ScoreCategory.TRADE -> "swap-horizontal" - ScoreCategory.GUILD -> "clean" // stars - ScoreCategory.WONDER -> "symbol-triangle-up" - ScoreCategory.GOLD -> "dollar" + ScoreCategory.CIVIL -> IconNames.OFFICE + ScoreCategory.SCIENCE -> IconNames.LAB_TEST + ScoreCategory.MILITARY -> IconNames.CUT + ScoreCategory.TRADE -> IconNames.SWAP_HORIZONTAL + ScoreCategory.GUILD -> IconNames.CLEAN // stars + ScoreCategory.WONDER -> IconNames.SYMBOL_TRIANGLE_UP + ScoreCategory.GOLD -> IconNames.DOLLAR } // Potentially useful emojis: diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt index da5fc5ed..c7942f59 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt @@ -1,14 +1,15 @@ package org.luxons.sevenwonders.ui.components.game -import kotlinx.css.* -import kotlinx.html.DIV -import kotlinx.html.IMG -import kotlinx.html.title -import org.luxons.sevenwonders.model.resources.ResourceType -import org.luxons.sevenwonders.ui.components.GlobalStyles -import react.RBuilder -import react.dom.attrs -import styled.* +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.model.resources.* +import org.luxons.sevenwonders.ui.components.* +import react.* +import react.dom.html.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.img +import react.dom.html.ReactHTML.span +import web.html.* private fun getResourceTokenName(resourceType: ResourceType) = "resources/${resourceType.toString().lowercase()}" @@ -20,12 +21,12 @@ enum class TokenCountPosition { OVER, } -fun RBuilder.goldIndicator( +fun ChildrenBuilder.goldIndicator( amount: Int, amountPosition: TokenCountPosition = TokenCountPosition.OVER, - imgSize: LinearDimension = 3.rem, - customCountStyle: CssBuilder.() -> Unit = {}, - block: StyledDOMBuilder<DIV>.() -> Unit = {}, + imgSize: Length = 3.rem, + customCountStyle: PropertiesBuilder.() -> Unit = {}, + block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}, ) { tokenWithCount( tokenName = "coin", @@ -38,54 +39,39 @@ fun RBuilder.goldIndicator( ) } -fun RBuilder.resourceWithCount( +fun ChildrenBuilder.resourceImage( resourceType: ResourceType, - count: Int, title: String = resourceType.toString(), - imgSize: LinearDimension? = null, - countPosition: TokenCountPosition = TokenCountPosition.RIGHT, - brightText: Boolean = false, - customCountStyle: CssBuilder.() -> Unit = {}, - block: StyledDOMBuilder<DIV>.() -> Unit = {}, + size: Length?, ) { - tokenWithCount( - tokenName = getResourceTokenName(resourceType), - count = count, - title = title, - imgSize = imgSize, - countPosition = countPosition, - brightText = brightText, - customCountStyle = customCountStyle, - block = block - ) -} - -fun RBuilder.resourceImage( - resourceType: ResourceType, - title: String = resourceType.toString(), - size: LinearDimension?, - block: StyledDOMBuilder<IMG>.() -> Unit = {}, -) { - tokenImage(getResourceTokenName(resourceType), title, size, block) + TokenImage { + this.tokenName = getResourceTokenName(resourceType) + this.title = title + this.size = size + } } -fun RBuilder.tokenWithCount( +fun ChildrenBuilder.tokenWithCount( tokenName: String, count: Int, title: String = tokenName, - imgSize: LinearDimension? = null, + imgSize: Length? = null, countPosition: TokenCountPosition = TokenCountPosition.RIGHT, brightText: Boolean = false, - customCountStyle: CssBuilder.() -> Unit = {}, - block: StyledDOMBuilder<DIV>.() -> Unit = {}, + customCountStyle: PropertiesBuilder.() -> Unit = {}, + block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}, ) { - styledDiv { + div { block() - val tokenCountSize = if (imgSize != null) imgSize * 0.6 else 1.5.rem + val tokenCountSize = if (imgSize != null) 0.6 * imgSize else 1.5.rem when (countPosition) { TokenCountPosition.RIGHT -> { - tokenImage(tokenName, title = title, size = imgSize) - styledSpan { + TokenImage { + this.tokenName = tokenName + this.title = title + this.size = imgSize + } + span { css { tokenCountStyle(tokenCountSize, brightText, customCountStyle) marginLeft = 0.2.rem @@ -93,27 +79,36 @@ fun RBuilder.tokenWithCount( +"× $count" } } + TokenCountPosition.LEFT -> { - styledSpan { + span { css { tokenCountStyle(tokenCountSize, brightText, customCountStyle) marginRight = 0.2.rem } +"$count ×" } - tokenImage(tokenName, title = title, size = imgSize) + TokenImage { + this.tokenName = tokenName + this.title = title + this.size = imgSize + } } + TokenCountPosition.OVER -> { - styledDiv { + div { css { position = Position.relative // if container becomes large, this one stays small so that children stay on top of each other - width = LinearDimension.fitContent + width = Length.fitContent } - tokenImage(tokenName, title = title, size = imgSize) - styledSpan { - css { - +GlobalStyles.centerInPositionedParent + TokenImage { + this.tokenName = tokenName + this.title = title + this.size = imgSize + } + span { + css(GlobalStyles.centerInPositionedParent) { tokenCountStyle(tokenCountSize, brightText, customCountStyle) } +"$count" @@ -124,36 +119,36 @@ fun RBuilder.tokenWithCount( } } -fun RBuilder.tokenImage( - tokenName: String, - title: String = tokenName, - size: LinearDimension?, - block: StyledDOMBuilder<IMG>.() -> Unit = {}, -) { - styledImg(src = getTokenImagePath(tokenName)) { +external interface TokenImageProps : Props { + var tokenName: String + var title: String? + var size: Length? +} + +val TokenImage = FC<TokenImageProps> { props -> + img { + src = getTokenImagePath(props.tokenName) + title = props.title ?: props.tokenName + alt = props.tokenName + css { - height = size ?: 100.pct - if (size != null) { - width = size + height = props.size ?: 100.pct + if (props.size != null) { + width = props.size } verticalAlign = VerticalAlign.middle } - attrs { - this.title = title - this.alt = tokenName - } - block() } } -private fun CssBuilder.tokenCountStyle( - size: LinearDimension, +private fun PropertiesBuilder.tokenCountStyle( + size: Length, brightText: Boolean, - customStyle: CssBuilder.() -> Unit = {}, + customStyle: PropertiesBuilder.() -> Unit = {}, ) { - fontFamily = "Acme" + fontFamily = string("Acme") fontSize = size verticalAlign = VerticalAlign.middle - color = if (brightText) Color.white else Color.black + color = if (brightText) NamedColor.white else NamedColor.black customStyle() } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt index 66bc44d3..966a40eb 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt @@ -1,64 +1,65 @@ package org.luxons.sevenwonders.ui.components.game import blueprintjs.core.* -import kotlinx.css.* -import kotlinx.html.DIV -import kotlinx.html.TBODY -import kotlinx.html.TD -import kotlinx.html.classes -import kotlinx.html.js.onClickFunction -import org.luxons.sevenwonders.model.PlayerMove -import org.luxons.sevenwonders.model.api.PlayerDTO +import blueprintjs.icons.* +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.model.* +import org.luxons.sevenwonders.model.api.* import org.luxons.sevenwonders.model.resources.* import org.luxons.sevenwonders.model.resources.Provider -import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo +import org.luxons.sevenwonders.ui.components.gameBrowser.* import org.luxons.sevenwonders.ui.utils.* import react.* -import react.dom.* -import styled.* +import react.dom.html.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.p +import react.dom.html.ReactHTML.tbody +import react.dom.html.ReactHTML.td +import react.dom.html.ReactHTML.tr +import web.html.* -fun RBuilder.transactionsSelectorDialog( +fun ChildrenBuilder.transactionsSelectorDialog( state: TransactionSelectorState?, neighbours: Pair<PlayerDTO, PlayerDTO>, prepareMove: (PlayerMove) -> Unit, cancelTransactionSelection: () -> Unit, ) { - bpDialog( - isOpen = state != null, - title = "Trading time!", - canEscapeKeyClose = true, - canOutsideClickClose = true, - isCloseButtonShown = true, - onClose = cancelTransactionSelection, - ) { - attrs { - className = GameStyles.getTypedClassName { it::transactionsSelector } - } - div { - attrs { - classes += Classes.DIALOG_BODY - } + BpDialog { + isOpen = state != null + titleText = "Trading time!" + canEscapeKeyClose = true + canOutsideClickClose = true + isCloseButtonShown = true + onClose = { cancelTransactionSelection() } + + className = GameStyles.transactionsSelector + + BpDialogBody { p { +"You don't have enough resources to perform this move, but you can buy them from neighbours. " +"Please pick an option:" } if (state != null) { // should always be true when the dialog is rendered - styledDiv { + div { css { - margin(all = LinearDimension.auto) + margin = Margin(all = Auto.auto) display = Display.flex - alignItems = Align.center + alignItems = AlignItems.center } neighbour(neighbours.first) - styledDiv { + div { css { - flex(Flex.GROW) - margin(horizontal = 0.5.rem) + flexGrow = number(1.0) + margin = Margin(vertical = 0.rem, horizontal = 0.5.rem) display = Display.flex flexDirection = FlexDirection.column - alignItems = Align.center + alignItems = AlignItems.center + } + OptionsTable { + this.state = state + this.prepareMove = prepareMove } - optionsTable(state, prepareMove) } neighbour(neighbours.second) } @@ -67,28 +68,21 @@ fun RBuilder.transactionsSelectorDialog( } } -private fun StyledDOMBuilder<DIV>.neighbour(player: PlayerDTO) { - styledDiv { +private fun ChildrenBuilder.neighbour(player: PlayerDTO) { + div { css { width = 12.rem // center the icon display = Display.flex flexDirection = FlexDirection.column - alignItems = Align.center + alignItems = AlignItems.center } - playerInfo(player, iconSize = 40, orientation = FlexDirection.column, ellipsize = false) - } -} - -private fun RBuilder.optionsTable( - state: TransactionSelectorState, - prepareMove: (PlayerMove) -> Unit, -) { - child(optionsTable) { - attrs { - this.state = state - this.prepareMove = prepareMove + PlayerInfo { + this.player = player + this.iconSize = 40 + this.orientation = FlexDirection.column + this.ellipsize = false } } } @@ -98,7 +92,7 @@ private external interface OptionsTableProps : PropsWithChildren { var prepareMove: (PlayerMove) -> Unit } -private val optionsTable = fc<OptionsTableProps> { props -> +private val OptionsTable = FC<OptionsTableProps> { props -> val state = props.state val prepareMove = props.prepareMove @@ -107,7 +101,8 @@ private val optionsTable = fc<OptionsTableProps> { props -> val bestPrice = state.transactionsOptions.bestPrice val (cheapestOptions, otherOptions) = state.transactionsOptions.partition { it.totalPrice == bestPrice } - bpHtmlTable(interactive = true) { + BpHTMLTable { + interactive = true tbody { cheapestOptions.forEach { transactions -> transactionsOptionRow( @@ -130,84 +125,86 @@ private val optionsTable = fc<OptionsTableProps> { props -> if (otherOptions.isNotEmpty()) { val icon = if (expanded) "chevron-up" else "chevron-down" val text = if (expanded) "Hide expensive options" else "Show more expensive options" - bpButton( - minimal = true, - small = true, - icon = icon, - rightIcon = icon, - onClick = { expanded = !expanded }, - ) { + BpButton { + this.minimal = true + this.small = true + this.icon = icon + this.rightIcon = icon + this.onClick = { expanded = !expanded } + +text } } } -private fun RDOMBuilder<TBODY>.transactionsOptionRow( +private fun ChildrenBuilder.transactionsOptionRow( transactions: PricedResourceTransactions, showBestPriceIndicator: Boolean, onClick: () -> Unit, ) { - styledTr { + tr { css { cursor = Cursor.pointer - alignItems = Align.center - } - attrs { - onClickFunction = { onClick() } + alignItems = AlignItems.center } + this.onClick = { onClick() } // there should be at most one of each val leftTr = transactions.firstOrNull { it.provider == Provider.LEFT_PLAYER } val rightTr = transactions.firstOrNull { it.provider == Provider.RIGHT_PLAYER } - styledTd { + td { transactionCellCss() - styledDiv { - css { opacity = if (leftTr == null) 0.5 else 1 } + div { + css { opacity = number(if (leftTr == null) 0.5 else 1.0) } transactionCellInnerCss() - bpIcon(name = "caret-left", size = IconSize.LARGE) + BpIcon { + icon = IconNames.CARET_LEFT + size = IconSize.LARGE + } goldIndicator(leftTr?.totalPrice ?: 0, imgSize = 2.5.rem) } } - styledTd { + td { transactionCellCss() if (leftTr != null) { resourceList(leftTr.resources) } } - styledTd { + td { transactionCellCss() css { width = 1.5.rem } if (showBestPriceIndicator) { bestPriceIndicator() } } - styledTd { + td { transactionCellCss() if (rightTr != null) { resourceList(rightTr.resources) } } - styledTd { + td { transactionCellCss() - styledDiv { - css { opacity = if (rightTr == null) 0.5 else 1 } + div { + css { opacity = number(if (rightTr == null) 0.5 else 1.0) } transactionCellInnerCss() goldIndicator(rightTr?.totalPrice ?: 0, imgSize = 2.5.rem) - bpIcon(name = "caret-right", size = IconSize.LARGE) + BpIcon { + icon = IconNames.CARET_RIGHT + size = IconSize.LARGE + } } } } } -private fun StyledDOMBuilder<TD>.bestPriceIndicator() { - styledDiv { - css { - +GameStyles.bestPrice - } +private fun ChildrenBuilder.bestPriceIndicator() { + div { + css(GameStyles.bestPrice){} +"Best\nprice!" } } -private fun StyledDOMBuilder<TD>.transactionCellCss() { +private fun HTMLAttributes<HTMLTableCellElement>.transactionCellCss() { // we need inline styles to win over BlueprintJS's styles (which are more specific than .class) inlineStyles { verticalAlign = VerticalAlign.middle @@ -215,15 +212,15 @@ private fun StyledDOMBuilder<TD>.transactionCellCss() { } } -private fun StyledDOMBuilder<DIV>.transactionCellInnerCss() { +private fun HTMLAttributes<HTMLDivElement>.transactionCellInnerCss() { css { display = Display.flex flexDirection = FlexDirection.row - alignItems = Align.center + alignItems = AlignItems.center } } -private fun RBuilder.resourceList(countedResources: List<CountedResource>) { +private fun ChildrenBuilder.resourceList(countedResources: List<CountedResource>) { val resources = countedResources.toRepeatedTypesList() // The biggest card is the Palace and requires 7 resources (1 of each). @@ -231,35 +228,35 @@ private fun RBuilder.resourceList(countedResources: List<CountedResource>) { // Therefore, 3 by row seems decent. When there are 4 items, it's visually better to have a 2x2 matrix, though. val rows = resources.chunked(if (resources.size == 4) 2 else 3) - val imgSize = 1.5.rem - styledDiv { + val imgSize = 1.5 + div { css { display = Display.flex flexDirection = FlexDirection.column - alignItems = Align.center + alignItems = AlignItems.center justifyContent = JustifyContent.center - flex(Flex.GROW) + flexGrow = number(1.0) // this ensures stable dimensions, no matter how many resources (up to 2x3 matrix) - width = imgSize * 3 - height = imgSize * 2 + width = (imgSize * 3).rem + height = (imgSize * 2).rem } rows.forEach { row -> - styledDiv { + div { resourceRowCss() row.forEach { - resourceImage(it, size = imgSize) + resourceImage(it, size = imgSize.rem) } } } } } -private fun StyledDOMBuilder<DIV>.resourceRowCss() { +private fun HTMLAttributes<HTMLDivElement>.resourceRowCss() { css { display = Display.flex flexDirection = FlexDirection.row - alignItems = Align.center - margin(horizontal = LinearDimension.auto) + alignItems = AlignItems.center + margin = Margin(vertical = 0.px, horizontal = Auto.auto) } } 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 0d148744..ae79125b 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 @@ -2,67 +2,48 @@ package org.luxons.sevenwonders.ui.components.gameBrowser import blueprintjs.core.* import blueprintjs.icons.* -import kotlinx.css.* -import kotlinx.html.js.* +import csstype.* +import emotion.react.* import org.luxons.sevenwonders.ui.redux.* import react.* -import react.dom.* -import styled.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.form -private external interface CreateGameFormProps : PropsWithChildren { - var createGame: (String) -> Unit -} - -private external interface CreateGameFormState : State { - var gameName: String -} - -private class CreateGameForm(props: CreateGameFormProps) : RComponent<CreateGameFormProps, CreateGameFormState>(props) { +val CreateGameForm = VFC { + var gameName by useState("") - override fun CreateGameFormState.init(props: CreateGameFormProps) { - gameName = "" - } + val dispatch = useSwDispatch() + val createGame = { dispatch(RequestCreateGame(gameName)) } - override fun RBuilder.render() { - styledDiv { - css { - display = Display.flex - flexDirection = FlexDirection.row - justifyContent = JustifyContent.spaceBetween + div { + css { + display = Display.flex + flexDirection = FlexDirection.row + justifyContent = JustifyContent.spaceBetween + } + form { + onSubmit = { e -> + e.preventDefault() + createGame() } - form { - attrs { - onSubmitFunction = { e -> - e.preventDefault() + + BpInputGroup { + large = true + placeholder = "Game name" + onChange = { e -> + val input = e.currentTarget + gameName = input.value + } + rightElement = BpButton.create { + minimal = true + intent = Intent.PRIMARY + icon = IconNames.ADD + onClick = { e -> + e.preventDefault() // prevents refreshing the page when pressing Enter createGame() } } - - bpInputGroup( - large = true, - placeholder = "Game name", - onChange = { e -> - val input = e.currentTarget - state.gameName = input.value - }, - rightElement = createGameButton(), - ) } } } - - private fun createGameButton() = buildElement { - bpButton(minimal = true, intent = Intent.PRIMARY, icon = IconNames.ADD, onClick = { e -> - e.preventDefault() // prevents refreshing the page when pressing Enter - createGame() - }) - } - - private fun createGame() { - props.createGame(state.gameName) - } -} - -val createGameForm: ComponentClass<PropsWithChildren> = connectDispatch(CreateGameForm::class) { dispatch, _ -> - createGame = { name -> dispatch(RequestCreateGame(name)) } } 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 579e6cb2..16b0965d 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,51 +1,69 @@ package org.luxons.sevenwonders.ui.components.gameBrowser import blueprintjs.core.* -import kotlinx.css.* -import kotlinx.html.* -import org.luxons.sevenwonders.ui.components.GlobalStyles +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.ui.components.* +import org.luxons.sevenwonders.ui.redux.* import org.luxons.sevenwonders.ui.utils.* import react.* -import react.dom.* -import styled.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.h1 +import react.dom.html.ReactHTML.h2 -fun RBuilder.gameBrowser() = styledDiv { - css { - +GlobalStyles.fullscreen - +GlobalStyles.zeusBackground - padding(all = 1.rem) - } - styledDiv { - attrs { - classes += Classes.DARK - } - css { - margin(horizontal = LinearDimension.auto) - maxWidth = GlobalStyles.preGameWidth +val GameBrowser = VFC { + div { + css(GlobalStyles.fullscreen, GlobalStyles.zeusBackground) { + padding = Padding(all = 1.rem) } - styledDiv { - css { - display = Display.flex - justifyContent = JustifyContent.spaceBetween + div { + css(ClassName(Classes.DARK)) { + margin = Margin(vertical = 0.px, horizontal = Auto.auto) + maxWidth = GlobalStyles.preGameWidth } - h1 { +"Games" } - currentPlayerInfo() - } + div { + css { + display = Display.flex + justifyContent = JustifyContent.spaceBetween + } + h1 { +"Games" } + CurrentPlayerInfo() + } + + BpCard { + css { + marginBottom = 1.rem + } - bpCard(className = GameBrowserStyles.getTypedClassName { it::createGameCard }) { - styledH2 { - css { +GameBrowserStyles.cardTitle } - +"Create a Game" + h2 { + css { + marginTop = 0.px + } + +"Create a Game" + } + CreateGameForm() } - createGameForm {} - } - bpCard { - styledH2 { - css { +GameBrowserStyles.cardTitle } - +"Join a Game" + BpCard { + h2 { + css { + marginTop = 0.px + } + +"Join a Game" + } + GameList() } - gameList() } } } + +val CurrentPlayerInfo = VFC { + val connectedPlayer = useSwSelector { it.connectedPlayer } + PlayerInfo { + player = connectedPlayer + iconSize = 30 + showUsername = true + orientation = FlexDirection.row + ellipsize = false + } +} 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 deleted file mode 100644 index 611991c2..00000000 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowserStyles.kt +++ /dev/null @@ -1,19 +0,0 @@ -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 a1f47045..2437d9e0 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,41 +1,50 @@ package org.luxons.sevenwonders.ui.components.gameBrowser import blueprintjs.core.* -import blueprintjs.icons.IconNames +import blueprintjs.icons.* import csstype.* -import kotlinx.css.* -import kotlinx.css.Display -import kotlinx.css.FlexDirection -import kotlinx.css.JustifyContent -import kotlinx.css.TextAlign -import kotlinx.css.VerticalAlign -import kotlinx.css.rem -import kotlinx.html.classes -import kotlinx.html.title -import org.luxons.sevenwonders.model.api.ConnectedPlayer -import org.luxons.sevenwonders.model.api.LobbyDTO +import emotion.react.* +import org.luxons.sevenwonders.model.api.* import org.luxons.sevenwonders.model.api.State -import org.luxons.sevenwonders.ui.redux.RequestJoinGame -import org.luxons.sevenwonders.ui.redux.connectStateAndDispatch +import org.luxons.sevenwonders.ui.redux.* +import org.luxons.sevenwonders.ui.utils.* import react.* -import react.dom.* -import styled.* +import react.dom.html.ReactHTML.col +import react.dom.html.ReactHTML.colgroup +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.span +import react.dom.html.ReactHTML.tbody +import react.dom.html.ReactHTML.td +import react.dom.html.ReactHTML.th +import react.dom.html.ReactHTML.thead +import react.dom.html.ReactHTML.tr import react.State as RState -external interface GameListStateProps : PropsWithChildren { +external interface GameListStateProps : Props { var connectedPlayer: ConnectedPlayer var games: List<LobbyDTO> } -external interface GameListDispatchProps : PropsWithChildren { +external interface GameListDispatchProps : Props { var joinGame: (Long) -> Unit } external interface GameListProps : GameListStateProps, GameListDispatchProps -class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState>(props) { +val GameList = connectStateAndDispatch<GameListStateProps, GameListDispatchProps, GameListProps>( + clazz = GameListPresenter::class, + mapStateToProps = { state, _ -> + connectedPlayer = state.connectedPlayer ?: error("there should be a connected player") + games = state.games + }, + mapDispatchToProps = { dispatch, _ -> + joinGame = { gameId -> dispatch(RequestJoinGame(gameId = gameId)) } + }, +) + +private class GameListPresenter(props: GameListProps) : Component<GameListProps, RState>(props) { - override fun RBuilder.render() { + override fun render() = Fragment.create { if (props.games.isEmpty()) { noGamesInfo() } else { @@ -43,16 +52,13 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState } } - private fun RBuilder.noGamesInfo() { - bpNonIdealState( - icon = IconNames.GEOSEARCH, - title = "No games to join", - ) { - styledDiv { - attrs { - classes += Classes.RUNNING_TEXT - } - css { + private fun ChildrenBuilder.noGamesInfo() { + BpNonIdealState { + icon = IconNames.GEOSEARCH + titleText = "No games to join" + + div { + css(ClassName(Classes.RUNNING_TEXT)) { maxWidth = 35.rem } +"Nobody seems to be playing at the moment. " @@ -61,11 +67,12 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState } } - private fun RBuilder.gamesTable() { - bpHtmlTable { - attrs { - className = ClassName(GameBrowserStyles.getClassName { it::gameTable }) + private fun ChildrenBuilder.gamesTable() { + BpHTMLTable { + css { + width = 100.pct } + columnWidthsSpec() thead { gameListHeaderRow() @@ -78,26 +85,26 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState } } - private fun RElementBuilder<HTMLTableProps>.columnWidthsSpec() { + private fun ChildrenBuilder.columnWidthsSpec() { colgroup { - styledCol { + col { css { width = 40.rem } } - styledCol { + col { css { width = 5.rem textAlign = TextAlign.center } } - styledCol { + col { css { width = 5.rem textAlign = TextAlign.center // use inline style on th instead to overcome blueprint style } } - styledCol { + col { css { width = 3.rem textAlign = TextAlign.center @@ -106,7 +113,7 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState } } - private fun RBuilder.gameListHeaderRow() = tr { + private fun ChildrenBuilder.gameListHeaderRow() = tr { th { +"Name" } @@ -124,10 +131,8 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState } } - private fun RBuilder.gameListItemRow(lobby: LobbyDTO) = styledTr { - attrs { - key = lobby.id.toString() - } + private fun ChildrenBuilder.gameListItemRow(lobby: LobbyDTO) = tr { + key = lobby.id.toString() // inline styles necessary to overcome BlueprintJS's verticalAlign=top td { inlineStyles { gameTableCellStyle() } @@ -150,37 +155,41 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState } } - private fun StyledElement.gameTableHeaderCellStyle() { + private fun PropertiesBuilder.gameTableHeaderCellStyle() { textAlign = TextAlign.center } - private fun StyledElement.gameTableCellStyle() { + private fun PropertiesBuilder.gameTableCellStyle() { verticalAlign = VerticalAlign.middle } - private fun RBuilder.gameStatus(state: State) { + private fun ChildrenBuilder.gameStatus(state: State) { val intent = when (state) { State.LOBBY -> Intent.SUCCESS State.PLAYING -> Intent.WARNING State.FINISHED -> Intent.DANGER } - bpTag(minimal = true, intent = intent) { + BpTag { + this.minimal = true + this.intent = intent + +state.toString() } } - private fun RBuilder.playerCount(nPlayers: Int) { - styledDiv { + private fun ChildrenBuilder.playerCount(nPlayers: Int) { + div { css { display = Display.flex flexDirection = FlexDirection.row justifyContent = JustifyContent.center } - attrs { - title = "Number of players" + title = "Number of players" + BpIcon { + icon = IconNames.PEOPLE + title = null } - bpIcon(name = "people", title = null) - styledSpan { + span { css { marginLeft = 0.3.rem } @@ -189,28 +198,15 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState } } - private fun RBuilder.joinButton(lobby: LobbyDTO) { + private fun ChildrenBuilder.joinButton(lobby: LobbyDTO) { val joinability = lobby.joinability(props.connectedPlayer.displayName) - bpButton( - minimal = true, - large = true, - title = joinability.tooltip, - icon = "arrow-right", - disabled = !joinability.canDo, - onClick = { props.joinGame(lobby.id) }, - ) + BpButton { + minimal = true + large = true + title = joinability.tooltip + icon = "arrow-right" + disabled = !joinability.canDo + onClick = { props.joinGame(lobby.id) } + } } } - -fun RBuilder.gameList() = gameList {} - -private val gameList = connectStateAndDispatch<GameListStateProps, GameListDispatchProps, GameListProps>( - clazz = GameListPresenter::class, - mapStateToProps = { state, _ -> - connectedPlayer = state.connectedPlayer ?: error("there should be a connected player") - games = state.games - }, - mapDispatchToProps = { dispatch, _ -> - joinGame = { gameId -> dispatch(RequestJoinGame(gameId = gameId)) } - }, -) diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt index aa1033a0..cae25ba5 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt @@ -1,51 +1,52 @@ package org.luxons.sevenwonders.ui.components.gameBrowser -import blueprintjs.core.bpIcon -import kotlinx.css.* -import kotlinx.html.title -import org.luxons.sevenwonders.model.api.BasicPlayerInfo -import org.luxons.sevenwonders.model.api.PlayerDTO -import org.luxons.sevenwonders.ui.redux.connectState +import blueprintjs.core.* +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.model.api.* import react.* -import react.dom.attrs -import styled.css -import styled.styledDiv -import styled.styledSpan +import react.State +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.span external interface PlayerInfoProps : PropsWithChildren { var player: BasicPlayerInfo? - var showUsername: Boolean - var iconSize: Int - var orientation: FlexDirection - var ellipsize: Boolean + var showUsername: Boolean? + var iconSize: Int? + var orientation: FlexDirection? + var ellipsize: Boolean? } -class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, State>(props) { +val PlayerInfo = PlayerInfoPresenter::class.react - override fun RBuilder.render() { - styledDiv { - css { - display = Display.flex - alignItems = Align.center - flexDirection = props.orientation +private class PlayerInfoPresenter(props: PlayerInfoProps) : Component<PlayerInfoProps, State>(props) { + + override fun render() = div.create { + val orientation = props.orientation ?: FlexDirection.row + css { + display = Display.flex + alignItems = AlignItems.center + flexDirection = orientation + } + props.player?.let { + BpIcon { + icon = it.icon?.name ?: "user" + size = props.iconSize ?: 30 } - props.player?.let { - bpIcon(name = it.icon?.name ?: "user", size = props.iconSize) - if (props.showUsername) { - playerNameWithUsername(it.displayName, it.username) { - iconSeparationMargin() - } - } else { - playerName(it.displayName) { - iconSeparationMargin() - } + if (props.showUsername == true) { + playerNameWithUsername(it.displayName, it.username) { + iconSeparationMargin(orientation) + } + } else { + playerName(it.displayName) { + iconSeparationMargin(orientation) } } } } - private fun RBuilder.playerName(displayName: String, style: CssBuilder.() -> Unit = {}) { - styledSpan { + private fun ChildrenBuilder.playerName(displayName: String, style: PropertiesBuilder.() -> Unit = {}) { + span { css { fontSize = 1.rem if (props.orientation == FlexDirection.column) { @@ -55,10 +56,9 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, } // TODO replace by BlueprintJS's Text elements (built-in ellipsize based on width) val maxDisplayNameLength = 15 - if (props.ellipsize && displayName.length > maxDisplayNameLength) { - attrs { - title = displayName - } + val ellipsize = props.ellipsize ?: true + if (ellipsize && displayName.length > maxDisplayNameLength) { + title = displayName +displayName.ellipsize(maxDisplayNameLength) } else { +displayName @@ -68,33 +68,33 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, private fun String.ellipsize(maxLength: Int) = take(maxLength - 1) + "…" - private fun CssBuilder.iconSeparationMargin() { + private fun PropertiesBuilder.iconSeparationMargin(orientation: FlexDirection) { val margin = 0.4.rem - when (props.orientation) { + when (orientation) { FlexDirection.row -> marginLeft = margin FlexDirection.column -> marginTop = margin FlexDirection.rowReverse -> marginRight = margin FlexDirection.columnReverse -> marginBottom = margin - else -> error("Unsupported orientation '${props.orientation}' for player info component") + else -> error("Unsupported orientation '$orientation' for player info component") } } - private fun RBuilder.playerNameWithUsername( + private fun ChildrenBuilder.playerNameWithUsername( displayName: String, username: String, - style: CssBuilder.() -> Unit = {} + style: PropertiesBuilder.() -> Unit = {} ) { - styledDiv { + div { css { display = Display.flex flexDirection = FlexDirection.column style() } playerName(displayName) - styledSpan { + span { css { marginTop = 0.1.rem - color = Color.lightGray + color = NamedColor.lightgray fontSize = 0.8.rem } +"($username)" @@ -102,32 +102,3 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, } } } - -fun RBuilder.playerInfo( - player: PlayerDTO, - showUsername: Boolean = false, - iconSize: Int = 30, - orientation: FlexDirection = FlexDirection.row, - ellipsize: Boolean = true, -) = child(PlayerInfoPresenter::class) { - attrs { - this.player = player - this.showUsername = showUsername - this.iconSize = iconSize - this.orientation = orientation - this.ellipsize = ellipsize - } -} - -fun RBuilder.currentPlayerInfo() = playerInfo {} - -private val playerInfo = connectState( - clazz = PlayerInfoPresenter::class, - mapStateToProps = { state, _ -> - player = state.connectedPlayer - iconSize = 30 - showUsername = true - orientation = FlexDirection.row - ellipsize = false - }, -) diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt index 27a2057c..8de9f53e 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt @@ -2,93 +2,89 @@ package org.luxons.sevenwonders.ui.components.home import blueprintjs.core.* import blueprintjs.icons.* -import kotlinx.css.* -import kotlinx.html.js.* +import csstype.* +import emotion.react.* import org.luxons.sevenwonders.ui.redux.* +import org.luxons.sevenwonders.ui.utils.* import react.* -import styled.* +import react.dom.events.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.form +import web.html.* -private external interface ChooseNameFormProps : PropsWithChildren { - var chooseUsername: (String) -> Unit +val ChooseNameForm = VFC { + val dispatch = useSwDispatch() + ChooseNameFormPresenter { + chooseUsername = { name -> dispatch(RequestChooseName(name)) } + } } -private external interface ChooseNameFormState : State { - var username: String +private external interface ChooseNameFormPresenterProps : PropsWithChildren { + var chooseUsername: (String) -> Unit } -private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseNameFormProps, ChooseNameFormState>(props) { - - override fun ChooseNameFormState.init(props: ChooseNameFormProps) { - username = "" - } +private val ChooseNameFormPresenter = FC<ChooseNameFormPresenterProps> { props -> + var usernameState by useState("") - override fun RBuilder.render() { - styledForm { - css { - display = Display.flex - flexDirection = FlexDirection.row + form { + css { + display = Display.flex + flexDirection = FlexDirection.row + } + onSubmit = { e -> + e.preventDefault() + props.chooseUsername(usernameState) + } + RandomNameButton { + onClick = { usernameState = randomGreekName() } + } + spacer() + BpInputGroup { + large = true + placeholder = "Username" + rightElement = SubmitButton.create { + onClick = { e -> + e.preventDefault() + props.chooseUsername(usernameState) + } } - attrs.onSubmitFunction = { e -> - e.preventDefault() - chooseUsername() + value = usernameState + onChange = { e -> + val input = e.currentTarget + usernameState = input.value } - randomNameButton() - spacer() - bpInputGroup( - large = true, - placeholder = "Username", - rightElement = submitButton(), - value = state.username, - onChange = { e -> - val input = e.currentTarget - setState { - username = input.value - } - }, - ) } } +} - private fun submitButton(): ReactElement<*> = buildElement { - bpButton( - minimal = true, - icon = IconNames.ARROW_RIGHT, - intent = Intent.PRIMARY, - onClick = { e -> - e.preventDefault() - chooseUsername() - }, - ) - } - - private fun RBuilder.randomNameButton() { - bpButton( - title = "Generate random name", - large = true, - icon = IconNames.RANDOM, - intent = Intent.PRIMARY, - onClick = { fillRandomUsername() }, - ) - } +private external interface SpecificButtonProps : Props { + var onClick: MouseEventHandler<HTMLElement>? +} - private fun fillRandomUsername() { - setState { username = randomGreekName() } +private val SubmitButton = FC<SpecificButtonProps> { props -> + BpButton { + minimal = true + icon = IconNames.ARROW_RIGHT + intent = Intent.PRIMARY + onClick = props.onClick } +} - private fun chooseUsername() { - props.chooseUsername(state.username) +private val RandomNameButton = FC<SpecificButtonProps> { props -> + BpButton { + title = "Generate random name" + large = true + icon = IconNames.RANDOM + intent = Intent.PRIMARY + onClick = props.onClick } +} - // TODO this is so bad I'm dying inside - private fun RBuilder.spacer() { - styledDiv { - css { - margin(2.px) - } +// TODO this is so bad I'm dying inside +private fun ChildrenBuilder.spacer() { + div { + css { + margin = Margin(all = 2.px) } } } - -val chooseNameForm: ComponentClass<PropsWithChildren> = connectDispatch(ChooseNameForm::class) { dispatch, _ -> - chooseUsername = { name -> dispatch(RequestChooseName(name)) } -} 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 4b209979..b821b23d 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 @@ -1,21 +1,22 @@ package org.luxons.sevenwonders.ui.components.home -import org.luxons.sevenwonders.ui.components.GlobalStyles -import react.RBuilder -import react.dom.* -import styled.css -import styled.styledDiv +import emotion.react.* +import org.luxons.sevenwonders.ui.components.* +import react.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.img private const val LOGO = "images/logo-7-wonders.png" -fun RBuilder.home() = styledDiv { - css { - +GlobalStyles.fullscreen - +GlobalStyles.zeusBackground - +HomeStyles.centerChildren - } +val Home = VFC("Home") { + div { + css(GlobalStyles.fullscreen, GlobalStyles.zeusBackground, HomeStyles.centerChildren) {} - img(src = LOGO, alt = "Seven Wonders") {} + img { + src = LOGO + alt = "Seven Wonders" + } - chooseNameForm {} + ChooseNameForm() + } } 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 10037b36..fa0a83ad 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 @@ -1,14 +1,14 @@ package org.luxons.sevenwonders.ui.components.home -import kotlinx.css.* -import styled.StyleSheet +import csstype.* +import emotion.css.* -object HomeStyles : StyleSheet("HomeStyles", isStatic = true) { +object HomeStyles { - val centerChildren by css { + val centerChildren = ClassName { display = Display.flex flexDirection = FlexDirection.column - alignItems = Align.center + alignItems = AlignItems.center justifyContent = JustifyContent.center } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt index 7435ffb0..83f6aa7b 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt @@ -3,31 +3,51 @@ package org.luxons.sevenwonders.ui.components.lobby import blueprintjs.core.* import blueprintjs.icons.* import csstype.* -import kotlinx.css.* -import kotlinx.css.Display -import kotlinx.css.JustifyContent -import kotlinx.css.Position -import kotlinx.css.pct -import kotlinx.css.properties.* -import kotlinx.css.px -import kotlinx.css.rem +import csstype.Position +import emotion.react.* import org.luxons.sevenwonders.model.api.* import org.luxons.sevenwonders.model.wonders.* -import org.luxons.sevenwonders.ui.components.GlobalStyles +import org.luxons.sevenwonders.ui.components.* import org.luxons.sevenwonders.ui.redux.* +import org.luxons.sevenwonders.ui.utils.* import react.* -import react.State -import react.dom.* -import styled.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.h1 +import react.dom.html.ReactHTML.h2 +import react.dom.html.ReactHTML.h3 +import react.dom.html.ReactHTML.h4 private val BOT_NAMES = listOf("Wall-E", "B-Max", "Sonny", "T-800", "HAL", "GLaDOS", "R2-D2", "Bender", "AWESOM-O") -external interface LobbyStateProps : PropsWithChildren { - var currentGame: LobbyDTO? - var currentPlayer: PlayerDTO? +val Lobby = VFC(displayName = "Lobby") { + val lobby = useSwSelector { it.currentLobby } + val player = useSwSelector { it.currentPlayer } + + val dispatch = useSwDispatch() + + if (lobby == null || player == null) { + BpNonIdealState { + icon = IconNames.ERROR + titleText = "Error: no current game" + } + } else { + LobbyPresenter { + currentGame = lobby + currentPlayer = player + + startGame = { dispatch(RequestStartGame()) } + addBot = { name -> dispatch(RequestAddBot(name)) } + leaveLobby = { dispatch(RequestLeaveLobby()) } + disbandLobby = { dispatch(RequestDisbandLobby()) } + reorderPlayers = { orderedPlayers -> dispatch(RequestReorderPlayers(orderedPlayers)) } + reassignWonders = { wonders -> dispatch(RequestReassignWonders(wonders)) } + } + } } -external interface LobbyDispatchProps : PropsWithChildren { +private external interface LobbyPresenterProps : Props { + var currentGame: LobbyDTO + var currentPlayer: PlayerDTO var startGame: () -> Unit var addBot: (displayName: String) -> Unit var leaveLobby: () -> Unit @@ -36,235 +56,217 @@ external interface LobbyDispatchProps : PropsWithChildren { var reassignWonders: (wonders: List<AssignedWonder>) -> Unit } -interface LobbyProps : LobbyDispatchProps, LobbyStateProps - -class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, State>(props) { - - override fun RBuilder.render() { - val currentGame = props.currentGame - val currentPlayer = props.currentPlayer - if (currentGame == null || currentPlayer == null) { - bpNonIdealState(icon = IconNames.ERROR, title = "Error: no current game") - return +private val LobbyPresenter = FC<LobbyPresenterProps> { props -> + div { + css(GlobalStyles.fullscreen, GlobalStyles.zeusBackground) { + padding = Padding(all = 1.rem) } - styledDiv { - css { - +GlobalStyles.fullscreen - +GlobalStyles.zeusBackground - padding(all = 1.rem) + div { + css(ClassName(Classes.DARK), LobbyStyles.contentContainer) { + margin = Margin(vertical = 0.rem, horizontal = Auto.auto) + maxWidth = GlobalStyles.preGameWidth } - styledDiv { + h1 { +"${props.currentGame.name} — Lobby" } + + radialPlayerList(props.currentGame.players, props.currentPlayer) { css { - classes.add(Classes.DARK) - +LobbyStyles.contentContainer - } - h1 { +"${currentGame.name} — Lobby" } - - radialPlayerList(currentGame.players, currentPlayer) { - css { - // to make players more readable on the background - background = "radial-gradient(closest-side, black 20%, transparent)" - // make it bigger so the background covers more ground - width = 40.rem - height = 40.rem - } + // to make players more readable on the background + background = "radial-gradient(closest-side, black 20%, transparent)".unsafeCast<Gradient>() + // make it bigger so the background covers more ground + width = 40.rem + height = 40.rem } - actionButtons(currentPlayer, currentGame) + } + actionButtons(props.currentPlayer, props.currentGame, props.startGame, props.leaveLobby, props.disbandLobby, props.addBot) - if (currentPlayer.isGameOwner) { - setupPanel(currentGame) - } + if (props.currentPlayer.isGameOwner) { + setupPanel(props.currentGame, props.reorderPlayers, props.reassignWonders) } } } +} + +private fun ChildrenBuilder.actionButtons( + currentPlayer: PlayerDTO, + currentGame: LobbyDTO, + startGame: () -> Unit, + leaveLobby: () -> Unit, + disbandLobby: () -> Unit, + addBot: (String) -> Unit, +) { + div { + css { + position = Position.absolute + bottom = 2.rem + left = 50.pct + transform = translate((-50).pct) - private fun RBuilder.actionButtons(currentPlayer: PlayerDTO, currentGame: LobbyDTO) { - styledDiv { - css { - position = Position.absolute - bottom = 2.rem - left = 50.pct - transform { translate((-50).pct) } - - width = 70.pct - display = Display.flex - justifyContent = JustifyContent.spaceAround + width = 70.pct + display = Display.flex + justifyContent = JustifyContent.spaceAround + } + if (currentPlayer.isGameOwner) { + BpButtonGroup { + leaveButton(leaveLobby) + disbandButton(disbandLobby) } - if (currentPlayer.isGameOwner) { - bpButtonGroup { - leaveButton() - disbandButton() - } - bpButtonGroup { - addBotButton(currentGame) - startButton(currentGame, currentPlayer) - } - } else { - leaveButton() + BpButtonGroup { + addBotButton(currentGame, addBot) + startButton(currentGame.startability(currentPlayer.username), startGame) } + } else { + leaveButton(leaveLobby) } } +} - private fun RBuilder.startButton(currentGame: LobbyDTO, currentPlayer: PlayerDTO) { - val startability = currentGame.startability(currentPlayer.username) - bpButton( - large = true, - intent = Intent.PRIMARY, - icon = IconNames.PLAY, - title = startability.tooltip, - disabled = !startability.canDo, - onClick = { props.startGame() }, - ) { - +"START" - } +private fun ChildrenBuilder.startButton(startability: Actionability, startGame: () -> Unit) { + BpButton { + large = true + intent = Intent.PRIMARY + icon = IconNames.PLAY + title = startability.tooltip + disabled = !startability.canDo + onClick = { startGame() } + + +"START" } +} - private fun RBuilder.setupPanel(currentGame: LobbyDTO) { - styledDiv { - css { - +LobbyStyles.setupPanel - } - bpCard(Elevation.TWO, className = ClassName(Classes.DARK)) { - styledH2 { - css { - margin(top = 0.px) - } - +"Game setup" - } - bpDivider() - h3 { - +"Players" - } - reorderPlayersButton(currentGame) - h3 { - +"Wonders" +private fun ChildrenBuilder.setupPanel( + currentGame: LobbyDTO, + reorderPlayers: (usernames: List<String>) -> Unit, + reassignWonders: (wonders: List<AssignedWonder>) -> Unit, +) { + div { + className = LobbyStyles.setupPanel + + BpCard { + elevation = Elevation.TWO + className = ClassName(Classes.DARK) + + h2 { + css { + marginTop = 0.px } - randomizeWondersButton(currentGame) - wonderSideSelectionGroup(currentGame) + +"Game setup" + } + BpDivider() + h3 { + +"Players" + } + reorderPlayersButton(currentGame, reorderPlayers) + h3 { + +"Wonders" + } + WonderSettingsGroup { + this.currentGame = currentGame + this.reassignWonders = reassignWonders } } } +} - private fun RBuilder.addBotButton(currentGame: LobbyDTO) { - bpButton( - large = true, - icon = IconNames.PLUS, - rightIcon = IconNames.DESKTOP, - intent = Intent.PRIMARY, - title = if (currentGame.maxPlayersReached) "Max players reached" else "Add a bot to this game", - disabled = currentGame.maxPlayersReached, - onClick = { addBot(currentGame) }, - ) +private fun ChildrenBuilder.addBotButton(currentGame: LobbyDTO, addBot: (String) -> Unit) { + BpButton { + large = true + icon = IconNames.PLUS + rightIcon = IconNames.DESKTOP + intent = Intent.PRIMARY + title = if (currentGame.maxPlayersReached) "Max players reached" else "Add a bot to this game" + disabled = currentGame.maxPlayersReached + onClick = { addBot(randomBotNameUnusedIn(currentGame)) } } +} - private fun addBot(currentGame: LobbyDTO) { - val availableBotNames = BOT_NAMES.filter { name -> - currentGame.players.all { it.displayName != name } - } - props.addBot(availableBotNames.random()) +private fun randomBotNameUnusedIn(currentGame: LobbyDTO): String { + val availableBotNames = BOT_NAMES.filter { name -> + currentGame.players.none { it.displayName == name } } + return availableBotNames.random() +} - private fun RBuilder.reorderPlayersButton(currentGame: LobbyDTO) { - bpButton( - icon = IconNames.RANDOM, - rightIcon = IconNames.PEOPLE, - title = "Re-order players randomly", - onClick = { reorderPlayers(currentGame) }, - ) { - +"Reorder players" - } - } +private fun ChildrenBuilder.reorderPlayersButton(currentGame: LobbyDTO, reorderPlayers: (usernames: List<String>) -> Unit) { + BpButton { + icon = IconNames.RANDOM + rightIcon = IconNames.PEOPLE + title = "Re-order players randomly" + onClick = { reorderPlayers(currentGame.players.map { it.username }.shuffled()) } - private fun reorderPlayers(currentGame: LobbyDTO) { - props.reorderPlayers(currentGame.players.map { it.username }.shuffled()) + +"Reorder players" } +} - private fun RBuilder.randomizeWondersButton(currentGame: LobbyDTO) { - bpButton( - icon = IconNames.RANDOM, - title = "Re-assign wonders to players randomly", - onClick = { randomizeWonders(currentGame) }, - ) { - +"Randomize wonders" - } +private external interface WonderSettingsGroupProps : Props { + var currentGame: LobbyDTO + var reassignWonders: (List<AssignedWonder>) -> Unit +} + +private val WonderSettingsGroup = FC<WonderSettingsGroupProps> { props -> + val reassignWonders = props.reassignWonders + + BpButton { + icon = IconNames.RANDOM + title = "Re-assign wonders to players randomly" + onClick = { reassignWonders(randomWonderAssignments(props.currentGame)) } + + +"Randomize wonders" + } + h4 { + +"Select wonder sides:" } + BpButtonGroup { + BpButton { + icon = IconNames.RANDOM + title = "Re-roll wonder sides randomly" + onClick = { reassignWonders(assignedWondersWithRandomSides(props.currentGame)) } + } + BpButton { + title = "Choose side A for everyone" + onClick = { reassignWonders(assignedWondersWithForcedSide(props.currentGame, WonderSide.A)) } - private fun RBuilder.wonderSideSelectionGroup(currentGame: LobbyDTO) { - h4 { - +"Select wonder sides:" + +"A" } - bpButtonGroup { - bpButton( - icon = IconNames.RANDOM, - title = "Re-roll wonder sides randomly", - onClick = { randomizeWonderSides(currentGame) }, - ) - bpButton( - title = "Choose side A for everyone", - onClick = { setWonderSides(currentGame, WonderSide.A) }, - ) { - +"A" - } - bpButton( - title = "Choose side B for everyone", - onClick = { setWonderSides(currentGame, WonderSide.B) }, - ) { - +"B" - } + BpButton { + title = "Choose side B for everyone" + onClick = { reassignWonders(assignedWondersWithForcedSide(props.currentGame, WonderSide.B)) } + + +"B" } } +} - private fun randomizeWonders(currentGame: LobbyDTO) { - props.reassignWonders(currentGame.allWonders.deal(currentGame.players.size)) - } +private fun randomWonderAssignments(currentGame: LobbyDTO): List<AssignedWonder> = + currentGame.allWonders.deal(currentGame.players.size) - private fun randomizeWonderSides(currentGame: LobbyDTO) { - props.reassignWonders(currentGame.players.map { currentGame.findWonder(it.wonder.name).withRandomSide() }) - } +private fun assignedWondersWithForcedSide( + currentGame: LobbyDTO, + side: WonderSide +) = currentGame.players.map { currentGame.findWonder(it.wonder.name).withSide(side) } - private fun setWonderSides(currentGame: LobbyDTO, side: WonderSide) { - props.reassignWonders(currentGame.players.map { currentGame.findWonder(it.wonder.name).withSide(side) }) - } +private fun assignedWondersWithRandomSides(currentGame: LobbyDTO) = + currentGame.players.map { currentGame.findWonder(it.wonder.name) }.map { it.withRandomSide() } - private fun RBuilder.leaveButton() { - bpButton( - large = true, - intent = Intent.WARNING, - icon = "arrow-left", - title = "Leave the lobby and go back to the game browser", - onClick = { props.leaveLobby() }, - ) { - +"LEAVE" - } - } +private fun ChildrenBuilder.leaveButton(leaveLobby: () -> Unit) { + BpButton { + large = true + intent = Intent.WARNING + icon = "arrow-left" + title = "Leave the lobby and go back to the game browser" + onClick = { leaveLobby() } - private fun RBuilder.disbandButton() { - bpButton( - large = true, - intent = Intent.DANGER, - icon = IconNames.DELETE, - title = "Disband the group and go back to the game browser", - onClick = { props.disbandLobby() }, - ) { - +"DISBAND" - } + +"LEAVE" } } -fun RBuilder.lobby() = lobby {} - -private val lobby = connectStateAndDispatch<LobbyStateProps, LobbyDispatchProps, LobbyProps>( - clazz = LobbyPresenter::class, - mapStateToProps = { state, _ -> - currentGame = state.currentLobby - currentPlayer = state.currentPlayer - }, - mapDispatchToProps = { dispatch, _ -> - startGame = { dispatch(RequestStartGame()) } - addBot = { name -> dispatch(RequestAddBot(name)) } - leaveLobby = { dispatch(RequestLeaveLobby()) } - disbandLobby = { dispatch(RequestDisbandLobby()) } - reorderPlayers = { orderedPlayers -> dispatch(RequestReorderPlayers(orderedPlayers)) } - reassignWonders = { wonders -> dispatch(RequestReassignWonders(wonders)) } - }, -) +private fun ChildrenBuilder.disbandButton(disbandLobby: () -> Unit) { + BpButton { + large = true + intent = Intent.DANGER + icon = IconNames.DELETE + title = "Disband the group and go back to the game browser" + onClick = { disbandLobby() } + + +"DISBAND" + } +} diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt index bbfc491f..fe20ac86 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt @@ -1,17 +1,17 @@ package org.luxons.sevenwonders.ui.components.lobby -import kotlinx.css.* -import org.luxons.sevenwonders.ui.components.GlobalStyles -import styled.StyleSheet +import csstype.* +import emotion.css.* +import org.luxons.sevenwonders.ui.components.* -object LobbyStyles : StyleSheet("LobbyStyles", isStatic = true) { +object LobbyStyles { - val contentContainer by css { - margin(horizontal = LinearDimension.auto) + val contentContainer = ClassName { + margin = Margin(vertical = 0.px, horizontal = Auto.auto) maxWidth = GlobalStyles.preGameWidth } - val setupPanel by css { + val setupPanel = ClassName { position = Position.fixed top = 2.rem right = 1.rem diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt index 8e99c23d..e9853588 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt @@ -1,19 +1,16 @@ package org.luxons.sevenwonders.ui.components.lobby -import kotlinx.css.* -import kotlinx.css.properties.* -import kotlinx.html.DIV -import org.luxons.sevenwonders.ui.components.GlobalStyles -import react.RBuilder -import react.ReactElement -import react.dom.* -import styled.StyledDOMBuilder -import styled.css -import styled.styledDiv -import styled.styledLi -import styled.styledUl +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.ui.components.* +import react.* +import react.dom.html.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.li +import react.dom.html.ReactHTML.ul +import web.html.* -fun <T> RBuilder.radialList( +fun <T> ChildrenBuilder.radialList( items: List<T>, centerElement: ReactElement<*>, renderItem: (T) -> ReactElement<*>, @@ -21,15 +18,14 @@ fun <T> RBuilder.radialList( itemWidth: Int, itemHeight: Int, options: RadialConfig = RadialConfig(), - block: StyledDOMBuilder<DIV>.() -> Unit = {}, + block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}, ) { val containerWidth = options.diameter + itemWidth val containerHeight = options.diameter + itemHeight - styledDiv { - css { + div { + css(GlobalStyles.fixedCenter) { zeroMargins() - +GlobalStyles.fixedCenter width = containerWidth.px height = containerHeight.px } @@ -39,18 +35,22 @@ fun <T> RBuilder.radialList( } } -private fun <T> RBuilder.radialListItems( +private fun <T> ChildrenBuilder.radialListItems( items: List<T>, renderItem: (T) -> ReactElement<*>, getKey: (T) -> String, radialConfig: RadialConfig, ) { val offsets = offsetsFromCenter(items.size, radialConfig) - styledUl { + ul { css { zeroMargins() - transition(property = "all", duration = 500.ms, timing = Timing.easeInOut) - zIndex = 1 + transition = Transition( + property = TransitionProperty.all, + duration = 500.ms, + timingFunction = TransitionTimingFunction.easeInOut, + ) + zIndex = integer(1) width = radialConfig.diameter.px height = radialConfig.diameter.px absoluteCenter() @@ -67,52 +67,50 @@ private fun <T> RBuilder.radialListItems( } } -private fun RBuilder.radialListItem(item: ReactElement<*>, key: String, offset: CartesianCoords) { - styledLi { +private fun ChildrenBuilder.radialListItem(item: ReactElement<*>, key: String, offset: CartesianCoords) { + li { css { display = Display.block position = Position.absolute top = 50.pct left = 50.pct zeroMargins() - listStyleType = ListStyleType.unset - transition("all", 500.ms, Timing.easeInOut) - zIndex = 1 - transform { - translate(offset.x.px, offset.y.px) - translate((-50).pct, (-50).pct) - } - } - attrs { - this.key = key + listStyleType = Globals.unset + transition = Transition( + property = TransitionProperty.all, + duration = 500.ms, + timingFunction = TransitionTimingFunction.easeInOut, + ) + zIndex = integer(1) + transform = translate(offset.x.px - 50.pct, offset.y.px - 50.pct) } + this.key = key + child(item) } } -private fun RBuilder.radialListCenter(centerElement: ReactElement<*>?) { +private fun ChildrenBuilder.radialListCenter(centerElement: ReactElement<*>?) { if (centerElement == null) { return } - styledDiv { + div { css { - zIndex = 0 + zIndex = integer(0) absoluteCenter() } child(centerElement) } } -private fun CssBuilder.absoluteCenter() { +private fun PropertiesBuilder.absoluteCenter() { position = Position.absolute left = 50.pct top = 50.pct - transform { - translate((-50).pct, (-50).pct) - } + transform = translate((-50).pct, (-50).pct) } -private fun CssBuilder.zeroMargins() { - margin(all = 0.px) - padding(all = 0.px) +private fun PropertiesBuilder.zeroMargins() { + margin = Margin(vertical = 0.px, horizontal = 0.px) + padding = Padding(vertical = 0.px, horizontal = 0.px) } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt index 2084b7c0..290dd83f 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt @@ -1,39 +1,36 @@ package org.luxons.sevenwonders.ui.components.lobby -import blueprintjs.core.bpIcon -import blueprintjs.core.bpTag +import blueprintjs.core.* +import blueprintjs.icons.* import csstype.* -import kotlinx.css.* -import kotlinx.css.Color -import kotlinx.css.Display -import kotlinx.css.FlexDirection -import kotlinx.css.px -import kotlinx.css.rem -import kotlinx.html.DIV -import org.luxons.sevenwonders.model.api.PlayerDTO +import emotion.react.* +import org.luxons.sevenwonders.model.api.* import org.luxons.sevenwonders.model.api.actions.Icon -import org.luxons.sevenwonders.model.wonders.WonderSide -import react.RBuilder -import react.ReactElement -import react.buildElement -import styled.* +import org.luxons.sevenwonders.model.wonders.* +import org.luxons.sevenwonders.ui.utils.* +import react.* +import react.dom.html.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.span +import web.html.* -fun RBuilder.radialPlayerList( +fun ChildrenBuilder.radialPlayerList( players: List<PlayerDTO>, currentPlayer: PlayerDTO, - block: StyledDOMBuilder<DIV>.() -> Unit = {}, + block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}, ) { val playerItems = players // .map { PlayerItem.Player(it) } .growWithPlaceholders(targetSize = 3) .withUserFirst(currentPlayer) - val tableImg = buildElement { lobbyWoodenTable(diameter = 200.px, borderSize = 15.px) } - radialList( items = playerItems, - centerElement = tableImg, - renderItem = { buildElement { playerElement(it) } }, + centerElement = LobbyWoodenTable.create { + diameter = 200.px + borderSize = 15.px + }, + renderItem = { PlayerElement.create { playerItem = it } }, getKey = { it.key }, itemWidth = 120, itemHeight = 100, @@ -60,74 +57,79 @@ private fun List<PlayerItem>.withUserFirst(me: PlayerDTO): List<PlayerItem> { private sealed class PlayerItem { abstract val key: String abstract val playerText: String - abstract val opacity: Double + abstract val opacity: Opacity abstract val icon: ReactElement<*> data class Player(val player: PlayerDTO) : PlayerItem() { override val key = player.username override val playerText = player.displayName - override val opacity = 1.0 - override val icon = buildElement { - userIcon( - icon = player.icon ?: when { - player.isGameOwner -> Icon("badge") - else -> Icon("user") - }, - title = if (player.isGameOwner) "Game owner" else null, - ) - } + override val opacity = number(1.0) + override val icon = createUserIcon( + icon = player.icon ?: when { + player.isGameOwner -> Icon(IconNames.BADGE) + else -> Icon(IconNames.USER) + }, + title = if (player.isGameOwner) "Game owner" else null, + ) } data class Placeholder(val index: Int) : PlayerItem() { override val key = "player-placeholder-$index" override val playerText = "?" - override val opacity = 0.4 - override val icon = buildElement { - userIcon( - icon = Icon("user"), - title = "Waiting for player...", - ) - } + override val opacity = number(0.4) + override val icon = createUserIcon( + icon = Icon(IconNames.USER), + title = "Waiting for player...", + ) } } -private fun RBuilder.userIcon(icon: Icon, title: String?) = bpIcon( - name = icon.name, - size = 50, - title = title, -) +private fun createUserIcon(icon: Icon, title: String?) = BpIcon.create { + this.icon = icon.name + this.size = 50 + this.title = title +} -private fun RBuilder.playerElement(playerItem: PlayerItem) { - styledDiv { +private external interface PlayerElementProps : Props { + var playerItem: PlayerItem +} + +private val PlayerElement = FC<PlayerElementProps>(displayName = "PlayerElement") { props -> + val playerItem = props.playerItem + div { css { display = Display.flex flexDirection = FlexDirection.column - alignItems = Align.center + alignItems = AlignItems.center opacity = playerItem.opacity } child(playerItem.icon) - styledSpan { + span { css { fontSize = if (playerItem is PlayerItem.Placeholder) 1.5.rem else 0.9.rem } +playerItem.playerText } if (playerItem is PlayerItem.Player) { - styledDiv { + div { val wonder = playerItem.player.wonder + css { marginTop = 0.3.rem - // this is to overcome ".bp4-dark .bp4-tag" on the nested bpTag children(".wonder-tag") { color = Color("#f5f8fa") // blueprintjs dark theme color (removed by .bp4-tag) backgroundColor = when (wonder.side) { - WonderSide.A -> Color.seaGreen - WonderSide.B -> Color.darkRed + WonderSide.A -> NamedColor.seagreen + WonderSide.B -> NamedColor.darkred } } } - bpTag(round = true, className = ClassName("wonder-tag")) { + + BpTag { + round = true + className = ClassName("wonder-tag") + +"${wonder.name} ${wonder.side}" } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt index b9c799e2..2fa3b246 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt @@ -1,81 +1,96 @@ package org.luxons.sevenwonders.ui.components.lobby -import kotlinx.css.* -import kotlinx.css.properties.* -import kotlinx.html.DIV -import react.RBuilder -import styled.StyledDOMBuilder -import styled.animation -import styled.css -import styled.styledDiv +import csstype.* +import emotion.css.* +import emotion.react.* +import emotion.styled.* +import org.luxons.sevenwonders.ui.utils.* +import react.* +import react.dom.html.ReactHTML.div -private const val FIRE_REFLECTION_COLOR = "#b85e00" +private val FIRE_REFLECTION_COLOR = Color("#b85e00") + +private external interface CircleProps : PropsWithChildren, PropsWithClassName { + var diameter: Length +} + +private val Circle = FC<CircleProps>("Circle") { props -> + div { + css(props.className) { + width = props.diameter + height = props.diameter + borderRadius = 50.pct + } + child(props.children) + } +} + +private val OverlayCircle = Circle.styled { _, _ -> + position = Position.absolute + top = 0.px + left = 0.px +} + +external interface LobbyWoodenTableProps : Props { + var diameter: Length + var borderSize: Length +} + +val LobbyWoodenTable = FC<LobbyWoodenTableProps>("LobbyWoodenTable") { props -> + Circle { + diameter = props.diameter -fun RBuilder.lobbyWoodenTable(diameter: LinearDimension, borderSize: LinearDimension = 20.px) { - circle(diameter) { css { backgroundColor = Color("#3d1e0e") } - circle(diameter = diameter - borderSize) { + + Circle { + diameter = props.diameter - props.borderSize css { position = Position.absolute - top = borderSize / 2 - left = borderSize / 2 - background = "linear-gradient(45deg, #88541e, #995645, #52251a)" + top = props.borderSize / 2 + left = props.borderSize / 2 + background = linearGradient(45.deg, Color("#88541e"), Color("#995645"), Color("#52251a")) } } // flame reflection coming from bottom-right - overlayCircle(diameter) { + OverlayCircle { + diameter = props.diameter + css { - background = "linear-gradient(-45deg, $FIRE_REFLECTION_COLOR 10%, transparent 50%)" + background = + linearGradient((-45).deg, stop(FIRE_REFLECTION_COLOR, 10.pct), stop(NamedColor.transparent, 50.pct)) opacityAnimation(duration = 1.3.s) } } // flame reflection coming from bottom-left - overlayCircle(diameter) { + OverlayCircle { + diameter = props.diameter + css { - background = "linear-gradient(45deg, $FIRE_REFLECTION_COLOR 20%, transparent 40%)" + background = + linearGradient(45.deg, stop(FIRE_REFLECTION_COLOR, 20.pct), stop(NamedColor.transparent, 40.pct)) opacityAnimation(duration = 0.8.s) } } } } -private fun RBuilder.overlayCircle(diameter: LinearDimension, block: StyledDOMBuilder<DIV>.() -> Unit) { - circle(diameter) { - css { - position = Position.absolute - top = 0.px - left = 0.px - } - block() - } -} - -private fun RBuilder.circle(diameter: LinearDimension, block: StyledDOMBuilder<DIV>.() -> Unit) { - styledDiv { - css { - width = diameter - height = diameter - borderRadius = 50.pct - } - block() - } -} - -private fun CssBuilder.opacityAnimation(duration: Time) { - animation( - duration = duration, - direction = AnimationDirection.alternate, - iterationCount = IterationCount.infinite, - timing = cubicBezier(0.4, 0.4, 0.4, 2.0) - ) { +private fun PropertiesBuilder.opacityAnimation(duration: Time) { + val keyframes = keyframes { from { - opacity = 0.0 + opacity = number(0.0) } to { - opacity = 0.35 + opacity = number(0.35) } } + animation = Animation( + name = keyframes, + duration = duration, + timingFunction = cubicBezier(0.4, 0.4, 0.4, 2.0), + ) + animationDirection = AnimationDirection.alternate + animationIterationCount = AnimationIterationCount.infinite } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt index d5b3fffd..eb182dc7 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt @@ -1,43 +1,31 @@ package org.luxons.sevenwonders.ui.redux import react.* -import react.redux.rConnect -import redux.RAction -import redux.WrapperAction -import kotlin.reflect.KClass +import react.redux.* +import redux.* +import kotlin.reflect.* -fun <DP : PropsWithChildren> connectDispatch( - clazz: KClass<out RComponent<DP, out State>>, - mapDispatchToProps: DP.((RAction) -> WrapperAction, PropsWithChildren) -> Unit, -): ComponentClass<PropsWithChildren> { - val connect = rConnect(mapDispatchToProps = mapDispatchToProps) - return connect.invoke(clazz.js.unsafeCast<ComponentClass<DP>>()) -} - -fun <SP : PropsWithChildren> connectState( - clazz: KClass<out RComponent<SP, out State>>, - mapStateToProps: SP.(SwState, PropsWithChildren) -> Unit, -): ComponentClass<PropsWithChildren> { - val connect = rConnect(mapStateToProps = mapStateToProps) - return connect.invoke(clazz.js.unsafeCast<ComponentClass<SP>>()) -} +fun <R> useSwSelector(selector: (SwState) -> R) = useSelector(selector) +fun useSwDispatch() = useDispatch<RAction, WrapperAction>() -fun <SP : PropsWithChildren, OP : PropsWithChildren> connectStateWithOwnProps( - clazz: KClass<out RComponent<SP, out State>>, - mapStateToProps: SP.(SwState, OP) -> Unit, -): ComponentClass<OP> { - val connect = rConnect(mapStateToProps = mapStateToProps) - return connect.invoke(clazz.js.unsafeCast<ComponentClass<SP>>()) -} +fun <SP : Props, DP : Props, P : Props> connectStateAndDispatch( + clazz: KClass<out Component<P, out State>>, + mapStateToProps: SP.(SwState, Props) -> Unit, + mapDispatchToProps: DP.((RAction) -> WrapperAction, Props) -> Unit, +): ComponentClass<Props> = connectStateAndDispatch( + component = clazz.react, + mapStateToProps = mapStateToProps, + mapDispatchToProps = mapDispatchToProps, +) -fun <SP : PropsWithChildren, DP : PropsWithChildren, P : PropsWithChildren> connectStateAndDispatch( - clazz: KClass<out RComponent<P, out State>>, - mapStateToProps: SP.(SwState, PropsWithChildren) -> Unit, - mapDispatchToProps: DP.((RAction) -> WrapperAction, PropsWithChildren) -> Unit, -): ComponentClass<PropsWithChildren> { - val connect = rConnect<SwState, RAction, WrapperAction, PropsWithChildren, SP, DP, P>( +fun <SP : Props, DP : Props, P : Props> connectStateAndDispatch( + component: ComponentClass<P>, + mapStateToProps: SP.(SwState, Props) -> Unit, + mapDispatchToProps: DP.((RAction) -> WrapperAction, Props) -> Unit, +): ComponentClass<Props> { + val connect = rConnect<SwState, RAction, WrapperAction, Props, SP, DP, P>( mapStateToProps = mapStateToProps, mapDispatchToProps = mapDispatchToProps, ) - return connect.invoke(clazz.js.unsafeCast<ComponentClass<P>>()) + return connect.invoke(component) } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt index d438c259..5dd274de 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt @@ -1,10 +1,42 @@ package org.luxons.sevenwonders.ui.utils -import csstype.ClassName -import kotlinx.css.* -import styled.* -import kotlin.reflect.* +import csstype.* +import js.core.* +import react.dom.html.* -fun <T : StyleSheet> T.getTypedClassName(getClass: (T) -> KProperty0<RuleSet>): ClassName { - return ClassName(getClassName(getClass)) +/** + * The cubic-bezier() function defines a Cubic Bezier curve. + * + * A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve + * and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and + * the initial state, P3 is (1, 1) and represents the final time and the final state. + * + * The x coordinates provided here must be between 0 and 1 (the bezier curve points should be between the start time + * and end time, giving other values would make the curve go back in the past or further into the future). + * + * The y coordinates may be any value: the intermediate states can be below or above the start (0) or end (1) values. + */ +fun cubicBezier(x1: Double, y1: Double, x2: Double, y2: Double) = + "cubic-bezier($x1, $y1, $x2, $y2)".unsafeCast<AnimationTimingFunction>() + +fun Margin(all: AutoLength) = Margin(vertical = all, horizontal = all) + +fun Padding(all: Length) = Padding(vertical = all, horizontal = all) + +// this should work because NamedColor is ultimately a hex string in JS, not the actual name +fun NamedColor.withAlpha(alpha: Double) = "$this${(alpha * 255).toInt().toString(16)}".unsafeCast<BackgroundColor>() + +operator fun FilterFunction.plus(other: FilterFunction) = "$this $other".unsafeCast<FilterFunction>() + +fun PropertiesBuilder.ancestorHover(selector: String, block: PropertiesBuilder.() -> Unit) = + "$selector:hover &".invoke(block) + +fun PropertiesBuilder.children(selector: String, block: PropertiesBuilder.() -> Unit) = + "& > $selector".invoke(block) + +fun PropertiesBuilder.descendants(selector: String, block: PropertiesBuilder.() -> Unit) = + "& $selector".invoke(block) + +fun HTMLAttributes<*>.inlineStyles(block: PropertiesBuilder.() -> Unit) { + style = jso(block) } |