Upgrade Kotlin, Kotlin/React, and Krossbow versions

39 files changed, 160 insertions, 168 deletions

diff --git a/build.gradle.kts b/build.gradle.kts
index 03548363..ffc85dca 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -1,7 +1,7 @@
 import org.gradle.api.tasks.testing.logging.TestLogEvent
 
 plugins {
-    val kotlinVersion = "1.4.30"
+    val kotlinVersion = "1.5.30"
     kotlin("js") version kotlinVersion apply false
     kotlin("jvm") version kotlinVersion apply false
     kotlin("multiplatform") version kotlinVersion apply false
@@ -13,7 +13,6 @@ plugins {
 allprojects {
     repositories {
         mavenCentral()
-        jcenter()
     }
 }
 
@@ -32,7 +31,8 @@ subprojects {
     tasks.withType<org.jetbrains.kotlin.gradle.dsl.KotlinCompile<*>> {
         kotlinOptions.freeCompilerArgs += listOf(
             "-Xopt-in=kotlin.RequiresOptIn",
-            "-Xopt-in=kotlin.time.ExperimentalTime"
+            "-Xopt-in=kotlin.time.ExperimentalTime",
+            "-Xopt-in=kotlinx.serialization.ExperimentalSerializationApi"
         )
     }
 
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 4f69927a..b8edd16f 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,12 +1,24 @@
 [versions]
-kotlinx-coroutines = "1.4.2"
-kotlinx-serialization = "1.0.1"
-krossbow = "1.1.5"
+kotlinx-coroutines = "1.5.2"
+kotlinx-serialization = "1.2.2"
+krossbow = "2.4.0"
 logback-classic = "1.2.3"
 loki-logback-appender = "1.0.0"
 micrometer-registry-prometheus = "1.6.1"
 slf4j = "1.7.30"
 
+# Frontend wrapper versions from https://github.com/JetBrains/kotlin-wrappers/blob/master/gradle.properties
+kotlin-wrappers = "pre.242-kotlin-1.5.30"
+react = "17.0.2"
+reactRedux = "7.2.4"
+reactRouterDom = "5.2.0"
+redux = "4.1.1"
+styledComponents = "5.3.1"
+
+blueprintjs-wrapper = "3"
+blueprintjs-core = "3.42.0"
+blueprintjs-icons = "3.26.0"
+
 [libraries]
 kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlinx-coroutines" }
 kotlinx-coroutines-reactor = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-reactor", version.ref = "kotlinx-coroutines" }
diff --git a/sw-client/build.gradle.kts b/sw-client/build.gradle.kts
index d141bf9c..0221c24a 100644
--- a/sw-client/build.gradle.kts
+++ b/sw-client/build.gradle.kts
@@ -9,7 +9,7 @@ kotlin {
     }
     sourceSets {
         all {
-            languageSettings.useExperimentalAnnotation("kotlin.RequiresOptIn")
+            languageSettings.optIn("kotlin.RequiresOptIn")
         }
         val commonMain by getting {
             dependencies {
diff --git a/sw-common-model/build.gradle.kts b/sw-common-model/build.gradle.kts
index fd5b8848..557a6d04 100644
--- a/sw-common-model/build.gradle.kts
+++ b/sw-common-model/build.gradle.kts
@@ -10,8 +10,8 @@ kotlin {
     }
     sourceSets {
         all {
-            languageSettings.useExperimentalAnnotation("kotlin.RequiresOptIn")
-            languageSettings.useExperimentalAnnotation("kotlin.time.ExperimentalTime")
+            languageSettings.optIn("kotlin.RequiresOptIn")
+            languageSettings.optIn("kotlin.time.ExperimentalTime")
         }
         val commonMain by getting {
             dependencies {
diff --git a/sw-common-model/src/commonMain/kotlin/org/luxons/sevenwonders/model/api/actions/Actions.kt b/sw-common-model/src/commonMain/kotlin/org/luxons/sevenwonders/model/api/actions/Actions.kt
index 7b9a3d60..4e877737 100644
--- a/sw-common-model/src/commonMain/kotlin/org/luxons/sevenwonders/model/api/actions/Actions.kt
+++ b/sw-common-model/src/commonMain/kotlin/org/luxons/sevenwonders/model/api/actions/Actions.kt
@@ -4,7 +4,7 @@ import kotlinx.serialization.Serializable
 import org.luxons.sevenwonders.model.PlayerMove
 import org.luxons.sevenwonders.model.Settings
 import org.luxons.sevenwonders.model.wonders.AssignedWonder
-import kotlin.time.hours
+import kotlin.time.Duration
 
 /**
  * The action to choose the player's name. This is the first action that should be called.
@@ -110,7 +110,7 @@ class AddBotAction(
     /**
      * The global timeout for the bot, after which it disconnects (whether the game is over or not).
      */
-    val globalBotTimeoutMillis: Long = 6.hours.toLongMilliseconds(),
+    val globalBotTimeoutMillis: Long = Duration.hours(6).inWholeMilliseconds,
     /**
      * The configuration of the bot to add.
      */
diff --git a/sw-common-model/src/commonMain/kotlin/org/luxons/sevenwonders/model/resources/Resources.kt b/sw-common-model/src/commonMain/kotlin/org/luxons/sevenwonders/model/resources/Resources.kt
index 384de2d4..d8343fb8 100644
--- a/sw-common-model/src/commonMain/kotlin/org/luxons/sevenwonders/model/resources/Resources.kt
+++ b/sw-common-model/src/commonMain/kotlin/org/luxons/sevenwonders/model/resources/Resources.kt
@@ -63,7 +63,7 @@ typealias PricedResourceTransactions = Set<PricedResourceTransaction>
 typealias ResourceTransactionOptions = List<PricedResourceTransactions>
 
 val PricedResourceTransactions.totalPrice: Int
-    get() = sumBy { it.totalPrice }
+    get() = sumOf { it.totalPrice }
 
 val ResourceTransactionOptions.bestPrice: Int
     get() = minOfOrNull { it.totalPrice } ?: Int.MAX_VALUE
diff --git a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/boards/Board.kt b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/boards/Board.kt
index 2fb5e36c..e1160e38 100644
--- a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/boards/Board.kt
+++ b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/boards/Board.kt
@@ -94,11 +94,11 @@ internal class Board(
     )
 
     private fun computePointsForCards(player: Player, color: Color): Int =
-        playedCards.filter { it.color === color }.flatMap { it.effects }.sumBy { it.computePoints(player) }
+        playedCards.filter { it.color === color }.flatMap { it.effects }.sumOf { it.computePoints(player) }
 
     private fun copiedGuildPoints(player: Player): Int = copiedGuild?.computePoints(player) ?: 0
 
-    private fun Card.computePoints(player: Player): Int = effects.sumBy { it.computePoints(player) }
+    private fun Card.computePoints(player: Player): Int = effects.sumOf { it.computePoints(player) }
 
     private fun computeGoldPoints(): Int = gold / 3 * pointsPer3Gold
 
diff --git a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/boards/Science.kt b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/boards/Science.kt
index 681f1c27..1c599616 100644
--- a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/boards/Science.kt
+++ b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/boards/Science.kt
@@ -49,7 +49,7 @@ internal class Science {
     }
 
     private fun computePointsNoJoker(values: List<Int>): Int {
-        val independentSquaresSum = values.sumBy { it * it }
+        val independentSquaresSum = values.sumOf { it * it }
         val nbGroupsOfAll = values.minOrNull() ?: 0
         return independentSquaresSum + nbGroupsOfAll * 7
     }
diff --git a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/converters/Boards.kt b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/converters/Boards.kt
index 2ddce8a8..0ca331e7 100644
--- a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/converters/Boards.kt
+++ b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/converters/Boards.kt
@@ -36,7 +36,7 @@ internal fun InternalBoard.toApiBoard(player: Player, lastMove: Move?, currentAg
     gold = gold,
     bluePoints = getPlayedCards().filter { it.color == Color.BLUE }
         .flatMap { it.effects.filterIsInstance<RawPointsIncrease>() }
-        .sumBy { it.points },
+        .sumOf { it.points },
     canPlayAnyCardForFree = canPlayFreeCard(currentAge),
 )
 
diff --git a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/effects/BonusPerBoardElement.kt b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/effects/BonusPerBoardElement.kt
index 6f1cee51..4c2bbb24 100644
--- a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/effects/BonusPerBoardElement.kt
+++ b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/effects/BonusPerBoardElement.kt
@@ -25,7 +25,7 @@ internal data class BonusPerBoardElement(
 
     override fun computePoints(player: Player): Int = points * nbMatchingElementsFor(player)
 
-    private fun nbMatchingElementsFor(player: Player): Int = boards.sumBy { nbMatchingElementsIn(player.getBoard(it)) }
+    private fun nbMatchingElementsFor(player: Player): Int = boards.sumOf { nbMatchingElementsIn(player.getBoard(it)) }
 
     private fun nbMatchingElementsIn(board: Board): Int = when (type) {
         BoardElementType.CARD -> board.getNbCardsOfColor(colors!!)
diff --git a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/effects/SpecialAbility.kt b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/effects/SpecialAbility.kt
index 82c23a72..746e61c3 100644
--- a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/effects/SpecialAbility.kt
+++ b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/effects/SpecialAbility.kt
@@ -28,7 +28,7 @@ enum class SpecialAbility {
     COPY_GUILD {
         override fun computePoints(player: Player): Int {
             // there can be no copiedGuild if no neighbour had any guild cards
-            return player.board.copiedGuild?.effects?.sumBy { it.computePoints(player) } ?: 0
+            return player.board.copiedGuild?.effects?.sumOf { it.computePoints(player) } ?: 0
         }
     };
 
diff --git a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/resources/TradingRules.kt b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/resources/TradingRules.kt
index bee4b9fe..2e5f7d51 100644
--- a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/resources/TradingRules.kt
+++ b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/resources/TradingRules.kt
@@ -20,7 +20,7 @@ internal class TradingRules(private val defaultCost: Int) {
         costs.computeIfAbsent(type) { mutableMapOf() }[provider] = cost
     }
 
-    internal fun computeCost(transactions: ResourceTransactions): Int = transactions.sumBy { computeCost(it) }
+    internal fun computeCost(transactions: ResourceTransactions): Int = transactions.sumOf { computeCost(it) }
 
     internal fun computeCost(transact: ResourceTransaction) = computeCost(transact.asResources(), transact.provider)
 
diff --git a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/wonders/Wonder.kt b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/wonders/Wonder.kt
index 03ed2f8f..610a9e6f 100644
--- a/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/wonders/Wonder.kt
+++ b/sw-engine/src/main/kotlin/org/luxons/sevenwonders/engine/wonders/Wonder.kt
@@ -46,7 +46,7 @@ internal class Wonder(
         lastBuiltStage!!.activate(player, boughtResources)
 
     fun computePoints(player: Player): Int =
-        stages.filter { it.isBuilt }.flatMap { it.effects }.sumBy { it.computePoints(player) }
+        stages.filter { it.isBuilt }.flatMap { it.effects }.sumOf { it.computePoints(player) }
 }
 
 private object Buildability {
diff --git a/sw-engine/src/test/kotlin/org/luxons/sevenwonders/engine/effects/SpecialAbilityActivationTest.kt b/sw-engine/src/test/kotlin/org/luxons/sevenwonders/engine/effects/SpecialAbilityActivationTest.kt
index 978be53b..da2d7faf 100644
--- a/sw-engine/src/test/kotlin/org/luxons/sevenwonders/engine/effects/SpecialAbilityActivationTest.kt
+++ b/sw-engine/src/test/kotlin/org/luxons/sevenwonders/engine/effects/SpecialAbilityActivationTest.kt
@@ -48,7 +48,7 @@ class SpecialAbilityActivationTest {
 
         player.board.copiedGuild = guildCard
 
-        val directPointsFromGuildCard = guildCard.effects.sumBy { it.computePoints(player) }
+        val directPointsFromGuildCard = guildCard.effects.sumOf { it.computePoints(player) }
         assertEquals(directPointsFromGuildCard, effect.computePoints(player))
     }
 
diff --git a/sw-server/build.gradle.kts b/sw-server/build.gradle.kts
index 832ce912..1bab48d2 100644
--- a/sw-server/build.gradle.kts
+++ b/sw-server/build.gradle.kts
@@ -2,7 +2,7 @@ plugins {
     kotlin("jvm")
     kotlin("plugin.spring")
     kotlin("plugin.serialization")
-    id("org.springframework.boot") version "2.4.0"
+    id("org.springframework.boot") version "2.5.4"
 }
 
 apply(plugin = "io.spring.dependency-management")
diff --git a/sw-server/src/main/kotlin/org/luxons/sevenwonders/server/controllers/AutoGameController.kt b/sw-server/src/main/kotlin/org/luxons/sevenwonders/server/controllers/AutoGameController.kt
index b6d66e4b..c94d49da 100644
--- a/sw-server/src/main/kotlin/org/luxons/sevenwonders/server/controllers/AutoGameController.kt
+++ b/sw-server/src/main/kotlin/org/luxons/sevenwonders/server/controllers/AutoGameController.kt
@@ -14,6 +14,7 @@ import org.springframework.web.bind.annotation.PostMapping
 import org.springframework.web.bind.annotation.RequestBody
 import org.springframework.web.bind.annotation.RestController
 import java.security.Principal
+import kotlin.time.Duration
 import kotlin.time.measureTimedValue
 import kotlin.time.minutes
 import kotlin.time.toJavaDuration
@@ -32,7 +33,7 @@ class AutoGameController(
         val client = SevenWondersClient()
         val serverUrl = "ws://localhost:$serverPort"
 
-        val lastTurn = withTimeout(5.minutes) {
+        val lastTurn = withTimeout(Duration.minutes(5)) {
             val (lastTurn, duration) = measureTimedValue {
                 val otherBotNames = List(action.nbPlayers - 1) { "JoinerBot${it + 1}" }
                 val owner = client.connectBot(serverUrl, "OwnerBot", action.config)
diff --git a/sw-server/src/main/kotlin/org/luxons/sevenwonders/server/controllers/LobbyController.kt b/sw-server/src/main/kotlin/org/luxons/sevenwonders/server/controllers/LobbyController.kt
index 9fb1603a..10a94579 100644
--- a/sw-server/src/main/kotlin/org/luxons/sevenwonders/server/controllers/LobbyController.kt
+++ b/sw-server/src/main/kotlin/org/luxons/sevenwonders/server/controllers/LobbyController.kt
@@ -27,6 +27,7 @@ import org.springframework.messaging.simp.SimpMessageSendingOperations
 import org.springframework.stereotype.Controller
 import org.springframework.validation.annotation.Validated
 import java.security.Principal
+import kotlin.time.Duration
 import kotlin.time.milliseconds
 
 /**
@@ -165,7 +166,7 @@ class LobbyController(
             }
             if (result == null) {
                 meterRegistry.counter("bot.timeout", lobby.playerCountsTags()).increment()
-                val timeoutDuration = action.globalBotTimeoutMillis.milliseconds
+                val timeoutDuration = Duration.milliseconds(action.globalBotTimeoutMillis)
                 logger.error("Bot {} timed out after {}", action.botDisplayName, timeoutDuration)
                 bot.disconnect()
             }
diff --git a/sw-server/src/test/kotlin/org/luxons/sevenwonders/server/test/ClientEventsAsserts.kt b/sw-server/src/test/kotlin/org/luxons/sevenwonders/server/test/ClientEventsAsserts.kt
index d87c2122..65711d6d 100644
--- a/sw-server/src/test/kotlin/org/luxons/sevenwonders/server/test/ClientEventsAsserts.kt
+++ b/sw-server/src/test/kotlin/org/luxons/sevenwonders/server/test/ClientEventsAsserts.kt
@@ -27,20 +27,20 @@ suspend fun SevenWondersSession.eventAsserter(scope: CoroutineScope): EventAsser
     return EventAsserter(gameListEvents, gameEvents)
 }
 
-suspend inline fun EventAsserter.expectNoGameEvent(message: String? = null, timeout: Duration = 50.milliseconds) {
+suspend inline fun EventAsserter.expectNoGameEvent(message: String? = null, timeout: Duration = Duration.milliseconds(50)) {
     val event = withTimeoutOrNull(timeout) { gameEvents.receive() }
     val extraMessage = message?.let { " ($it)" } ?: ""
     assertNull(event, "Expected no game event$extraMessage, but received $event")
 }
 
-suspend inline fun <reified T : GameEvent> EventAsserter.expectGameEvent(timeout: Duration = 1.seconds): T {
+suspend inline fun <reified T : GameEvent> EventAsserter.expectGameEvent(timeout: Duration = Duration.seconds(1)): T {
     val event = withTimeoutOrNull(timeout) { gameEvents.receive() }
     assertNotNull(event, "Expected event of type ${T::class.simpleName}, received nothing in $timeout")
     assertTrue(event is T, "Expected event of type ${T::class.simpleName}, received $event")
     return event
 }
 
-suspend inline fun <reified T : GameListEvent> EventAsserter.expectGameListEvent(timeout: Duration = 1.seconds): T {
+suspend inline fun <reified T : GameListEvent> EventAsserter.expectGameListEvent(timeout: Duration = Duration.seconds(1)): T {
     val event = withTimeoutOrNull(timeout) { gameListEvents.receive() }
     assertNotNull(event, "Expected event of type ${T::class.simpleName}, received nothing in $timeout")
     assertTrue(event is T, "Expected event of type ${T::class.simpleName}, received $event")
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>>())
 }