itsscb/wordl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): restructure page

Browse Source 
feat(frontend): restructure page
This commit is contained in:
itsscb 2024-08-28 17:25:34 +02:00 committed by GitHub
commit a47558901a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 168 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/pages/home.rs
View File

@ -1,7 +1,7 @@
use gloo_net::http::Request; use gloo_net::http::Request;
use web_sys::wasm_bindgen::convert::OptionIntoWasmAbi; use web_sys::wasm_bindgen::convert::OptionIntoWasmAbi;
use web_sys::wasm_bindgen::JsCast; use web_sys::wasm_bindgen::JsCast;
use web_sys::{HtmlElement, HtmlInputElement}; use web_sys::HtmlElement;
use yew::prelude::*; use yew::prelude::*;
use yew::{classes, function_component, Callback, Html}; use yew::{classes, function_component, Callback, Html};
@ -44,7 +44,6 @@ fn string_to_html(input: &[CharStatus<String>]) -> Html {
"flex", "flex",
"flex-row", "flex-row",
"gap-4", "gap-4",
"mt-4",
"notranslate", "notranslate",
) )
} }
@ -324,17 +323,21 @@ pub fn Home() -> Html {
classes!( classes!(
"flex", "flex",
"flex-col", "flex-col",
"mt-4",
"items-center", "items-center",
"h-[90vh]", "h-[90vh]",
"pt-12",
) )
} }
> >
<div <div
class="h-5/6 flex flex-col" class="h-5/6 flex flex-col items-center"
> >
<div class="mb-12">
{ for submitted_words.iter().map(|e| {string_to_html(e)})}
</div>
<form <form
class="order-last mt-8" class="mb-4"
> >
<div <div
class={ class={
@ -451,36 +454,63 @@ pub fn Home() -> Html {
} }
</div> </div>
</form> </form>
<div class="!order-first"> {
{ for submitted_words.iter().map(|e| {string_to_html(e)})} if *loading {
</div> html!{<></>}
</div> } else {
<button html!{
tabindex={"5"} <div
class={ class={
classes!( classes!(
"w-72", "w-full",
"flex",
"justify-end",
)
}
>
<button
tabindex={(*length + 1).to_string()}
class={
classes!(
"w-24",
"h-16", "h-16",
"text-2xl", "text-2xl",
"font-bold", "font-bold",
"rounded-xl", "rounded-xl",
"bg-green-700", "bg-green-700",
"order-last", "flex",
"items-center",
"justify-center",
) )
} }
onclick={on_submit} type="submit"> onclick={on_submit} type="submit">
{ {
if *game_over { if *game_over {
"Play again" html!{
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewBox="0 -960 960 960" width="24px" fill="white">
<path d="M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62 62-56 58-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Z"/>
</svg>
}
} }
else { else {
"Submit" html!{
<svg class="w-12 h-12" fill="white" viewBox="0 0 24 24">
<path d="M7.629 12.172l-3.172-3.172a1 1 0 10-1.414 1.414l4.586 4.586a1 1 0 001.414 0l10-10a1 1 0 00-1.414-1.414l-9.172 9.172z" />
</svg>
}
} }
} }
</button> </button>
</div> </div>
} }
} }
}
</div>
</div>
}
}
}; };
view() view()