Upgrade Kotlin, Kotlin/React, and Krossbow versions

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>>())
 }