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

View File

@ -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>

View File

@ -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! { <>{ "" }</> }
}
})
} <br/></>
}
})
} </p>
}
})
} </div>
</div>
}
}

View File

@ -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>);

View File

@ -40,7 +40,10 @@ fn App() -> Html {
html! {
<>
<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>
</>
}
}

View File

@ -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 {