Upgrade Kotlin JS wrappers to 1.0.0-pre.585

This includes:

* replacing VFC with the new non-generic overload of FC
* replacing some csstype.* types and unit functions with web.cssom.*
* using the new react router factory function createHashRouter()

28 files changed, 79 insertions, 51 deletions

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 9c210538..2cf8b4f1 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt
@@ -1,5 +1,6 @@
 package org.luxons.sevenwonders.ui.components
 
+import js.core.jso
 import org.luxons.sevenwonders.ui.components.errors.*
 import org.luxons.sevenwonders.ui.components.game.*
 import org.luxons.sevenwonders.ui.components.gameBrowser.*
@@ -10,34 +11,42 @@ import react.*
 import react.router.*
 import react.router.dom.*
 
-val Application = VFC("Application") {
-    HashRouter {
-        ErrorDialog()
-        Routes {
-            Route {
-                path = SwRoute.GAME_BROWSER.path
-                element = GameBrowser.create()
-            }
-            Route {
-                path = SwRoute.GAME.path
-                element = GameScene.create()
-            }
-            Route {
-                path = SwRoute.LOBBY.path
-                element = Lobby.create()
-            }
-            Route {
-                path = SwRoute.HOME.path
-                element = Home.create()
-            }
-            Route {
-                path = "*"
-                element = Navigate.create {
+val Application = FC("Application") {
+    ErrorDialog()
+    RouterProvider {
+        router = hashRouter
+    }
+}
+
+// Using plain jso objects instead of createRoutesFromElements
+// because of a broken Route external interface (no properties)
+// See https://github.com/JetBrains/kotlin-wrappers/issues/2024
+private val hashRouter = createHashRouter(
+    routes = arrayOf(
+        jso {
+            path = SwRoute.GAME_BROWSER.path
+            Component = GameBrowser
+        },
+        jso {
+            path = SwRoute.GAME.path
+            Component = GameScene
+        },
+        jso {
+            path = SwRoute.LOBBY.path
+            Component = Lobby
+        },
+        jso {
+            path = SwRoute.HOME.path
+            Component = Home
+        },
+        jso {
+            path = "*"
+            Component = FC {
+                Navigate {
                     to = "/"
                     replace = true
                 }
             }
-        }
-    }
-}
-
+        },
+    ),
+)
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt
index bd12537e..ee9c17ab 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt
@@ -1,8 +1,8 @@
 package org.luxons.sevenwonders.ui.components
 
-import csstype.*
 import emotion.css.*
 import org.luxons.sevenwonders.ui.utils.*
+import web.cssom.*
 
 
 object GlobalStyles {
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 5399f60d..c728d405 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
@@ -10,7 +10,7 @@ import react.dom.html.ReactHTML.p
 import react.redux.*
 import redux.*
 
-val ErrorDialog = VFC {
+val ErrorDialog = FC {
     val dispatch = useDispatch<RAction, WrapperAction>()
 
     ErrorDialogPresenter {
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 9ca56efa..1eb5f6f0 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
@@ -9,6 +9,7 @@ import react.*
 import react.dom.html.*
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.img
+import web.cssom.*
 import web.html.*
 
 // card offsets in % of their size when displayed in columns
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt
index 76487db5..37de113c 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt
@@ -11,6 +11,7 @@ import org.luxons.sevenwonders.ui.utils.*
 import react.*
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.hr
+import web.cssom.*
 
 enum class BoardSummarySide(
     val tokenCountPosition: TokenCountPosition,
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 093384a2..cffd509f 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
@@ -1,11 +1,12 @@
 package org.luxons.sevenwonders.ui.components.game
 
 import csstype.*
-import csstype.Color
 import emotion.react.*
 import org.luxons.sevenwonders.model.cards.*
 import react.*
 import react.dom.html.ReactHTML.img
+import web.cssom.*
+import web.cssom.Color
 
 external interface CardImageProps : PropsWithClassName {
     var card: Card
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 843caaf7..622e3f6d 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
@@ -2,8 +2,6 @@ package org.luxons.sevenwonders.ui.components.game
 
 import blueprintjs.core.*
 import blueprintjs.icons.*
-import csstype.*
-import csstype.Position
 import emotion.react.*
 import org.luxons.sevenwonders.client.*
 import org.luxons.sevenwonders.model.*
@@ -14,8 +12,11 @@ import org.luxons.sevenwonders.model.resources.*
 import org.luxons.sevenwonders.ui.components.*
 import org.luxons.sevenwonders.ui.redux.*
 import org.luxons.sevenwonders.ui.utils.*
+import org.luxons.sevenwonders.ui.utils.Padding
 import react.*
 import react.dom.html.ReactHTML.div
+import web.cssom.*
+import web.cssom.Position
 
 external interface GameSceneProps : Props {
     var currentPlayer: PlayerDTO?
@@ -35,7 +36,7 @@ data class TransactionSelectorState(
     val transactionsOptions: ResourceTransactionOptions,
 )
 
-val GameScene = VFC("GameScene") {
+val GameScene = FC("GameScene") {
 
     val player = useSwSelector { it.currentPlayer }
     val gameState = useSwSelector { it.gameState }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
index bccee3f1..f5ec475e 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
@@ -1,8 +1,8 @@
 package org.luxons.sevenwonders.ui.components.game
 
-import csstype.*
 import emotion.css.*
 import org.luxons.sevenwonders.ui.utils.*
+import web.cssom.*
 
 object GameStyles {
 
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 b3fcdf1f..da71ea0b 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
@@ -3,7 +3,6 @@ package org.luxons.sevenwonders.ui.components.game
 import blueprintjs.core.*
 import blueprintjs.icons.*
 import csstype.*
-import csstype.Position
 import emotion.react.*
 import org.luxons.sevenwonders.client.*
 import org.luxons.sevenwonders.model.*
@@ -14,6 +13,8 @@ import org.luxons.sevenwonders.model.wonders.*
 import org.luxons.sevenwonders.ui.utils.*
 import react.*
 import react.dom.html.ReactHTML.div
+import web.cssom.*
+import web.cssom.Position
 import kotlin.math.*
 
 fun ChildrenBuilder.handCards(
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 5d69628c..72cb6b65 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
@@ -3,12 +3,13 @@ package org.luxons.sevenwonders.ui.components.game
 import blueprintjs.core.*
 import blueprintjs.icons.*
 import csstype.*
-import csstype.Position
 import emotion.react.*
 import org.luxons.sevenwonders.model.cards.*
 import react.*
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.img
+import web.cssom.*
+import web.cssom.Position
 
 fun ChildrenBuilder.handRotationIndicator(direction: HandRotationDirection) {
     div {
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt
index 26678309..627693e1 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCardPresenter.kt
@@ -9,6 +9,7 @@ import org.luxons.sevenwonders.ui.utils.*
 import react.*
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.img
+import web.cssom.*
 
 external interface PlayerPreparedCardProps : Props {
     var playerDisplayName: String
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt
index b03505d6..3ecdc741 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt
@@ -3,7 +3,6 @@ package org.luxons.sevenwonders.ui.components.game
 import blueprintjs.core.*
 import blueprintjs.icons.*
 import csstype.*
-import csstype.Position
 import emotion.react.*
 import org.luxons.sevenwonders.model.*
 import org.luxons.sevenwonders.model.cards.*
@@ -12,6 +11,8 @@ import react.*
 import react.dom.html.*
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.img
+import web.cssom.*
+import web.cssom.Position
 import web.html.*
 
 fun ChildrenBuilder.preparedMove(
@@ -36,7 +37,7 @@ fun ChildrenBuilder.preparedMove(
         }
         div {
             css {
-                position = Position.absolute
+                position = web.cssom.Position.absolute
                 top = 0.px
                 right = 0.px
             }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt
index c9e530ce..cd54446f 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt
@@ -18,6 +18,7 @@ import react.dom.html.ReactHTML.td
 import react.dom.html.ReactHTML.th
 import react.dom.html.ReactHTML.thead
 import react.dom.html.ReactHTML.tr
+import web.cssom.*
 
 fun ChildrenBuilder.scoreTableOverlay(scoreBoard: ScoreBoard, players: List<PlayerDTO>, leaveGame: () -> Unit) {
     BpOverlay {
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 c7942f59..01975f7e 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
@@ -9,6 +9,7 @@ import react.dom.html.*
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.img
 import react.dom.html.ReactHTML.span
+import web.cssom.*
 import web.html.*
 
 private fun getResourceTokenName(resourceType: ResourceType) = "resources/${resourceType.toString().lowercase()}"
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 966a40eb..cdf97ad9 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 org.luxons.sevenwonders.model.resources.*
 import org.luxons.sevenwonders.model.resources.Provider
 import org.luxons.sevenwonders.ui.components.gameBrowser.*
 import org.luxons.sevenwonders.ui.utils.*
+import org.luxons.sevenwonders.ui.utils.Margin
 import react.*
 import react.dom.html.*
 import react.dom.html.ReactHTML.div
@@ -17,6 +18,7 @@ import react.dom.html.ReactHTML.p
 import react.dom.html.ReactHTML.tbody
 import react.dom.html.ReactHTML.td
 import react.dom.html.ReactHTML.tr
+import web.cssom.*
 import web.html.*
 
 fun ChildrenBuilder.transactionsSelectorDialog(
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 acc64aaf..e0f7dd21 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
@@ -2,14 +2,14 @@ package org.luxons.sevenwonders.ui.components.gameBrowser
 
 import blueprintjs.core.*
 import blueprintjs.icons.*
-import csstype.*
 import emotion.react.*
 import org.luxons.sevenwonders.ui.names.*
 import org.luxons.sevenwonders.ui.redux.*
 import react.*
 import react.dom.html.ReactHTML.form
+import web.cssom.*
 
-val CreateGameForm = VFC {
+val CreateGameForm = FC {
     var gameName by useState("")
 
     val dispatch = useSwDispatch()
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 16b0965d..10fb9d81 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt
@@ -1,7 +1,6 @@
 package org.luxons.sevenwonders.ui.components.gameBrowser
 
 import blueprintjs.core.*
-import csstype.*
 import emotion.react.*
 import org.luxons.sevenwonders.ui.components.*
 import org.luxons.sevenwonders.ui.redux.*
@@ -10,8 +9,9 @@ import react.*
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.h1
 import react.dom.html.ReactHTML.h2
+import web.cssom.*
 
-val GameBrowser = VFC {
+val GameBrowser = FC {
     div {
         css(GlobalStyles.fullscreen, GlobalStyles.zeusBackground) {
             padding = Padding(all = 1.rem)
@@ -57,7 +57,7 @@ val GameBrowser = VFC {
     }
 }
 
-val CurrentPlayerInfo = VFC {
+val CurrentPlayerInfo = FC {
     val connectedPlayer = useSwSelector { it.connectedPlayer }
     PlayerInfo {
         player = connectedPlayer
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 2437d9e0..2919b065 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
@@ -18,6 +18,7 @@ import react.dom.html.ReactHTML.td
 import react.dom.html.ReactHTML.th
 import react.dom.html.ReactHTML.thead
 import react.dom.html.ReactHTML.tr
+import web.cssom.*
 import react.State as RState
 
 external interface GameListStateProps : Props {
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 cae25ba5..d7a9a80f 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
@@ -8,6 +8,7 @@ import react.*
 import react.State
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.span
+import web.cssom.*
 
 external interface PlayerInfoProps : PropsWithChildren {
     var player: BasicPlayerInfo?
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 47c76a91..ba37c09d 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
@@ -2,14 +2,14 @@ package org.luxons.sevenwonders.ui.components.home
 
 import blueprintjs.core.*
 import blueprintjs.icons.*
-import csstype.*
 import emotion.react.*
 import org.luxons.sevenwonders.ui.names.*
 import org.luxons.sevenwonders.ui.redux.*
 import react.*
 import react.dom.html.ReactHTML.form
+import web.cssom.*
 
-val ChooseNameForm = VFC {
+val ChooseNameForm = FC {
     val dispatch = useSwDispatch()
     ChooseNameFormPresenter {
         chooseUsername = { name -> dispatch(RequestChooseName(name)) }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
index b821b23d..81f4c736 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
@@ -8,7 +8,7 @@ import react.dom.html.ReactHTML.img
 
 private const val LOGO = "images/logo-7-wonders.png"
 
-val Home = VFC("Home") {
+val Home = FC("Home") {
     div {
         css(GlobalStyles.fullscreen, GlobalStyles.zeusBackground, HomeStyles.centerChildren) {}
 
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
index fa0a83ad..015e78d6 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
@@ -2,6 +2,7 @@ package org.luxons.sevenwonders.ui.components.home
 
 import csstype.*
 import emotion.css.*
+import web.cssom.*
 
 object HomeStyles {
 
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 83f6aa7b..0330a192 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
@@ -2,8 +2,6 @@ package org.luxons.sevenwonders.ui.components.lobby
 
 import blueprintjs.core.*
 import blueprintjs.icons.*
-import csstype.*
-import csstype.Position
 import emotion.react.*
 import org.luxons.sevenwonders.model.api.*
 import org.luxons.sevenwonders.model.wonders.*
@@ -16,10 +14,12 @@ import react.dom.html.ReactHTML.h1
 import react.dom.html.ReactHTML.h2
 import react.dom.html.ReactHTML.h3
 import react.dom.html.ReactHTML.h4
+import web.cssom.*
+import web.cssom.Position
 
 private val BOT_NAMES = listOf("Wall-E", "B-Max", "Sonny", "T-800", "HAL", "GLaDOS", "R2-D2", "Bender", "AWESOM-O")
 
-val Lobby = VFC(displayName = "Lobby") {
+val Lobby = FC(displayName = "Lobby") {
     val lobby = useSwSelector { it.currentLobby }
     val player = useSwSelector { it.currentPlayer }
 
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt
index fe20ac86..6b5dbe48 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt
@@ -1,8 +1,8 @@
 package org.luxons.sevenwonders.ui.components.lobby
 
-import csstype.*
 import emotion.css.*
 import org.luxons.sevenwonders.ui.components.*
+import web.cssom.*
 
 object LobbyStyles {
 
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 e9853588..1f88bebe 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
@@ -8,6 +8,7 @@ import react.dom.html.*
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.li
 import react.dom.html.ReactHTML.ul
+import web.cssom.*
 import web.html.*
 
 fun <T> ChildrenBuilder.radialList(
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 290dd83f..645cf5f3 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
@@ -12,6 +12,7 @@ import react.*
 import react.dom.html.*
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.span
+import web.cssom.*
 import web.html.*
 
 fun ChildrenBuilder.radialPlayerList(
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 2fa3b246..bfa43aa4 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
@@ -7,6 +7,7 @@ import emotion.styled.*
 import org.luxons.sevenwonders.ui.utils.*
 import react.*
 import react.dom.html.ReactHTML.div
+import web.cssom.*
 
 private val FIRE_REFLECTION_COLOR = Color("#b85e00")
 
@@ -25,7 +26,7 @@ private val Circle = FC<CircleProps>("Circle") { props ->
     }
 }
 
-private val OverlayCircle = Circle.styled { _, _ ->
+private val OverlayCircle = Circle.styled {
     position = Position.absolute
     top = 0.px
     left = 0.px
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt
index 5dd274de..7ca67be4 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt
@@ -3,6 +3,7 @@ package org.luxons.sevenwonders.ui.utils
 import csstype.*
 import js.core.*
 import react.dom.html.*
+import web.cssom.*
 
 /**
  * The cubic-bezier() function defines a Cubic Bezier curve.