diff --git a/frontend/src/pages/home.rs b/frontend/src/pages/home.rs
index f9a75f8..4476035 100644
--- a/frontend/src/pages/home.rs
+++ b/frontend/src/pages/home.rs
@@ -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,161 +323,192 @@ 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"
>
- <form
- class="order-last mt-8"
- >
- <div
- class={
- classes!(
- "flex",
- "flex-row",
- "font-bold",
- "text-lg",
- "gap-4",
- )
- }
- >
- {
- if *loading {
- html!(<p>{"Loading..."}</p>)
- }
- else if *game_over {
-
- let (text, color) = match *result {
- GameResult::Win => {
- ("FOUND", "bg-green-600")
- },
- GameResult::Lose => {
- ("WANTED", "bg-red-600")
+
+ <div class="mb-12">
+ { for submitted_words.iter().map(|e| {string_to_html(e)})}
+ </div>
+ <form
+ class="mb-4"
+ >
+ <div
+ class={
+ classes!(
+ "flex",
+ "flex-row",
+ "font-bold",
+ "text-lg",
+ "gap-4",
+ )
+ }
+ >
+ {
+ if *loading {
+ html!(<p>{"Loading..."}</p>)
}
- };
- html! (
- <div>
- <h1>{
- text
- }</h1>
- <ul
- class={
- classes!(
- "flex",
- "flex-row",
- "gap-4",
- "notranslate",
- )
- }
- >
- {
- word.chars().map(|e|{
+ else if *game_over {
- let text = e;
- html!{
- <li
+ let (text, color) = match *result {
+ GameResult::Win => {
+ ("FOUND", "bg-green-600")
+ },
+ GameResult::Lose => {
+ ("WANTED", "bg-red-600")
+ }
+ };
+ html! (
+ <div>
+ <h1>{
+ text
+ }</h1>
+ <ul
+ class={
+ classes!(
+ "flex",
+ "flex-row",
+ "gap-4",
+ "notranslate",
+ )
+ }
+ >
+ {
+ word.chars().map(|e|{
+
+ let text = e;
+ html!{
+ <li
+ class={
+ classes!(
+ "flex",
+ "items-center"
+ )
+ }
+ >
+ <span
class={
classes!(
- "flex",
- "items-center"
+ "w-16",
+ "h-16",
+ "text-center",
+ "py-4",
+ "font-bold",
+ "text-lg",
+ {color},
)
}
- >
- <span
- class={
- classes!(
- "w-16",
- "h-16",
- "text-center",
- "py-4",
- "font-bold",
- "text-lg",
- {color},
- )
- }
- >
- {text}
- </span>
- </li>
- }}).collect::<Html>()
- }
- </ul>
- </div>
- )
- }
- else if !*game_over {
- node_refs.iter().enumerate().map(|(index, node_ref)| {
- let on_focus = {
- let curr_index = curr_index.clone();
-
- Callback::from(move |e: FocusEvent| {
- let target = e.target_unchecked_into::<web_sys::HtmlElement>();
- if let Some(index) = target.get_attribute("tabindex") {
- if let Ok(i) = index.parse::<usize>() {
- curr_index.set(i);
- }
+ >
+ {text}
+ </span>
+ </li>
+ }}).collect::<Html>()
}
-
- })
- };
- html! {
- <input
- onkeyup={on_enter.clone()}
- oninput={on_input.clone()}
- tabindex={index.to_string()}
- ref={node_ref.clone()}
- value={input_values[index].clone()}
- onfocus={on_focus.clone()}
- class={
- classes!(
- "w-16",
- "h-16",
- "text-center",
- "bg-gray-600"
- )
- }
- />
+ </ul>
+ </div>
+ )
}
- }).collect::<Html>()
+ else if !*game_over {
+ node_refs.iter().enumerate().map(|(index, node_ref)| {
+ let on_focus = {
+ let curr_index = curr_index.clone();
+
+ Callback::from(move |e: FocusEvent| {
+ let target = e.target_unchecked_into::<web_sys::HtmlElement>();
+ if let Some(index) = target.get_attribute("tabindex") {
+ if let Ok(i) = index.parse::<usize>() {
+ curr_index.set(i);
+ }
+ }
+
+ })
+ };
+ html! {
+ <input
+ onkeyup={on_enter.clone()}
+ oninput={on_input.clone()}
+ tabindex={index.to_string()}
+ ref={node_ref.clone()}
+ value={input_values[index].clone()}
+ onfocus={on_focus.clone()}
+ class={
+ classes!(
+ "w-16",
+ "h-16",
+ "text-center",
+ "bg-gray-600"
+ )
+ }
+ />
+ }
+ }).collect::<Html>()
+ } else {
+ html!(<div></div>)
+ }
+ }
+ </div>
+ </form>
+ {
+ if *loading {
+ html!{<></>}
} else {
- html!(<div></div>)
+ html!{
+ <div
+ class={
+ classes!(
+ "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",
+ "flex",
+ "items-center",
+ "justify-center",
+ )
+ }
+ onclick={on_submit} type="submit">
+ {
+ if *game_over {
+ 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 {
+ 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>
- </form>
- <div class="!order-first">
- { for submitted_words.iter().map(|e| {string_to_html(e)})}
- </div>
- </div>
- <button
- tabindex={"5"}
- class={
- classes!(
- "w-72",
- "h-16",
- "text-2xl",
- "font-bold",
- "rounded-xl",
- "bg-green-700",
- "order-last",
- )
- }
- onclick={on_submit} type="submit">
- {
- if *game_over {
- "Play again"
- }
- else {
- "Submit"
- }
- }
- </button>
- </div>
+ </div>
}
}
};