Add multi-page routing to the webapp

5 files changed, 87 insertions, 5 deletions

diff --git a/Cargo.lock b/Cargo.lock
index 935591a..6e9e4c4 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -369,6 +369,7 @@ version = "0.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a8d5564e570a38b43d78bdc063374a0c3098c4f0d64005b12f9bbe87e869b6d7"
 dependencies = [
+ "futures-channel",
  "gloo-events",
  "js-sys",
  "wasm-bindgen",
@@ -426,6 +427,8 @@ version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5fb7d06c1c8cc2a29bee7ec961009a0b2caa0793ee4900c2ffb348734ba1c8f9"
 dependencies = [
+ "futures-channel",
+ "futures-core",
  "js-sys",
  "wasm-bindgen",
 ]
@@ -885,6 +888,12 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a3f87b73ce11b1619a3c6332f45341e0047173771e8b8b73f87bfeefb7b56244"
 
 [[package]]
+name = "route-recognizer"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
+
+[[package]]
 name = "rustversion"
 version = "1.0.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -918,6 +927,18 @@ dependencies = [
 ]
 
 [[package]]
+name = "serde-wasm-bindgen"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "618365e8e586c22123d692b72a7d791d5ee697817b65a218cdf12a98870af0f7"
+dependencies = [
+ "fnv",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
+[[package]]
 name = "serde_derive"
 version = "1.0.145"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1416,6 +1437,7 @@ dependencies = [
  "wasm-logger",
  "wee_alloc",
  "yew",
+ "yew-router",
 ]
 
 [[package]]
@@ -1536,3 +1558,34 @@ dependencies = [
  "quote",
  "syn",
 ]
+
+[[package]]
+name = "yew-router"
+version = "0.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "155804f6f3aa309f596d5c3fa14486a94e7756f1edd7634569949e401d5099f2"
+dependencies = [
+ "gloo",
+ "gloo-utils",
+ "js-sys",
+ "route-recognizer",
+ "serde",
+ "serde-wasm-bindgen",
+ "serde_urlencoded",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+ "yew",
+ "yew-router-macro",
+]
+
+[[package]]
+name = "yew-router-macro"
+version = "0.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "39049d193b52eaad4ffc80916bf08806d142c90b5edcebd527644de438a7e19a"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
diff --git a/TODO.org b/TODO.org
index b66c2b9..6dd3eec 100644
--- a/TODO.org
+++ b/TODO.org
@@ -1,5 +1,8 @@
 #+title: Todo
 
+* Server
+** TODO Implement bidding protocol between server and client
+** TODO Implement random bidding bot
 * Webapp
 ** TODO Implement restrictions for doubling and redoubling
 ** TODO Hook up double and redouble buttons in the UI
diff --git a/webapp/Cargo.toml b/webapp/Cargo.toml
index 39995a9..fe7addb 100644
--- a/webapp/Cargo.toml
+++ b/webapp/Cargo.toml
@@ -19,6 +19,7 @@ lazy_static = "1.4"
 gloo-net = "0.2.4"
 wasm-bindgen-futures = "0.4.33"
 data = { path = "../data" }
+yew-router = "0.16.0"
 
 [dev-dependencies]
 env_logger = "0.8.4"
diff --git a/webapp/src/default.css b/webapp/src/default.css
index 9238804..72080dd 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -10,12 +10,12 @@ body {
   margin: 0;
 }
 
-.app {
+.game-layout {
     display: grid;
     grid-template-areas: "north north north nav"
                          "west center east nav"
                          "south south south nav";
-    grid-template-rows: 10vw minmax(400px, 1fr) 10vw;
+    grid-template-rows: 10vw minmax(200px, 1fr) 10vw;
     grid-template-columns: 10vw 1fr 10vw 10vw;
     width: 100vw;
     height: 100vh;
diff --git a/webapp/src/main.rs b/webapp/src/main.rs
index ede4390..6fcf59f 100644
--- a/webapp/src/main.rs
+++ b/webapp/src/main.rs
@@ -2,6 +2,7 @@ use data::MyMessage;
 #[allow(unused_imports)]
 use log::{debug, error, info, warn};
 use yew::prelude::*;
+use yew_router::prelude::*;
 pub mod bridge_engine;
 pub mod card;
 pub mod components;
@@ -12,6 +13,14 @@ extern crate wee_alloc;
 // Use `wee_alloc` as the global allocator.
 #[global_allocator]
 static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+#[derive(Clone, Routable, PartialEq)]
+
+enum Route {
+    #[at("/")]
+    Home,
+    #[at("/playground")]
+    Playground,
+}
 
 fn main() {
     std::panic::set_hook(Box::new(console_error_panic_hook::hook));
@@ -46,13 +55,29 @@ pub fn app() -> Html {
 
     html! {
         <>
-            <div class="app">
-                <Game />
-            </div>
+	    <BrowserRouter>
+	        <Switch<Route> render={Switch::render(switch)} />
+	    </BrowserRouter>
         </>
     }
 }
 
+fn switch(routes: &Route) -> Html {
+    match routes {
+        Route::Home => html! {
+	    <>
+		<p>{ "Hello!" }</p>
+		<p>
+		    <Link<Route> to={Route::Playground}>{ "Playground" }</Link<Route>>
+		</p>
+	    </>
+	},
+        Route::Playground => html! {
+            <div class="game-layout"><Game /></div>
+        },
+    }
+}
+
 #[cfg(test)]
 mod tests {
     pub fn test_setup() {