Improve the style
parent
8420721145
commit
d64996d5dd
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>);
|
||||
|
||||
|
|
|
|||
13
src/main.rs
13
src/main.rs
|
|
@ -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>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue