Some more improvements

frontend/src/demo.rs

@@ -1,5 +1,5 @@
 use leptos::*;
-use leptos_router::{Route, Routes, Outlet, A};
+use leptos_router::{Outlet, A};
 
 #[leptos::component]
 pub fn demo() -> impl leptos::IntoView {
@@ -8,16 +8,55 @@ pub fn demo() -> impl leptos::IntoView {
 
     let demo_info = create_resource(|| (), move |_| async move {
         let res = reqwasm::http::Request::get(&format!("/api/demos/{}/info", id())).send().await.unwrap();
-        dbg!(res.text().await);
-        0
+        res.json::<common::DemoInfo>().await.unwrap()
     });
 
-    view! {
-        <h2>Demo - { id }</h2>
+    let map = move || {
+        match demo_info.get() {
+            Some(v) => v.map.clone(),
+            None => String::new(),
+        }
+    };
 
-        <div>
-            <A href="">Scoreboard</A>
-            <A href="perround">Per Round</A>
+    let selected_tab = move || {
+        let loc = leptos_router::use_location();
+        let loc_path = loc.pathname.get();
+        let trailing = loc_path.split('/').last();
+        trailing.unwrap_or("/").to_owned()
+    };
+    
+    let style = stylers::style! {
+        "Demo",
+        .analysis_bar {
+            display: grid;
+            grid-template-columns: auto auto;
+            column-gap: 20px;
+
+            background-color: #2d2d2d;
+        }
+
+        .analysis_selector {
+            display: inline-block;
+        }
+
+        span {
+            display: inline-block;
+
+            padding: 1vw 1vh;
+            color: #d5d5d5;
+            background-color: #4d4d4d;
+        }
+        .current {
+            background-color: #5d5d5d;
+        }
+    };
+
+    view! {class = style,
+        <h2>Demo - { id } - { map }</h2>
+
+        <div class="analysis_bar">
+            <div class="analysis_selector" class:current=move || selected_tab() == "scoreboard"><A href="scoreboard"><span>Scoreboard</span></A></div>
+            <div class="analysis_selector" class:current=move || selected_tab() == "perround"><A href="perround"><span>Per Round</span></A></div>
         </div>
         <div>
             <Outlet/>
@@ -28,7 +67,25 @@ pub fn demo() -> impl leptos::IntoView {
 #[leptos::component]
 pub fn scoreboard() -> impl leptos::IntoView {
     view! {
-        <h3>Scoreboard</h3>
+        <h2>Scoreboard</h2>
+
+        <div>
+            <h3>Team 1</h3>
+            <table>
+                <tr>
+                    <th>Name</th>
+                </tr>
+            </table>
+        </div>
+
+        <div>
+            <h3>Team 2</h3>
+            <table>
+                <tr>
+                    <th>Name</th>
+                </tr>
+            </table>
+        </div>
     }
 }