Compare commits
No commits in common. "d521d69eac53c9ab1cfc6bacf258e73c8e537b1a" and "1fbef7644bff3341313b6f984a56e97ab9fdecc7" have entirely different histories.
d521d69eac
...
1fbef7644b
|
|
@ -1,5 +1 @@
|
||||||
/target
|
/target
|
||||||
|
|
||||||
/dist
|
|
||||||
|
|
||||||
/.idea
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -13,5 +13,4 @@ log = "0.4.20"
|
||||||
rand = { version = "0.8.5", default-features = false, features = ["alloc"] }
|
rand = { version = "0.8.5", default-features = false, features = ["alloc"] }
|
||||||
wasm-bindgen = "0.2.87"
|
wasm-bindgen = "0.2.87"
|
||||||
wasm-logger = "0.2.0"
|
wasm-logger = "0.2.0"
|
||||||
web-sys = "0.3.64"
|
|
||||||
yew = { version = "0.20.0", features = ["csr"] }
|
yew = { version = "0.20.0", features = ["csr"] }
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Yew App</title>
|
<title>Yew App</title>
|
||||||
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
|
|
||||||
<link data-trunk rel="css" href="static/css/styles.css" />
|
<link data-trunk rel="css" href="static/css/styles.css" />
|
||||||
<link data-trunk rel="css" href="static/css/normalize.css" />
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Hola mundo</h1>
|
<h1>Hola mundo</h1>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,18 @@
|
||||||
use crate::consts::{AttemptField, Status};
|
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
|
||||||
#[derive(Properties, PartialEq)]
|
#[derive(Properties, PartialEq)]
|
||||||
pub struct AttemptRowProps {
|
pub struct AttemptRowProps {
|
||||||
pub attempt: Vec<AttemptField>,
|
pub answer: AttrValue,
|
||||||
|
pub text: AttrValue,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[function_component]
|
#[function_component]
|
||||||
pub fn AttemptRow(props: &AttemptRowProps) -> Html {
|
pub fn AttemptRow(props: &AttemptRowProps) -> Html {
|
||||||
let AttemptRowProps { attempt } = props;
|
let AttemptRowProps { answer, text } = props;
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
{ for attempt.iter().map(|att| html_nested! {
|
{ for answer.chars().zip(text.chars()).map(|(ans, att)| html! { <p class={
|
||||||
<p
|
if ans == att { "correct" } else if answer.contains(att) { "almost" } else { "missed" }
|
||||||
class={
|
} >{ att }</p> }) }
|
||||||
match att.status {
|
|
||||||
Status::Found => "correct",
|
|
||||||
Status::Almost => "almost",
|
|
||||||
Status::NotFound => "missed",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>{ att.char_field }</p>
|
|
||||||
})}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
use yew::prelude::*;
|
|
||||||
use crate::components::{EmptyRow, CurrentRow, AttemptRow};
|
|
||||||
use crate::consts::{Attempts, MAX_ATTEMPTS};
|
|
||||||
|
|
||||||
#[derive(Properties, PartialEq)]
|
|
||||||
pub struct BoardProps {
|
|
||||||
pub attempts: Attempts,
|
|
||||||
pub attempt_index: usize,
|
|
||||||
pub current_attempt: AttrValue,
|
|
||||||
pub onkeypress: Callback<KeyboardEvent>,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[function_component]
|
|
||||||
pub fn Board(props: &BoardProps) -> Html {
|
|
||||||
let BoardProps {
|
|
||||||
attempts,
|
|
||||||
attempt_index,
|
|
||||||
current_attempt,
|
|
||||||
onkeypress
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
html! {
|
|
||||||
<div class="board" onkeyup={onkeypress} tabindex="0">
|
|
||||||
{
|
|
||||||
for (0..MAX_ATTEMPTS).map(|i| {
|
|
||||||
if i < *attempt_index {
|
|
||||||
html! { <AttemptRow attempt={ attempts.fields[i].clone() } /> }
|
|
||||||
} else if i == *attempt_index {
|
|
||||||
html! { <CurrentRow text={ current_attempt } /> }
|
|
||||||
} else {
|
|
||||||
html! { <EmptyRow /> }
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
use crate::consts::{Key, KeyboardKeyType, VirtualKey};
|
|
||||||
use yew::prelude::*;
|
|
||||||
|
|
||||||
#[derive(Properties, PartialEq)]
|
|
||||||
pub struct KeyboardProps {
|
|
||||||
pub onclick: Callback<Key>,
|
|
||||||
pub keyboard: UseStateHandle<Vec<VirtualKey>>,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[function_component]
|
|
||||||
pub fn Keyboard(props: &KeyboardProps) -> Html {
|
|
||||||
let handle_click = |k: Key| {
|
|
||||||
let onclick = props.onclick.clone();
|
|
||||||
|
|
||||||
Callback::from(move |_| {
|
|
||||||
onclick.emit(k);
|
|
||||||
}).clone()
|
|
||||||
};
|
|
||||||
|
|
||||||
html! {
|
|
||||||
<div class="keyboard"> {
|
|
||||||
for (props.keyboard).iter().map(|vk: &VirtualKey| {
|
|
||||||
match vk.key {
|
|
||||||
KeyboardKeyType::CharKey(c) => html! { <button onclick={ handle_click(Key::CharKey(c)) }> { c } </button> },
|
|
||||||
KeyboardKeyType::Backspace => html! { <button onclick={ handle_click(Key::Backspace) } class="key-big"><i class="las la-undo"></i></button> },
|
|
||||||
KeyboardKeyType::Enter => html! { <button onclick={ handle_click(Key::Enter) } class="key-big"> { "Enviar" } </button> }
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} </div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +1,9 @@
|
||||||
pub use crate::components::attempt_row::AttemptRow;
|
pub use crate::components::attempt_row::AttemptRow;
|
||||||
pub use crate::components::current_row::CurrentRow;
|
pub use crate::components::current_row::CurrentRow;
|
||||||
pub use crate::components::empty_row::EmptyRow;
|
pub use crate::components::empty_row::EmptyRow;
|
||||||
pub use crate::components::keyboard::Keyboard;
|
|
||||||
pub use crate::components::result_board::ResultBoard;
|
pub use crate::components::result_board::ResultBoard;
|
||||||
pub use crate::components::board::Board;
|
|
||||||
|
|
||||||
mod board;
|
|
||||||
mod attempt_row;
|
mod attempt_row;
|
||||||
mod current_row;
|
mod current_row;
|
||||||
mod empty_row;
|
mod empty_row;
|
||||||
mod keyboard;
|
|
||||||
mod result_board;
|
mod result_board;
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,33 @@
|
||||||
use crate::consts::GameResult;
|
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
use crate::consts::{Attempts, Status};
|
|
||||||
|
|
||||||
#[derive(Properties, PartialEq)]
|
#[derive(Properties, PartialEq)]
|
||||||
pub struct ResultBoardProps {
|
pub struct ResultBoardProps {
|
||||||
pub attempts: Attempts,
|
pub answer: AttrValue,
|
||||||
|
pub attempts: Vec<String>,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[function_component]
|
#[function_component]
|
||||||
pub fn ResultBoard(props: &ResultBoardProps) -> Html {
|
pub fn ResultBoard(props: &ResultBoardProps) -> Html {
|
||||||
let ResultBoardProps {
|
let ResultBoardProps { answer, attempts } = props;
|
||||||
attempts,
|
let answer_chars = answer.chars();
|
||||||
} = props;
|
|
||||||
|
let mut result = String::default();
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<div class="result-board"> {
|
<div class="result-board"> {
|
||||||
for attempts.fields.iter().map(|attempt| {
|
for attempts.iter().map(|attempt| {
|
||||||
html_nested! {
|
html! {
|
||||||
<p class={ "result-board" }> {
|
<> {
|
||||||
for attempt.iter().map(| att| {
|
for answer.chars().zip(attempt.chars()).map(| (ans, att)| {
|
||||||
match att.status {
|
if ans == att {
|
||||||
Status::Found => html_nested! { <> { "🟩" } </> },
|
html! { <span> { "🟩" } </span> }
|
||||||
Status::Almost => html_nested! { <span>{ "🟨" }</span> },
|
} else if answer.contains(att) {
|
||||||
Status::NotFound => html_nested! { <span>{ "⬜" }</span> }
|
html! { <span>{ "🟨" }</span> }
|
||||||
|
} else {
|
||||||
|
html! { <span>{ "⬜" }</span> }
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} </p>
|
} </>
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} </div>
|
} </div>
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,10 @@
|
||||||
use yew::html::IntoPropValue;
|
|
||||||
|
|
||||||
pub const MAX_ATTEMPTS: usize = 6;
|
pub const MAX_ATTEMPTS: usize = 6;
|
||||||
pub const WORD_LEN: usize = 5;
|
|
||||||
|
|
||||||
#[derive(Clone, PartialEq)]
|
|
||||||
pub enum KeyboardKeyType {
|
|
||||||
Enter,
|
|
||||||
Backspace,
|
|
||||||
CharKey(char),
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Clone, PartialEq)]
|
|
||||||
pub enum Status {
|
|
||||||
NotFound,
|
|
||||||
Found,
|
|
||||||
Almost,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Clone, PartialEq)]
|
|
||||||
pub struct AttemptField {
|
|
||||||
pub char_field: char,
|
|
||||||
pub status: Status,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Clone, PartialEq)]
|
|
||||||
pub struct Attempts {
|
|
||||||
pub fields: Vec<Vec<AttemptField>>,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Attempts {
|
|
||||||
pub fn new() -> Self {
|
|
||||||
Attempts {
|
|
||||||
fields: vec![]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Clone, PartialEq)]
|
|
||||||
pub struct VirtualKey {
|
|
||||||
pub key: KeyboardKeyType,
|
|
||||||
pub status: Option<Status>,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl VirtualKey {
|
|
||||||
pub fn from_charkey(charkey: char) -> Self {
|
|
||||||
VirtualKey {
|
|
||||||
key: KeyboardKeyType::CharKey(charkey),
|
|
||||||
status: None,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn from_key(key: KeyboardKeyType) -> Self {
|
|
||||||
VirtualKey { key, status: None }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Copy, Clone)]
|
|
||||||
pub enum Key {
|
pub enum Key {
|
||||||
// 13
|
|
||||||
Enter,
|
Enter,
|
||||||
// 8
|
// 13
|
||||||
Backspace,
|
Backspace,
|
||||||
|
// 8
|
||||||
CharKey(char),
|
CharKey(char),
|
||||||
Ignored,
|
Ignored,
|
||||||
}
|
}
|
||||||
|
|
@ -77,8 +21,7 @@ impl From<u32> for Key {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(PartialEq, Copy, Clone)]
|
pub enum Result {
|
||||||
pub enum GameResult {
|
|
||||||
Win,
|
Win,
|
||||||
Fail,
|
Fail,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
pub use use_board::use_board;
|
|
||||||
pub use use_board::UseBoardHandle;
|
|
||||||
|
|
||||||
mod use_board;
|
|
||||||
|
|
@ -1,114 +0,0 @@
|
||||||
use crate::consts::{AttemptField, Attempts, GameResult, Key, VirtualKey, MAX_ATTEMPTS};
|
|
||||||
use crate::services::words::{get_word_of_the_day, WORDS};
|
|
||||||
use crate::utils::{evaluate_status, new_empty_virtual_keyboard};
|
|
||||||
use std::cell::RefCell;
|
|
||||||
use std::rc::Rc;
|
|
||||||
use yew::prelude::*;
|
|
||||||
|
|
||||||
type AttemptRow = Attempts;
|
|
||||||
|
|
||||||
#[derive(PartialEq, Clone)]
|
|
||||||
pub struct UseBoardHandle {
|
|
||||||
pub current_attempt: UseStateHandle<String>,
|
|
||||||
pub attempts: UseStateHandle<AttemptRow>,
|
|
||||||
pub virtual_keyboard: UseStateHandle<Vec<VirtualKey>>,
|
|
||||||
pub result: UseStateHandle<Option<GameResult>>,
|
|
||||||
pub attempt_index: Rc<RefCell<usize>>,
|
|
||||||
answer: Rc<String>,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl UseBoardHandle {
|
|
||||||
pub fn send_key(&self, k: Key) {
|
|
||||||
let current_attempt_len = self.current_attempt.chars().count();
|
|
||||||
|
|
||||||
if self.result.is_some() {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
match k {
|
|
||||||
Key::CharKey(c) => {
|
|
||||||
if current_attempt_len >= 5 {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let mut new_attempt = (*self.current_attempt).clone();
|
|
||||||
new_attempt.push(c);
|
|
||||||
self.current_attempt.set(new_attempt);
|
|
||||||
}
|
|
||||||
Key::Backspace => {
|
|
||||||
if current_attempt_len == 0 {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let mut new_attempt = (*self.current_attempt).clone();
|
|
||||||
// This unwrap is safe because the potential failura it's already covered
|
|
||||||
new_attempt.pop().unwrap();
|
|
||||||
self.current_attempt.set(new_attempt);
|
|
||||||
}
|
|
||||||
Key::Enter => {
|
|
||||||
if current_attempt_len < 5 {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if !WORDS.contains(&*self.current_attempt) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let mut new_attempts = (*self.attempts).clone();
|
|
||||||
let new_attempt_row = (*self.current_attempt)
|
|
||||||
.clone()
|
|
||||||
.chars()
|
|
||||||
.zip((*self.answer).chars())
|
|
||||||
.map(|(att, ans)| {
|
|
||||||
let status = evaluate_status(ans, att, (*self.answer).clone());
|
|
||||||
AttemptField {
|
|
||||||
char_field: att,
|
|
||||||
status,
|
|
||||||
}
|
|
||||||
}).collect();
|
|
||||||
new_attempts.fields.push(new_attempt_row);
|
|
||||||
|
|
||||||
self.attempts.set(new_attempts);
|
|
||||||
*self.attempt_index.borrow_mut() += 1;
|
|
||||||
|
|
||||||
if (*self.current_attempt) == (*self.answer) {
|
|
||||||
self.result.set(Some(GameResult::Win));
|
|
||||||
} else if *self.attempt_index.borrow() == MAX_ATTEMPTS {
|
|
||||||
self.result.set(Some(GameResult::Fail));
|
|
||||||
}
|
|
||||||
|
|
||||||
self.current_attempt.set(String::default());
|
|
||||||
}
|
|
||||||
_ => {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[hook]
|
|
||||||
pub fn use_board() -> UseBoardHandle {
|
|
||||||
let current_attempt = use_state(|| "".to_string());
|
|
||||||
let attempts: UseStateHandle<Attempts> = use_state(|| Attempts::new());
|
|
||||||
let attempt_index = use_mut_ref(|| 0usize);
|
|
||||||
// let answer = use_memo(|_| get_word_of_the_day(), None::<()>);
|
|
||||||
let answer = use_memo(|_| "ABEJA".to_owned(), None::<()>);
|
|
||||||
let virtual_keyboard = use_state(|| new_empty_virtual_keyboard().into());
|
|
||||||
let result = use_state(|| None::<GameResult>);
|
|
||||||
|
|
||||||
let send_key = {
|
|
||||||
let current_attempt = current_attempt.clone();
|
|
||||||
let current_attempt_len = current_attempt.chars().count();
|
|
||||||
let attempts = attempts.clone();
|
|
||||||
let answer = (*answer).clone();
|
|
||||||
let attempt_index = attempt_index.clone();
|
|
||||||
let result = result.clone();
|
|
||||||
|
|
||||||
move |k: Key| {}
|
|
||||||
};
|
|
||||||
UseBoardHandle {
|
|
||||||
current_attempt,
|
|
||||||
attempts,
|
|
||||||
attempt_index,
|
|
||||||
virtual_keyboard,
|
|
||||||
result,
|
|
||||||
answer,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
136
src/main.rs
136
src/main.rs
|
|
@ -1,62 +1,132 @@
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
|
||||||
use crate::components::{AttemptRow, Board};
|
use crate::components::AttemptRow;
|
||||||
use crate::components::CurrentRow;
|
use crate::components::CurrentRow;
|
||||||
use crate::components::EmptyRow;
|
use crate::components::EmptyRow;
|
||||||
use crate::components::Keyboard;
|
|
||||||
use crate::components::ResultBoard;
|
use crate::components::ResultBoard;
|
||||||
use crate::consts::{Key, MAX_ATTEMPTS};
|
use crate::consts::Key;
|
||||||
use crate::hooks::use_board;
|
use crate::consts::Result;
|
||||||
|
use crate::consts::MAX_ATTEMPTS;
|
||||||
|
use crate::services::words::{get_all_words, get_word_of_the_day};
|
||||||
|
use chrono::Datelike;
|
||||||
|
|
||||||
use gloo::console;
|
use gloo::console;
|
||||||
|
|
||||||
mod components;
|
mod components;
|
||||||
mod consts;
|
mod consts;
|
||||||
mod hooks;
|
|
||||||
mod services;
|
mod services;
|
||||||
mod utils;
|
|
||||||
|
|
||||||
#[function_component]
|
#[function_component]
|
||||||
fn App() -> Html {
|
fn App() -> Html {
|
||||||
let board = use_board();
|
let answer = use_state(|| get_word_of_the_day());
|
||||||
|
let all_the_words = use_memo(|_| get_all_words(), 0);
|
||||||
|
let attempts: UseStateHandle<Vec<String>> = use_state(|| vec![String::default(); MAX_ATTEMPTS]);
|
||||||
|
let attempt_index = use_state(|| 0usize);
|
||||||
|
let current_attempt = use_state(|| String::new());
|
||||||
|
let result = use_state(|| None::<Result>);
|
||||||
|
|
||||||
let onkeypress = {
|
let onkeypress = {
|
||||||
let board = board.clone();
|
console::log!(chrono::Utc::now().year());
|
||||||
|
let current = current_attempt.clone();
|
||||||
|
let answer = answer.clone();
|
||||||
|
let answer_str = answer.clone().to_string();
|
||||||
|
let current_str = current.clone().to_string();
|
||||||
|
let attempts = attempts.clone();
|
||||||
|
let result = result.clone();
|
||||||
|
let index = attempt_index.clone();
|
||||||
|
|
||||||
Callback::from(move |event: KeyboardEvent| {
|
move |event: KeyboardEvent| {
|
||||||
let key_code = event.key_code();
|
|
||||||
board.send_key(Key::from(key_code));
|
|
||||||
console::log!(&event);
|
console::log!(&event);
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
let onclick = {
|
if result.is_some() {
|
||||||
let board = board.clone();
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
Callback::from(move |key| {
|
let key_code = event.key_code();
|
||||||
board.send_key(key);
|
|
||||||
})
|
match Key::from(key_code) {
|
||||||
|
Key::CharKey(c) => {
|
||||||
|
if current.chars().count() >= 5 {
|
||||||
|
return ();
|
||||||
|
}
|
||||||
|
|
||||||
|
let mut new_attempt = current_str.clone();
|
||||||
|
new_attempt.push(c);
|
||||||
|
console::log!(&new_attempt);
|
||||||
|
current.set(new_attempt);
|
||||||
|
}
|
||||||
|
Key::Backspace => {
|
||||||
|
if current.is_empty() {
|
||||||
|
return ();
|
||||||
|
}
|
||||||
|
|
||||||
|
let mut new_attempt = current_str.clone();
|
||||||
|
// This unwrap is safe because the potential failura it's already covered
|
||||||
|
// by the upper if
|
||||||
|
new_attempt.pop().unwrap();
|
||||||
|
console::log!(&new_attempt);
|
||||||
|
current.set(new_attempt);
|
||||||
|
}
|
||||||
|
Key::Enter => {
|
||||||
|
if current.chars().count() != 5 {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if !all_the_words.contains(¤t) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let mut new_attempts = attempts.clone().to_vec();
|
||||||
|
new_attempts[*index] = current_str.clone();
|
||||||
|
|
||||||
|
attempts.set(new_attempts);
|
||||||
|
current.set(String::default());
|
||||||
|
index.set(*index + 1);
|
||||||
|
|
||||||
|
if ¤t_str == &answer_str {
|
||||||
|
result.set(Some(Result::Win));
|
||||||
|
} else if *index == MAX_ATTEMPTS {
|
||||||
|
result.set(Some(Result::Fail));
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_ => {}
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
<h1>{ "Worsdle" }</h1>
|
<h1>{ "Worsdle" }</h1>
|
||||||
<Board
|
<div class="board" onkeyup={onkeypress} tabindex="0">
|
||||||
attempts={ (*board.attempts).clone() }
|
{
|
||||||
attempt_index={ *board.attempt_index.borrow() }
|
for attempts.clone().iter().enumerate().map(|(i, attempt)| {
|
||||||
current_attempt={ (*board.current_attempt).clone() }
|
let current = current_attempt.clone().to_string();
|
||||||
onkeypress={ onkeypress }
|
let attempt = attempt.clone();
|
||||||
/>
|
|
||||||
<div>
|
if i < *attempt_index {
|
||||||
<span> {
|
let answer = answer.clone().to_string();
|
||||||
match (*board.result).clone() {
|
|
||||||
Some(res) => html! { <ResultBoard attempts={(*board.attempts).clone()} /> },
|
html! { <AttemptRow text={attempt} answer={answer} /> }
|
||||||
_ => html! { <Keyboard
|
} else if i == *attempt_index {
|
||||||
keyboard={ (board.virtual_keyboard).clone() }
|
html! { <CurrentRow text={ current } /> }
|
||||||
onclick={ onclick } /> }
|
} else {
|
||||||
}
|
html! { <EmptyRow /> }
|
||||||
} </span>
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
<div class={ format!("result {}", if result.is_some() { "" } else { "hidden" }) } >
|
||||||
|
<span> {
|
||||||
|
match *result {
|
||||||
|
Some(Result::Win) => "Ganaste!!",
|
||||||
|
Some(Result::Fail) => "Perdiste :c",
|
||||||
|
_ => "No deberías ver esto"
|
||||||
|
}
|
||||||
|
} </span>
|
||||||
|
< ResultBoard answer={ answer.to_string().clone() } attempts={(*attempts).clone()} />
|
||||||
|
<p> { "Vuelve mañana para otro desafío :)" } </p>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
45
src/utils.rs
45
src/utils.rs
|
|
@ -1,45 +0,0 @@
|
||||||
use crate::consts::{KeyboardKeyType, Status, VirtualKey};
|
|
||||||
|
|
||||||
pub fn new_empty_virtual_keyboard() -> [VirtualKey; 29] {
|
|
||||||
[
|
|
||||||
VirtualKey::from_charkey('Q'),
|
|
||||||
VirtualKey::from_charkey('W'),
|
|
||||||
VirtualKey::from_charkey('E'),
|
|
||||||
VirtualKey::from_charkey('R'),
|
|
||||||
VirtualKey::from_charkey('T'),
|
|
||||||
VirtualKey::from_charkey('Y'),
|
|
||||||
VirtualKey::from_charkey('U'),
|
|
||||||
VirtualKey::from_charkey('I'),
|
|
||||||
VirtualKey::from_charkey('O'),
|
|
||||||
VirtualKey::from_charkey('P'),
|
|
||||||
VirtualKey::from_charkey('A'),
|
|
||||||
VirtualKey::from_charkey('S'),
|
|
||||||
VirtualKey::from_charkey('D'),
|
|
||||||
VirtualKey::from_charkey('F'),
|
|
||||||
VirtualKey::from_charkey('G'),
|
|
||||||
VirtualKey::from_charkey('H'),
|
|
||||||
VirtualKey::from_charkey('J'),
|
|
||||||
VirtualKey::from_charkey('K'),
|
|
||||||
VirtualKey::from_charkey('L'),
|
|
||||||
VirtualKey::from_charkey('Ñ'),
|
|
||||||
VirtualKey::from_key(KeyboardKeyType::Backspace),
|
|
||||||
VirtualKey::from_charkey('Z'),
|
|
||||||
VirtualKey::from_charkey('X'),
|
|
||||||
VirtualKey::from_charkey('C'),
|
|
||||||
VirtualKey::from_charkey('V'),
|
|
||||||
VirtualKey::from_charkey('B'),
|
|
||||||
VirtualKey::from_charkey('N'),
|
|
||||||
VirtualKey::from_charkey('M'),
|
|
||||||
VirtualKey::from_key(KeyboardKeyType::Enter),
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn evaluate_status(ans: char, attr: char, answer: String) -> Status {
|
|
||||||
if ans == attr {
|
|
||||||
Status::Found
|
|
||||||
} else if answer.contains(attr) {
|
|
||||||
Status::Almost
|
|
||||||
} else {
|
|
||||||
Status::NotFound
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,349 +0,0 @@
|
||||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
||||||
|
|
||||||
/* Document
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the line height in all browsers.
|
|
||||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sections
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the margin in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render the `main` element consistently in IE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
main {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the font size and margin on `h1` elements within `section` and
|
|
||||||
* `article` contexts in Chrome, Firefox, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grouping content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Add the correct box sizing in Firefox.
|
|
||||||
* 2. Show the overflow in Edge and IE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box; /* 1 */
|
|
||||||
height: 0; /* 1 */
|
|
||||||
overflow: visible; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-family: monospace, monospace; /* 1 */
|
|
||||||
font-size: 1em; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text-level semantics
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the gray background on active links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Remove the bottom border in Chrome 57-
|
|
||||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: none; /* 1 */
|
|
||||||
text-decoration: underline; /* 2 */
|
|
||||||
text-decoration: underline dotted; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace; /* 1 */
|
|
||||||
font-size: 1em; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font size in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
|
||||||
* all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Embedded content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the border on images inside links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forms
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Change the font styles in all browsers.
|
|
||||||
* 2. Remove the margin in Firefox and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit; /* 1 */
|
|
||||||
font-size: 100%; /* 1 */
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
margin: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Show the overflow in IE.
|
|
||||||
* 1. Show the overflow in Edge.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input { /* 1 */
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
||||||
* 1. Remove the inheritance of text transform in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
select { /* 1 */
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type="button"],
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inner border and padding in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
[type="button"]::-moz-focus-inner,
|
|
||||||
[type="reset"]::-moz-focus-inner,
|
|
||||||
[type="submit"]::-moz-focus-inner {
|
|
||||||
border-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Restore the focus styles unset by the previous rule.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button:-moz-focusring,
|
|
||||||
[type="button"]:-moz-focusring,
|
|
||||||
[type="reset"]:-moz-focusring,
|
|
||||||
[type="submit"]:-moz-focusring {
|
|
||||||
outline: 1px dotted ButtonText;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the padding in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
padding: 0.35em 0.75em 0.625em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the text wrapping in Edge and IE.
|
|
||||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
|
||||||
* 3. Remove the padding so developers are not caught out when they zero out
|
|
||||||
* `fieldset` elements in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
legend {
|
|
||||||
box-sizing: border-box; /* 1 */
|
|
||||||
color: inherit; /* 2 */
|
|
||||||
display: table; /* 1 */
|
|
||||||
max-width: 100%; /* 1 */
|
|
||||||
padding: 0; /* 3 */
|
|
||||||
white-space: normal; /* 1 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
||||||
*/
|
|
||||||
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the default vertical scrollbar in IE 10+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Add the correct box sizing in IE 10.
|
|
||||||
* 2. Remove the padding in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="checkbox"],
|
|
||||||
[type="radio"] {
|
|
||||||
box-sizing: border-box; /* 1 */
|
|
||||||
padding: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the odd appearance in Chrome and Safari.
|
|
||||||
* 2. Correct the outline style in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"] {
|
|
||||||
-webkit-appearance: textfield; /* 1 */
|
|
||||||
outline-offset: -2px; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inner padding in Chrome and Safari on macOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
* 2. Change font properties to `inherit` in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button; /* 1 */
|
|
||||||
font: inherit; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Interactive
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
details {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Misc
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct display in IE 10+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct display in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
@ -82,16 +82,3 @@ body {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.keyboard {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(20, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard > button {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard > button.key-big {
|
|
||||||
grid-column: span 3;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue