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>
     }
 }
 

frontend/src/lib.rs

@@ -17,7 +17,9 @@ pub enum DemoUploadStatus {
 pub fn demo_list_entry(demo: common::BaseDemoInfo) -> impl leptos::IntoView {
     view! {
         <li>
-            <A href=format!("demo/{}", demo.id)>Demo: {demo.map} - {demo.id}</A>
+            <A href=format!("demo/{}/scoreboard", demo.id)>
+                <span>{demo.map} - {demo.id}</span>
+            </A>
         </li>
     }
 }

frontend/src/main.rs

@@ -29,6 +29,7 @@ fn main() {
                     <Route path="/" view=Homepage />
                     <Route path="/demo/:id" view=Demo>
                         <Route path="perround" view=frontend::demo::PerRound />
+                        <Route path="scoreboard" view=frontend::demo::Scoreboard />
                         <Route path="" view=frontend::demo::Scoreboard />
                     </Route>
                 </Routes>

frontend/src/navbar.rs

@@ -57,6 +57,7 @@ pub fn top_bar(update_demo_visible: WriteSignal<DemoUploadStatus>) -> impl lepto
             font-size: 24px;
             padding: 0px;
             margin: 0px;
+            margin-left: 1vw;
         }
     };