kirbylife
/
worsdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the style

main
kirbylife 2023-09-30 00:58:25 -06:00
parent 8420721145
commit d64996d5dd
5 changed files with 57 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -2,12 +2,13 @@
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<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 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" /> rel="stylesheet">
<link data-trunk rel="css" href="static/css/normalize.css" /> <link data-trunk href="static/css/styles.css" rel="css"/>
<link data-trunk href="static/css/normalize.css" rel="css"/>
</head> </head>
<body> <body>
<h1>Hola mundo</h1>
</body> </body>
</html> </html>

22
src/components/result_board.rs
View File

@ -1,4 +1,4 @@
use crate::consts::GameResult; use crate::consts::{GameResult, MAX_ATTEMPTS};
use yew::prelude::*; use yew::prelude::*;
use crate::consts::{Attempts, Status}; use crate::consts::{Attempts, Status};
@ -14,20 +14,26 @@ pub fn ResultBoard(props: &ResultBoardProps) -> Html {
} = props; } = props;
html! { html! {
<div class="result-board"> { <div class="result-board">
<p>
{ format!("Palabra encontrada en {}/{} intentos", attempts.fields.len(), MAX_ATTEMPTS) }
</p><br/>
<p> {
for attempts.fields.iter().map(|attempt| { for attempts.fields.iter().map(|attempt| {
html_nested! { html_nested! {
<p class={ "result-board" }> { <> {
for attempt.iter().map(| att| { for attempt.iter().map(| att| {
match att.status { match att.status {
Status::Found => html_nested! { <> { "🟩" } </> }, Status::Found => html_nested! { <> { "🟩" } </> },
Status::Almost => html_nested! { <span>{ "🟨" }</span> }, Status::Almost => html_nested! { <>{ "🟨" }</> },
Status::NotFound => html_nested! { <span>{ "⬜" }</span> } Status::NotFound => html_nested! { <>{ "⬛" }</> }
}
})
} <br/></>
} }
}) })
} </p> } </p>
} </div>
})
} </div>
} }
} }

3
src/hooks/use_board.rs
View File

@ -102,8 +102,7 @@ pub fn use_board() -> UseBoardHandle {
let current_attempt = use_state(|| "".to_string()); let current_attempt = use_state(|| "".to_string());
let attempts: UseStateHandle<Attempts> = use_state(|| Attempts::new()); let attempts: UseStateHandle<Attempts> = use_state(|| Attempts::new());
let attempt_index = use_mut_ref(|| 0usize); let attempt_index = use_mut_ref(|| 0usize);
// let answer = use_memo(|_| get_word_of_the_day(), None::<()>); 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 virtual_keyboard = use_state(|| new_empty_virtual_keyboard().into());
let result = use_state(|| None::<GameResult>); let result = use_state(|| None::<GameResult>);

13
src/main.rs
View File

@ -40,7 +40,10 @@ fn App() -> Html {
html! { html! {
<> <>
<header>
<h1>{ "Worsdle" }</h1> <h1>{ "Worsdle" }</h1>
</header>
<main>
<Board <Board
attempts={ (*board.attempts).clone() } attempts={ (*board.attempts).clone() }
attempt_index={ *board.attempt_index.borrow() } attempt_index={ *board.attempt_index.borrow() }
@ -57,6 +60,16 @@ fn App() -> Html {
} }
} </span> } </span>
</div> </div>
</main>
<footer>
<small> {
html_nested! {
<>
{ "Hecho por " } <a href={ "https://kirbylife.dev" }> { "kirbylife" } </a>
</>
}
} </small>
</footer>
</> </>
} }
} }

43
static/css/styles.css
View File

@ -4,34 +4,40 @@ body > * {
body { body {
min-height: 99dvh; min-height: 99dvh;
margin-left: 150px; display: grid;
margin-right: 150px; grid-template-rows: auto 1fr auto;
display: flex; justify-items: center;
align-items: center; gap: 5px;
}
main {
padding-left: 20px;
padding-right: 20px;
display: flex !important;
flex-direction: column; flex-direction: column;
align-items: center;
gap: 10px;
} }
.board { .board {
width: 25%;
height: 25%;
display: grid; display: grid;
width: min-content;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
justify-items: center; justify-items: center;
justify-self: auto; gap: 5px;
gap: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.board > p { .board > p {
display: flex; display: flex;
width: 70px; width: 50px;
height: 70px; aspect-ratio: 1/1;
border: 3px solid #444444; border: 3px solid #444444;
border-radius: 10px; border-radius: 10px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0; margin: 0;
font-size: 40px; font-size: 30px;
} }
.correct { .correct {
@ -69,18 +75,15 @@ body {
} }
.result-board { .result-board {
display: grid; display: flex;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; flex-direction: column;
width: fit-content; align-items: center;
gap: 2px; gap: 5px;
} }
.result-board > span { .result-board > p {
margin: 0; margin: 0;
font-size: 20px; font-size: 20px;
height: 20px;
width: 20px;
} }
.keyboard { .keyboard {
@ -90,6 +93,8 @@ body {
.keyboard > button { .keyboard > button {
grid-column: span 2; grid-column: span 2;
width: auto;
height: 60px;
} }
.keyboard > button.key-big { .keyboard > button.key-big {