cards/client/src/pages/home.rs

use crate::components::auth::*;
use crate::components::browser::*;
use crate::components::chat::*;
use crate::components::debug::*;
use crate::components::game::*;
use crate::components::websocket::*;
use leptos::prelude::*;
use thaw::*;

/// Default Home Page
#[component]
pub fn Home() -> impl IntoView {
    let modal = RwSignal::new(false);

    // Suppress modal during development
    if !cfg!(debug_assertions) {
        modal.set(true);
    };

    let theme = expect_context::<RwSignal<Theme>>();
    let icon = RwSignal::new(Some(icondata::BsMoon));

    let on_click = move |_| {
        icon.update(|icon| {
            *icon = match icon {
                Some(data) => {
                    if *data == icondata::BsMoon {
                        theme.set(Theme::light());
                        icondata::BsSun
                    } else {
                        theme.set(Theme::dark());
                        icondata::BsMoon
                    }
                }
                None => {
                    theme.set(Theme::dark());
                    icondata::BsMoon
                }
            }
            .into();
        });
    };

    view! {
        <ErrorBoundary fallback=|errors| {
            view! {
                <h1>"Uh oh! Something went wrong!"</h1>

                <p>"Errors: "</p>
                // Render a list of errors as strings - good for development purposes
                <ul>
                    {move || {
                        errors
                            .get()
                            .into_iter()
                            .map(|(_, e)| view! { <li>{e.to_string()}</li> })
                            .collect_view()
                    }}

                </ul>
            }
        }>

            <div class="container m-auto">
                <div
                    class="p-1 sm:p-5 sm:rounded-2xl sm:shadow-black sm:shadow-lg"
                    style="background-color: var(--colorNeutralBackground4);"
                >
                    <div class="flex flex-wrap justify-between">
                        <h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
                            "Cards For Humanity"
                        </h1>
                        <Button icon on_click appearance=ButtonAppearance::Transparent />
                    </div>

                    <Dialog open=modal>
                        <DialogSurface>
                            <DialogBody>
                                <DialogTitle>"Hey!"</DialogTitle>
                                <DialogContent>
                                    <p class="indent-2 text-pretty">
                                        {"Welcome! Thank you for helping me test this. Please let me know about any issues you may come across. Chances are you already know how to contact me but in case you don't you can email me at "}
                                        <Link href="mailto:adam@doordesk.net">
                                            adam@doordesk.net
                                        </Link>
                                        {". The server may go down from time to time as bugs are found and as I add updates. If you manage to crash the server or notice it down for a long time please tell me about it."}
                                    </p>
                                    <br />
                                    <p>Have fun!</p>
                                </DialogContent>
                                <DialogActions>
                                    <Button
                                        on_click=move |_| modal.set(false)
                                        appearance=ButtonAppearance::Primary
                                    >
                                        "Got it"
                                    </Button>
                                </DialogActions>
                            </DialogBody>
                        </DialogSurface>
                    </Dialog>

                    <Websocket />
                    <Auth />
                    <Divider />
                    <Browser />
                    <Divider />
                    <Game />
                    <Divider />
                    <Chat />
                    <Divider />
                    <Debug />
                    <Divider />
                    <div class="m-2">
                        <Link class="p-2" href="https://git.doordesk.net/adam/cards/">
                            "Git"
                        </Link>
                        <Link class="p-2" href="mailto:adam@doordesk.net">
                            "Email Me"
                        </Link>
                    </div>
                </div>
            </div>
        </ErrorBoundary>
    }
}