From d64996d5dd55e9667ba35f0f993c63a33a6cf2cc Mon Sep 17 00:00:00 2001 From: kirbylife <kirbylife@protonmail.com> Date: Sat, 30 Sep 2023 00:58:25 -0600 Subject: [PATCH] Improve the style --- index.html | 9 +++---- src/components/result_board.rs | 20 ++++++++++------ src/hooks/use_board.rs | 3 +-- src/main.rs | 15 +++++++++++- static/css/styles.css | 43 +++++++++++++++++++--------------- 5 files changed, 57 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 14dcba6..167bc05 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,13 @@ <html lang="es"> <head> <meta charset="UTF-8"> + <meta content="width=device-width, initial-scale=1.0" name="viewport"/> <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/normalize.css" /> + <link href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" + rel="stylesheet"> + <link data-trunk href="static/css/styles.css" rel="css"/> + <link data-trunk href="static/css/normalize.css" rel="css"/> </head> <body> -<h1>Hola mundo</h1> </body> </html> diff --git a/src/components/result_board.rs b/src/components/result_board.rs index b8e9ee6..d9e971e 100644 --- a/src/components/result_board.rs +++ b/src/components/result_board.rs @@ -1,4 +1,4 @@ -use crate::consts::GameResult; +use crate::consts::{GameResult, MAX_ATTEMPTS}; use yew::prelude::*; use crate::consts::{Attempts, Status}; @@ -14,20 +14,26 @@ pub fn ResultBoard(props: &ResultBoardProps) -> Html { } = props; 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| { html_nested! { - <p class={ "result-board" }> { + <> { for attempt.iter().map(| att| { match att.status { Status::Found => html_nested! { <> { "🟩" } </> }, - Status::Almost => html_nested! { <span>{ "🟨" }</span> }, - Status::NotFound => html_nested! { <span>{ "⬜" }</span> } + Status::Almost => html_nested! { <>{ "🟨" }</> }, + Status::NotFound => html_nested! { <>{ "⬛" }</> } + } }) - } </p> + } <br/></> } }) - } </div> + } </p> + </div> } } diff --git a/src/hooks/use_board.rs b/src/hooks/use_board.rs index 5675230..322535c 100644 --- a/src/hooks/use_board.rs +++ b/src/hooks/use_board.rs @@ -102,8 +102,7 @@ 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 answer = use_memo(|_| get_word_of_the_day(), None::<()>); let virtual_keyboard = use_state(|| new_empty_virtual_keyboard().into()); let result = use_state(|| None::<GameResult>); diff --git a/src/main.rs b/src/main.rs index 9c356c4..0ed597c 100644 --- a/src/main.rs +++ b/src/main.rs @@ -40,7 +40,10 @@ fn App() -> Html { html! { <> - <h1>{ "Worsdle" }</h1> + <header> + <h1>{ "Worsdle" }</h1> + </header> + <main> <Board attempts={ (*board.attempts).clone() } attempt_index={ *board.attempt_index.borrow() } @@ -57,6 +60,16 @@ fn App() -> Html { } } </span> </div> + </main> + <footer> + <small> { + html_nested! { + <> + { "Hecho por " } <a href={ "https://kirbylife.dev" }> { "kirbylife" } </a> + </> + } + } </small> + </footer> </> } } diff --git a/static/css/styles.css b/static/css/styles.css index 0b2761c..8f84985 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -4,34 +4,40 @@ body > * { body { min-height: 99dvh; - margin-left: 150px; - margin-right: 150px; - display: flex; - align-items: center; + display: grid; + grid-template-rows: auto 1fr auto; + justify-items: center; + gap: 5px; +} + +main { + padding-left: 20px; + padding-right: 20px; + display: flex !important; flex-direction: column; + align-items: center; + gap: 10px; } .board { - width: 25%; - height: 25%; display: grid; + width: min-content; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; justify-items: center; - justify-self: auto; - gap: 10px; + gap: 5px; padding-bottom: 10px; } .board > p { display: flex; - width: 70px; - height: 70px; + width: 50px; + aspect-ratio: 1/1; border: 3px solid #444444; border-radius: 10px; justify-content: center; align-items: center; margin: 0; - font-size: 40px; + font-size: 30px; } .correct { @@ -69,18 +75,15 @@ body { } .result-board { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - width: fit-content; - gap: 2px; + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; } -.result-board > span { +.result-board > p { margin: 0; font-size: 20px; - height: 20px; - width: 20px; - } .keyboard { @@ -90,6 +93,8 @@ body { .keyboard > button { grid-column: span 2; + width: auto; + height: 60px; } .keyboard > button.key-big {