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

fix(mobile): rewrites on_enter and on_input callbacks

Browse Source
This commit is contained in:
itsscb 2024-08-28 15:15:41 +02:00
parent b1c8bb62b1
commit 9d231a117f
1 changed files with 54 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
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; use web_sys::{HtmlElement, HtmlInputElement};
use yew::prelude::*; use yew::prelude::*;
use yew::{classes, function_component, Callback, Html}; use yew::{classes, function_component, Callback, Html};
@ -139,9 +139,6 @@ pub fn Home() -> Html {
let loading: UseStateHandle<bool> = use_state(|| true); let loading: UseStateHandle<bool> = use_state(|| true);
let curr_index: UseStateHandle<usize> = use_state(|| 0usize); let curr_index: UseStateHandle<usize> = use_state(|| 0usize);
// TODO: Remove DEBUG
let inp: UseStateHandle<String> = use_state(String::new);
let length = use_state(|| 0usize); let length = use_state(|| 0usize);
let submitted_words: UseStateHandle<Vec<Vec<CharStatus<String>>>> = let submitted_words: UseStateHandle<Vec<Vec<CharStatus<String>>>> =
use_state(|| std::vec::Vec::with_capacity(MAX_TRIES)); use_state(|| std::vec::Vec::with_capacity(MAX_TRIES));
@ -249,121 +246,84 @@ pub fn Home() -> Html {
game_over_check.emit(MouseEvent::none()); game_over_check.emit(MouseEvent::none());
}) })
}; };
let on_enter = { let on_enter = {
let curr_index = curr_index.clone(); // if &e.key() == "Enter" {
let length = length.clone(); // if let Ok(m) = MouseEvent::new("click") {
let on_submit = on_submit.clone(); // on_submit.emit(m);
let input_values = input_values.clone(); // }
let node_refs = node_refs.clone(); // }
let on_submit = on_submit.clone();
let curr_index = curr_index.clone();
// let input_values = input_values.clone();
let node_refs = node_refs.clone();
Callback::from(move |e: KeyboardEvent| {
Callback::from(move |e: KeyboardEvent| match e.key().as_ref() { match e.key().as_ref() {
"Enter" => { "Enter" => {
if let Ok(m) = MouseEvent::new("click") { if let Ok(m) = MouseEvent::new("click") {
on_submit.emit(m); on_submit.emit(m);
}
} }
} "Backspace" => {
"Backspace" => { e.prevent_default();
e.prevent_default();
let index = *curr_index; let index = *curr_index;
let mut values = (*input_values).clone(); // let mut values = (*input_values).clone();
values[index] = String::new(); // values[index] = String::new();
input_values.set(values); // input_values.set(values);
if node_refs[index]
.cast::<web_sys::HtmlInputElement>()
.is_some()
&& index > 0
{
let index = index - 1;
curr_index.set(index);
set_focus(index);
}
}
k => {
let index = *curr_index;
let mut values = (*input_values).clone();
if k.len() == 1 && k.chars().all(char::is_alphabetic) {
values[index] = k.to_uppercase();
input_values.set(values);
if node_refs[index] if node_refs[index]
.cast::<web_sys::HtmlInputElement>() .cast::<web_sys::HtmlInputElement>()
.is_some() .is_some()
&& index < *length && index > 0
{ {
let index = index + 1; let index = index - 1;
curr_index.set(index); curr_index.set(index);
set_focus(index); set_focus(index);
} }
} else {
values[index] = String::new();
input_values.set(values);
} }
_ => {}
} }
}) })
}; };
let on_input = { let on_input = {
let curr_index = curr_index.clone(); let curr_index = curr_index.clone();
let length = length.clone(); let length = length.clone();
let on_submit = on_submit.clone();
let input_values = input_values.clone(); let input_values = input_values.clone();
let node_refs = node_refs.clone();
// TODO: Remove DEBUG
let inp = inp.clone();
Callback::from(move |e: InputEvent| { Callback::from(move |e: InputEvent| {
let event = e.dyn_into::<web_sys::KeyboardEvent>().ok(); if let Some(target) = e.target() {
if let Some(e) = event.as_ref() { if let Ok(input_element) = target.dyn_into::<HtmlInputElement>() {
match e.key().as_ref() { let value = input_element.value();
"Enter" => {
if let Ok(m) = MouseEvent::new("click") { let index = *curr_index;
on_submit.emit(m); let mut values = (*input_values).clone();
}
} if value.is_empty() && !values[index].is_empty() {
"Backspace" => {
let index = *curr_index;
let mut values = (*input_values).clone();
values[index] = String::new(); values[index] = String::new();
input_values.set(values); input_values.set(values);
if node_refs[index]
.cast::<web_sys::HtmlInputElement>()
.is_some()
&& index > 0
{
let index = index - 1;
curr_index.set(index);
set_focus(index);
}
} }
k => { else if value.len() < values[index].len() && index > 0 {
let index = *curr_index; let new_index = index - 1;
let mut values = (*input_values).clone(); curr_index.set(new_index);
set_focus(new_index);
// TODO: Remove DEBUG }
inp.set(k.to_owned()); else if value.len() == 1 && value.chars().all(char::is_alphabetic) {
values[index] = value.to_uppercase();
if k.len() == 1 && k.chars().all(char::is_alphabetic) { input_values.set(values);
values[index] = k.to_uppercase(); if index < *length {
input_values.set(values); let new_index = index + 1;
if node_refs[index] curr_index.set(new_index);
.cast::<web_sys::HtmlInputElement>() set_focus(new_index);
.is_some()
&& index < *length
{
let index = index + 1;
curr_index.set(index);
set_focus(index);
}
} else {
values[index] = String::new();
input_values.set(values);
} }
} else {
values[index] = String::new();
input_values.set(values);
} }
} }
} }
}) })
}; };
@ -384,9 +344,6 @@ pub fn Home() -> Html {
<div <div
class="h-5/6 flex flex-col" class="h-5/6 flex flex-col"
> >
// TODO: Remove DEBUG
<h1>{(*inp).clone()}</h1>
<form <form
class="order-last mt-8" class="order-last mt-8"
> >