From f2f630cbc99808926a490f917ac71492a94b3914 Mon Sep 17 00:00:00 2001 From: Joffrey Bion Date: Sun, 6 Nov 2022 18:25:15 +0100 Subject: Upgrade to react 18 with kotlin-wrappers BOM --- sw-ui/build.gradle.kts | 1 + .../org/luxons/sevenwonders/ui/SevenWondersUi.kt | 4 +++ .../sevenwonders/ui/components/Application.kt | 24 ++++++++++------- .../ui/components/game/BoardSummary.kt | 8 +++--- .../ui/components/gameBrowser/CreateGameForm.kt | 30 +++++++++++----------- .../ui/components/home/ChooseNameForm.kt | 16 +++++++----- .../sevenwonders/ui/components/lobby/RadialList.kt | 10 ++++---- .../ui/components/lobby/RadialPlayerList.kt | 2 +- 8 files changed, 54 insertions(+), 41 deletions(-) (limited to 'sw-ui') diff --git a/sw-ui/build.gradle.kts b/sw-ui/build.gradle.kts index fbe51d3e..f0f9d08c 100644 --- a/sw-ui/build.gradle.kts +++ b/sw-ui/build.gradle.kts @@ -14,6 +14,7 @@ kotlin { dependencies { implementation(projects.swClient) + implementation(project.dependencies.enforcedPlatform(libs.kotlin.wrappers.bom)) implementation(libs.kotlin.wrappers.react.base) implementation(libs.kotlin.wrappers.react.dom) implementation(libs.kotlin.wrappers.react.redux) diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt index d6cd1c62..152ff1d5 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt @@ -31,6 +31,10 @@ fun main() { private fun initializeAndRender(rootElement: Element) { val store = initRedux() + // With the new API this might look something like: + // createRoot(rootElement).render(FC { .. }.create()) + // See: https://github.com/karakum-team/kotlin-mui-showcase/blob/main/src/main/kotlin/team/karakum/App.kt + @Suppress("DEPRECATION") render(rootElement) { provider(store) { application() 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 fcc9e863..51e7e78f 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 @@ -6,29 +6,35 @@ import org.luxons.sevenwonders.ui.components.gameBrowser.gameBrowser import org.luxons.sevenwonders.ui.components.home.home import org.luxons.sevenwonders.ui.components.lobby.lobby import org.luxons.sevenwonders.ui.router.SwRoute +import react.Props import react.RBuilder +import react.RElementBuilder +import react.createElement +import react.router.Navigate +import react.router.Route +import react.router.Routes +import react.router.RoutesProps import react.router.dom.* fun RBuilder.application() = HashRouter { errorDialog() - Switch { + Routes { route(SwRoute.GAME_BROWSER.path) { gameBrowser() } route(SwRoute.GAME.path) { gameScene() } route(SwRoute.LOBBY.path) { lobby() } route(SwRoute.HOME.path) { home() } - Redirect { - attrs { - from = "*" - to = "/" + route("*") { + Navigate { + attrs.to = "/" + attrs.replace = true } } } } -private fun RBuilder.route(path: String, exact: Boolean = false, render: RBuilder.() -> Unit) { +private fun RElementBuilder.route(path: String, render: RBuilder.() -> Unit) { Route { - attrs.path = arrayOf(path) - attrs.exact = exact - render() + attrs.path = path + attrs.element = createElement(render) } } 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 57614922..ec7ea464 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 @@ -4,13 +4,11 @@ import blueprintjs.core.PopoverPosition import blueprintjs.core.bpDivider import blueprintjs.core.bpPopover import kotlinx.css.* -import kotlinx.html.DIV +import kotlinx.html.* import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.model.boards.Board import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo -import react.RBuilder -import react.ReactElement -import react.buildElement +import react.* import styled.* enum class BoardSummarySide( @@ -45,7 +43,7 @@ fun RBuilder.boardSummaryWithPopover( } } -private fun createFullBoardPreview(board: Board): ReactElement = buildElement { +private fun createFullBoardPreview(board: Board): ReactElement<*> = buildElement { boardComponent(board = board) { css { +GameStyles.fullBoardPreview 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 9313cd67..e9fb467f 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 @@ -1,19 +1,14 @@ package org.luxons.sevenwonders.ui.components.gameBrowser -import blueprintjs.core.Intent -import blueprintjs.core.bpButton -import blueprintjs.core.bpInputGroup -import blueprintjs.icons.IconNames +import blueprintjs.core.* +import blueprintjs.icons.* import kotlinx.css.* -import kotlinx.html.js.onSubmitFunction -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 kotlinx.html.js.* +import org.luxons.sevenwonders.ui.redux.* +import org.w3c.dom.* import react.* import react.dom.* -import styled.css -import styled.styledDiv +import styled.* private interface CreateGameFormProps : PropsWithChildren { var createGame: (String) -> Unit @@ -36,7 +31,10 @@ private class CreateGameForm(props: CreateGameFormProps) : RComponent createGame(e) } + onSubmitFunction = { e -> + e.preventDefault() + createGame() + } } bpInputGroup( @@ -53,11 +51,13 @@ private class CreateGameForm(props: CreateGameFormProps) : RComponent createGame(e) }) + bpButton(minimal = true, intent = Intent.PRIMARY, icon = IconNames.ADD, onClick = { e -> + e.preventDefault() // prevents refreshing the page when pressing Enter + createGame() + }) } - private fun createGame(e: Event) { - e.preventDefault() // prevents refreshing the page when pressing Enter + private fun createGame() { props.createGame(state.gameName) } } 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 055b5d71..6a4f1059 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 @@ -9,7 +9,6 @@ import kotlinx.html.js.onSubmitFunction import org.luxons.sevenwonders.ui.redux.RequestChooseName import org.luxons.sevenwonders.ui.redux.connectDispatch import org.w3c.dom.HTMLInputElement -import org.w3c.dom.events.Event import react.* import styled.css import styled.styledDiv @@ -35,7 +34,10 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent chooseUsername(e) } + attrs.onSubmitFunction = { e -> + e.preventDefault() + chooseUsername() + } randomNameButton() spacer() bpInputGroup( @@ -53,12 +55,15 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent = buildElement { bpButton( minimal = true, icon = IconNames.ARROW_RIGHT, intent = Intent.PRIMARY, - onClick = { e -> chooseUsername(e) }, + onClick = { e -> + e.preventDefault() + chooseUsername() + }, ) } @@ -76,8 +81,7 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent RBuilder.radialList( items: List, - centerElement: ReactElement, - renderItem: (T) -> ReactElement, + centerElement: ReactElement<*>, + renderItem: (T) -> ReactElement<*>, getKey: (T) -> String, itemWidth: Int, itemHeight: Int, @@ -41,7 +41,7 @@ fun RBuilder.radialList( private fun RBuilder.radialListItems( items: List, - renderItem: (T) -> ReactElement, + renderItem: (T) -> ReactElement<*>, getKey: (T) -> String, radialConfig: RadialConfig, ) { @@ -67,7 +67,7 @@ private fun RBuilder.radialListItems( } } -private fun RBuilder.radialListItem(item: ReactElement, key: String, offset: CartesianCoords) { +private fun RBuilder.radialListItem(item: ReactElement<*>, key: String, offset: CartesianCoords) { styledLi { css { display = Display.block @@ -90,7 +90,7 @@ private fun RBuilder.radialListItem(item: ReactElement, key: String, offset: Car } } -private fun RBuilder.radialListCenter(centerElement: ReactElement?) { +private fun RBuilder.radialListCenter(centerElement: ReactElement<*>?) { if (centerElement == null) { return } 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 16cc9fd7..22fcd3ad 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 @@ -55,7 +55,7 @@ private sealed class PlayerItem { abstract val key: String abstract val playerText: String abstract val opacity: Double - abstract val icon: ReactElement + abstract val icon: ReactElement<*> data class Player(val player: PlayerDTO) : PlayerItem() { override val key = player.username -- cgit