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 {