First attempt at routing

7 files changed, 69 insertions, 10 deletions

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!"
+    }
+}