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

feat(frontend): restructure page

Browse Source
This commit is contained in:
itsscb 2024-08-28 17:25:02 +02:00
parent d234ab1f17
commit c2d4d15ab3
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 web_sys::wasm_bindgen::convert::OptionIntoWasmAbi;
use web_sys::wasm_bindgen::JsCast;
use web_sys::{HtmlElement, HtmlInputElement};
use web_sys::HtmlElement;
use yew::prelude::*;
use yew::{classes, function_component, Callback, Html};
@ -44,7 +44,6 @@ fn string_to_html(input: &[CharStatus<String>]) -> Html {
"flex",
"flex-row",
"gap-4",
"mt-4",
"notranslate",
)
}
@ -324,17 +323,21 @@ pub fn Home() -> Html {
classes!(
"flex",
"flex-col",
"mt-4",
"items-center",
"h-[90vh]",
"pt-12",
)
}
>
<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
class="order-last mt-8"
class="mb-4"
>
<div
class={
@ -451,36 +454,63 @@ pub fn Home() -> Html {
}
</div>
</form>
<div class="!order-first">
{ for submitted_words.iter().map(|e| {string_to_html(e)})}
</div>
</div>
<button
tabindex={"5"}
{
if *loading {
html!{<></>}
} else {
html!{
<div
class={
classes!(
"w-72",
"w-full",
"flex",
"justify-end",
)
}
>
<button
tabindex={(*length + 1).to_string()}
class={
classes!(
"w-24",
"h-16",
"text-2xl",
"font-bold",
"rounded-xl",
"bg-green-700",
"order-last",
"flex",
"items-center",
"justify-center",
)
}
onclick={on_submit} type="submit">
{
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 {
"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>
</div>
}
}
}
</div>
</div>
}
}
};
view()