diff options
Diffstat (limited to 'sw-ui')
21 files changed, 119 insertions, 141 deletions
diff --git a/sw-ui/build.gradle.kts b/sw-ui/build.gradle.kts index 3f7f569e..46352f1b 100644 --- a/sw-ui/build.gradle.kts +++ b/sw-ui/build.gradle.kts @@ -4,16 +4,7 @@ plugins { kotlin("js") } -repositories { - mavenCentral() - // for kotlin-wrappers resolutions - maven(url = "https://maven.pkg.jetbrains.space/kotlin/p/kotlin/kotlin-js-wrappers") - // for kotlinx-html (dependency of kotlin-react-dom) - maven(url = "https://maven.pkg.jetbrains.space/public/p/kotlinx-html/maven") - jcenter() // for kotlinx-html-jvm:0.7.2 needed by dokka (and not migrated) -} - -val kotlinWrappersVersion = "pre.150-kotlin-1.4.31" +val kotlinWrappersVersion = libs.versions.kotlin.wrappers.get() kotlin { js { @@ -25,31 +16,29 @@ kotlin { dependencies { implementation(projects.swClient) - val reactVersion = "17.0.2" - implementation("org.jetbrains:kotlin-react:$reactVersion-$kotlinWrappersVersion") + val reactVersion = libs.versions.react.get() + implementation("org.jetbrains.kotlin-wrappers:kotlin-react:$reactVersion-$kotlinWrappersVersion") implementation(npm("react", reactVersion)) - implementation("org.jetbrains:kotlin-react-dom:$reactVersion-$kotlinWrappersVersion") + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:$reactVersion-$kotlinWrappersVersion") implementation(npm("react-dom", reactVersion)) - val reactReduxVersion = "7.2.2" - implementation("org.jetbrains:kotlin-react-redux:$reactReduxVersion-$kotlinWrappersVersion") + val reactReduxVersion = libs.versions.reactRedux.get() + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:$reactReduxVersion-$kotlinWrappersVersion") implementation(npm("react-redux", reactReduxVersion)) - // redux version aligned with the wrapper's build: - // https://github.com/JetBrains/kotlin-wrappers/blob/master/gradle.properties#L42 - implementation(npm("redux", "4.0.5")) + implementation(npm("redux", libs.versions.redux.get())) - val reactRouterDomVersion = "5.2.0" - implementation("org.jetbrains:kotlin-react-router-dom:$reactRouterDomVersion-$kotlinWrappersVersion") + val reactRouterDomVersion = libs.versions.reactRouterDom.get() + implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:$reactRouterDomVersion-$kotlinWrappersVersion") implementation(npm("react-router-dom", reactRouterDomVersion)) - val styledComponentsVersion = "5.2.1" - implementation("org.jetbrains:kotlin-styled:$styledComponentsVersion-$kotlinWrappersVersion") + val styledComponentsVersion = libs.versions.styledComponents.get() + implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:$styledComponentsVersion-$kotlinWrappersVersion") implementation(npm("styled-components", styledComponentsVersion)) - implementation(npm("inline-style-prefixer", "6.0.0")) + implementation(npm("inline-style-prefixer", "6.0.0")) // FIXME is this still needed - val bpCoreVersion = "3.42.0" - val bpIconsVersion = "3.26.0" - val bpWrapperVersion = "1" + val bpWrapperVersion = libs.versions.blueprintjs.wrapper.get() + val bpCoreVersion = libs.versions.blueprintjs.core.get() + val bpIconsVersion = libs.versions.blueprintjs.icons.get() implementation("org.hildan.blueprintjs:kotlin-blueprintjs-core:$bpCoreVersion-$bpWrapperVersion") implementation("org.hildan.blueprintjs:kotlin-blueprintjs-icons:$bpIconsVersion-$bpWrapperVersion") implementation(npm("@blueprintjs/core", bpCoreVersion)) diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt index a4cdba78..9850f8c0 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt @@ -7,10 +7,7 @@ import org.luxons.sevenwonders.ui.components.home.home import org.luxons.sevenwonders.ui.components.lobby.lobby import org.luxons.sevenwonders.ui.router.Route import react.RBuilder -import react.router.dom.hashRouter -import react.router.dom.redirect -import react.router.dom.route -import react.router.dom.switch +import react.router.dom.* fun RBuilder.application() = hashRouter { errorDialog() diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt index e74b2e75..a332c565 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt @@ -9,25 +9,22 @@ import kotlinx.browser.window import org.luxons.sevenwonders.ui.redux.* import org.luxons.sevenwonders.ui.router.Navigate import org.luxons.sevenwonders.ui.router.Route -import react.RBuilder -import react.RComponent -import react.RProps -import react.RState +import react.* import react.dom.p import styled.css import styled.styledDiv -interface ErrorDialogStateProps : RProps { +interface ErrorDialogStateProps : PropsWithChildren { var errorMessage: String? } -interface ErrorDialogDispatchProps : RProps { +interface ErrorDialogDispatchProps : PropsWithChildren { var goHome: () -> Unit } interface ErrorDialogProps : ErrorDialogDispatchProps, ErrorDialogStateProps -class ErrorDialogPresenter(props: ErrorDialogProps) : RComponent<ErrorDialogProps, RState>(props) { +class ErrorDialogPresenter(props: ErrorDialogProps) : RComponent<ErrorDialogProps, State>(props) { override fun RBuilder.render() { val errorMessage = props.errorMessage bpDialog( diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt index 085e43ed..c3dc6460 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt @@ -194,7 +194,7 @@ private fun RBuilder.wonderStageElement(stage: ApiWonderStage, block: StyledDOMB } } -private fun CSSBuilder.wonderCardStyle(stageIndex: Int, nbStages: Int) { +private fun CssBuilder.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 @@ -209,6 +209,6 @@ private fun stagePositionPercent(stageIndex: Int, nbStages: Int): Double = when else -> 7.9 + stageIndex * 30.0 } -private fun CSSBuilder.hoverHighlightStyle() { +private fun CssBuilder.hoverHighlightStyle() { highlightStyle(Color.paleGoldenrod) } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt index dffa2ccd..409c4dac 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt @@ -7,6 +7,7 @@ import kotlinx.html.title import org.luxons.sevenwonders.model.cards.Card import org.luxons.sevenwonders.model.cards.CardBack import react.RBuilder +import react.dom.attrs import styled.StyledDOMBuilder import styled.css import styled.styledImg @@ -62,13 +63,13 @@ fun RBuilder.cardPlaceholderImage(block: StyledDOMBuilder<IMG>.() -> Unit = {}) } } -private fun CSSBuilder.cardImageStyle(highlightColor: Color?) { +private fun CssBuilder.cardImageStyle(highlightColor: Color?) { borderRadius = 5.pct boxShadow(offsetX = 2.px, offsetY = 2.px, blurRadius = 5.px, color = Color.black) highlightStyle(highlightColor) } -internal fun CSSBuilder.highlightStyle(highlightColor: Color?) { +internal fun CssBuilder.highlightStyle(highlightColor: Color?) { if (highlightColor != null) { boxShadow( offsetX = 0.px, diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt index 06021cea..f24e0bc8 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt @@ -25,7 +25,7 @@ import styled.css import styled.getClassName import styled.styledDiv -interface GameSceneStateProps : RProps { +interface GameSceneStateProps : PropsWithChildren { var currentPlayer: PlayerDTO? var players: List<PlayerDTO> var game: GameState? @@ -33,7 +33,7 @@ interface GameSceneStateProps : RProps { var preparedCard: HandCard? } -interface GameSceneDispatchProps : RProps { +interface GameSceneDispatchProps : PropsWithChildren { var sayReady: () -> Unit var prepareMove: (move: PlayerMove) -> Unit var unprepareMove: () -> Unit @@ -44,7 +44,7 @@ interface GameSceneProps : GameSceneStateProps, GameSceneDispatchProps data class GameSceneState( var transactionSelector: TransactionSelectorState? -) : RState +) : State data class TransactionSelectorState( val moveType: MoveType, @@ -258,10 +258,10 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, Game } } - private fun RBuilder.sayReadyButton(): ReactElement { + private fun RBuilder.sayReadyButton() { val isReady = props.currentPlayer?.isReady == true val intent = if (isReady) Intent.SUCCESS else Intent.PRIMARY - return styledDiv { + styledDiv { css { position = Position.absolute bottom = 6.rem @@ -290,7 +290,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, Game fun RBuilder.gameScene() = gameScene {} -private val gameScene: RClass<GameSceneProps> = +private val gameScene: ComponentClass<GameSceneProps> = connectStateAndDispatch<GameSceneStateProps, GameSceneDispatchProps, GameSceneProps>( clazz = GameScene::class, mapDispatchToProps = { dispatch, _ -> diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt index eae2bd3c..28f3e92d 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt @@ -16,6 +16,7 @@ import org.luxons.sevenwonders.model.resources.ResourceTransactionOptions import org.luxons.sevenwonders.model.wonders.WonderBuildability import org.w3c.dom.HTMLButtonElement import react.* +import react.dom.attrs import styled.StyledDOMBuilder import styled.css import styled.styledDiv @@ -32,7 +33,7 @@ private enum class HandAction( COPY_GUILD("Copy this guild card", MoveType.COPY_GUILD, "duplicate") } -interface HandProps : RProps { +interface HandProps : PropsWithChildren { var action: TurnAction var ownBoard: Board var preparedMove: PlayerMove? @@ -40,7 +41,7 @@ interface HandProps : RProps { var startTransactionsSelection: (TransactionSelectorState) -> Unit } -class HandComponent(props: HandProps) : RComponent<HandProps, RState>(props) { +class HandComponent(props: HandProps) : RComponent<HandProps, State>(props) { override fun RBuilder.render() { val hand = props.action.cardsToPlay() ?: return @@ -214,7 +215,7 @@ private fun RElementBuilder<IButtonProps<HTMLButtonElement>>.priceInfo(amount: I } } -private fun CSSBuilder.handStyle() { +private fun CssBuilder.handStyle() { alignItems = Align.center bottom = 0.px display = Display.flex @@ -237,14 +238,14 @@ private fun CSSBuilder.handStyle() { } } -private fun CSSBuilder.handCardStyle() { +private fun CssBuilder.handCardStyle() { classes.add("hand-card") alignItems = Align.flexEnd display = Display.grid margin(all = 0.2.rem) } -private fun CSSBuilder.handCardImgStyle(isPlayable: Boolean) { +private fun CssBuilder.handCardImgStyle(isPlayable: Boolean) { gridRow = GridRow("1") gridColumn = GridColumn("1") maxWidth = 13.vw diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt index cba458ef..4761ac13 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt @@ -5,6 +5,7 @@ import kotlinx.css.* import kotlinx.html.title import org.luxons.sevenwonders.model.cards.HandRotationDirection import react.RBuilder +import react.dom.attrs import styled.css import styled.styledDiv import styled.styledImg diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt index 9a9dc90f..9a72c43c 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt @@ -6,21 +6,19 @@ import kotlinx.html.title import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.model.cards.CardBack import org.luxons.sevenwonders.ui.redux.connectStateWithOwnProps -import react.RBuilder -import react.RComponent -import react.RProps -import react.RState +import react.* +import react.dom.attrs import styled.animation import styled.css import styled.styledDiv import styled.styledImg -interface PlayerPreparedCardProps : RProps { +interface PlayerPreparedCardProps : PropsWithChildren { var playerDisplayName: String var cardBack: CardBack? } -interface PlayerPreparedCardContainerProps : RProps { +interface PlayerPreparedCardContainerProps : PropsWithChildren { var playerDisplayName: String var username: String } @@ -32,7 +30,7 @@ fun RBuilder.playerPreparedCard(player: PlayerDTO) = playerPreparedCard { } } -private class PlayerPreparedCard(props: PlayerPreparedCardProps) : RComponent<PlayerPreparedCardProps, RState>(props) { +private class PlayerPreparedCard(props: PlayerPreparedCardProps) : RComponent<PlayerPreparedCardProps, State>(props) { override fun RBuilder.render() { val cardBack = props.cardBack diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt index 3df359ed..da5fc5ed 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Tokens.kt @@ -7,9 +7,10 @@ import kotlinx.html.title import org.luxons.sevenwonders.model.resources.ResourceType import org.luxons.sevenwonders.ui.components.GlobalStyles import react.RBuilder +import react.dom.attrs import styled.* -private fun getResourceTokenName(resourceType: ResourceType) = "resources/${resourceType.toString().toLowerCase()}" +private fun getResourceTokenName(resourceType: ResourceType) = "resources/${resourceType.toString().lowercase()}" private fun getTokenImagePath(tokenName: String) = "/images/tokens/$tokenName.png" @@ -23,7 +24,7 @@ fun RBuilder.goldIndicator( amount: Int, amountPosition: TokenCountPosition = TokenCountPosition.OVER, imgSize: LinearDimension = 3.rem, - customCountStyle: CSSBuilder.() -> Unit = {}, + customCountStyle: CssBuilder.() -> Unit = {}, block: StyledDOMBuilder<DIV>.() -> Unit = {}, ) { tokenWithCount( @@ -44,7 +45,7 @@ fun RBuilder.resourceWithCount( imgSize: LinearDimension? = null, countPosition: TokenCountPosition = TokenCountPosition.RIGHT, brightText: Boolean = false, - customCountStyle: CSSBuilder.() -> Unit = {}, + customCountStyle: CssBuilder.() -> Unit = {}, block: StyledDOMBuilder<DIV>.() -> Unit = {}, ) { tokenWithCount( @@ -75,7 +76,7 @@ fun RBuilder.tokenWithCount( imgSize: LinearDimension? = null, countPosition: TokenCountPosition = TokenCountPosition.RIGHT, brightText: Boolean = false, - customCountStyle: CSSBuilder.() -> Unit = {}, + customCountStyle: CssBuilder.() -> Unit = {}, block: StyledDOMBuilder<DIV>.() -> Unit = {}, ) { styledDiv { @@ -145,10 +146,10 @@ fun RBuilder.tokenImage( } } -private fun CSSBuilder.tokenCountStyle( +private fun CssBuilder.tokenCountStyle( size: LinearDimension, brightText: Boolean, - customStyle: CSSBuilder.() -> Unit = {}, + customStyle: CssBuilder.() -> Unit = {}, ) { fontFamily = "Acme" fontSize = size diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt index bf850d4c..4f375aff 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt @@ -10,6 +10,7 @@ import kotlinx.html.js.onClickFunction import org.luxons.sevenwonders.model.PlayerMove import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.model.resources.* +import org.luxons.sevenwonders.model.resources.Provider import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo import react.* import react.dom.* @@ -91,12 +92,12 @@ private fun RBuilder.optionsTable( } } -private interface OptionsTableProps : RProps { +private interface OptionsTableProps : PropsWithChildren { var state: TransactionSelectorState var prepareMove: (PlayerMove) -> Unit } -private val optionsTable = functionalComponent<OptionsTableProps> { props -> +private val optionsTable = fc<OptionsTableProps> { props -> val state = props.state val prepareMove = props.prepareMove diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt index 1ad217e6..9313cd67 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt @@ -10,21 +10,16 @@ import org.luxons.sevenwonders.ui.redux.RequestCreateGame import org.luxons.sevenwonders.ui.redux.connectDispatch import org.w3c.dom.HTMLInputElement import org.w3c.dom.events.Event -import react.RBuilder -import react.RClass -import react.RComponent -import react.RProps -import react.RState -import react.buildElement +import react.* import react.dom.* import styled.css import styled.styledDiv -private interface CreateGameFormProps : RProps { +private interface CreateGameFormProps : PropsWithChildren { var createGame: (String) -> Unit } -private data class CreateGameFormState(var gameName: String = "") : RState +private data class CreateGameFormState(var gameName: String = "") : State private class CreateGameForm(props: CreateGameFormProps) : RComponent<CreateGameFormProps, CreateGameFormState>(props) { @@ -67,6 +62,6 @@ private class CreateGameForm(props: CreateGameFormProps) : RComponent<CreateGame } } -val createGameForm: RClass<RProps> = connectDispatch(CreateGameForm::class) { dispatch, _ -> +val createGameForm: ComponentClass<PropsWithChildren> = connectDispatch(CreateGameForm::class) { dispatch, _ -> createGame = { name -> dispatch(RequestCreateGame(name)) } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt index ff596e53..0f8cca86 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt @@ -6,6 +6,7 @@ import kotlinx.css.* import kotlinx.html.classes import org.luxons.sevenwonders.ui.components.GlobalStyles import react.RBuilder +import react.dom.attrs import react.dom.h1 import styled.css import styled.getClassName diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt index 0155835a..b0976a36 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt @@ -13,13 +13,14 @@ import org.luxons.sevenwonders.ui.redux.connectStateAndDispatch import react.* import react.dom.* import styled.* +import react.State as RState -interface GameListStateProps : RProps { +interface GameListStateProps : PropsWithChildren { var connectedPlayer: ConnectedPlayer var games: List<LobbyDTO> } -interface GameListDispatchProps : RProps { +interface GameListDispatchProps : PropsWithChildren { var joinGame: (Long) -> Unit } @@ -71,7 +72,7 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState } private fun RElementBuilder<IHTMLTableProps>.columnWidthsSpec() { - colGroup { + colgroup { styledCol { css { width = 40.rem diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt index f5cc2992..603b46cb 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt @@ -6,15 +6,13 @@ import kotlinx.html.title import org.luxons.sevenwonders.model.api.BasicPlayerInfo import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.ui.redux.connectState -import react.RBuilder -import react.RComponent -import react.RProps -import react.RState +import react.* +import react.dom.attrs import styled.css import styled.styledDiv import styled.styledSpan -interface PlayerInfoProps : RProps { +interface PlayerInfoProps : PropsWithChildren { var player: BasicPlayerInfo? var showUsername: Boolean var iconSize: Int @@ -22,7 +20,7 @@ interface PlayerInfoProps : RProps { var ellipsize: Boolean } -class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, RState>(props) { +class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, State>(props) { override fun RBuilder.render() { styledDiv { @@ -46,7 +44,7 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, } } - private fun RBuilder.playerName(displayName: String, style: CSSBuilder.() -> Unit = {}) { + private fun RBuilder.playerName(displayName: String, style: CssBuilder.() -> Unit = {}) { styledSpan { css { fontSize = 1.rem @@ -70,7 +68,7 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, private fun String.ellipsize(maxLength: Int) = take(maxLength - 1) + "…" - private fun CSSBuilder.iconSeparationMargin() { + private fun CssBuilder.iconSeparationMargin() { val margin = 0.4.rem when (props.orientation) { FlexDirection.row -> marginLeft = margin @@ -84,7 +82,7 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, private fun RBuilder.playerNameWithUsername( displayName: String, username: String, - style: CSSBuilder.() -> Unit = {} + style: CssBuilder.() -> Unit = {} ) { styledDiv { css { diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt index c5764eb0..055b5d71 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt @@ -15,11 +15,13 @@ import styled.css import styled.styledDiv import styled.styledForm -private interface ChooseNameFormProps : RProps { +private interface ChooseNameFormProps : PropsWithChildren { var chooseUsername: (String) -> Unit } -private data class ChooseNameFormState(var username: String = "") : RState +private external interface ChooseNameFormState : State { + var username: String +} private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseNameFormProps, ChooseNameFormState>(props) { @@ -43,7 +45,9 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseName value = state.username, onChange = { e -> val input = e.currentTarget as HTMLInputElement - setState(transformState = { ChooseNameFormState(username = input.value) }) + setState { + username = input.value + } }, ) } @@ -69,7 +73,7 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseName } private fun fillRandomUsername() { - setState(ChooseNameFormState(username = randomGreekName())) + setState { username = randomGreekName() } } private fun chooseUsername(e: Event) { @@ -87,6 +91,6 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseName } } -val chooseNameForm: RClass<RProps> = connectDispatch(ChooseNameForm::class) { dispatch, _ -> +val chooseNameForm: ComponentClass<PropsWithChildren> = connectDispatch(ChooseNameForm::class) { dispatch, _ -> chooseUsername = { name -> dispatch(RequestChooseName(name)) } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt index 5b93cdc1..a8f59bfb 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt @@ -11,10 +11,7 @@ import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.model.wonders.* import org.luxons.sevenwonders.ui.components.GlobalStyles import org.luxons.sevenwonders.ui.redux.* -import react.RBuilder -import react.RComponent -import react.RProps -import react.RState +import react.* import react.dom.h1 import react.dom.h3 import react.dom.h4 @@ -22,12 +19,12 @@ import styled.* private val BOT_NAMES = listOf("Wall-E", "B-Max", "Sonny", "T-800", "HAL", "GLaDOS", "R2-D2", "Bender", "AWESOM-O") -interface LobbyStateProps : RProps { +interface LobbyStateProps : PropsWithChildren { var currentGame: LobbyDTO? var currentPlayer: PlayerDTO? } -interface LobbyDispatchProps : RProps { +interface LobbyDispatchProps : PropsWithChildren { var startGame: () -> Unit var addBot: (displayName: String) -> Unit var leaveLobby: () -> Unit @@ -38,7 +35,7 @@ interface LobbyDispatchProps : RProps { interface LobbyProps : LobbyDispatchProps, LobbyStateProps -class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props) { +class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, State>(props) { override fun RBuilder.render() { val currentGame = props.currentGame diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt index 1cccdfb7..3ca8c425 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt @@ -22,11 +22,11 @@ fun <T> RBuilder.radialList( itemHeight: Int, options: RadialConfig = RadialConfig(), block: StyledDOMBuilder<DIV>.() -> Unit = {}, -): ReactElement { +) { val containerWidth = options.diameter + itemWidth val containerHeight = options.diameter + itemHeight - return styledDiv { + styledDiv { css { zeroMargins() +GlobalStyles.fixedCenter @@ -45,9 +45,9 @@ private fun <T> RBuilder.radialListItems( renderItem: (T) -> ReactElement, getKey: (T) -> String, radialConfig: RadialConfig, -): ReactElement { +) { val offsets = offsetsFromCenter(items.size, radialConfig) - return styledUl { + styledUl { css { zeroMargins() transition(property = "all", duration = 500.ms, timing = Timing.easeInOut) @@ -68,8 +68,8 @@ private fun <T> RBuilder.radialListItems( } } -private fun RBuilder.radialListItem(item: ReactElement, key: String, offset: CartesianCoords): ReactElement { - return styledLi { +private fun RBuilder.radialListItem(item: ReactElement, key: String, offset: CartesianCoords) { + styledLi { css { display = Display.block position = Position.absolute @@ -91,11 +91,11 @@ private fun RBuilder.radialListItem(item: ReactElement, key: String, offset: Car } } -private fun RBuilder.radialListCenter(centerElement: ReactElement?): ReactElement? { +private fun RBuilder.radialListCenter(centerElement: ReactElement?) { if (centerElement == null) { - return null + return } - return styledDiv { + styledDiv { css { zIndex = 0 absoluteCenter() @@ -104,7 +104,7 @@ private fun RBuilder.radialListCenter(centerElement: ReactElement?): ReactElemen } } -private fun CSSBuilder.absoluteCenter() { +private fun CssBuilder.absoluteCenter() { position = Position.absolute left = 50.pct top = 50.pct @@ -113,7 +113,7 @@ private fun CSSBuilder.absoluteCenter() { } } -private fun CSSBuilder.zeroMargins() { +private fun CssBuilder.zeroMargins() { margin(all = 0.px) padding(all = 0.px) } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt index dc40bf5d..16cc9fd7 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt @@ -16,7 +16,7 @@ fun RBuilder.radialPlayerList( players: List<PlayerDTO>, currentPlayer: PlayerDTO, block: StyledDOMBuilder<DIV>.() -> Unit = {}, -): ReactElement { +) { val playerItems = players // .map { PlayerItem.Player(it) } .growWithPlaceholders(targetSize = 3) @@ -24,7 +24,7 @@ fun RBuilder.radialPlayerList( val tableImg = buildElement { lobbyWoodenTable(diameter = 200.px, borderSize = 15.px) } - return radialList( + radialList( items = playerItems, centerElement = tableImg, renderItem = { buildElement { playerElement(it) } }, @@ -85,7 +85,7 @@ private sealed class PlayerItem { } } -private fun RBuilder.userIcon(icon: Icon, title: String?): ReactElement = bpIcon( +private fun RBuilder.userIcon(icon: Icon, title: String?) = bpIcon( name = icon.name, size = 50, title = title, diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt index 81e95893..b9c799e2 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Table.kt @@ -64,7 +64,7 @@ private fun RBuilder.circle(diameter: LinearDimension, block: StyledDOMBuilder<D } } -private fun CSSBuilder.opacityAnimation(duration: Time) { +private fun CssBuilder.opacityAnimation(duration: Time) { animation( duration = duration, direction = AnimationDirection.alternate, diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt index 064e3391..ffd1a582 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt @@ -1,47 +1,43 @@ package org.luxons.sevenwonders.ui.redux -import react.RClass -import react.RComponent -import react.RProps -import react.RState -import react.invoke +import react.* import react.redux.rConnect import redux.RAction import redux.WrapperAction import kotlin.reflect.KClass -inline fun <reified DP : RProps> connectDispatch( - clazz: KClass<out RComponent<DP, out RState>>, - noinline mapDispatchToProps: DP.((RAction) -> WrapperAction, RProps) -> Unit, -): RClass<RProps> { +inline fun <reified DP : PropsWithChildren> connectDispatch( + clazz: KClass<out RComponent<DP, out State>>, + noinline mapDispatchToProps: DP.((RAction) -> WrapperAction, PropsWithChildren) -> Unit, +): ComponentClass<PropsWithChildren> { val connect = rConnect(mapDispatchToProps = mapDispatchToProps) - return connect.invoke(clazz.js.unsafeCast<RClass<DP>>()) + return connect.invoke(clazz.js.unsafeCast<ComponentClass<DP>>()) } -inline fun <reified SP : RProps> connectState( - clazz: KClass<out RComponent<SP, out RState>>, - noinline mapStateToProps: SP.(SwState, RProps) -> Unit, -): RClass<RProps> { +inline fun <reified SP : PropsWithChildren> connectState( + clazz: KClass<out RComponent<SP, out State>>, + noinline mapStateToProps: SP.(SwState, PropsWithChildren) -> Unit, +): ComponentClass<PropsWithChildren> { val connect = rConnect(mapStateToProps = mapStateToProps) - return connect.invoke(clazz.js.unsafeCast<RClass<SP>>()) + return connect.invoke(clazz.js.unsafeCast<ComponentClass<SP>>()) } -inline fun <reified SP : RProps, OP : RProps> connectStateWithOwnProps( - clazz: KClass<out RComponent<SP, out RState>>, +inline fun <reified SP : PropsWithChildren, OP : PropsWithChildren> connectStateWithOwnProps( + clazz: KClass<out RComponent<SP, out State>>, noinline mapStateToProps: SP.(SwState, OP) -> Unit, -): RClass<OP> { +): ComponentClass<OP> { val connect = rConnect(mapStateToProps = mapStateToProps) - return connect.invoke(clazz.js.unsafeCast<RClass<SP>>()) + return connect.invoke(clazz.js.unsafeCast<ComponentClass<SP>>()) } -inline fun <reified SP : RProps, reified DP : RProps, reified P : RProps> connectStateAndDispatch( - clazz: KClass<out RComponent<P, out RState>>, - noinline mapStateToProps: SP.(SwState, RProps) -> Unit, - noinline mapDispatchToProps: DP.((RAction) -> WrapperAction, RProps) -> Unit, -): RClass<RProps> { - val connect = rConnect<SwState, RAction, WrapperAction, RProps, SP, DP, P>( +inline fun <reified SP : PropsWithChildren, reified DP : PropsWithChildren, reified P : PropsWithChildren> connectStateAndDispatch( + clazz: KClass<out RComponent<P, out State>>, + noinline mapStateToProps: SP.(SwState, PropsWithChildren) -> Unit, + noinline mapDispatchToProps: DP.((RAction) -> WrapperAction, PropsWithChildren) -> Unit, +): ComponentClass<PropsWithChildren> { + val connect = rConnect<SwState, RAction, WrapperAction, PropsWithChildren, SP, DP, P>( mapStateToProps = mapStateToProps, mapDispatchToProps = mapDispatchToProps, ) - return connect.invoke(clazz.js.unsafeCast<RClass<P>>()) + return connect.invoke(clazz.js.unsafeCast<ComponentClass<P>>()) } |