From 5169b718cf6ba3c5f8bf360b1e2ff1f7e91d1c25 Mon Sep 17 00:00:00 2001 From: Joffrey Bion Date: Tue, 30 Jul 2019 01:26:21 +0200 Subject: First attempt at routing --- sw-ui-kt/build.gradle.kts | 3 +++ .../org/luxons/sevenwonders/ui/SevenWondersUi.kt | 12 ++---------- .../sevenwonders/ui/components/Application.kt | 22 ++++++++++++++++++++++ .../luxons/sevenwonders/ui/components/game/Game.kt | 8 ++++++++ .../ui/components/gameBrowser/GameBrowser.kt | 8 ++++++++ .../luxons/sevenwonders/ui/components/home/Home.kt | 13 +++++++++++++ .../sevenwonders/ui/components/lobby/Lobby.kt | 13 +++++++++++++ 7 files changed, 69 insertions(+), 10 deletions(-) create mode 100644 sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt create mode 100644 sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Game.kt create mode 100644 sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt create mode 100644 sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt create mode 100644 sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt diff --git a/sw-ui-kt/build.gradle.kts b/sw-ui-kt/build.gradle.kts index 66622368..f53451bf 100644 --- a/sw-ui-kt/build.gradle.kts +++ b/sw-ui-kt/build.gradle.kts @@ -31,6 +31,9 @@ kotlin { implementation(npm("react-redux", reactReduxVersion)) implementation(npm("redux", "4.0.4")) + implementation("org.jetbrains:kotlin-react-router-dom:4.3.1-$kotlinWrappersVersion") + implementation(npm("react-router-dom", "4.3.1")) + // seems to be required by "kotlin-extensions" JS lib implementation(npm("core-js", "3.1.4")) diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt index 8ad20702..2a075ba9 100644 --- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt @@ -1,5 +1,6 @@ package org.luxons.sevenwonders.ui +import org.luxons.sevenwonders.ui.components.application import org.luxons.sevenwonders.ui.redux.configureStore import org.w3c.dom.Element import react.RBuilder @@ -23,16 +24,7 @@ private fun initializeAndRender(rootElement: Element) { val store = configureStore() render(rootElement) { provider(store) { - app() + application() } } } - -fun RBuilder.app() = div { - h1 { - +"Seven Wonders" - } - p { - +"Great app!" - } -} diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt new file mode 100644 index 00000000..9a3a3e03 --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt @@ -0,0 +1,22 @@ +package org.luxons.sevenwonders.ui.components + +import org.luxons.sevenwonders.ui.components.game.gameScene +import org.luxons.sevenwonders.ui.components.gameBrowser.gameBrowser +import react.RBuilder +import react.router.dom.hashRouter +import react.router.dom.redirect +import react.router.dom.route +import react.router.dom.switch + +import org.luxons.sevenwonders.ui.components.home.home +import org.luxons.sevenwonders.ui.components.lobby.lobby + +fun RBuilder.application() = hashRouter { + switch { + route("/game") { gameScene() } + route("/games") { gameBrowser() } + route("/lobby") { lobby() } + route("/", exact = true) { home() } + redirect(from = "*", to = "/") + } +} diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Game.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Game.kt new file mode 100644 index 00000000..d8b5ec7d --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Game.kt @@ -0,0 +1,8 @@ +package org.luxons.sevenwonders.ui.components.game + +import react.RBuilder +import react.dom.* + +fun RBuilder.gameScene() = div { + h1 { +"Game" } +} diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt new file mode 100644 index 00000000..73c11984 --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt @@ -0,0 +1,8 @@ +package org.luxons.sevenwonders.ui.components.gameBrowser + +import react.RBuilder +import react.dom.* + +fun RBuilder.gameBrowser() = div { + h1 { +"Games" } +} diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt new file mode 100644 index 00000000..e9af82be --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt @@ -0,0 +1,13 @@ +package org.luxons.sevenwonders.ui.components.home + +import react.RBuilder +import react.dom.* + +fun RBuilder.home() = div { + h1 { + +"Seven Wonders" + } + p { + +"Great app!" + } +} diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt new file mode 100644 index 00000000..24d4da44 --- /dev/null +++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt @@ -0,0 +1,13 @@ +package org.luxons.sevenwonders.ui.components.lobby + +import react.RBuilder +import react.dom.* + +fun RBuilder.lobby() = div { + h1 { + +"Lobby" + } + p { + +"Can't wait to play!" + } +} -- cgit