diff options
Diffstat (limited to 'sw-ui')
8 files changed, 54 insertions, 41 deletions
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<Props> { .. }.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<RoutesProps>.route(path: String, render: RBuilder.() -> Unit) { Route { - attrs.path = arrayOf(path) - attrs.exact = exact - render() + attrs.path = path + attrs.element = createElement<Props>(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 } form { attrs { - onSubmitFunction = { e -> createGame(e) } + onSubmitFunction = { e -> + e.preventDefault() + createGame() + } } bpInputGroup( @@ -53,11 +51,13 @@ private class CreateGameForm(props: CreateGameFormProps) : RComponent<CreateGame } private fun createGameButton() = buildElement { - bpButton(minimal = true, intent = Intent.PRIMARY, icon = IconNames.ADD, onClick = { e -> 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<ChooseName display = Display.flex flexDirection = FlexDirection.row } - attrs.onSubmitFunction = { e -> chooseUsername(e) } + attrs.onSubmitFunction = { e -> + e.preventDefault() + chooseUsername() + } randomNameButton() spacer() bpInputGroup( @@ -53,12 +55,15 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseName } } - private fun submitButton(): ReactElement = buildElement { + private fun submitButton(): ReactElement<*> = 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<ChooseName setState { username = randomGreekName() } } - private fun chooseUsername(e: Event) { - e.preventDefault() + private fun chooseUsername() { props.chooseUsername(state.username) } 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 39ac8e8b..8e99c23d 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 @@ -15,8 +15,8 @@ import styled.styledUl fun <T> RBuilder.radialList( items: List<T>, - centerElement: ReactElement, - renderItem: (T) -> ReactElement, + centerElement: ReactElement<*>, + renderItem: (T) -> ReactElement<*>, getKey: (T) -> String, itemWidth: Int, itemHeight: Int, @@ -41,7 +41,7 @@ fun <T> RBuilder.radialList( private fun <T> RBuilder.radialListItems( items: List<T>, - renderItem: (T) -> ReactElement, + renderItem: (T) -> ReactElement<*>, getKey: (T) -> String, radialConfig: RadialConfig, ) { @@ -67,7 +67,7 @@ private fun <T> 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 |