diff options
Diffstat (limited to 'sw-ui/src/jsMain/kotlin')
42 files changed, 4623 insertions, 0 deletions
diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt new file mode 100644 index 00000000..44066b49 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt @@ -0,0 +1,49 @@ +package org.luxons.sevenwonders.ui + +import kotlinx.browser.window +import kotlinx.coroutines.* +import org.luxons.sevenwonders.ui.components.* +import org.luxons.sevenwonders.ui.redux.* +import org.luxons.sevenwonders.ui.redux.sagas.* +import react.* +import react.dom.client.* +import react.redux.* +import redux.* +import web.dom.document +import web.html.* + +fun main() { + 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 renderRoot(rootElement: HTMLElement) { + val store = initRedux() + val connectedApp = StrictMode.create { + Provider { + this.store = store + Application() + } + } + createRoot(rootElement).render(connectedApp) +} + +@OptIn(DelicateCoroutinesApi::class) +private fun initRedux(): Store<SwState, RAction, WrapperAction> { + val sagaManager = SagaManager<SwState, RAction, WrapperAction>() + val store = configureStore(sagaManager = sagaManager) + GlobalScope.launch { + sagaManager.launchSaga(this) { + rootSaga() + } + } + return store +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/Application.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/Application.kt new file mode 100644 index 00000000..2cf8b4f1 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/Application.kt @@ -0,0 +1,52 @@ +package org.luxons.sevenwonders.ui.components + +import js.core.jso +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.* + +val Application = FC("Application") { + ErrorDialog() + RouterProvider { + router = hashRouter + } +} + +// Using plain jso objects instead of createRoutesFromElements +// because of a broken Route external interface (no properties) +// See https://github.com/JetBrains/kotlin-wrappers/issues/2024 +private val hashRouter = createHashRouter( + routes = arrayOf( + jso { + path = SwRoute.GAME_BROWSER.path + Component = GameBrowser + }, + jso { + path = SwRoute.GAME.path + Component = GameScene + }, + jso { + path = SwRoute.LOBBY.path + Component = Lobby + }, + jso { + path = SwRoute.HOME.path + Component = Home + }, + jso { + path = "*" + Component = FC { + Navigate { + to = "/" + replace = true + } + } + }, + ), +) diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt new file mode 100644 index 00000000..ee9c17ab --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt @@ -0,0 +1,48 @@ +package org.luxons.sevenwonders.ui.components + +import emotion.css.* +import org.luxons.sevenwonders.ui.utils.* +import web.cssom.* + + +object GlobalStyles { + + val preGameWidth = 60.rem + + val zeusBackground = ClassName { + background = "url('images/backgrounds/zeus-temple.jpg') center no-repeat".unsafeCast<Background>() + backgroundSize = BackgroundSize.cover + } + + val fullscreen = ClassName { + position = Position.fixed + top = 0.px + left = 0.px + bottom = 0.px + right = 0.px + overflow = Overflow.hidden + } + + val papyrusBackground = ClassName { + background = "url('images/backgrounds/papyrus.jpg')".unsafeCast<Background>() + backgroundSize = BackgroundSize.cover + } + + val centerLeftTopTransform = ClassName { + left = 50.pct + top = 50.pct + transform = translate((-50).pct, (-50).pct) + } + + val fixedCenter = ClassName(centerLeftTopTransform) { + position = Position.fixed + } + + val centerInPositionedParent = ClassName(centerLeftTopTransform) { + position = Position.absolute + } + + val noPadding = ClassName { + padding = Padding(all = 0.px) + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt new file mode 100644 index 00000000..c728d405 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt @@ -0,0 +1,57 @@ +package org.luxons.sevenwonders.ui.components.errors + +import blueprintjs.core.* +import blueprintjs.icons.* +import kotlinx.browser.* +import org.luxons.sevenwonders.ui.redux.* +import org.luxons.sevenwonders.ui.router.* +import react.* +import react.dom.html.ReactHTML.p +import react.redux.* +import redux.* + +val ErrorDialog = FC { + val dispatch = useDispatch<RAction, WrapperAction>() + + ErrorDialogPresenter { + errorMessage = useSwSelector { it.fatalError } + goHome = { dispatch(Navigate(SwRoute.HOME)) } + } +} + +private external interface ErrorDialogProps : Props { + var errorMessage: String? + var goHome: () -> Unit +} + +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() } + + BpDialogBody { + p { + +(errorMessage ?: "fatal error") + } + } + BpDialogFooter { + BpButton { + icon = IconNames.LOG_OUT + onClick = { goHomeAndRefresh() } + + +"HOME" + } + } + } +} + +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 +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt new file mode 100644 index 00000000..1eb5f6f0 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt @@ -0,0 +1,227 @@ +package org.luxons.sevenwonders.ui.components.game + +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.cssom.* +import web.html.* + +// card offsets in % of their size when displayed in columns +private const val xOffset = 20 +private const val yOffset = 21 + +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 ChildrenBuilder.tableCards(cardColumns: List<List<TableCard>>) { + div { + css { + display = Display.flex + justifyContent = JustifyContent.spaceAround + height = 45.pct + width = 100.pct + } + cardColumns.forEach { cards -> + TableCardColumn { + this.key = cards.first().color.toString() + this.cards = cards + } + } + } +} + +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 + } + props.cards.forEachIndexed { index, card -> + TableCard { + this.card = card + this.indexInColumn = index + this.key = card.name + } + } + } +} + +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 = 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 = integer(1000) + maxWidth = 110.pct + maxHeight = 75.pct + hoverHighlightStyle() + } + } + } +} + +private fun ChildrenBuilder.wonderComponent(wonder: ApiWonder, military: Military) { + div { + css { + position = Position.relative + width = 100.pct + height = 40.pct + } + div { + css { + position = Position.absolute + left = 50.pct + top = 0.px + transform = translatex((-50).pct) + height = 100.pct + maxWidth = 95.pct // same as wonder + + // bring to the foreground on hover + hover { zIndex = integer(1000) } + } + img { + src = "/images/wonders/${wonder.image}" + title = wonder.name + alt = "Wonder ${wonder.name}" + + css { + 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 = integer(1) // go above the built wonder cards, but below the table cards + + hover { hoverHighlightStyle() } + } + } + div { + css { + position = Position.absolute + top = 20.pct + right = (-80).px + display = Display.flex + flexDirection = FlexDirection.column + alignItems = AlignItems.start + } + victoryPoints(military.victoryPoints) { + css { + marginBottom = 5.px + } + } + defeatTokenCount(military.nbDefeatTokens) { + css { + marginTop = 5.px + } + } + } + wonder.stages.forEachIndexed { index, stage -> + WonderStageElement { + this.stage = stage + css { + wonderCardStyle(index, wonder.stages.size) + } + } + } + } + } +} + +private fun ChildrenBuilder.victoryPoints(points: Int, block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}) { + boardToken("military/victory1", points, block) +} + +private fun ChildrenBuilder.defeatTokenCount(nbDefeatTokens: Int, block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}) { + boardToken("military/defeat1", nbDefeatTokens, block) +} + +private fun ChildrenBuilder.boardToken(tokenName: String, count: Int, block: HTMLAttributes<HTMLDivElement>.() -> Unit) { + tokenWithCount( + tokenName = tokenName, + count = count, + countPosition = TokenCountPosition.RIGHT, + brightText = true, + ) { + css { + filter = dropShadow(0.2.rem, 0.2.rem, 0.5.rem, NamedColor.black) + height = 15.pct + } + block() + } +} + +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 (props.stage.builtDuringLastMove) NamedColor.gold else null + CardBackImage { + this.cardBack = back + this.highlightColor = highlightColor + this.className = props.className + } + } else { + CardPlaceholderImage { + this.className = props.className + } + } +} + +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 = integer(-1) // below wonder (somehow 0 is not sufficient) +} + +private fun stagePositionPercent(stageIndex: Int, nbStages: Int): Double = when (nbStages) { + 2 -> 37.5 + stageIndex * 29.8 // 37.5 (29.8) 67.3 + 4 -> -1.5 + stageIndex * 26.7 // -1.5 (26.6) 25.1 (26.8) 51.9 (26.7) 78.6 + else -> 7.9 + stageIndex * 30.0 +} + +private fun PropertiesBuilder.hoverHighlightStyle() { + highlightStyle(NamedColor.palegoldenrod) +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt new file mode 100644 index 00000000..37de113c --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt @@ -0,0 +1,211 @@ +package org.luxons.sevenwonders.ui.components.game + +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 react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.hr +import web.cssom.* + +enum class BoardSummarySide( + val tokenCountPosition: TokenCountPosition, + val alignment: AlignItems, + val popoverPosition: PopoverPosition, +) { + 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), +} + +external interface BoardSummaryWithPopoverProps : PropsWithClassName { + var player: PlayerDTO + var board: Board + var side: BoardSummarySide +} + +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 + } + } +} + +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 = props.side.alignment + padding = Padding(all = 0.5.rem) + backgroundColor = NamedColor.palegoldenrod.withAlpha(0.5) + zIndex = integer(50) // above table cards + + hover { + backgroundColor = NamedColor.palegoldenrod + } + } + + val showPreparationStatus = props.showPreparationStatus ?: true + topBar(props.player, props.side, showPreparationStatus) + hr { + css { + margin = Margin(vertical = 0.5.rem, horizontal = 0.rem) + width = 100.pct + } + } + bottomBar(props.side, props.board, props.player, showPreparationStatus) + } +} + +private fun ChildrenBuilder.topBar(player: PlayerDTO, side: BoardSummarySide, showPreparationStatus: Boolean) { + val playerIconSize = 25 + if (showPreparationStatus && side == BoardSummarySide.TOP) { + div { + css { + display = Display.flex + flexDirection = FlexDirection.row + justifyContent = JustifyContent.spaceBetween + width = 100.pct + } + PlayerInfo { + this.player = player + this.iconSize = playerIconSize + } + PlayerPreparedCard { + this.playerDisplayName = player.displayName + this.username = player.username + } + } + } else { + PlayerInfo { + this.player = player + this.iconSize = playerIconSize + } + } +} + +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 + alignItems = side.alignment + if (side != BoardSummarySide.TOP) { + width = 100.pct + } + } + val tokenSize = 2.rem + generalCounts(board, tokenSize, side.tokenCountPosition) + BpDivider() + scienceTokens(board, tokenSize, side.tokenCountPosition) + if (showPreparationStatus && side != BoardSummarySide.TOP) { + BpDivider() + div { + css { + width = 100.pct + alignItems = AlignItems.center + display = Display.flex + flexDirection = FlexDirection.column + } + PlayerPreparedCard { + this.playerDisplayName = player.displayName + this.username = player.username + } + } + } + } +} + +private fun ChildrenBuilder.generalCounts( + board: Board, + tokenSize: Length, + countPosition: TokenCountPosition, +) { + goldIndicator(amount = board.gold, imgSize = tokenSize, amountPosition = countPosition) + tokenWithCount( + tokenName = "laurel-blue", + count = board.bluePoints, + imgSize = tokenSize, + countPosition = countPosition, + brightText = countPosition == TokenCountPosition.OVER, + ) + tokenWithCount( + tokenName = "military/shield", + count = board.military.nbShields, + imgSize = tokenSize, + countPosition = countPosition, + brightText = countPosition == TokenCountPosition.OVER, + ) +} + +private fun ChildrenBuilder.scienceTokens( + board: Board, + tokenSize: Length, + sciencePosition: TokenCountPosition, +) { + tokenWithCount( + tokenName = "science/compass", + count = board.science.nbCompasses, + imgSize = tokenSize, + countPosition = sciencePosition, + brightText = sciencePosition == TokenCountPosition.OVER, + ) + tokenWithCount( + tokenName = "science/cog", + count = board.science.nbWheels, + imgSize = tokenSize, + countPosition = sciencePosition, + brightText = sciencePosition == TokenCountPosition.OVER, + ) + tokenWithCount( + tokenName = "science/tablet", + count = board.science.nbTablets, + imgSize = tokenSize, + countPosition = sciencePosition, + brightText = sciencePosition == TokenCountPosition.OVER, + ) +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt new file mode 100644 index 00000000..cffd509f --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt @@ -0,0 +1,78 @@ +package org.luxons.sevenwonders.ui.components.game + +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.model.cards.* +import react.* +import react.dom.html.ReactHTML.img +import web.cssom.* +import web.cssom.Color + +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 + } + } else { + img { + src = "/images/cards/${props.card.image}" + title = props.card.name + alt = "Card ${props.card.name}" + + css(props.className) { + cardImageStyle(props.highlightColor) + } + } + } +} + +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) + } + } +} + +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 + } + } +} + +private fun PropertiesBuilder.cardImageStyle(highlightColor: Color?) { + borderRadius = 5.pct + boxShadow = BoxShadow(offsetX = 2.px, offsetY = 2.px, blurRadius = 5.px, color = NamedColor.black) + highlightStyle(highlightColor) +} + +internal fun PropertiesBuilder.highlightStyle(highlightColor: Color?) { + if (highlightColor != null) { + boxShadow = BoxShadow( + offsetX = 0.px, + offsetY = 0.px, + blurRadius = 1.rem, + spreadRadius = 0.1.rem, + color = highlightColor, + ) + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt new file mode 100644 index 00000000..622e3f6d --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt @@ -0,0 +1,310 @@ +package org.luxons.sevenwonders.ui.components.game + +import blueprintjs.core.* +import blueprintjs.icons.* +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 org.luxons.sevenwonders.ui.utils.Padding +import react.* +import react.dom.html.ReactHTML.div +import web.cssom.* +import web.cssom.Position + +external interface GameSceneProps : Props { + var currentPlayer: PlayerDTO? + var players: List<PlayerDTO> + var game: GameState + var preparedMove: PlayerMove? + var preparedCard: HandCard? + var sayReady: () -> Unit + var prepareMove: (move: PlayerMove) -> Unit + var unprepareMove: () -> Unit + var leaveGame: () -> Unit +} + +data class TransactionSelectorState( + val moveType: MoveType, + val card: HandCard, + val transactionsOptions: ResourceTransactionOptions, +) + +val GameScene = FC("GameScene") { + + val player = useSwSelector { it.currentPlayer } + val gameState = useSwSelector { it.gameState } + val dispatch = useSwDispatch() + + div { + css(GlobalStyles.papyrusBackground, GlobalStyles.fullscreen) {} + + if (gameState == null) { + BpNonIdealState { + icon = IconNames.ERROR + titleText = "Error: no game data" + } + } 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 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 + } + } + 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 + } + ) + 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) {} + } + } + } + if (game.action is TurnAction.SayReady) { + SayReadyButton { + currentPlayer = props.currentPlayer + players = props.players + sayReady = props.sayReady + } + } + } +} + +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 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 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) + } + + BpCallout { + intent = Intent.PRIMARY + icon = IconNames.INFO_SIGN + +message + } + } + } +} + +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 + + css { + borderTopRightRadius = 0.4.rem + borderBottomRightRadius = 0.4.rem + } + } + } +} + +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 + + css { + 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 + + css { + borderBottomLeftRadius = 0.4.rem + borderBottomRightRadius = 0.4.rem + margin = Margin(vertical = 0.rem, 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 + + css { + borderTopLeftRadius = 0.4.rem + borderTopRightRadius = 0.4.rem + margin = Margin(vertical = 0.rem, horizontal = 2.rem) + } + } + } +} + +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() } + + +"READY" + } + // 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}" + } + } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt new file mode 100644 index 00000000..f5ec475e --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt @@ -0,0 +1,86 @@ +package org.luxons.sevenwonders.ui.components.game + +import emotion.css.* +import org.luxons.sevenwonders.ui.utils.* +import web.cssom.* + +object GameStyles { + + val totalScore = ClassName { + fontWeight = FontWeight.bold + } + + 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) + + val sandBgColor = NamedColor.palegoldenrod + + + val fullBoardPreview = ClassName { + width = 40.vw + height = 50.vh + } + + val dimmedCard = ClassName { + filter = brightness(60.pct) + grayscale(50.pct) + } + + 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.none // overrides default white background + } + } + + val bestPrice = ClassName { + fontWeight = FontWeight.bold + color = rgb(50, 120, 50) + transform = rotate((-20).deg) + } + + val discardMoveText = ClassName { + display = Display.flex + alignItems = AlignItems.center + height = 3.rem + fontSize = 2.rem + color = NamedColor.goldenrod + fontWeight = FontWeight.bold + borderTop = Border(0.2.rem, LineStyle.solid, NamedColor.goldenrod) + borderBottom = Border(0.2.rem, LineStyle.solid, NamedColor.goldenrod) + } + + val scoreBoard = ClassName { + backgroundColor = sandBgColor + } + + private fun scoreTagColorCss(color: Color) = ClassName { + backgroundColor = color + } + + 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, + ) + animationIterationCount = AnimationIterationCount.infinite + animationDirection = AnimationDirection.alternate + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt new file mode 100644 index 00000000..da71ea0b --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt @@ -0,0 +1,276 @@ +package org.luxons.sevenwonders.ui.components.game + +import blueprintjs.core.* +import blueprintjs.icons.* +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.client.* +import org.luxons.sevenwonders.model.* +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.html.ReactHTML.div +import web.cssom.* +import web.cssom.Position +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, + val moveType: MoveType, + val icon: IconName, +) { + PLAY("PLAY", MoveType.PLAY, "play"), + PLAY_FREE("Play as this age's free card", MoveType.PLAY_FREE, "star"), + PLAY_FREE_DISCARDED("Play discarded card", MoveType.PLAY_FREE_DISCARDED, "star"), + COPY_GUILD("Copy this guild card", MoveType.COPY_GUILD, "duplicate") +} + +external interface HandCardsProps : Props { + var action: TurnAction + var ownBoard: Board + var preparedMove: PlayerMove? + var prepareMove: (MoveType, HandCard, ResourceTransactionOptions) -> Unit +} + +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 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 { + val isPlayable = props.card.playability.isPlayable || props.ownBoard.canPlayAnyCardForFree + handCardImgStyle(isPlayable) + } + this.card = props.card + } + actionButtons(props.card, props.action, props.ownBoard, props.prepareMove) + } +} + +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 + } + } + 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, 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") + } + + if (action.allowsBuildingWonder()) { + upgradeWonderButton(card, ownBoard.wonder.buildability, prepareMove) + } + if (action.allowsDiscarding()) { + discardButton(card, prepareMove) + } + } + } +} + +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 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 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, singleOptionNoTransactionNeeded()) } + } +} + +private fun cardPlayabilityInfo(playability: CardPlayability) = when (playability.isPlayable) { + true -> priceText(-playability.minPrice) + false -> playability.playabilityLevel.message +} + +private fun wonderBuildabilityInfo(buildability: WonderBuildability) = when (buildability.isBuildable) { + true -> priceText(-buildability.minPrice) + false -> buildability.playabilityLevel.message +} + +private fun priceText(amount: Int) = when (amount.absoluteValue) { + 0 -> "free" + 1 -> "${pricePrefix(amount)}$amount coin" + else -> "${pricePrefix(amount)}$amount coins" +} + +private fun pricePrefix(amount: Int) = when { + amount > 0 -> "+" + else -> "" +} + +private fun ChildrenBuilder.priceInfo(amount: Int) { + goldIndicator( + amount = amount, + amountPosition = TokenCountPosition.OVER, + imgSize = 1.rem, + customCountStyle = { + fontFamily = FontFamily.sansSerif + fontSize = 0.8.rem + }, + ) { + css { + position = Position.absolute + top = (-0.2).rem + left = (-0.2).rem + } + } +} + +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 = Transition(TransitionProperty.all, duration = 0.5.s, timingFunction = TransitionTimingFunction.ease) + zIndex = integer(30) + + hover { + bottom = 1.rem + zIndex = integer(60) + transform = translate(tx = (-50).pct, ty = 0.pct) + } +} + +private fun PropertiesBuilder.handCardImgStyle(isPlayable: Boolean) { + gridRow = integer(1) + gridColumn = integer(1) + maxWidth = 13.vw + maxHeight = 60.vh + transition = Transition(TransitionProperty.all, duration = 0.1.s, timingFunction = TransitionTimingFunction.ease) + width = 11.rem + + ancestorHover(".hand-card") { + 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.pct) + contrast(50.pct) + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt new file mode 100644 index 00000000..72cb6b65 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt @@ -0,0 +1,56 @@ +package org.luxons.sevenwonders.ui.components.game + +import blueprintjs.core.* +import blueprintjs.icons.* +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.model.cards.* +import react.* +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.img +import web.cssom.* +import web.cssom.Position + +fun ChildrenBuilder.handRotationIndicator(direction: HandRotationDirection) { + div { + css { + position = Position.absolute + display = Display.flex + alignItems = AlignItems.center + bottom = 25.vh + val sideDistance = 2.rem + when (direction) { + HandRotationDirection.LEFT -> left = sideDistance + HandRotationDirection.RIGHT -> right = sideDistance + } + } + + title = "Your hand will be passed to the player on your $direction after playing this card." + + when (direction) { + HandRotationDirection.LEFT -> { + BpIcon { + icon = IconNames.ARROW_LEFT + size = 25 + } + handCardsImg() + } + HandRotationDirection.RIGHT -> { + handCardsImg() + BpIcon { + icon = IconNames.ARROW_RIGHT + size = 25 + } + } + } + } +} + +private fun ChildrenBuilder.handCardsImg() { + img { + src = "images/hand-cards5.png" + css { + width = 4.rem + } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt new file mode 100644 index 00000000..627693e1 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt @@ -0,0 +1,80 @@ +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 +import web.cssom.* + +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/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt new file mode 100644 index 00000000..3ecdc741 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt @@ -0,0 +1,73 @@ +package org.luxons.sevenwonders.ui.components.game + +import blueprintjs.core.* +import blueprintjs.icons.* +import csstype.* +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.cssom.* +import web.cssom.Position +import web.html.* + +fun ChildrenBuilder.preparedMove( + card: HandCard, + move: PlayerMove, + unprepareMove: () -> Unit, + block: HTMLAttributes<HTMLDivElement>.() -> Unit, +) { + div { + block() + CardImage { + this.card = card + if (move.type == MoveType.DISCARD || move.type == MoveType.UPGRADE_WONDER) { + this.className = GameStyles.dimmedCard + } + } + if (move.type == MoveType.DISCARD) { + discardText() + } + if (move.type == MoveType.UPGRADE_WONDER) { + upgradeWonderSymbol() + } + div { + css { + position = web.cssom.Position.absolute + top = 0.px + right = 0.px + } + BpButton { + icon = IconNames.CROSS + title = "Cancel prepared move" + small = true + intent = Intent.DANGER + onClick = { unprepareMove() } + } + } + } +} + +private fun ChildrenBuilder.discardText() { + div { + css(GlobalStyles.centerInPositionedParent, GameStyles.discardMoveText) {} + +"DISCARD" + } +} + +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) + } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt new file mode 100644 index 00000000..cd54446f --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt @@ -0,0 +1,188 @@ +package org.luxons.sevenwonders.ui.components.game + +import blueprintjs.core.* +import blueprintjs.icons.* +import csstype.* +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.* +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 +import web.cssom.* + +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 = AlignItems.center + } + h1 { + css { + marginTop = 0.px + } + +"Score Board" + } + scoreTable(scoreBoard, players) + div { + css { + marginTop = 1.rem + } + BpButton { + intent = Intent.WARNING + rightIcon = "log-out" + large = true + onClick = { leaveGame() } + + +"LEAVE" + } + } + } + } + } +} + +private fun ChildrenBuilder.scoreTable(scoreBoard: ScoreBoard, players: List<PlayerDTO>) { + BpHTMLTable { + bordered = false + interactive = true + + thead { + tr { + th { + fullCenterInlineStyle() + +"Rank" + } + th { + fullCenterInlineStyle() + colSpan = 2 + + +"Player" + } + th { + fullCenterInlineStyle() + +"Score" + } + ScoreCategory.values().forEach { + th { + fullCenterInlineStyle() + +it.title + } + } + } + } + tbody { + scoreBoard.scores.forEachIndexed { index, score -> + val player = players[score.playerIndex] + tr { + td { + fullCenterInlineStyle() + ordinal(scoreBoard.ranks[index]) + } + td { + fullCenterInlineStyle() + BpIcon { + icon = player.icon?.name ?: IconNames.USER + size = 25 + } + } + td { + inlineStyles { + verticalAlign = VerticalAlign.middle + } + +player.displayName + } + td { + fullCenterInlineStyle() + BpTag { + large = true + round = true + minimal = true + className = GameStyles.totalScore + + +"${score.totalPoints}" + } + } + ScoreCategory.values().forEach { cat -> + td { + fullCenterInlineStyle() + BpTag { + large = true + round = true + fill = true + icon = cat.icon + className = classNameForCategory(cat) + + +"${score.pointsByCategory[cat]}" + } + } + } + } + } + } + } +} + +private fun ChildrenBuilder.ordinal(value: Int) { + +"$value" + sup { +value.ordinalIndicator() } +} + +private fun Int.ordinalIndicator() = when { + this % 10 == 1 && this != 11 -> "st" + this % 10 == 2 && this != 12 -> "nd" + this % 10 == 3 && this != 13 -> "rd" + else -> "th" +} + +private fun HTMLAttributes<*>.fullCenterInlineStyle() { + // inline styles necessary to overcome blueprintJS overrides + inlineStyles { + textAlign = TextAlign.center + verticalAlign = VerticalAlign.middle + } +} + +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 -> 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: +// Greek temple: 🏛 +// Cog (science): ⚙️ +// Swords (war): ⚔️ +// Gold bag: 💰 diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt new file mode 100644 index 00000000..01975f7e --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt @@ -0,0 +1,155 @@ +package org.luxons.sevenwonders.ui.components.game + +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.cssom.* +import web.html.* + +private fun getResourceTokenName(resourceType: ResourceType) = "resources/${resourceType.toString().lowercase()}" + +private fun getTokenImagePath(tokenName: String) = "/images/tokens/$tokenName.png" + +enum class TokenCountPosition { + LEFT, + RIGHT, + OVER, +} + +fun ChildrenBuilder.goldIndicator( + amount: Int, + amountPosition: TokenCountPosition = TokenCountPosition.OVER, + imgSize: Length = 3.rem, + customCountStyle: PropertiesBuilder.() -> Unit = {}, + block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}, +) { + tokenWithCount( + tokenName = "coin", + title = "$amount gold coins", + imgSize = imgSize, + count = amount, + countPosition = amountPosition, + customCountStyle = customCountStyle, + block = block, + ) +} + +fun ChildrenBuilder.resourceImage( + resourceType: ResourceType, + title: String = resourceType.toString(), + size: Length?, +) { + TokenImage { + this.tokenName = getResourceTokenName(resourceType) + this.title = title + this.size = size + } +} + +fun ChildrenBuilder.tokenWithCount( + tokenName: String, + count: Int, + title: String = tokenName, + imgSize: Length? = null, + countPosition: TokenCountPosition = TokenCountPosition.RIGHT, + brightText: Boolean = false, + customCountStyle: PropertiesBuilder.() -> Unit = {}, + block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}, +) { + div { + block() + val tokenCountSize = if (imgSize != null) 0.6 * imgSize else 1.5.rem + when (countPosition) { + TokenCountPosition.RIGHT -> { + TokenImage { + this.tokenName = tokenName + this.title = title + this.size = imgSize + } + span { + css { + tokenCountStyle(tokenCountSize, brightText, customCountStyle) + marginLeft = 0.2.rem + } + +"× $count" + } + } + + TokenCountPosition.LEFT -> { + span { + css { + tokenCountStyle(tokenCountSize, brightText, customCountStyle) + marginRight = 0.2.rem + } + +"$count ×" + } + TokenImage { + this.tokenName = tokenName + this.title = title + this.size = imgSize + } + } + + TokenCountPosition.OVER -> { + div { + css { + position = Position.relative + // if container becomes large, this one stays small so that children stay on top of each other + width = Length.fitContent + } + TokenImage { + this.tokenName = tokenName + this.title = title + this.size = imgSize + } + span { + css(GlobalStyles.centerInPositionedParent) { + tokenCountStyle(tokenCountSize, brightText, customCountStyle) + } + +"$count" + } + } + } + } + } +} + +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 = props.size ?: 100.pct + if (props.size != null) { + width = props.size + } + verticalAlign = VerticalAlign.middle + } + } +} + +private fun PropertiesBuilder.tokenCountStyle( + size: Length, + brightText: Boolean, + customStyle: PropertiesBuilder.() -> Unit = {}, +) { + fontFamily = string("Acme") + fontSize = size + verticalAlign = VerticalAlign.middle + color = if (brightText) NamedColor.white else NamedColor.black + customStyle() +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt new file mode 100644 index 00000000..cdf97ad9 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt @@ -0,0 +1,265 @@ +package org.luxons.sevenwonders.ui.components.game + +import blueprintjs.core.* +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.* +import org.luxons.sevenwonders.ui.utils.* +import org.luxons.sevenwonders.ui.utils.Margin +import react.* +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.cssom.* +import web.html.* + +fun ChildrenBuilder.transactionsSelectorDialog( + state: TransactionSelectorState?, + neighbours: Pair<PlayerDTO, PlayerDTO>, + prepareMove: (PlayerMove) -> Unit, + cancelTransactionSelection: () -> Unit, +) { + 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 + div { + css { + margin = Margin(all = Auto.auto) + display = Display.flex + alignItems = AlignItems.center + } + neighbour(neighbours.first) + div { + css { + flexGrow = number(1.0) + margin = Margin(vertical = 0.rem, horizontal = 0.5.rem) + display = Display.flex + flexDirection = FlexDirection.column + alignItems = AlignItems.center + } + OptionsTable { + this.state = state + this.prepareMove = prepareMove + } + } + neighbour(neighbours.second) + } + } + } + } +} + +private fun ChildrenBuilder.neighbour(player: PlayerDTO) { + div { + css { + width = 12.rem + + // center the icon + display = Display.flex + flexDirection = FlexDirection.column + alignItems = AlignItems.center + } + PlayerInfo { + this.player = player + this.iconSize = 40 + this.orientation = FlexDirection.column + this.ellipsize = false + } + } +} + +private external interface OptionsTableProps : PropsWithChildren { + var state: TransactionSelectorState + var prepareMove: (PlayerMove) -> Unit +} + +private val OptionsTable = FC<OptionsTableProps> { props -> + val state = props.state + val prepareMove = props.prepareMove + + var expanded by useState { false } + + val bestPrice = state.transactionsOptions.bestPrice + val (cheapestOptions, otherOptions) = state.transactionsOptions.partition { it.totalPrice == bestPrice } + + BpHTMLTable { + interactive = true + tbody { + cheapestOptions.forEach { transactions -> + transactionsOptionRow( + transactions = transactions, + showBestPriceIndicator = expanded, + onClick = { prepareMove(PlayerMove(state.moveType, state.card.name, transactions)) }, + ) + } + if (expanded) { + otherOptions.forEach { transactions -> + transactionsOptionRow( + transactions = transactions, + showBestPriceIndicator = false, + onClick = { prepareMove(PlayerMove(state.moveType, state.card.name, transactions)) }, + ) + } + } + } + } + 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 { + this.minimal = true + this.small = true + this.icon = icon + this.rightIcon = icon + this.onClick = { expanded = !expanded } + + +text + } + } +} + +private fun ChildrenBuilder.transactionsOptionRow( + transactions: PricedResourceTransactions, + showBestPriceIndicator: Boolean, + onClick: () -> Unit, +) { + tr { + css { + cursor = Cursor.pointer + 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 } + td { + transactionCellCss() + div { + css { opacity = number(if (leftTr == null) 0.5 else 1.0) } + transactionCellInnerCss() + BpIcon { + icon = IconNames.CARET_LEFT + size = IconSize.LARGE + } + goldIndicator(leftTr?.totalPrice ?: 0, imgSize = 2.5.rem) + } + } + td { + transactionCellCss() + if (leftTr != null) { + resourceList(leftTr.resources) + } + } + td { + transactionCellCss() + css { width = 1.5.rem } + if (showBestPriceIndicator) { + bestPriceIndicator() + } + } + td { + transactionCellCss() + if (rightTr != null) { + resourceList(rightTr.resources) + } + } + td { + transactionCellCss() + div { + css { opacity = number(if (rightTr == null) 0.5 else 1.0) } + transactionCellInnerCss() + goldIndicator(rightTr?.totalPrice ?: 0, imgSize = 2.5.rem) + BpIcon { + icon = IconNames.CARET_RIGHT + size = IconSize.LARGE + } + } + } + } +} + +private fun ChildrenBuilder.bestPriceIndicator() { + div { + css(GameStyles.bestPrice){} + +"Best\nprice!" + } +} + +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 + textAlign = TextAlign.center + } +} + +private fun HTMLAttributes<HTMLDivElement>.transactionCellInnerCss() { + css { + display = Display.flex + flexDirection = FlexDirection.row + alignItems = AlignItems.center + } +} + +private fun ChildrenBuilder.resourceList(countedResources: List<CountedResource>) { + val resources = countedResources.toRepeatedTypesList() + + // The biggest card is the Palace and requires 7 resources (1 of each). + // We always have at least 1 resource on our wonder, so we'll never need to buy more than 6. + // 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 + div { + css { + display = Display.flex + flexDirection = FlexDirection.column + alignItems = AlignItems.center + justifyContent = JustifyContent.center + flexGrow = number(1.0) + // this ensures stable dimensions, no matter how many resources (up to 2x3 matrix) + width = (imgSize * 3).rem + height = (imgSize * 2).rem + } + rows.forEach { row -> + div { + resourceRowCss() + row.forEach { + resourceImage(it, size = imgSize.rem) + } + } + } + } +} + +private fun HTMLAttributes<HTMLDivElement>.resourceRowCss() { + css { + display = Display.flex + flexDirection = FlexDirection.row + alignItems = AlignItems.center + margin = Margin(vertical = 0.px, horizontal = Auto.auto) + } +} + +private fun List<CountedResource>.toRepeatedTypesList(): List<ResourceType> = flatMap { cr -> List(cr.count) { cr.type } } diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt new file mode 100644 index 00000000..e0f7dd21 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt @@ -0,0 +1,58 @@ +package org.luxons.sevenwonders.ui.components.gameBrowser + +import blueprintjs.core.* +import blueprintjs.icons.* +import emotion.react.* +import org.luxons.sevenwonders.ui.names.* +import org.luxons.sevenwonders.ui.redux.* +import react.* +import react.dom.html.ReactHTML.form +import web.cssom.* + +val CreateGameForm = FC { + var gameName by useState("") + + val dispatch = useSwDispatch() + val createGame = { dispatch(RequestCreateGame(gameName)) } + + form { + css { + display = Display.flex + flexDirection = FlexDirection.row + } + onSubmit = { e -> + e.preventDefault() + createGame() + } + + BpInputGroup { + large = true + placeholder = "Game name" + value = gameName + onChange = { e -> + val input = e.currentTarget + gameName = input.value + } + rightElement = BpButton.create { + title = "Generate random name" + icon = IconNames.RANDOM + minimal = true + onClick = { gameName = randomGameName() } + } + } + BpButton { + title = "Create the game" + intent = Intent.PRIMARY + icon = IconNames.ARROW_RIGHT + large = true + onClick = { e -> + e.preventDefault() // prevents refreshing the page when pressing Enter + createGame() + } + + css { + marginLeft = 0.2.rem + } + } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt new file mode 100644 index 00000000..10fb9d81 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt @@ -0,0 +1,69 @@ +package org.luxons.sevenwonders.ui.components.gameBrowser + +import blueprintjs.core.* +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.html.ReactHTML.div +import react.dom.html.ReactHTML.h1 +import react.dom.html.ReactHTML.h2 +import web.cssom.* + +val GameBrowser = FC { + div { + css(GlobalStyles.fullscreen, GlobalStyles.zeusBackground) { + padding = Padding(all = 1.rem) + } + div { + css(ClassName(Classes.DARK)) { + margin = Margin(vertical = 0.px, horizontal = Auto.auto) + maxWidth = GlobalStyles.preGameWidth + } + div { + css { + display = Display.flex + justifyContent = JustifyContent.spaceBetween + } + h1 { +"Games" } + CurrentPlayerInfo() + } + + BpCard { + css { + marginBottom = 1.rem + } + + h2 { + css { + marginTop = 0.px + } + +"Create a Game" + } + CreateGameForm() + } + + BpCard { + h2 { + css { + marginTop = 0.px + } + +"Join a Game" + } + GameList() + } + } + } +} + +val CurrentPlayerInfo = FC { + val connectedPlayer = useSwSelector { it.connectedPlayer } + PlayerInfo { + player = connectedPlayer + iconSize = 30 + showUsername = true + orientation = FlexDirection.row + ellipsize = false + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt new file mode 100644 index 00000000..2919b065 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt @@ -0,0 +1,213 @@ +package org.luxons.sevenwonders.ui.components.gameBrowser + +import blueprintjs.core.* +import blueprintjs.icons.* +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.model.api.* +import org.luxons.sevenwonders.model.api.State +import org.luxons.sevenwonders.ui.redux.* +import org.luxons.sevenwonders.ui.utils.* +import react.* +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 web.cssom.* +import react.State as RState + +external interface GameListStateProps : Props { + var connectedPlayer: ConnectedPlayer + var games: List<LobbyDTO> +} + +external interface GameListDispatchProps : Props { + var joinGame: (Long) -> Unit +} + +external interface GameListProps : GameListStateProps, GameListDispatchProps + +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 render() = Fragment.create { + if (props.games.isEmpty()) { + noGamesInfo() + } else { + gamesTable() + } + } + + 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. " + +"Don't be disappointed, you can always create your own game, and play with bots if you're alone." + } + } + } + + private fun ChildrenBuilder.gamesTable() { + BpHTMLTable { + css { + width = 100.pct + } + + columnWidthsSpec() + thead { + gameListHeaderRow() + } + tbody { + props.games.forEach { + gameListItemRow(it) + } + } + } + } + + private fun ChildrenBuilder.columnWidthsSpec() { + colgroup { + col { + css { + width = 40.rem + } + } + col { + css { + width = 5.rem + textAlign = TextAlign.center + } + } + col { + css { + width = 5.rem + textAlign = TextAlign.center // use inline style on th instead to overcome blueprint style + } + } + col { + css { + width = 3.rem + textAlign = TextAlign.center + } + } + } + } + + private fun ChildrenBuilder.gameListHeaderRow() = tr { + th { + +"Name" + } + th { + inlineStyles { gameTableHeaderCellStyle() } + +"Status" + } + th { + inlineStyles { gameTableHeaderCellStyle() } + +"Players" + } + th { + inlineStyles { gameTableHeaderCellStyle() } + +"Join" + } + } + + private fun ChildrenBuilder.gameListItemRow(lobby: LobbyDTO) = tr { + key = lobby.id.toString() + // inline styles necessary to overcome BlueprintJS's verticalAlign=top + td { + inlineStyles { gameTableCellStyle() } + +lobby.name + } + td { + inlineStyles { + textAlign = TextAlign.center + gameTableCellStyle() + } + gameStatus(lobby.state) + } + td { + inlineStyles { gameTableCellStyle() } + playerCount(lobby.players.size) + } + td { + inlineStyles { gameTableCellStyle() } + joinButton(lobby) + } + } + + private fun PropertiesBuilder.gameTableHeaderCellStyle() { + textAlign = TextAlign.center + } + + private fun PropertiesBuilder.gameTableCellStyle() { + verticalAlign = VerticalAlign.middle + } + + private fun ChildrenBuilder.gameStatus(state: State) { + val intent = when (state) { + State.LOBBY -> Intent.SUCCESS + State.PLAYING -> Intent.WARNING + State.FINISHED -> Intent.DANGER + } + BpTag { + this.minimal = true + this.intent = intent + + +state.toString() + } + } + + private fun ChildrenBuilder.playerCount(nPlayers: Int) { + div { + css { + display = Display.flex + flexDirection = FlexDirection.row + justifyContent = JustifyContent.center + } + title = "Number of players" + BpIcon { + icon = IconNames.PEOPLE + title = null + } + span { + css { + marginLeft = 0.3.rem + } + +nPlayers.toString() + } + } + } + + 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) } + } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt new file mode 100644 index 00000000..d7a9a80f --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt @@ -0,0 +1,105 @@ +package org.luxons.sevenwonders.ui.components.gameBrowser + +import blueprintjs.core.* +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.model.api.* +import react.* +import react.State +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.span +import web.cssom.* + +external interface PlayerInfoProps : PropsWithChildren { + var player: BasicPlayerInfo? + var showUsername: Boolean? + var iconSize: Int? + var orientation: FlexDirection? + var ellipsize: Boolean? +} + +val PlayerInfo = PlayerInfoPresenter::class.react + +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 + } + if (props.showUsername == true) { + playerNameWithUsername(it.displayName, it.username) { + iconSeparationMargin(orientation) + } + } else { + playerName(it.displayName) { + iconSeparationMargin(orientation) + } + } + } + } + + private fun ChildrenBuilder.playerName(displayName: String, style: PropertiesBuilder.() -> Unit = {}) { + span { + css { + fontSize = 1.rem + if (props.orientation == FlexDirection.column) { + textAlign = TextAlign.center + } + style() + } + // TODO replace by BlueprintJS's Text elements (built-in ellipsize based on width) + val maxDisplayNameLength = 15 + val ellipsize = props.ellipsize ?: true + if (ellipsize && displayName.length > maxDisplayNameLength) { + title = displayName + +displayName.ellipsize(maxDisplayNameLength) + } else { + +displayName + } + } + } + + private fun String.ellipsize(maxLength: Int) = take(maxLength - 1) + "…" + + private fun PropertiesBuilder.iconSeparationMargin(orientation: FlexDirection) { + val margin = 0.4.rem + when (orientation) { + FlexDirection.row -> marginLeft = margin + FlexDirection.column -> marginTop = margin + FlexDirection.rowReverse -> marginRight = margin + FlexDirection.columnReverse -> marginBottom = margin + else -> error("Unsupported orientation '$orientation' for player info component") + } + } + + private fun ChildrenBuilder.playerNameWithUsername( + displayName: String, + username: String, + style: PropertiesBuilder.() -> Unit = {} + ) { + div { + css { + display = Display.flex + flexDirection = FlexDirection.column + style() + } + playerName(displayName) + span { + css { + marginTop = 0.1.rem + color = NamedColor.lightgray + fontSize = 0.8.rem + } + +"($username)" + } + } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt new file mode 100644 index 00000000..ba37c09d --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt @@ -0,0 +1,65 @@ +package org.luxons.sevenwonders.ui.components.home + +import blueprintjs.core.* +import blueprintjs.icons.* +import emotion.react.* +import org.luxons.sevenwonders.ui.names.* +import org.luxons.sevenwonders.ui.redux.* +import react.* +import react.dom.html.ReactHTML.form +import web.cssom.* + +val ChooseNameForm = FC { + val dispatch = useSwDispatch() + ChooseNameFormPresenter { + chooseUsername = { name -> dispatch(RequestChooseName(name)) } + } +} + +private external interface ChooseNameFormPresenterProps : PropsWithChildren { + var chooseUsername: (String) -> Unit +} + +private val ChooseNameFormPresenter = FC<ChooseNameFormPresenterProps> { props -> + var usernameState by useState("") + + form { + css { + display = Display.flex + flexDirection = FlexDirection.row + } + onSubmit = { e -> + e.preventDefault() + props.chooseUsername(usernameState) + } + BpInputGroup { + large = true + placeholder = "Username" + value = usernameState + onChange = { e -> + val input = e.currentTarget + usernameState = input.value + } + rightElement = BpButton.create { + title = "Generate random name" + icon = IconNames.RANDOM + minimal = true + onClick = { usernameState = randomGreekName() } + } + } + BpButton { + title = "Start" + icon = IconNames.ARROW_RIGHT + intent = Intent.PRIMARY + large = true + onClick = { e -> + e.preventDefault() + props.chooseUsername(usernameState) + } + + css { + marginLeft = 0.2.rem + } + } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt new file mode 100644 index 00000000..81f4c736 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt @@ -0,0 +1,22 @@ +package org.luxons.sevenwonders.ui.components.home + +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" + +val Home = FC("Home") { + div { + css(GlobalStyles.fullscreen, GlobalStyles.zeusBackground, HomeStyles.centerChildren) {} + + img { + src = LOGO + alt = "Seven Wonders" + } + + ChooseNameForm() + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt new file mode 100644 index 00000000..015e78d6 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt @@ -0,0 +1,15 @@ +package org.luxons.sevenwonders.ui.components.home + +import csstype.* +import emotion.css.* +import web.cssom.* + +object HomeStyles { + + val centerChildren = ClassName { + display = Display.flex + flexDirection = FlexDirection.column + alignItems = AlignItems.center + justifyContent = JustifyContent.center + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt new file mode 100644 index 00000000..0330a192 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt @@ -0,0 +1,272 @@ +package org.luxons.sevenwonders.ui.components.lobby + +import blueprintjs.core.* +import blueprintjs.icons.* +import emotion.react.* +import org.luxons.sevenwonders.model.api.* +import org.luxons.sevenwonders.model.wonders.* +import org.luxons.sevenwonders.ui.components.* +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.h1 +import react.dom.html.ReactHTML.h2 +import react.dom.html.ReactHTML.h3 +import react.dom.html.ReactHTML.h4 +import web.cssom.* +import web.cssom.Position + +private val BOT_NAMES = listOf("Wall-E", "B-Max", "Sonny", "T-800", "HAL", "GLaDOS", "R2-D2", "Bender", "AWESOM-O") + +val Lobby = FC(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)) } + } + } +} + +private external interface LobbyPresenterProps : Props { + var currentGame: LobbyDTO + var currentPlayer: PlayerDTO + var startGame: () -> Unit + var addBot: (displayName: String) -> Unit + var leaveLobby: () -> Unit + var disbandLobby: () -> Unit + var reorderPlayers: (orderedPlayers: List<String>) -> Unit + var reassignWonders: (wonders: List<AssignedWonder>) -> Unit +} + +private val LobbyPresenter = FC<LobbyPresenterProps> { props -> + div { + css(GlobalStyles.fullscreen, GlobalStyles.zeusBackground) { + padding = Padding(all = 1.rem) + } + div { + css(ClassName(Classes.DARK), LobbyStyles.contentContainer) { + margin = Margin(vertical = 0.rem, horizontal = Auto.auto) + maxWidth = GlobalStyles.preGameWidth + } + h1 { +"${props.currentGame.name} — Lobby" } + + radialPlayerList(props.currentGame.players, props.currentPlayer) { + css { + // 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(props.currentPlayer, props.currentGame, props.startGame, props.leaveLobby, props.disbandLobby, props.addBot) + + 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) + + width = 70.pct + display = Display.flex + justifyContent = JustifyContent.spaceAround + } + if (currentPlayer.isGameOwner) { + BpButtonGroup { + leaveButton(leaveLobby) + disbandButton(disbandLobby) + } + BpButtonGroup { + addBotButton(currentGame, addBot) + startButton(currentGame.startability(currentPlayer.username), startGame) + } + } else { + leaveButton(leaveLobby) + } + } +} + +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 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 + } + +"Game setup" + } + BpDivider() + h3 { + +"Players" + } + reorderPlayersButton(currentGame, reorderPlayers) + h3 { + +"Wonders" + } + WonderSettingsGroup { + this.currentGame = currentGame + this.reassignWonders = reassignWonders + } + } + } +} + +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 randomBotNameUnusedIn(currentGame: LobbyDTO): String { + val availableBotNames = BOT_NAMES.filter { name -> + currentGame.players.none { it.displayName == name } + } + return availableBotNames.random() +} + +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()) } + + +"Reorder players" + } +} + +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)) } + + +"A" + } + BpButton { + title = "Choose side B for everyone" + onClick = { reassignWonders(assignedWondersWithForcedSide(props.currentGame, WonderSide.B)) } + + +"B" + } + } +} + +private fun randomWonderAssignments(currentGame: LobbyDTO): List<AssignedWonder> = + currentGame.allWonders.deal(currentGame.players.size) + +private fun assignedWondersWithForcedSide( + currentGame: LobbyDTO, + side: WonderSide +) = 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 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() } + + +"LEAVE" + } +} + +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/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt new file mode 100644 index 00000000..6b5dbe48 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt @@ -0,0 +1,20 @@ +package org.luxons.sevenwonders.ui.components.lobby + +import emotion.css.* +import org.luxons.sevenwonders.ui.components.* +import web.cssom.* + +object LobbyStyles { + + val contentContainer = ClassName { + margin = Margin(vertical = 0.px, horizontal = Auto.auto) + maxWidth = GlobalStyles.preGameWidth + } + + val setupPanel = ClassName { + position = Position.fixed + top = 2.rem + right = 1.rem + width = 20.rem + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt new file mode 100644 index 00000000..1f88bebe --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt @@ -0,0 +1,117 @@ +package org.luxons.sevenwonders.ui.components.lobby + +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.cssom.* +import web.html.* + +fun <T> ChildrenBuilder.radialList( + items: List<T>, + centerElement: ReactElement<*>, + renderItem: (T) -> ReactElement<*>, + getKey: (T) -> String, + itemWidth: Int, + itemHeight: Int, + options: RadialConfig = RadialConfig(), + block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}, +) { + val containerWidth = options.diameter + itemWidth + val containerHeight = options.diameter + itemHeight + + div { + css(GlobalStyles.fixedCenter) { + zeroMargins() + width = containerWidth.px + height = containerHeight.px + } + block() + radialListItems(items, renderItem, getKey, options) + radialListCenter(centerElement) + } +} + +private fun <T> ChildrenBuilder.radialListItems( + items: List<T>, + renderItem: (T) -> ReactElement<*>, + getKey: (T) -> String, + radialConfig: RadialConfig, +) { + val offsets = offsetsFromCenter(items.size, radialConfig) + ul { + css { + zeroMargins() + transition = Transition( + property = TransitionProperty.all, + duration = 500.ms, + timingFunction = TransitionTimingFunction.easeInOut, + ) + zIndex = integer(1) + width = radialConfig.diameter.px + height = radialConfig.diameter.px + absoluteCenter() + } + // We ensure a stable order of the DOM elements so that position animations look nice. + // We still respect the order of the items in the list when placing them along the circle. + val indexByKey = buildMap { + items.forEachIndexed { index, item -> put(getKey(item), index) } + } + items.sortedBy { getKey(it) }.forEach { item -> + val key = getKey(item) + radialListItem(renderItem(item), key, offsets[indexByKey.getValue(key)]) + } + } +} + +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 = 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 ChildrenBuilder.radialListCenter(centerElement: ReactElement<*>?) { + if (centerElement == null) { + return + } + div { + css { + zIndex = integer(0) + absoluteCenter() + } + child(centerElement) + } +} + +private fun PropertiesBuilder.absoluteCenter() { + position = Position.absolute + left = 50.pct + top = 50.pct + transform = translate((-50).pct, (-50).pct) +} + +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/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialMath.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialMath.kt new file mode 100644 index 00000000..4b5eb509 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialMath.kt @@ -0,0 +1,57 @@ +package org.luxons.sevenwonders.ui.components.lobby + +import kotlin.math.PI +import kotlin.math.cos +import kotlin.math.roundToInt +import kotlin.math.sin + +data class CartesianCoords( + val x: Int, + val y: Int, +) + +data class PolarCoords( + val radius: Int, + val angleDeg: Int, +) + +private fun Int.toRadians() = (this * PI / 180.0) +private fun Double.project(angleRad: Double, trigFn: (Double) -> Double) = (this * trigFn(angleRad)).roundToInt() +private fun Double.xProjection(angleRad: Double) = project(angleRad, ::cos) +private fun Double.yProjection(angleRad: Double) = project(angleRad, ::sin) + +private fun PolarCoords.toCartesian() = CartesianCoords( + x = radius.toDouble().xProjection(angleDeg.toRadians()), + y = radius.toDouble().yProjection(angleDeg.toRadians()), +) + +// Y-axis is pointing down in the browser, so the directions need to be reversed +// (positive angles are now clockwise) +enum class Direction(private val value: Int) { + CLOCKWISE(1), + COUNTERCLOCKWISE(-1); + + fun toOrientedDegrees(deg: Int) = value * deg +} + +data class RadialConfig( + val radius: Int = 120, + val spreadArcDegrees: Int = 360, // full circle + val firstItemAngleDegrees: Int = 0, // 12 o'clock + val direction: Direction = Direction.CLOCKWISE, +) { + val diameter: Int = radius * 2 +} + +private const val DEFAULT_START = -90 // Up, because Y-axis is reversed + +fun offsetsFromCenter(nbItems: Int, radialConfig: RadialConfig = RadialConfig()): List<CartesianCoords> { + val startAngle = DEFAULT_START + radialConfig.direction.toOrientedDegrees(radialConfig.firstItemAngleDegrees) + val angleStep = radialConfig.spreadArcDegrees / nbItems + return List(nbItems) { itemCartesianOffsets(startAngle, angleStep, it, radialConfig) } +} + +private fun itemCartesianOffsets(startAngle: Int, angleStep: Int, index: Int, config: RadialConfig): CartesianCoords { + val itemAngle = startAngle + config.direction.toOrientedDegrees(angleStep) * index + return PolarCoords(config.radius, itemAngle).toCartesian() +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt new file mode 100644 index 00000000..645cf5f3 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt @@ -0,0 +1,139 @@ +package org.luxons.sevenwonders.ui.components.lobby + +import blueprintjs.core.* +import blueprintjs.icons.* +import csstype.* +import emotion.react.* +import org.luxons.sevenwonders.model.api.* +import org.luxons.sevenwonders.model.api.actions.Icon +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.cssom.* +import web.html.* + +fun ChildrenBuilder.radialPlayerList( + players: List<PlayerDTO>, + currentPlayer: PlayerDTO, + block: HTMLAttributes<HTMLDivElement>.() -> Unit = {}, +) { + val playerItems = players // + .map { PlayerItem.Player(it) } + .growWithPlaceholders(targetSize = 3) + .withUserFirst(currentPlayer) + + radialList( + items = playerItems, + centerElement = LobbyWoodenTable.create { + diameter = 200.px + borderSize = 15.px + }, + renderItem = { PlayerElement.create { playerItem = it } }, + getKey = { it.key }, + itemWidth = 120, + itemHeight = 100, + options = RadialConfig( + radius = 175, + firstItemAngleDegrees = 180, // self at the bottom + direction = Direction.COUNTERCLOCKWISE, // new players sit to the right of last player + ), + block = block, + ) +} + +private fun List<PlayerItem>.growWithPlaceholders(targetSize: Int): List<PlayerItem> = when { + size < targetSize -> this + List(targetSize - size) { PlayerItem.Placeholder(size + it) } + else -> this +} + +private fun List<PlayerItem>.withUserFirst(me: PlayerDTO): List<PlayerItem> { + val nonUsersBeginning = takeWhile { (it as? PlayerItem.Player)?.player?.username != me.username } + val userToEnd = subList(nonUsersBeginning.size, size) + return userToEnd + nonUsersBeginning +} + +private sealed class PlayerItem { + abstract val key: String + abstract val playerText: String + 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 = 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 = number(0.4) + override val icon = createUserIcon( + icon = Icon(IconNames.USER), + title = "Waiting for player...", + ) + } +} + +private fun createUserIcon(icon: Icon, title: String?) = BpIcon.create { + this.icon = icon.name + this.size = 50 + this.title = title +} + +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 = AlignItems.center + opacity = playerItem.opacity + } + child(playerItem.icon) + span { + css { + fontSize = if (playerItem is PlayerItem.Placeholder) 1.5.rem else 0.9.rem + } + +playerItem.playerText + } + if (playerItem is PlayerItem.Player) { + div { + val wonder = playerItem.player.wonder + + css { + marginTop = 0.3.rem + + children(".wonder-tag") { + color = Color("#f5f8fa") // blueprintjs dark theme color (removed by .bp4-tag) + backgroundColor = when (wonder.side) { + WonderSide.A -> NamedColor.seagreen + WonderSide.B -> NamedColor.darkred + } + } + } + + BpTag { + round = true + className = ClassName("wonder-tag") + + +"${wonder.name} ${wonder.side}" + } + } + } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt new file mode 100644 index 00000000..bfa43aa4 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt @@ -0,0 +1,97 @@ +package org.luxons.sevenwonders.ui.components.lobby + +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 +import web.cssom.* + +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 + + css { + backgroundColor = Color("#3d1e0e") + } + + Circle { + diameter = props.diameter - props.borderSize + css { + position = Position.absolute + 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 = props.diameter + + css { + 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 = props.diameter + + css { + background = + linearGradient(45.deg, stop(FIRE_REFLECTION_COLOR, 20.pct), stop(NamedColor.transparent, 40.pct)) + opacityAnimation(duration = 0.8.s) + } + } + } +} + +private fun PropertiesBuilder.opacityAnimation(duration: Time) { + val keyframes = keyframes { + from { + opacity = number(0.0) + } + to { + 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/jsMain/kotlin/org/luxons/sevenwonders/ui/names/RandomNameGenerator.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/names/RandomNameGenerator.kt new file mode 100644 index 00000000..393df78d --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/names/RandomNameGenerator.kt @@ -0,0 +1,546 @@ +package org.luxons.sevenwonders.ui.names + +import kotlin.random.Random + +internal fun randomGameName(): String = gameNames.random() + +internal fun randomGreekName(): String { + val randName = prefixes.random() + suffixes.random() + return if (Random.nextBoolean()) randName else "$randName of ${cities.random()}" +} + +private val gameNames = listOf( + "Age of Antiquity", + "Age of Civilization", + "Age of Discovery", + "Age of Empires", + "Age of Wonders", + "Ancient Capitals", + "Ancient Kingdoms", + "Ancient Wonders", + "Cities of Antiquity", + "City of Wonders", + "Empire Builders", + "Empires of the Past", + "Great Monuments", + "Legendary Cities", + "Legends of the Past", + "Lost Empires", + "Magnificent Monuments", + "Magnificent Seven", + "Monuments of the Past", + "Monuments of the World", + "Mythical Kingdoms", + "Secrets of the Past", + "Seven Ancient Wonders", + "Seven Colossi", + "Seven Kingdoms", + "Seven Marvels", + "Seven Wonders Adventures", + "Seven Wonders Chronicles", + "Seven Wonders Enigma", + "Seven Wonders Expedition", + "Seven Wonders Frontier", + "Seven Wonders Legacy", + "Seven Wonders Odyssey", + "Seven Wonders Quest", + "Seven Wonders Saga", + "Seven Wonders Treasures", + "Seven Wonders Voyage", + "Seven Wonders and Beyond", + "The Great Discoveries", + "The Legacy of Wonders", + "The Magic of Seven", + "The Marvelous Seven", + "The Mysteries of Antiquity", + "The Seven Continents", + "The Seven Kingdoms", + "The Seven Legends", + "The Seven Secrets", + "The Seven Treasures", + "Wonders of Nature", + "Wonders of the Ages", + "Wonders of the World", + "Wonders of Time", + "World Treasures", +) + +private val prefixes = + listOf( + "Aba", + "Abde", + "Abre", + "Aby", + "Aca", + "Acle", + "Acri", + "Acro", + "Adme", + "Adra", + "Aea", + "Aegi", + "Aei", + "Aeo", + "Aese", + "Aeto", + "Aga", + "Age", + "Agi", + "Agri", + "Aia", + "Aka", + "Akti", + "Ala", + "Alco", + "Ale", + "Alka", + "Alki", + "Alo", + "Alphi", + "Ama", + "Ame", + "Ami", + "Amphi", + "Ana", + "Anchi", + "Andro", + "Ane", + "Anta", + "Anthe", + "Anti", + "Ape", + "Aphi", + "Apo", + "Arca", + "Arche", + "Arci", + "Arga", + "Ari", + "Arra", + "Arte", + "Asca", + "Asta", + "Asty", + "Atro", + "Atta", + "Aute", + "Bace", + "Bae", + "Bali", + "Bio", + "Boe", + "Bria", + "Care", + "Carpo", + "Casto", + "Cea", + "Cebri", + "Cele", + "Cephi", + "Chae", + "Chare", + "Chari", + "Choe", + "Chromi", + "Chryso", + "Cine", + "Cisse", + "Clea", + "Cleo", + "Clyto", + "Cnoe", + "Coe", + "Cordy", + "Cory", + "Crati", + "Creti", + "Croe", + "Ctea", + "Cyre", + "Dae", + "Dami", + "Damo", + "Dana", + "Daphi", + "Davo", + "Dei", + "Dema", + "Demo", + "Deo", + "Derky", + "Dexi", + "Dia", + "Dio", + "Dithy", + "Dore", + "Dori", + "Doro", + "Drya", + "Dymno", + "Eche", + "Eio", + "Ela", + "Elpe", + "Empe", + "Endy", + "Enge", + "Epa", + "Epe", + "Ephi", + "Era", + "Ere", + "Ergi", + "Erxa", + "Euca", + "Euche", + "Eudo", + "Eue", + "Euge", + "Euma", + "Eune", + "Eury", + "Euthy", + "Eva", + "Eve", + "Fae", + "Gale", + "Gany", + "Gaua", + "Genna", + "Gera", + "Glau", + "Gorgo", + "Gyra", + "Hae", + "Hagi", + "Hali", + "Harma", + "Harmo", + "Harpa", + "Hege", + "Heira", + "Heiro", + "Helge", + "Heli", + "Hera", + "Hermo", + "Hiero", + "Hippo", + "Hya", + "Hype", + "Hyrca", + "Iatro", + "Iby", + "Ica", + "Ido", + "Illy", + "Ina", + "Iphi", + "Iro", + "Isa", + "Isma", + "Iso", + "Ithe", + "Kae", + "Kale", + "Kalli", + "Kame", + "Kapa", + "Kari", + "Karo", + "Kau", + "Keo", + "Kera", + "Kleo", + "Krini", + "Krito", + "Labo", + "Lae", + "Lama", + "Lamu", + "Lao", + "Laso", + "Lea", + "Lei", + "Leo", + "Linu", + "Luko", + "Lyca", + "Lyco", + "Lysa", + "Lysi", + "Maca", + "Macha", + "Mae", + "Maia", + "Maka", + "Male", + "Mante", + "Marci", + "Marsy", + "Mega", + "Megi", + "Mela", + "Mele", + "Metho", + "Midy", + "Mise", + "Mono", + "Morsi", + "Myrsi", + "Naste", + "Nausi", + "Nea", + "Nele", + "Neri", + "Nica", + "Nico", + "Nire", + "Nomi", + "Nycti", + "Oche", + "Ocho", + "Oea", + "Oene", + "Oeno", + "Oile", + "Ona", + "One", + "Ophe", + "Ori", + "Orsi", + "Ory", + "Pae", + "Pala", + "Pana", + "Pandi", + "Pani", + "Panta", + "Para", + "Pata", + "Peiri", + "Pele", + "Peli", + "Peri", + "Phae", + "Phala", + "Philo", + "Phyla", + "Poe", + "Poly", + "Praxi", + "Prota", + "Pryta", + "Saby", + "Saty", + "Scama", + "Scytha", + "Sele", + "Sila", + "Simo", + "Sisy", + "Sopho", + "Stesa", + "Sya", + "Sylo", + "Syne", + "Tala", + "Teba", + "Tele", + "Tene", + "Theo", + "Therse", + "Thrasy", + "Tima", + "Tiry", + "Trio", + "Xanthi", + "Xena", + "Xeno", + ) + +private val suffixesMale = + listOf( + "ndros", + "bios", + "bulos", + "chus", + "cles", + "cydes", + "damos", + "dides", + "don", + "doros", + "dotus", + "gnis", + "goras", + "kles", + "kos", + "krates", + "laktos", + "laus", + "leon", + "llias", + "llos", + "llus", + "machos", + "machus", + "menes", + "menos", + "mos", + "ndius", + "nes", + "neus", + "nidas", + "nides", + "nos", + "nthius", + "patros", + "phanes", + "phantes", + "phimus", + "phnus", + "phon", + "phoros", + "phorus", + "phus", + "pides", + "pompos", + "pompus", + "pon", + "ppos", + "rax", + "reas", + "rides", + "ros", + "sias", + "sides", + "sius", + "stius", + "stor", + "stos", + "stus", + "talos", + "thenes", + "theus", + "tios", + ) + +private val suffixesFemale = + listOf( + "ndria", + "boea", + "casta", + "caste", + "cheia", + "chis", + "cleia", + "dee", + "deia", + "dike", + "dina", + "doce", + "dora", + "dusa", + "gaea", + "kia", + "laia", + "lea", + "line", + "llis", + "lope", + "mache", + "mathe", + "meda", + "mede", + "meia", + "mela", + "mene", + "mere", + "mia", + "mina", + "mpias", + "ndra", + "ne", + "neira", + "nessa", + "nia", + "nice", + "niera", + "nike", + "nippe", + "nna", + "nome", + "nope", + "nta", + "nthia", + "pe", + "phae", + "phana", + "phane", + "phile", + "phobe", + "phone", + "pia", + "polis", + "pris", + "pyle", + "reia", + "rine", + "ris", + "rista", + "rpia", + "sia", + "ssa", + "steia", + "stis", + "syne", + "ta", + "tea", + "thea", + "theia", + "thia", + "thippe", + "thra", + "thusa", + "thyia", + "tis", + "trite", + ) + +private val suffixes = suffixesMale + suffixesFemale + +private val cities = + listOf( + "Argos", + "Assos", + "Astypalaia", + "Carystus", + "Chalcis", + "Chios", + "Corfu", + "Corinth", + "Eretria", + "Erythrae", + "Karpathos", + "Kasos", + "Kos", + "Leros", + "Lindos", + "Marathon", + "Megara", + "Miletus", + "Mytilene", + "Naxos", + "Oenoe", + "Paros", + "Patmos", + "Patras", + "Phocis", + "Rhodes", + "Salamis", + "Skiathos", + "Sparta", + "Thasos", + "Thebes", + ) diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Actions.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Actions.kt new file mode 100644 index 00000000..b0c56a79 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Actions.kt @@ -0,0 +1,32 @@ +package org.luxons.sevenwonders.ui.redux + +import org.luxons.sevenwonders.model.PlayerMove +import org.luxons.sevenwonders.model.PlayerTurnInfo +import org.luxons.sevenwonders.model.TurnAction +import org.luxons.sevenwonders.model.api.ConnectedPlayer +import org.luxons.sevenwonders.model.api.LobbyDTO +import org.luxons.sevenwonders.model.api.events.GameListEvent +import org.luxons.sevenwonders.model.cards.PreparedCard +import redux.RAction + +data class FatalError(val message: String) : RAction + +data class SetCurrentPlayerAction(val player: ConnectedPlayer) : RAction + +data class UpdateGameListAction(val event: GameListEvent) : RAction + +data class UpdateLobbyAction(val lobby: LobbyDTO) : RAction + +data class EnterLobbyAction(val lobby: LobbyDTO) : RAction + +object LeaveLobbyAction : RAction + +data class EnterGameAction(val lobby: LobbyDTO, val turnInfo: PlayerTurnInfo<TurnAction.SayReady>) : RAction + +data class TurnInfoEvent(val turnInfo: PlayerTurnInfo<*>) : RAction + +data class PreparedMoveEvent(val move: PlayerMove) : RAction + +data class PreparedCardEvent(val card: PreparedCard) : RAction + +data class PlayerReadyEvent(val username: String) : RAction diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/ApiActions.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/ApiActions.kt new file mode 100644 index 00000000..87bacf62 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/ApiActions.kt @@ -0,0 +1,34 @@ +package org.luxons.sevenwonders.ui.redux + +import org.luxons.sevenwonders.model.PlayerMove +import org.luxons.sevenwonders.model.Settings +import org.luxons.sevenwonders.model.wonders.AssignedWonder +import redux.RAction + +data class RequestChooseName(val playerName: String) : RAction + +data class RequestCreateGame(val gameName: String) : RAction + +data class RequestJoinGame(val gameId: Long) : RAction + +data class RequestAddBot(val botDisplayName: String) : RAction + +data class RequestReorderPlayers(val orderedPlayers: List<String>) : RAction + +data class RequestReassignWonders(val wonders: List<AssignedWonder>) : RAction + +data class RequestUpdateSettings(val settings: Settings) : RAction + +class RequestStartGame : RAction + +class RequestLeaveLobby : RAction + +class RequestDisbandLobby : RAction + +class RequestLeaveGame : RAction + +class RequestSayReady : RAction + +data class RequestPrepareMove(val move: PlayerMove) : RAction + +class RequestUnprepareMove : RAction diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Reducers.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Reducers.kt new file mode 100644 index 00000000..e79b063e --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Reducers.kt @@ -0,0 +1,95 @@ +package org.luxons.sevenwonders.ui.redux + +import org.luxons.sevenwonders.client.GameState +import org.luxons.sevenwonders.model.api.ConnectedPlayer +import org.luxons.sevenwonders.model.api.LobbyDTO +import org.luxons.sevenwonders.model.api.PlayerDTO +import org.luxons.sevenwonders.model.api.events.GameListEvent +import redux.RAction + +data class SwState( + val connectedPlayer: ConnectedPlayer? = null, + // they must be by ID to support updates to a sublist + val gamesById: Map<Long, LobbyDTO> = emptyMap(), + val currentLobby: LobbyDTO? = null, + val gameState: GameState? = null, + val fatalError: String? = null, +) { + val currentPlayer: PlayerDTO? = (gameState?.players ?: currentLobby?.players)?.first { + it.username == connectedPlayer?.username + } + val games: List<LobbyDTO> = gamesById.values.toList() +} + +fun rootReducer(state: SwState, action: RAction): SwState = state.copy( + gamesById = gamesReducer(state.gamesById, action), + connectedPlayer = currentPlayerReducer(state.connectedPlayer, action), + currentLobby = currentLobbyReducer(state.currentLobby, action), + gameState = gameStateReducer(state.gameState, action), + fatalError = connectionLostReducer(action), +) + +private fun gamesReducer(games: Map<Long, LobbyDTO>, action: RAction): Map<Long, LobbyDTO> = when (action) { + is UpdateGameListAction -> when (action.event) { + is GameListEvent.ReplaceList -> action.event.lobbies.associateBy { it.id } + is GameListEvent.CreateOrUpdate -> games + (action.event.lobby.id to action.event.lobby) + is GameListEvent.Delete -> games - action.event.lobbyId + } + else -> games +} + +private fun currentPlayerReducer(currentPlayer: ConnectedPlayer?, action: RAction): ConnectedPlayer? = when (action) { + is SetCurrentPlayerAction -> action.player + else -> currentPlayer +} + +private fun currentLobbyReducer(currentLobby: LobbyDTO?, action: RAction): LobbyDTO? = when (action) { + is EnterLobbyAction -> action.lobby + is LeaveLobbyAction -> null + is UpdateLobbyAction -> action.lobby + is PlayerReadyEvent -> currentLobby?.let { l -> + l.copy(players = l.players.map { p -> if (p.username == action.username) p.copy(isReady = true) else p }) + } + else -> currentLobby +} + +private fun gameStateReducer(gameState: GameState?, action: RAction): GameState? = when (action) { + is EnterGameAction -> GameState( + gameId = action.lobby.id, + players = action.lobby.players, + playerIndex = action.turnInfo.playerIndex, + currentAge = action.turnInfo.table.currentAge, + boards = action.turnInfo.table.boards, + handRotationDirection = action.turnInfo.table.handRotationDirection, + action = action.turnInfo.action, + preparedCardsByUsername = emptyMap(), + currentPreparedMove = null, + ) + is PreparedMoveEvent -> gameState?.copy(currentPreparedMove = action.move) + is RequestUnprepareMove -> gameState?.copy(currentPreparedMove = null) + is PreparedCardEvent -> gameState?.copy( + preparedCardsByUsername = gameState.preparedCardsByUsername + (action.card.username to action.card.cardBack), + ) + is PlayerReadyEvent -> gameState?.copy( + players = gameState.players.map { p -> + if (p.username == action.username) p.copy(isReady = true) else p + }, + ) + is TurnInfoEvent -> gameState?.copy( + players = gameState.players.map { p -> p.copy(isReady = false) }, + playerIndex = action.turnInfo.playerIndex, + currentAge = action.turnInfo.table.currentAge, + boards = action.turnInfo.table.boards, + handRotationDirection = action.turnInfo.table.handRotationDirection, + action = action.turnInfo.action, + preparedCardsByUsername = emptyMap(), + currentPreparedMove = null, + ) + is LeaveLobbyAction -> null + else -> gameState +} + +private fun connectionLostReducer(action: RAction): String? = when (action) { + is FatalError -> action.message + else -> null +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Store.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Store.kt new file mode 100644 index 00000000..71c5eec0 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Store.kt @@ -0,0 +1,29 @@ +package org.luxons.sevenwonders.ui.redux + +import kotlinx.browser.window +import org.luxons.sevenwonders.ui.redux.sagas.SagaManager +import redux.RAction +import redux.Store +import redux.WrapperAction +import redux.applyMiddleware +import redux.compose +import redux.createStore +import redux.rEnhancer + +val INITIAL_STATE = SwState() + +private fun <A, T1, R> composeWithDevTools(function1: (T1) -> R, function2: (A) -> T1): (A) -> R { + val reduxDevtoolsExtensionCompose = window.asDynamic().__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ + if (reduxDevtoolsExtensionCompose == undefined) { + return compose(function1, function2) + } + return reduxDevtoolsExtensionCompose(function1, function2) as Function1<A, R> +} + +fun configureStore( + sagaManager: SagaManager<SwState, RAction, WrapperAction>, + initialState: SwState = INITIAL_STATE, +): Store<SwState, RAction, WrapperAction> { + val sagaEnhancer = applyMiddleware(sagaManager.createMiddleware()) + return createStore(::rootReducer, initialState, composeWithDevTools(sagaEnhancer, rEnhancer())) +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt new file mode 100644 index 00000000..eb182dc7 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt @@ -0,0 +1,31 @@ +package org.luxons.sevenwonders.ui.redux + +import react.* +import react.redux.* +import redux.* +import kotlin.reflect.* + +fun <R> useSwSelector(selector: (SwState) -> R) = useSelector(selector) +fun useSwDispatch() = useDispatch<RAction, WrapperAction>() + +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 : 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(component) +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/sagas/RouteBasedSagas.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/sagas/RouteBasedSagas.kt new file mode 100644 index 00000000..3343e62e --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/sagas/RouteBasedSagas.kt @@ -0,0 +1,44 @@ +package org.luxons.sevenwonders.ui.redux.sagas + +import kotlinx.coroutines.flow.map +import org.luxons.sevenwonders.client.SevenWondersSession +import org.luxons.sevenwonders.ui.redux.* +import org.luxons.sevenwonders.ui.router.Navigate +import org.luxons.sevenwonders.ui.router.SwRoute + +suspend fun SwSagaContext.gameBrowserSaga(session: SevenWondersSession) { + // browser navigation could have brought us here: we should leave the game/lobby + ensureNoCurrentGameNorLobby(session) + session.watchGames() + .map { UpdateGameListAction(it) } + .collect { dispatch(it) } +} + +private suspend fun SwSagaContext.ensureNoCurrentGameNorLobby(session: SevenWondersSession) { + if (reduxState.gameState != null) { + console.warn("User left a game via browser navigation, telling the server...") + session.leaveGame() + } else if (reduxState.currentLobby != null) { + console.warn("User left the lobby via browser navigation, telling the server...") + session.leaveLobby() + } +} + +suspend fun SwSagaContext.lobbySaga(session: SevenWondersSession) { + if (reduxState.gameState != null) { + console.warn("User left a game via browser navigation, telling the server...") + session.leaveGame() + } else if (reduxState.currentLobby == null) { + console.warn("User went to lobby page via browser navigation, redirecting to game browser...") + dispatch(Navigate(SwRoute.GAME_BROWSER)) + } +} + +suspend fun SwSagaContext.gameSaga(session: SevenWondersSession) { + if (reduxState.gameState == null) { + // TODO properly redirect somewhere + error("Game saga run without a current game") + } + // notifies the server that the client is ready to receive the first hand + session.sayReady() +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/sagas/Sagas.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/sagas/Sagas.kt new file mode 100644 index 00000000..2ad98c8e --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/sagas/Sagas.kt @@ -0,0 +1,131 @@ +package org.luxons.sevenwonders.ui.redux.sagas + +import kotlinx.browser.window +import kotlinx.coroutines.* +import org.hildan.krossbow.stomp.ConnectionException +import org.hildan.krossbow.stomp.MissingHeartBeatException +import org.hildan.krossbow.stomp.WebSocketClosedUnexpectedly +import org.luxons.sevenwonders.client.* +import org.luxons.sevenwonders.model.api.events.GameEvent +import org.luxons.sevenwonders.ui.redux.* +import org.luxons.sevenwonders.ui.router.Navigate +import org.luxons.sevenwonders.ui.router.SwRoute +import org.luxons.sevenwonders.ui.router.routerSaga +import redux.RAction +import redux.WrapperAction +import webpack.isProdEnv + +typealias SwSagaContext = SagaContext<SwState, RAction, WrapperAction> + +suspend fun SwSagaContext.rootSaga() = try { + coroutineScope { + val action = next<RequestChooseName>() + val serverUrl = sevenWondersWebSocketUrl() + console.info("Connecting to Seven Wonders web socket API...") + val session = SevenWondersClient().connect(serverUrl) + console.info("Connected!") + + launch(start = CoroutineStart.UNDISPATCHED) { + serverErrorSaga(session) + } + + launchApiActionHandlersIn(this, session) + launchApiEventHandlersIn(this, session) + + val player = session.chooseNameAndAwait(action.playerName) + dispatch(SetCurrentPlayerAction(player)) + + routerSaga(SwRoute.GAME_BROWSER) { + when (it) { + SwRoute.HOME -> Unit + SwRoute.LOBBY -> lobbySaga(session) + SwRoute.GAME_BROWSER -> gameBrowserSaga(session) + SwRoute.GAME -> gameSaga(session) + } + } + } +} catch (e: Exception) { + console.error(e) + dispatchFatalError(e) +} + +private fun SwSagaContext.dispatchFatalError(throwable: Throwable) { + when (throwable) { + is ConnectionException -> dispatch(FatalError(throwable.message ?: "Couldn't connect to the server.")) + is MissingHeartBeatException -> dispatch(FatalError("The server doesn't seem to be responding.")) + is WebSocketClosedUnexpectedly -> dispatch(FatalError("The connection to the server was closed unexpectedly.")) + else -> dispatch(FatalError("An unexpected error occurred: ${throwable.message}")) + } +} + +private fun sevenWondersWebSocketUrl(): String { + if (!isProdEnv()) { + return "ws://localhost:8000" + } + // prevents mixed content requests + val scheme = if (window.location.protocol.startsWith("https")) "wss" else "ws" + return "$scheme://${window.location.host}" +} + +private suspend fun serverErrorSaga(session: SevenWondersSession) { + session.watchErrors().collect { err -> + // These are not an error for the user, but rather for the programmer + console.error("${err.code}: ${err.message}") + console.error(JSON.stringify(err)) + } +} + +private fun SwSagaContext.launchApiActionHandlersIn(scope: CoroutineScope, session: SevenWondersSession) { + scope.launchOnEach<RequestChooseName> { session.chooseName(it.playerName) } + + scope.launchOnEach<RequestCreateGame> { session.createGame(it.gameName) } + scope.launchOnEach<RequestJoinGame> { session.joinGame(it.gameId) } + scope.launchOnEach<RequestLeaveLobby> { session.leaveLobby() } + scope.launchOnEach<RequestDisbandLobby> { session.disbandLobby() } + + scope.launchOnEach<RequestAddBot> { session.addBot(it.botDisplayName) } + scope.launchOnEach<RequestReorderPlayers> { session.reorderPlayers(it.orderedPlayers) } + scope.launchOnEach<RequestReassignWonders> { session.reassignWonders(it.wonders) } + scope.launchOnEach<RequestStartGame> { session.startGame() } + + scope.launchOnEach<RequestSayReady> { session.sayReady() } + scope.launchOnEach<RequestPrepareMove> { session.prepareMove(it.move) } + scope.launchOnEach<RequestUnprepareMove> { session.unprepareMove() } + scope.launchOnEach<RequestLeaveGame> { session.leaveGame() } +} + +private fun SwSagaContext.launchApiEventHandlersIn(scope: CoroutineScope, session: SevenWondersSession) { + scope.launch { + session.watchGameEvents().collect { event -> + when (event) { + is GameEvent.NameChosen -> { + dispatch(SetCurrentPlayerAction(event.player)) + dispatch(Navigate(SwRoute.GAME_BROWSER)) + } + is GameEvent.LobbyJoined -> { + dispatch(EnterLobbyAction(event.lobby)) + dispatch(Navigate(SwRoute.LOBBY)) + } + is GameEvent.LobbyUpdated -> { + dispatch(UpdateLobbyAction(event.lobby)) + } + GameEvent.LobbyLeft -> { + dispatch(LeaveLobbyAction) + dispatch(Navigate(SwRoute.GAME_BROWSER)) + } + is GameEvent.GameStarted -> { + val currentLobby = reduxState.currentLobby ?: error("Received game started event without being in a lobby") + dispatch(EnterGameAction(currentLobby, event.turnInfo)) + dispatch(Navigate(SwRoute.GAME)) + } + is GameEvent.NewTurnStarted -> dispatch(TurnInfoEvent(event.turnInfo)) + is GameEvent.MovePrepared -> dispatch(PreparedMoveEvent(event.move)) + is GameEvent.CardPrepared -> dispatch(PreparedCardEvent(event.preparedCard)) + is GameEvent.PlayerIsReady -> dispatch(PlayerReadyEvent(event.username)) + // Currently the move is already unprepared when launching the unprepare request + // TODO add a "unpreparing" state and only update redux when the move is successfully unprepared + GameEvent.MoveUnprepared -> {} + } + } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/sagas/SagasFramework.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/sagas/SagasFramework.kt new file mode 100644 index 00000000..05c03b13 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/redux/sagas/SagasFramework.kt @@ -0,0 +1,106 @@ +package org.luxons.sevenwonders.ui.redux.sagas + +import kotlinx.coroutines.* +import kotlinx.coroutines.channels.* +import kotlinx.coroutines.flow.* +import redux.Middleware +import redux.MiddlewareApi +import redux.RAction + +class SagaManager<S, A : RAction, R>( + private val monitor: ((A) -> Unit)? = null, +) { + private lateinit var context: SagaContext<S, A, R> + + private val actions = MutableSharedFlow<A>(extraBufferCapacity = Channel.UNLIMITED) + + fun createMiddleware(): Middleware<S, A, R, A, R> = ::sagasMiddleware + + private fun sagasMiddleware(api: MiddlewareApi<S, A, R>): ((A) -> R) -> (A) -> R { + context = SagaContext(api, actions) + return { nextDispatch -> + { action -> + onActionDispatched(action) + val result = nextDispatch(action) + handleAction(action) + result + } + } + } + + private fun onActionDispatched(action: A) { + monitor?.invoke(action) + } + + private fun handleAction(action: A) { + val emitted = actions.tryEmit(action) + if (!emitted) { + // should never happen since our buffer is 'unlimited' (in reality it's Int.MAX_VALUE) + error("Couldn't dispatch redux action, buffer is full") + } + } + + fun launchSaga(coroutineScope: CoroutineScope, saga: suspend SagaContext<S, A, R>.() -> Unit): Job { + checkMiddlewareApplied() + return coroutineScope.launch { + context.saga() + } + } + + suspend fun runSaga(saga: suspend SagaContext<S, A, R>.() -> Unit) { + checkMiddlewareApplied() + context.saga() + } + + private fun checkMiddlewareApplied() { + check(::context.isInitialized) { + "Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware" + } + } +} + +class SagaContext<S, A : RAction, R>( + private val reduxApi: MiddlewareApi<S, A, R>, + val reduxActions: SharedFlow<A>, +) { + /** + * The current redux state. + */ + val reduxState: S + get() = reduxApi.getState() + + /** + * Dispatches the given redux [action]. + */ + fun dispatch(action: A) { + reduxApi.dispatch(action) + } + + /** + * Executes [handle] on every action dispatched of the type [T]. This runs forever until the current coroutine is + * cancelled. + */ + suspend inline fun <reified T : A> onEach( + crossinline handle: suspend SagaContext<S, A, R>.(T) -> Unit, + ) { + reduxActions.filterIsInstance<T>().collect { handle(it) } + } + + /** + * Launches a coroutine in the receiver scope that executes [handle] on every action dispatched of the type [T]. + * The returned [Job] can be used to cancel that coroutine (just like a regular [launch]) + */ + inline fun <reified T : A> CoroutineScope.launchOnEach( + crossinline handle: suspend SagaContext<S, A, R>.(T) -> Unit, + ): Job = launch { onEach(handle) } + + /** + * Suspends until the next action matching the given [predicate] is dispatched, and returns that action. + */ + suspend fun next(predicate: (A) -> Boolean): A = reduxActions.first { predicate(it) } + + /** + * Suspends until the next action of type [T] is dispatched, and returns that action. + */ + suspend inline fun <reified T : A> next(): T = reduxActions.filterIsInstance<T>().first() +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/router/Router.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/router/Router.kt new file mode 100644 index 00000000..1a0840cf --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/router/Router.kt @@ -0,0 +1,48 @@ +package org.luxons.sevenwonders.ui.router + +import kotlinx.browser.window +import kotlinx.coroutines.Job +import kotlinx.coroutines.coroutineScope +import kotlinx.coroutines.launch +import org.luxons.sevenwonders.ui.redux.sagas.SwSagaContext +import redux.RAction + +enum class SwRoute(val path: String) { + HOME("/"), + GAME_BROWSER("/games"), + LOBBY("/lobby"), + GAME("/game"); + + companion object { + private val all = values().associateBy { it.path } + + fun from(path: String) = all.getValue(path) + } +} + +data class Navigate(val route: SwRoute) : RAction + +suspend fun SwSagaContext.routerSaga( + startRoute: SwRoute, + runRouteSaga: suspend SwSagaContext.(SwRoute) -> Unit, +) { + coroutineScope { + window.location.hash = startRoute.path + launch { changeRouteOnNavigateAction() } + var currentSaga: Job = launch { runRouteSaga(startRoute) } + window.onhashchange = { event -> + val route = SwRoute.from(event.newURL.substringAfter("#")) + currentSaga.cancel() + currentSaga = this@coroutineScope.launch { + runRouteSaga(route) + } + Unit + } + } +} + +suspend fun SwSagaContext.changeRouteOnNavigateAction() { + onEach<Navigate> { + window.location.hash = it.route.path + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/utils/CoroutinesUtils.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/utils/CoroutinesUtils.kt new file mode 100644 index 00000000..600f08d3 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/utils/CoroutinesUtils.kt @@ -0,0 +1,15 @@ +package org.luxons.sevenwonders.ui.utils + +import kotlinx.coroutines.async +import kotlinx.coroutines.coroutineScope +import kotlinx.coroutines.selects.select + +// Cannot inline or it crashes for some reason +suspend fun <R> awaitFirst(f1: suspend () -> R, f2: suspend () -> R): R = coroutineScope { + val deferred1 = async { f1() } + val deferred2 = async { f2() } + select<R> { + deferred1.onAwait { deferred2.cancel(); it } + deferred2.onAwait { deferred1.cancel(); it } + } +} diff --git a/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt new file mode 100644 index 00000000..7ca67be4 --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt @@ -0,0 +1,43 @@ +package org.luxons.sevenwonders.ui.utils + +import csstype.* +import js.core.* +import react.dom.html.* +import web.cssom.* + +/** + * 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) +} diff --git a/sw-ui/src/jsMain/kotlin/webpack/WebpackUtils.kt b/sw-ui/src/jsMain/kotlin/webpack/WebpackUtils.kt new file mode 100644 index 00000000..dde1140a --- /dev/null +++ b/sw-ui/src/jsMain/kotlin/webpack/WebpackUtils.kt @@ -0,0 +1,9 @@ +package webpack + +external val process: Process + +external interface Process { + val env: dynamic +} + +fun isProdEnv(): Boolean = process.env.NODE_ENV == "production" |