Add the ability to add users

Reviewed-on: https://questia.dev/git/vsquad/pool-elo/pulls/5
Reviewed-by: Matthew Kaminski <kaminskimateusz7@gmail.com>

.cargo/config.toml

@@ -0,0 +1,2 @@
+[build]
+rustflags = [ "--cfg", "engine" ]

.gitignore

@@ -5,3 +5,5 @@ target
 static
 pkg 
 ./Cargo.lock
+package-lock.json
+/data/

Cargo.toml

@@ -5,18 +5,30 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-perseus = { version = "0.4.2", features = [ "hydrate" ] }
-sycamore = "0.8.2"
+perseus = { version = "0.4.2", features = ["hydrate"] }
+sycamore = { version = "0.8.2", features = [
+    "suspense",
+    "web",
+    "wasm-bindgen-interning",
+] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 env_logger = "0.10.0"
 log = "0.4.20"
+once_cell = "1.18.0"
+web-sys = "0.3.64"
+cfg-if = "1.0.0"
+chrono = { version = "0.4.31", features = ["serde"] }
 
 [target.'cfg(engine)'.dev-dependencies]
 fantoccini = "0.19"
 
 [target.'cfg(engine)'.dependencies]
-tokio = { version = "1", features = [ "macros", "rt", "rt-multi-thread" ] }
-perseus-axum = { version = "0.4.2", features = [ "dflt-server" ] }
+tokio = { version = "1", features = ["macros", "rt", "rt-multi-thread"] }
+perseus-axum = { version = "0.4.2" }
+axum = "0.6"
+tower-http = { version = "0.3", features = ["fs"] }
 
 [target.'cfg(client)'.dependencies]
+wasm-bindgen = "0.2"
+reqwest = { version = "0.11", features = ["json"] }

README.md

@@ -23,7 +23,7 @@ https://nodejs.org/en
 ## 3. Install Perseus, for real-time updates while developing
 
 `cargo install perseus-cli`
-`cargo build --target wasm32-unknown-unknown`
+`rustup target add wasm32-unknown-unknown`
 
 ## 4. Install tailwindcss, for styling
 
@@ -43,7 +43,7 @@ To build CSS run:
 `npm run build`
 
 To build the project for testing, run
-`perseus serve`
+`perseus serve --verbose`
 
 # Deploying the project
 

src/components/layout.rs

@@ -1,30 +1,51 @@
 use sycamore::prelude::*;
 
+#[derive(Prop)]
+pub struct LayoutProps<'a, G: Html> {
+    pub title: &'a str,
+    pub children: Children<'a, G>,
+}
+
 #[component]
 pub fn Layout<'a, G: Html>(
     cx: Scope<'a>,
-    LayoutProps { title, children }: LayoutProps<'a, G>,
+    LayoutProps { title: _, children }: LayoutProps<'a, G>,
 ) -> View<G> {
     let children = children.call(cx);
 
     view! { cx,
-        // These elements are styled with bright colors for demonstration purposes
-        header(style = "background-color: red; color: white; padding: 1rem") {
-            p { (title.to_string()) }
+        header {
+            div (class = "flex items-center justify-between") {
+                div (class = "w-full text-gray-700 md:text-center text-2xl font-semibold") {
+                    "Pool Elo - Season 1"
                 }
-        main(style = "padding: 1rem") {
+            }
+
+            div (class = "container mx-auto px-6 py-3") {
+                nav (class = "sm:flex sm:justify-center sm:items-center mt-4 hidden") {
+                    div (class = "flex flex-col sm:flex-row"){
+                        a(href = "add-game-form",
+                          class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
+                        ) { "Add game result" }
+                        a(href = "one-v-one-board",
+                          class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
+                        ) { "1v1 Leaderboard" }
+                        a(href = "overall-board",
+                          class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
+                        ) { "Overall Leaderboard" }
+                    }
+                }
+            }
+        }
+
+        main(style = "my-8") {
+            div(class = "container mx-auto px-6") {
+                div(class = "md:flex mt-8 md:-mx-4") {
+                    div(class = "rounded-md overflow-hidden bg-cover bg-center") {
                         (children)
                     }
-        footer(style = "background-color: black; color: white; padding: 1rem") {
-            p { "Hey there, I'm a footer!" }
+                }
+            }
         }
     }
 }
-
-#[derive(Prop)]
-pub struct LayoutProps<'a, G: Html> {
-    /// The title of the page, which will be displayed in the header.
-    pub title: &'a str,
-    /// The content to put inside the layout.
-    pub children: Children<'a, G>,
-}

src/data/mod.rs

@@ -0,0 +1,5 @@
+pub mod pool_match;
+pub mod user;
+
+#[cfg(engine)]
+pub mod store;

src/data/pool_match.rs

@@ -0,0 +1,74 @@
+use crate::data::user::PlayerId;
+use chrono::serde::ts_seconds;
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+
+pub type MatchId = u32;
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub enum MatchType {
+    Standard8Ball,
+    Standard9Ball,
+    CutThroat,
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub struct MatchData {
+    pub type_: MatchType,
+    pub winners: Vec<PlayerId>,
+    pub losers: Vec<PlayerId>,
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub struct PoolMatch {
+    pub id: MatchId,
+    pub data: MatchData,
+    #[serde(with = "ts_seconds")]
+    pub time: DateTime<Utc>,
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub struct PoolMatchList {
+    pub pool_matches: Vec<PoolMatch>,
+    pub max_id: MatchId,
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub struct UserList{
+    pub users: Vec<String>,
+}
+
+impl PoolMatch {
+    pub fn new(data: MatchData, time: DateTime<Utc>) -> PoolMatch {
+        PoolMatch { id: 0, data, time }
+    }
+}
+
+impl PoolMatchList {
+    pub fn new() -> PoolMatchList {
+        PoolMatchList {
+            pool_matches: vec![],
+            max_id: 0,
+        }
+    }
+
+    pub fn add_pool_match(&mut self, mut pool_match: PoolMatch) {
+        pool_match.id = self.max_id + 1;
+        self.max_id += 1;
+        self.pool_matches.push(pool_match);
+    }
+}
+
+impl UserList {
+    pub fn new() -> UserList {
+        UserList {
+            users: vec![],
+        }
+    }
+
+    pub fn add_user(&mut self, user: String) -> usize {
+        let user_id = self.users.len();
+        self.users.push(user);
+        user_id
+    }
+}

src/data/store.rs

@@ -0,0 +1,37 @@
+// (Server only) In-memory data storage and persistent storage
+
+use crate::data::pool_match::PoolMatchList;
+use crate::data::pool_match::UserList;
+use once_cell::sync::Lazy;
+use serde::{Deserialize, Serialize};
+use std::{fs, path::Path, sync::Mutex};
+
+#[derive(Serialize, Deserialize, Clone)]
+pub struct Store {
+    pub matches: PoolMatchList,
+    pub users: UserList,
+}
+
+impl Store {
+    fn new() -> Store {
+        fs::create_dir_all("data").unwrap();
+        match Path::new("data/store.json").exists() {
+            false => Store {
+                matches: PoolMatchList::new(),
+                users: UserList::new(),
+            },
+            true => {
+                let contents = fs::read_to_string("data/store.json").unwrap();
+                serde_json::from_str(&contents).unwrap()
+            }
+        }
+    }
+    // TODO -> Store data
+    #[allow(dead_code)]
+    pub fn write(&self) {
+        let contents = serde_json::to_string(&self).unwrap();
+        fs::write("data/store.json", contents).unwrap();
+    }
+}
+
+pub static DATA: Lazy<Mutex<Store>> = Lazy::new(|| Mutex::new(Store::new()));

src/data/user.rs

@@ -0,0 +1,3 @@
+
+pub type PlayerId = u32;
+

src/endpoints.rs

@@ -0,0 +1,2 @@
+pub const MATCH: &str = "/api/post-match";
+pub const USER: &str = "/api/post-user";

src/main.rs

@@ -1,29 +1,67 @@
 mod components;
-mod templates;
+mod data;
+mod endpoints;
 mod error_views;
+#[cfg(engine)]
+mod server;
+mod templates;
 
 use perseus::prelude::*;
 use sycamore::prelude::view;
 
-#[perseus::main(perseus_axum::dflt_server)]
+cfg_if::cfg_if! {
+    if #[cfg(engine)] {
+        use std::net::SocketAddr;
+        use perseus::{
+            i18n::TranslationsManager,
+            server::ServerOptions,
+            stores::MutableStore,
+            turbine::Turbine,
+        };
+        use crate::server::routes::register_routes;
+    }
+}
+
+#[cfg(engine)]
+pub async fn dflt_server<M: MutableStore + 'static, T: TranslationsManager + 'static>(
+    turbine: &'static Turbine<M, T>,
+    opts: ServerOptions,
+    (host, port): (String, u16),
+) {
+    let addr: SocketAddr = format!("{}:{}", host, port)
+        .parse()
+        .expect("Invalid address provided to bind to.");
+    let mut app = perseus_axum::get_router(turbine, opts).await;
+
+    app = register_routes(app);
+
+    axum::Server::bind(&addr)
+        .serve(app.into_make_service())
+        .await
+        .unwrap();
+}
+
+#[perseus::main(dflt_server)]
 pub fn main<G: Html>() -> PerseusApp<G> {
-    use log::{info, warn};
     env_logger::init();
 
     PerseusApp::new()
+        .global_state_creator(crate::templates::global_state::get_global_state_creator())
         .template(crate::templates::index::get_template())
-        .template(crate::templates::long::get_template())
+        .template(crate::templates::add_game_form::get_template())
+        .template(crate::templates::one_v_one_board::get_template())
+        .template(crate::templates::overall_board::get_template())
         .error_views(crate::error_views::get_error_views())
         .index_view(|cx| {
             view! { cx,
-                html {
+                html (class = "flex w-full h-full"){
                     head {
                         meta(charset = "UTF-8")
                         meta(name = "viewport", content = "width=device-width, initial-scale=1.0")
                         // Perseus automatically resolves `/.perseus/static/` URLs to the contents of the `static/` directory at the project root
                         link(rel = "stylesheet", href = ".perseus/static/style.css")
                     }
-                    body {
+                    body (class = "w-full"){
                         // Quirk: this creates a wrapper `<div>` around the root `<div>` by necessity
                         PerseusRoot()
                     }

src/server/mod.rs

@@ -0,0 +1,2 @@
+pub mod routes;
+

src/server/routes.rs

@@ -0,0 +1,52 @@
+// (Server only) Routes
+
+use crate::{
+    data::{
+        pool_match::{PoolMatch, PoolMatchList, UserList},
+        store::DATA,
+    },
+    endpoints::MATCH,
+    endpoints::USER,
+};
+use axum::{
+    extract::Json,
+    routing::{post, Router},
+};
+use std::thread;
+
+pub fn register_routes(app: Router) -> Router {
+    let app = app.route(MATCH, post(post_match));
+    let app = app.route(USER, post(post_user));
+    app
+}
+
+async fn post_match(Json(pool_match): Json<PoolMatch>) -> Json<PoolMatchList> {
+    // Update the store with the new match
+    let matches = thread::spawn(move || {
+        // Get the store
+        let mut data = DATA.lock().unwrap();
+        (*data).matches.add_pool_match(pool_match);
+        println!("{:?}", (*data).matches.pool_matches);
+        (*data).matches.clone()
+    })
+    .join()
+    .unwrap();
+
+    Json(matches)
+}
+
+async fn post_user(user: String) -> Json<UserList> {
+    // Update the store with the new match
+    let users = thread::spawn(move || {
+        // Get the store
+        let mut data = DATA.lock().unwrap();
+        let user_id = (*data).users.add_user(user);
+        println!("Added new user id: {}\nAll users: {:?}", user_id, (*data).users);
+        (*data).users.clone()
+    })
+    .join()
+    .unwrap();
+
+    Json(users)
+}
+

src/templates/add_game_form.rs

@@ -0,0 +1,144 @@
+use crate::data::pool_match::MatchType;
+use crate::{components::layout::Layout, data::pool_match::MatchData};
+use perseus::prelude::*;
+use serde::{Deserialize, Serialize};
+use sycamore::prelude::*;
+use web_sys::Event;
+
+cfg_if::cfg_if! {
+    if #[cfg(client)] {
+        use crate::data::pool_match::{PoolMatch, PoolMatchList, UserList};
+        use crate::templates::global_state::AppStateRx;
+        use crate::endpoints::{MATCH, USER};
+        use crate::templates::get_api_path;
+        use chrono::Utc;
+    }
+}
+
+// Reactive page
+
+#[derive(Serialize, Deserialize, Clone, ReactiveState)]
+#[rx(alias = "PageStateRx")]
+struct PageState {
+    winner: String,
+    new_user: String,
+}
+
+fn add_game_form_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, state: &'a PageStateRx) -> View<G> {
+    let handle_add_match = move |_event: Event| {
+        #[cfg(client)]
+        {
+            // state.winner.get().as_ref().clone()
+            spawn_local_scoped(cx, async move {
+                let new_match = PoolMatch::new(
+                    MatchData {
+                        type_: MatchType::Standard8Ball,
+                        winners: vec![1],
+                        losers: vec![2, 3, 4],
+                    },
+                    Utc::now(),
+                );
+                let client = reqwest::Client::new();
+                let new_matches = client
+                    .post(get_api_path(MATCH).as_str())
+                    .json(&new_match)
+                    .send()
+                    .await
+                    .unwrap()
+                    .json::<PoolMatchList>()
+                    .await
+                    .unwrap();
+                let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+                global_state.matches.set(new_matches);
+            })
+        }
+    };
+
+    let handle_add_user = move |_event: Event| {
+        #[cfg(client)]
+        {
+            // state.winner.get().as_ref().clone()
+            spawn_local_scoped(cx, async move {
+                let client = reqwest::Client::new();
+                let new_users = client
+                    .post(get_api_path(USER).as_str())
+                    .body(state.new_user.get().as_ref().clone())
+                    .send()
+                    .await
+                    .unwrap()
+                    .json::<UserList>()
+                    .await
+                    .unwrap();
+                let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+                global_state.users.set(new_users);
+            })
+        }
+    };
+
+    view! { cx,
+        Layout(title = "Add Game Results") {
+            div (class = "flex flex-wrap") {
+                select {
+                    option (value="red")
+                    option (value="blue")
+                }
+            }
+            div (class = "flex flex-wrap") {
+                input (bind:value = state.winner,
+                       class = "appearance-none block w-full bg-gray-200 text-gray-700 border \
+                       border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none \
+                       focus:bg-white",)
+            }
+            div (class = "flex flex-wrap") {
+                button(on:click = handle_add_match,
+                       class = "flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 \
+                       hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded",
+                ) {
+                    "Add result"
+                }
+            }
+            div (class = "flex flex-wrap") {
+                input (bind:value = state.new_user,
+                       class = "appearance-none block w-full bg-gray-200 text-gray-700 border \
+                       border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none \
+                       focus:bg-white",)
+            }
+            div (class = "flex flex-wrap") {
+                button(on:click = handle_add_user,
+                       class = "flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 \
+                       hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded",
+                ) {
+                    "Add new user"
+                }
+            }
+        }
+    }
+}
+
+#[engine_only_fn]
+async fn get_request_state(
+    _info: StateGeneratorInfo<()>,
+    _req: Request,
+) -> Result<PageState, BlamedError<std::convert::Infallible>> {
+    Ok(PageState {
+        winner: "Ferris".to_string(),
+        new_user: "newguy".to_string(),
+    })
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Add Game Form" }
+    }
+}
+
+// Template
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("add-game-form")
+        .request_state_fn(get_request_state)
+        .view_with_state(add_game_form_page)
+        .head(head)
+        .build()
+}

src/templates/global_state.rs

@@ -0,0 +1,51 @@
+// Not a page, global state that is shared between all pages
+
+use crate::data::pool_match::PoolMatchList;
+use crate::data::pool_match::UserList;
+
+use perseus::{prelude::*, state::GlobalStateCreator};
+use serde::{Deserialize, Serialize};
+
+cfg_if::cfg_if! {
+    if #[cfg(engine)] {
+        use std::thread;
+        use std::ops::Deref;
+        use crate::data::store::DATA;
+    }
+}
+
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "AppStateRx")]
+pub struct AppState {
+    pub matches: PoolMatchList,
+    pub users: UserList,
+}
+
+pub fn get_global_state_creator() -> GlobalStateCreator {
+    GlobalStateCreator::new()
+        .build_state_fn(get_build_state)
+        .request_state_fn(get_request_state)
+}
+
+#[engine_only_fn]
+fn get_state() -> AppState {
+    let matches = thread::spawn(move || DATA.lock().unwrap().deref().matches.clone())
+        .join()
+        .unwrap();
+
+    let users = thread::spawn(move || DATA.lock().unwrap().deref().users.clone())
+        .join()
+        .unwrap();
+
+    AppState { matches, users }
+}
+
+#[engine_only_fn]
+pub async fn get_build_state() -> AppState {
+    get_state()
+}
+
+#[engine_only_fn]
+pub async fn get_request_state(_req: Request) -> AppState {
+    get_state()
+}

src/templates/index.rs

@@ -1,7 +1,6 @@
 use crate::components::layout::Layout;
 use perseus::prelude::*;
 use sycamore::prelude::*;
-use crate::templates::get_path;
 
 fn index_page<G: Html>(cx: Scope) -> View<G> {
     view! { cx,
@@ -9,7 +8,6 @@ fn index_page<G: Html>(cx: Scope) -> View<G> {
             // Anything we put in here will be rendered inside the `<main>` block of the layout
             p { "Hello World!" }
             br {}
-            a(href = "long") { "Long page" }
         }
     }
 }
@@ -22,8 +20,5 @@ fn head(cx: Scope) -> View<SsrNode> {
 }
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build(get_path("").as_str())
-        .view(index_page)
-        .head(head)
-        .build()
+    Template::build("").view(index_page).head(head).build()
 }

src/templates/long.rs

@@ -1,86 +0,0 @@
-use crate::components::layout::Layout;
-use perseus::prelude::*;
-use serde::{Deserialize, Serialize};
-use std::fs;
-use sycamore::prelude::*;
-use crate::templates::get_path;
-
-// Reactive page
-
-#[derive(Serialize, Deserialize, Clone, ReactiveState)]
-#[rx(alias = "PageStateRx")]
-struct PageState {
-    ip: String,
-    text: String,
-}
-
-fn request_state_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, state: &'a PageStateRx) -> View<G> {
-    view! { cx,
-        p {
-            (
-                format!("Your IP address is {}.", state.ip.get())
-            )
-        }
-        p {
-            (
-                state.text.get().repeat(5000)
-            )
-        }
-    }
-}
-
-#[engine_only_fn]
-async fn get_request_state(
-    _info: StateGeneratorInfo<()>,
-    req: Request,
-) -> Result<PageState, BlamedError<std::convert::Infallible>> {
-    let text = fs::read_to_string("static/test.txt")
-        .unwrap_or("~".to_string())
-        .parse()
-        .unwrap();
-
-    Ok(PageState {
-        ip: format!(
-            "{:?}",
-            req.headers()
-                // NOTE: This header can be trivially spoofed, and may well not be the user's actual
-                // IP address
-                .get("X-Forwarded-For")
-                .unwrap_or(&perseus::http::HeaderValue::from_str("hidden from view!").unwrap())
-        ),
-        text,
-    })
-}
-
-// Regular page
-
-fn long_page<G: Html>(cx: Scope) -> View<G> {
-    view! { cx,
-        Layout(title = "Long") {
-            // Anything we put in here will be rendered inside the `<main>` block of the layout
-            a(href = "") { "Index" }
-            br {}
-            p {
-                ("This is a test. ".repeat(5000))
-            }
-        }
-    }
-}
-
-#[engine_only_fn]
-fn head(cx: Scope) -> View<SsrNode> {
-    view! { cx,
-        title { "Long Page" }
-    }
-}
-
-// Template
-
-pub fn get_template<G: Html>() -> Template<G> {
-    // Template::build(get_full_path("long")).view(long_page).head(head).build()
-    Template::build(get_path("long").as_str())
-        .request_state_fn(get_request_state)
-        .view_with_state(request_state_page)
-        .head(head)
-        .build()
-}

src/templates/mod.rs

@@ -1,17 +1,22 @@
-use std::env;
-
+pub mod add_game_form;
+pub mod global_state;
 pub mod index;
-pub mod long;
+pub mod one_v_one_board;
+pub mod overall_board;
 
-pub fn get_path(path: &str) -> String {
-    // Get base path
-    match env::var("PERSEUS_BASE_PATH") {
-        Ok(env_path) => {
-            // Strip the slash on both sides for directory consistency
-            // let stripped_env = env_path.trim_start_matches("/").trim_end_matches("/");
-            // format!("{stripped_env}/{path}").to_string().trim_end_matches("/").to_owned()
-            path.to_owned()
+#[cfg(client)]
+use perseus::utils::get_path_prefix_client;
+
+#[allow(dead_code)]
+pub fn get_api_path(path: &str) -> String {
+    #[cfg(engine)]
+    {
+        path.to_string()
     }
-        Err(_) => path.to_owned(),
+    #[cfg(client)]
+    {
+        let origin = web_sys::window().unwrap().origin();
+        let base_path = get_path_prefix_client();
+        format!("{}{}{}", origin, base_path, path)
     }
 }

src/templates/one_v_one_board.rs

@@ -0,0 +1,39 @@
+use crate::components::layout::Layout;
+use perseus::prelude::*;
+use serde::{Deserialize, Serialize};
+use sycamore::prelude::*;
+
+#[derive(Serialize, Deserialize, Clone, ReactiveState)]
+#[rx(alias = "PageStateRx")]
+struct PageState {}
+
+fn one_v_one_board_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, _state: &'a PageStateRx) -> View<G> {
+    view! { cx,
+        Layout(title = "1v1 Leaderboard") {
+            p { "leaderboard" }
+        }
+    }
+}
+
+#[engine_only_fn]
+async fn get_request_state(
+    _info: StateGeneratorInfo<()>,
+    _req: Request,
+) -> Result<PageState, BlamedError<std::convert::Infallible>> {
+    Ok(PageState {})
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "1v1 Leaderboard" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("one-v-one-board")
+        .request_state_fn(get_request_state)
+        .view_with_state(one_v_one_board_page)
+        .head(head)
+        .build()
+}

src/templates/overall_board.rs

@@ -0,0 +1,72 @@
+use crate::{components::layout::Layout, templates::global_state::AppStateRx, data::user::PlayerId};
+
+use perseus::prelude::*;
+use serde::{Deserialize, Serialize};
+use sycamore::prelude::*;
+
+use crate::data::pool_match::PoolMatch;
+
+#[derive(Serialize, Deserialize, Clone, ReactiveState)]
+#[rx(alias = "PageStateRx")]
+struct PageState {}
+
+fn format_list_or_single(to_format: &Vec<PlayerId>) -> String{
+    match to_format.len() {
+        1 => to_format[0].to_string(),
+        _ => format!("{:?}", to_format),
+    }
+}
+
+fn overall_board_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, _state: &'a PageStateRx) -> View<G> {
+    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+
+    view! { cx,
+        Layout(title = "Overall Leaderboard") {
+            ul {
+                (View::new_fragment(
+                    global_state.matches.get()
+                        .pool_matches
+                        .iter()
+                        .rev()
+                        .map(|item: &PoolMatch| {
+                            let game = item.clone();
+                            
+                            view! { cx,
+                                li (class = "text-blue-700", id = "ha",) {
+                                    (game.id)
+                                    ("  ")
+                                    (format_list_or_single(&game.data.winners))
+                                    ("  ")
+                                    (format_list_or_single(&game.data.losers))
+                                }
+                            }
+                        })
+                        .collect(),
+                ))
+            }
+        }
+    }
+}
+
+#[engine_only_fn]
+async fn get_request_state(
+    _info: StateGeneratorInfo<()>,
+    _req: Request,
+) -> Result<PageState, BlamedError<std::convert::Infallible>> {
+    Ok(PageState {})
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Overall leaderboard" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("overall-board")
+        .request_state_fn(get_request_state)
+        .view_with_state(overall_board_page)
+        .head(head)
+        .build()
+}

style/tailwind.css

@@ -2,47 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-/* This removes the margins inserted by default around pages */
-* {
-    margin: 0;
-}
-
-/* This makes all the elements that wrap our code take up the whole page, so that we can put things at the bottom.
- * Without this, the footer would be just beneath the content if the content doesn't fill the whole page (try disabling this).
-*/
-html, body, #root {
-    height: 100%;
-}
-/* This makes the `<div>` that wraps our whole app use CSS Grid to display three sections: the header, content, and footer. */
-#root {
-    display: grid;
-    grid-template-columns: 1fr;
-    /* The header will be automatically sized, the footer will be as small as possible, and the content will take up the rest of the space in the middle */
-    grid-template-rows: auto 1fr min-content;
-    grid-template-areas:
-        'header'
-        'main'
-        'footer';
-}
-header {
-    /* Put this in the right place in the grid */
-    grid-area: header;
-    /* Make this float over the content so it persists as we scroll */
-    position: fixed;
-    top: 0;
-    z-index: 99;
-    /* Make this span the whole page */
-    width: 100%;
-}
-main {
-    /* Put this in the right place in the grid */
-    grid-area: main;
-    /* The header is positioned 'floating' over the content, so we have to make sure this doesn't go behind the header, or it would be invisible.
-     * You may need to adjust this based on screen size, depending on how the header expands.
-    */
-    margin-top: 5rem;
-}
-footer {
-    /* Put this in the right place in the grid */
-    grid-area: footer;
-}