Worked with @jkassman on match adding code

README.md

@@ -42,7 +42,7 @@ https://daisyui.com/components/button/
 
 `cargo install sea-orm-cli@1.0.0-rc.5`
 
-## 5. Install tailwindcss, for styling
+## 6. Install tailwindcss, for styling
 
 `npm install -D tailwindcss`
 

src/capsules/forgot_password_form.rs

@@ -60,10 +60,10 @@ fn forgot_password_form_capsule<G: Html>(
 ) -> View<G> {
     // If there's a tentative username, set it
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
-    if let Some(username) = (*global_state.auth.username.get()).clone() {
-        state.username.set(username);
-        global_state.auth.username.set(None);
-    }
+    state
+        .username
+        .set((*global_state.auth.pending_username.get()).clone());
+    global_state.auth.pending_username.set(String::new());
 
     let close_modal = move |_event: Event| {
         #[cfg(client)]
@@ -134,7 +134,7 @@ fn forgot_password_form_capsule<G: Html>(
                 input (bind:value = state.how_to_reach, class = "input input-bordered w-full")
 
                 // Submit button
-                div (class = "flex justify-center") {
+                div (class = "flex justify-center mt-6") {
                     button (on:click = handle_submit, class="btn"){"Submit"}
                 }
             }

src/capsules/login_form.rs

@@ -60,10 +60,10 @@ fn login_form_capsule<G: Html>(
 ) -> View<G> {
     // If there's a tentative username, set it
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
-    if let Some(username) = (*global_state.auth.username.get()).clone() {
-        state.username.set(username);
-        global_state.auth.username.set(None);
-    }
+    state
+        .username
+        .set((*global_state.auth.pending_username.get()).clone());
+    global_state.auth.pending_username.set(String::new());
 
     let close_modal = move |_event: Event| {
         #[cfg(client)]
@@ -85,8 +85,8 @@ fn login_form_capsule<G: Html>(
                 // Update tentative username
                 global_state
                     .auth
-                    .username
-                    .set(Some((*state.username.get()).clone()));
+                    .pending_username
+                    .set((*state.username.get()).clone());
 
                 // Open new modal
                 global_state

src/capsules/register_form.rs

@@ -109,8 +109,8 @@ fn register_form_capsule<G: Html>(
                 // Update tentative username
                 global_state
                     .auth
-                    .username
-                    .set(Some((*state.username.get()).clone()));
+                    .pending_username
+                    .set((*state.username.get()).clone());
 
                 // Open login modal
                 global_state.modals_open.login.set(OpenState::Open);
@@ -163,7 +163,7 @@ fn register_form_capsule<G: Html>(
                 })
 
                 // Register button
-                div (class = "flex justify-center") {
+                div (class = "flex justify-center mt-6") {
                     button (on:click = handle_register, class="btn"){"Register"}
                 }
             }

src/components/header.rs

@@ -3,8 +3,9 @@ use sycamore::prelude::*;
 use web_sys::Event;
 
 use crate::{
+    components::static_components::menu_button::MenuButtonSvg,
     global_state::AppStateRx,
-    state_enums::{GameState, LoginState},
+    state_enums::{ContentState, LoginState},
 };
 
 cfg_if::cfg_if! {
@@ -17,12 +18,81 @@ cfg_if::cfg_if! {
 
 #[derive(Prop)]
 pub struct HeaderProps {
-    pub game: GameState,
+    pub content_state: ContentState,
+}
+
+// TODO update to have user preferences
+#[component]
+fn LinkList<G: Html>(cx: Scope) -> View<G> {
+    // Get global state to get style info
+    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+
+    view! { cx,
+        li {
+            a (href = "pool") {
+                label (class = "swap") {
+                    input (
+                        type="radio",
+                        name = "theme-dropdown",
+                        class = "theme-controller",
+                        value = (*global_state.style.theme.pool.get()),
+                    ) {}
+                    p (class = (
+                        if *global_state.style.theme.current.get() == *global_state.style.theme.pool.get(){
+                            "font-bold"
+                        }
+                        else {
+                            ""
+                        }
+                    )){ "Pool" }
+                }
+            }
+        }
+        li {
+            a (href = "table_tennis") {
+                label (class = "swap") {
+                    input (
+                        type="radio",
+                        name = "theme-dropdown",
+                        class = "theme-controller",
+                        value = (*global_state.style.theme.table_tennis.get()),
+                    ) {}
+                    p (class = (
+                        if *global_state.style.theme.current.get() == *global_state.style.theme.table_tennis.get(){
+                            "font-bold"
+                        }
+                        else {
+                            ""
+                        }
+                    )){ "Table Tennis" }
+                }
+            }
+        }
+        li {
+            a (href = "pickleball") {
+                label (class = "swap") {
+                    input (
+                        type="radio",
+                        name = "theme-dropdown",
+                        class = "theme-controller",
+                        value = (*global_state.style.theme.pickleball.get()),
+                    ) {}
+                    p (class = (
+                        if *global_state.style.theme.current.get() == *global_state.style.theme.pickleball.get(){
+                            "font-bold"
+                        }
+                        else {
+                            ""
+                        }
+                    )){ "Pickleball" }
+                }
+            }
+        }
+    }
 }
 
 #[component]
 pub fn Header<G: Html>(cx: Scope, props: HeaderProps) -> View<G> {
-    // Get global state to get authentication info
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
     let handle_log_in = move |_event: Event| {
@@ -56,50 +126,46 @@ pub fn Header<G: Html>(cx: Scope, props: HeaderProps) -> View<G> {
     };
 
     view! { cx,
-        header {
-            div (class = "flex items-center justify-between w-full md:text-center h-20") {
-                div(class = "flex-1") {}
-
+        header (class="navbar bg-base-100") {
+            // Navigation
+            div (class="navbar-start") {
+                div (class="dropdown") {
+                    div (tabindex="0", role="button", class="btn btn-ghost lg:hidden") { MenuButtonSvg {} }
+                    ul (tabindex = "0", class = "menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow" ) {
+                        LinkList {}
+                    }
+                }
+                ul (class="menu menu-horizontal px-1 hidden lg:flex") {
+                    LinkList {}
+                }
+            }
             // Title
-                div(class = "text-gray-700 text-2xl font-semibold py-2") {
-                   (props.game.to_string()) " - Season 1"
+            div (class="navbar-center lg:flex") {
+                (props.content_state.to_string())
             }
-
-                // Login / register or user buttons
-                div(class = "flex-1 py-2") {(
-                    match *global_state.auth.state.get() {
-                        LoginState::NotAuthenticated => {
-                            view! { cx,
-                                button(on:click = handle_register, class = "text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700") {
-                                    "Register"
-                                }
-                                button(on:click = handle_log_in, class = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800") {
-                                    "Log in"
-                                }
-                            }
-                        }
-                        LoginState::Authenticated => {
-                            view! { cx,
-                                div {
-                                    "Hello "
-                                        (global_state.auth.username.get().as_ref().clone().unwrap_or("".to_owned()))
-                                }
-                                button(on:click = handle_log_out, class = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800") {
+            // User buttons
+            div (class="navbar-end") {
+                (match *global_state.auth.state.get() {
+                    LoginState::Authenticated => { view! { cx,
+                        button(on:click = handle_log_out, class = "btn btn-primary mr-2") {
                             "Log out"
                         }
+                    } },
+                    LoginState::NotAuthenticated => { view! { cx,
+                        button(on:click = handle_register, class = "btn btn-primary mr-2") {
+                            "Register"
                         }
+                        button(on:click = handle_log_in, class = "btn btn-secondary mr-2") {
+                            "Log in"
                         }
-                        // Will only appear for a few seconds
-                        LoginState::Unknown => {
-                            view! { cx,
-                                div (class = "px-5 py-2.5 me-2 mb-2"){
+                    } },
+                    LoginState::Unknown => { view! { cx,
+                        div (class = "px-5 py-2.5 me-2 mb-2") {
                             "Loading..."
                         }
-                            }
-                        },
+                    } },
                 })
             }
         }
     }
-    }
 }

src/components/layout.rs

@@ -6,14 +6,14 @@ use crate::{
     },
     components::header::Header,
     global_state::AppStateRx,
-    state_enums::{GameState, OpenState},
+    state_enums::{ContentState, OpenState},
 };
 use perseus::prelude::*;
 use sycamore::prelude::*;
 
 #[derive(Prop)]
 pub struct LayoutProps<'a, G: Html> {
-    pub game: GameState,
+    pub content_state: ContentState,
     pub children: Children<'a, G>,
 }
 
@@ -22,19 +22,39 @@ pub struct LayoutProps<'a, G: Html> {
 #[component]
 pub fn Layout<'a, G: Html>(
     cx: Scope<'a>,
-    LayoutProps { game, children }: LayoutProps<'a, G>,
+    LayoutProps {
+        content_state,
+        children,
+    }: LayoutProps<'a, G>,
 ) -> View<G> {
-    let children = children.call(cx);
-
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+    // Set the theme
+    global_state.style.theme.current.set(match content_state {
+        ContentState::None => (*global_state.style.theme.default.get()).clone(),
+        ContentState::Pool => (*global_state.style.theme.pool.get()).clone(),
+        ContentState::Pickleball => (*global_state.style.theme.pickleball.get()).clone(),
+        ContentState::TableTennis => (*global_state.style.theme.table_tennis.get()).clone(),
+    });
+    #[cfg(client)]
+    let _ = web_sys::window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .document_element()
+        .unwrap()
+        .set_attribute("data-theme", &global_state.style.theme.current.get());
+
+    let children = children.call(cx);
 
     // Check if the client is authenticated or not
     #[cfg(client)]
     global_state.auth.detect_state();
 
+    let content_state_header = content_state.clone();
+
     view! { cx,
         // Main page header, including login functionality
-        Header(game = game)
+        Header(content_state = content_state_header)
 
         // Modals
         section(class = "flex-2") {
@@ -83,24 +103,25 @@ pub fn Layout<'a, G: Html>(
         }
 
         main(style = "my-8") {
+            (match content_state {
+                ContentState::None => view!{ cx, },
+                ContentState::Pool => view!{ cx,
                     // Body header
-            div {
                     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",
+                                a(href = "pool/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",
+                                a(href = "pool/one-v-one-board",
                                     class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
                                 ) { "1v1 Leaderboard" }
-                            a(href = "overall-board",
+                                a(href = "pool/overall-board",
                                     class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
                                 ) { "Overall Leaderboard" }
                             }
                         }
                     }
-            }
                     // Content body
                     div(class = "container mx-auto px-6") {
                         div(class = "md:flex mt-8 md:-mx-4") {
@@ -109,6 +130,10 @@ pub fn Layout<'a, G: Html>(
                             }
                         }
                     }
+                },
+                ContentState::Pickleball => view!{ cx, },
+                ContentState::TableTennis => view!{ cx, },
+            })
         }
     }
 }

src/components/static_components/menu_button.rs

@@ -0,0 +1,20 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+#[component]
+pub fn MenuButtonSvg<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        svg (
+            xmlns="http://www.w3.org/2000/svg",
+            class="h-5 w-5",
+            fill="none",
+            viewBox="0 0 24 24",
+            stroke="currentColor"){
+                path (
+                    stroke-linecap="round",
+                    stroke-linejoin="round",
+                    stroke-width="2",
+                    d="M4 6h16M4 12h8m-8 6h16") {}
+        }
+    }
+}

src/components/static_components/mod.rs

@@ -1,2 +1,3 @@
 pub mod close_button;
 pub mod indicator;
+pub mod menu_button;

src/endpoints.rs

@@ -1,5 +1,6 @@
 pub const REGISTER: &str = "/api/register";
 pub const LOGIN: &str = "/api/login";
+pub const ADD_MATCH: &str = "/api/add-match";
 // TODO -> remove once it's used
 #[cfg(engine)]
 pub const LOGIN_TEST: &str = "/api/login-test";

src/global_state.rs

@@ -15,17 +15,76 @@ pub struct AppState {
     pub auth: AuthData,
     #[rx(nested)]
     pub modals_open: ModalOpenData,
+    #[rx(nested)]
+    pub style: StyleData,
 }
 
 #[derive(Serialize, Deserialize, ReactiveState, Clone)]
 #[rx(alias = "AuthDataRx")]
 pub struct AuthData {
     pub state: LoginState,
+    pub pending_username: String,
     pub username: Option<String>,
     pub remember_me: Option<bool>,
     pub auth_info: Option<WebAuthInfo>,
 }
 
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "ModalOpenDataRx")]
+pub struct ModalOpenData {
+    pub login: OpenState,
+    pub register: OpenState,
+    pub forgot_password: OpenState,
+}
+
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "StyleDataRx")]
+pub struct StyleData {
+    #[rx(nested)]
+    pub theme: ThemeData,
+}
+
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "ThemeDataRx")]
+pub struct ThemeData {
+    pub current: String,
+    pub pool: String,
+    pub pickleball: String,
+    pub table_tennis: String,
+    pub default: String,
+}
+
+pub fn get_global_state_creator() -> GlobalStateCreator {
+    GlobalStateCreator::new().build_state_fn(get_build_state)
+}
+
+#[engine_only_fn]
+pub async fn get_build_state() -> AppState {
+    AppState {
+        auth: AuthData {
+            state: LoginState::Unknown,
+            pending_username: String::new(),
+            username: None,
+            remember_me: None,
+            auth_info: None,
+        },
+        modals_open: ModalOpenData {
+            login: OpenState::Closed,
+            register: OpenState::Closed,
+            forgot_password: OpenState::Closed,
+        },
+        style: StyleData {
+            theme: ThemeData {
+                current: "light".to_owned(),
+                pool: "autumn".to_owned(),
+                pickleball: "lemonade".to_owned(),
+                table_tennis: "nord".to_owned(),
+                default: "light".to_owned(),
+            },
+        },
+    }
+}
+
 impl AuthDataRx {
     #[cfg(client)]
     pub fn handle_log_in(&self, auth_info: WebAuthInfo) {
@@ -72,35 +131,6 @@ impl AuthDataRx {
     }
 }
 
-#[derive(Serialize, Deserialize, ReactiveState, Clone)]
-#[rx(alias = "ModalOpenDataRx")]
-pub struct ModalOpenData {
-    pub login: OpenState,
-    pub register: OpenState,
-    pub forgot_password: OpenState,
-}
-
-pub fn get_global_state_creator() -> GlobalStateCreator {
-    GlobalStateCreator::new().build_state_fn(get_build_state)
-}
-
-#[engine_only_fn]
-pub async fn get_build_state() -> AppState {
-    AppState {
-        auth: AuthData {
-            state: LoginState::Unknown,
-            username: None,
-            remember_me: None,
-            auth_info: None,
-        },
-        modals_open: ModalOpenData {
-            login: OpenState::Closed,
-            register: OpenState::Closed,
-            forgot_password: OpenState::Closed,
-        },
-    }
-}
-
 // Client only code to check if they're authenticated
 #[cfg(client)]
 impl AuthDataRx {

src/main.rs

@@ -70,17 +70,20 @@ pub fn main<G: Html>() -> PerseusApp<G> {
 
     PerseusApp::new()
         .global_state_creator(crate::global_state::get_global_state_creator())
+        .template(crate::templates::index::get_template())
+        .template(crate::templates::pickleball::index::get_template())
         .template(crate::templates::pool::index::get_template())
         .template(crate::templates::pool::add_game_form::get_template())
         .template(crate::templates::pool::one_v_one_board::get_template())
         .template(crate::templates::pool::overall_board::get_template())
+        .template(crate::templates::table_tennis::index::get_template())
         .capsule_ref(&*crate::capsules::login_form::LOGIN_FORM)
         .capsule_ref(&*crate::capsules::forgot_password_form::FORGOT_PASSWORD_FORM)
         .capsule_ref(&*crate::capsules::register_form::REGISTER_FORM)
         .error_views(crate::error_views::get_error_views())
         .index_view(|cx| {
             view! { cx,
-                html (class = "flex w-full h-full"){
+                html (class = "flex w-full h-full", data-theme = "light"){
                     head {
                         meta(charset = "UTF-8")
                         meta(name = "viewport", content = "width=device-width, initial-scale=1.0")

src/models/game_result.rs

@@ -0,0 +1,10 @@
+use serde::{Deserialize, Serialize};
+
+use crate::entity::sea_orm_active_enums::GameType;
+
+#[derive(Serialize, Deserialize, Clone)]
+pub struct GameResult {
+    pub winner: String,
+    pub loser: String,
+    pub game_type: GameType,
+}

src/models/mod.rs

@@ -1,2 +1,3 @@
 pub mod auth;
+pub mod game_result;
 pub mod generic;

src/server/mod.rs

@@ -1,3 +1,4 @@
 pub mod auth;
+pub mod pool;
 pub mod routes;
 pub mod server_state;

src/server/pool/add_match.rs

@@ -0,0 +1,25 @@
+use crate::{
+    // entity::{prelude::*, user},
+    models::{game_result::GameResult, generic::GenericResponse},
+    server::server_state::ServerState,
+};
+use axum::{
+    extract::{Json, State},
+    http::StatusCode,
+};
+
+pub async fn post_game_result(
+    State(state): State<ServerState>,
+    Json(game_result): Json<GameResult>,
+) -> (StatusCode, Result<(), Json<GenericResponse>>) {
+    (
+        StatusCode::BAD_REQUEST,
+        Err(Json(GenericResponse {
+            status: "Oopsie we had a fucky wucky".to_owned(),
+        })),
+    )
+
+    // if (game_result.loser == "ferris"){
+    //     throw 406 "Not Acceptable; Ferris cannot lose"
+    // }
+}

src/server/pool/mod.rs

@@ -0,0 +1 @@
+pub mod add_match;

src/server/routes.rs

@@ -1,5 +1,5 @@
 // (Server only) Routes
-use crate::endpoints::{FORGOT_PASSWORD, LOGIN, LOGIN_TEST, REGISTER};
+use crate::endpoints::{ADD_MATCH, FORGOT_PASSWORD, LOGIN, LOGIN_TEST, REGISTER};
 use axum::routing::{post, Router};
 
 use super::{
@@ -8,6 +8,7 @@ use super::{
         login::{post_login_user, post_test_login},
         register::post_register_user,
     },
+    pool::add_match::post_game_result,
     server_state::ServerState,
 };
 
@@ -15,6 +16,7 @@ pub fn get_api_router(state: ServerState) -> Router {
     Router::new()
         .route(REGISTER, post(post_register_user))
         .route(LOGIN, post(post_login_user))
+        .route(ADD_MATCH, post(post_game_result))
         .route(LOGIN_TEST, post(post_test_login))
         .route(FORGOT_PASSWORD, post(post_forgot_password))
         .with_state(state)

src/state_enums.rs

@@ -10,23 +10,23 @@ pub enum LoginState {
 }
 
 #[derive(Serialize, Deserialize, Clone)]
-pub enum GameState {
+pub enum ContentState {
     None,
     Pool,
     Pickleball,
     TableTennis,
 }
 
-impl Display for GameState {
+impl Display for ContentState {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         write!(
             f,
             "{}",
             match self {
-                GameState::None => "",
-                GameState::Pool => "Pool",
-                GameState::Pickleball => "Pickle Ball",
-                GameState::TableTennis => "Table Tennis",
+                ContentState::None => "",
+                ContentState::Pool => "Pool",
+                ContentState::Pickleball => "Pickle Ball",
+                ContentState::TableTennis => "Table Tennis",
             }
         )
     }

src/templates/index.rs

@@ -0,0 +1,24 @@
+use crate::{components::layout::Layout, state_enums::ContentState};
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+fn index_page<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        Layout(content_state = ContentState::None) {
+            // Anything we put in here will be rendered inside the `<main>` block of the layout
+            p { "Hello World!" }
+            br {}
+        }
+    }
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Index Page" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("").view(index_page).head(head).build()
+}

src/templates/mod.rs

@@ -1,3 +1,4 @@
+pub mod index;
 pub mod pickleball;
 pub mod pool;
 pub mod table_tennis;

src/templates/pickleball/index.rs

@@ -0,0 +1,27 @@
+use crate::{components::layout::Layout, state_enums::ContentState};
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+fn index_page<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        Layout(content_state = ContentState::Pickleball) {
+            // Anything we put in here will be rendered inside the `<main>` block of the layout
+            p { "Hello World!" }
+            br {}
+        }
+    }
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Index Page" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("pickleball")
+        .view(index_page)
+        .head(head)
+        .build()
+}

src/templates/pickleball/mod.rs

@@ -0,0 +1 @@
+pub mod index;

src/templates/pool/add_game_form.rs

@@ -1,70 +1,80 @@
-use crate::{components::layout::Layout, state_enums::GameState};
+use crate::{
+    components::{layout::Layout, sub_components::error_block::ErrorBlock},
+    state_enums::ContentState,
+};
 use perseus::prelude::*;
 use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+cfg_if::cfg_if! {
+    if #[cfg(client)] {
+        use crate::{
+            endpoints::ADD_MATCH,
+            models::{game_result::GameResult, generic::GenericResponse},
+            templates::get_api_path,
+        };
+
+        use crate::entity::sea_orm_active_enums::GameType;
+        use reqwest::StatusCode;
+    }
+}
+
 // Reactive page
 
 #[derive(Serialize, Deserialize, Clone, ReactiveState)]
 #[rx(alias = "PageStateRx")]
 struct PageState {
     winner: String,
-    new_user: String,
+    loser: String,
+    error: 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 var_name = async move {
+                let game_result = GameResult {
+                    winner: (*state.winner.get()).clone(),
+                    loser: (*state.loser.get()).clone(),
+                    game_type: GameType::Pool,
                 };
 
-    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 response = client
+                    .post(get_api_path(ADD_MATCH).as_str())
+                    .json(&game_result)
+                    .send()
+                    .await
+                    .unwrap();
+
+                if response.status() != StatusCode::OK {
+                    let response = response.json::<GenericResponse>().await.unwrap();
+                    state.error.set(response.status.to_string());
+                    return;
+                }
+
+                // let response = response.json::<())>().await.unwrap();
+            };
+            let var_name = var_name;
+            spawn_local_scoped(cx, var_name)
         }
     };
 
     view! { cx,
-        Layout(game = GameState::Pool) {
-            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"
-                }
+        Layout(content_state = ContentState::Pool) {
+
+            ErrorBlock(error = state.error.clone())
+
+            div (class = "label") { span (class = "label-text") { "Winner" } }
+            input (bind:value = state.winner, class = "input input-bordered w-full m-2")
+
+            div (class = "label") { span (class = "label-text") { "Loser" } }
+            input (bind:value = state.loser, class = "input input-bordered w-full m-2")
+
+            div (class = "flex justify-center") {
+                button (on:click = handle_add_match, class="btn"){"Record Match"}
             }
         }
     }
@@ -76,8 +86,9 @@ async fn get_request_state(
     _req: Request,
 ) -> Result<PageState, BlamedError<std::convert::Infallible>> {
     Ok(PageState {
-        winner: "Ferris".to_owned(),
-        new_user: "newguy".to_owned(),
+        winner: String::new(),
+        loser: String::new(),
+        error: String::new(),
     })
 }
 
@@ -91,7 +102,7 @@ fn head(cx: Scope) -> View<SsrNode> {
 // Template
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("add-game-form")
+    Template::build("pool/add-game-form")
         .request_state_fn(get_request_state)
         .view_with_state(add_game_form_page)
         .head(head)

src/templates/pool/index.rs

@@ -1,10 +1,10 @@
-use crate::{components::layout::Layout, state_enums::GameState};
+use crate::{components::layout::Layout, state_enums::ContentState};
 use perseus::prelude::*;
 use sycamore::prelude::*;
 
 fn index_page<G: Html>(cx: Scope) -> View<G> {
     view! { cx,
-        Layout(game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             // Anything we put in here will be rendered inside the `<main>` block of the layout
             p { "Hello World!" }
             br {}
@@ -20,5 +20,5 @@ fn head(cx: Scope) -> View<SsrNode> {
 }
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("").view(index_page).head(head).build()
+    Template::build("pool").view(index_page).head(head).build()
 }

src/templates/pool/one_v_one_board.rs

@@ -1,4 +1,4 @@
-use crate::{components::layout::Layout, state_enums::GameState};
+use crate::{components::layout::Layout, state_enums::ContentState};
 use perseus::prelude::*;
 use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
@@ -9,7 +9,7 @@ struct PageState {}
 
 fn one_v_one_board_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, _state: &'a PageStateRx) -> View<G> {
     view! { cx,
-        Layout(game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             p { "leaderboard" }
         }
     }
@@ -31,7 +31,7 @@ fn head(cx: Scope) -> View<SsrNode> {
 }
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("one-v-one-board")
+    Template::build("pool/one-v-one-board")
         .request_state_fn(get_request_state)
         .view_with_state(one_v_one_board_page)
         .head(head)

src/templates/pool/overall_board.rs

@@ -1,4 +1,4 @@
-use crate::{components::layout::Layout, global_state::AppStateRx, state_enums::GameState};
+use crate::{components::layout::Layout, global_state::AppStateRx, state_enums::ContentState};
 
 use perseus::prelude::*;
 use serde::{Deserialize, Serialize};
@@ -12,7 +12,7 @@ fn overall_board_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, _state: &'a PageSta
     let _global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
     view! { cx,
-        Layout(game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             ul {
                 (View::new_fragment(
                     vec![],
@@ -38,7 +38,7 @@ fn head(cx: Scope) -> View<SsrNode> {
 }
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("overall-board")
+    Template::build("pool/overall-board")
         .request_state_fn(get_request_state)
         .view_with_state(overall_board_page)
         .head(head)

src/templates/table_tennis/index.rs

@@ -0,0 +1,27 @@
+use crate::{components::layout::Layout, state_enums::ContentState};
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+fn index_page<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        Layout(content_state = ContentState::TableTennis) {
+            // Anything we put in here will be rendered inside the `<main>` block of the layout
+            p { "Hello World!" }
+            br {}
+        }
+    }
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Index Page" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("table_tennis")
+        .view(index_page)
+        .head(head)
+        .build()
+}

src/templates/table_tennis/mod.rs

@@ -0,0 +1 @@
+pub mod index;

src/templates/user/mod.rs

@@ -0,0 +1 @@
+

tailwind.config.js

@@ -14,6 +14,6 @@ module.exports = {
   variants: {},
   plugins: [require("daisyui")],
   daisyui: {
-    themes: ["light"],
+    themes: ["light", "dark", "lemonade", "autumn", "nord"],
   },
 };