2 Commits

Author SHA1 Message Date
3e2163dbf3 Add themes, update layout, fix pages
Some checks failed
Build Crate / build (push) Failing after 1m53s
2024-08-31 03:12:28 -04:00
659037ec00 Moved pending username to new global state
Some checks failed
Build Crate / build (push) Failing after 1m45s
2024-08-30 03:38:02 -04:00
21 changed files with 360 additions and 134 deletions

View File

@@ -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)]

View File

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

View File

@@ -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);

View File

@@ -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..."
}
}
},
} },
})
}
}
}
}
}

View File

@@ -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, },
})
}
}
}

View File

@@ -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") {}
}
}
}

View File

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

View File

@@ -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 {

View File

@@ -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")

View File

@@ -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",
}
)
}

24
src/templates/index.rs Normal file
View File

@@ -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()
}

View File

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

View File

@@ -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()
}

View File

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

View File

@@ -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::*;
@@ -31,7 +31,7 @@ fn add_game_form_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, state: &'a PageStat
};
view! { cx,
Layout(game = GameState::Pool) {
Layout(content_state = ContentState::Pool) {
div (class = "flex flex-wrap") {
select {
option (value="red")
@@ -91,7 +91,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)

View File

@@ -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()
}

View File

@@ -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)

View File

@@ -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)

View File

@@ -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()
}

View File

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

View File

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