Skip to content

Commit

Permalink
Starting value table
Browse files Browse the repository at this point in the history
  • Loading branch information
@Deg42
Deg42 committed May 23, 2022
1 parent b4e54c9 commit ba10302
Show file tree
Hide file tree
Showing 6 changed files with 191 additions and 45 deletions.
16 changes: 13 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
# Kiriki-web

## TODO
### General
- [ ] Better testing

### Bugs
- [ ] Roll dices and reload

### General
- [X] Routing URLs ?
- [ ] Add 404 page
- [X] Add logout

### Navbar
Expand All @@ -29,3 +31,11 @@ See register.js comments
- [X] Search bar
- [X] Modal create game
- [X] Join game
- [ ] Validations on create game
- [ ] Color on table points

### Game
- [ ] Game name
- [ ] *'Kiriki'* on roll
- [ ] Value table
- [ ] Winning a game
38 changes: 33 additions & 5 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ body {
background-image: url("../assets/img/bg.svg");
}

@media only screen and ( max-width: 768px ) {
body {
background-image: url("../assets/img/bg-mobile.svg");
}
}
.md-dice {
width: 48px;
height: 48px;
background-size: 48px 48px;
background-repeat: no-repeat;
background-position: center
}

.container {
margin-bottom: 0;
Expand All @@ -24,6 +26,11 @@ body {
background-position: center
}

.fs-7{
font-size: 0.75em;

}

.turned-30 {
transform: rotate(30deg);
}
Expand Down Expand Up @@ -191,3 +198,24 @@ button#toggle-password:focus {
#password.input-password[type="text"]:valid, #createGamePassword.input-password[type="text"]:valid {
background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important;
}


@media only screen and ( max-width: 768px ) {
body {
background-image: url("../assets/img/bg-mobile.svg");
}
}

@media screen and (max-width: 375px) {
.md-dice {
width: 32px;
height: 32px;
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center
}

.fs-7 {
font-size: 0.5em;
}
}
77 changes: 72 additions & 5 deletions game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,73 @@
</header>
<main>
<div class="container bg-light">
<h1>Game name</h1>
<button id="test"></button>
<div class="row d-flex justify-content-center bg-light">
<div class="col fs-5 text-center my-4">
<h1>Nombre del juego</h1>
</div>
<div class="col fs-5 my-4">
<div class="row">
<div class="col">
<button class="btn btn-primary" id="hideTable">Tabla de Valores <i
class="fa fa-caret-down"></i>
</button>
</div>
<div class="col">
<ol class="list-group list-group-numbered fw-bold d-none" id="valueTable">
<li class="list-group-item d-flex align-items-start bg-primary text-light">
<div class="ms-2 me-auto text-center">
<div>Sumas simples</div>
<div class="d-flex mt-2 gap-2 gap-md-5 fs-7">
<span class="h-25 md-dice">1</span>
<span class="h-25 md-dice">2</span>
<span class="h-25 md-dice">3</span>
<span class="h-25 md-dice">4</span>
<span class="h-25 md-dice">5</span>
<span class="h-25 md-dice">6</span>
</div>
<div class="d-flex gap-2 gap-md-5">
<span class="md-dice dice-1"></span>
<span class="md-dice dice-2"></span>
<span class="md-dice dice-3"></span>
<span class="md-dice dice-4"></span>
<span class="md-dice dice-5"></span>
<span class="md-dice dice-6"></span>
</div>
<div class="d-flex gap-2 gap-md-5 fs-7 text-nowrap ">
<span class="md-dice">Negras</span>
<span class="md-dice">Rojas</span>
<span class="md-dice">Jota</span>
<span class="md-dice">Dama</span>
<span class="md-dice">Rey</span>
<span class="md-dice">As</span>
</div>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Tocho</div>
Cras justo odio
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Parejas (dos iguales)</div>
Cras justo odio
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Kiriki</div>
Cras justo odio
</div>
</li>
</ol>
</div>
</div>
</div>
</div>

<div class="row d-flex justify-content-center bg-warning" id="decide">
<div class="col fs-5 text-center my-4" id="lastValue"></div>
<div class="row mb-4 justify-content-center">
Expand Down Expand Up @@ -131,8 +196,9 @@ <h1 class="my-4 text-light">Lanza los dados!</h1>

<div class="row justify-content-center bg-success" id="spectate">.
<div class="row d-none" id="yourBidResult">
<div class="col text-center mb-4">
<h1 class="my-4 text-light">Dices que has sacado <span class="fst-italic fw-bold" id="yourBidValue"></span></h1>
<div class="col text-center mb-4">
<h1 class="my-4 text-light">Dices que has sacado <span class="fst-italic fw-bold"
id="yourBidValue"></span></h1>
<div class="row mb-4 justify-content-center">
<div class="col-6 mx-5 dice flip" id="yourBid1"></div>
<div class="col-6 mx-5 dice flip" id="yourBid2"></div>
Expand All @@ -155,7 +221,8 @@ <h1 class="my-4 text-light">Es el turno de <span class="fst-italic" id="turnOf">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="whosLoser"></h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close reloadData" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 id="loserResult"></h5>
Expand All @@ -165,7 +232,7 @@ <h5 id="loserResult"></h5>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-danger reloadData" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
Expand Down
30 changes: 17 additions & 13 deletions games.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,12 @@
<li class="nav-item"><a class="nav-link active" href="games.html" id="playNav"> Jugar!</a></li>
<li class="nav-item"><a class="nav-link" href="ranking.html" id="rankingNav"> Ranking</a>
</li>
<li class="nav-item"><a class="btn btn-primary me-1" href="login.html" id="loginNav"> Iniciar Sesión</a></li>
<li class="nav-item"><a class="btn btn-secondary" href="register.html" id="registerNav"> Registrarse</a></li>
<li class="nav-item"><a class="btn btn-outline-dark bg-warning" id="logoutNav"> Cerrar Sesión</a>
<li class="nav-item"><a class="btn btn-primary me-1" href="login.html" id="loginNav"> Iniciar
Sesión</a></li>
<li class="nav-item"><a class="btn btn-secondary" href="register.html" id="registerNav">
Registrarse</a></li>
<li class="nav-item"><a class="btn btn-outline-dark bg-warning" id="logoutNav"> Cerrar
Sesión</a>
</ul>
</div>
</div>
Expand All @@ -45,7 +48,8 @@
<main>
<div class="container bg-light flex-grow">

<h1 class="text-center pt-5"><img class="turned-30" src="assets/icons/two-dices-alt.svg" width="48px"/> Tus Partidas <img class="turned-60" src="assets/icons/two-dices-alt.svg" width="48px"/>
<h1 class="text-center pt-5"><img class="turned-30" src="assets/icons/two-dices-alt.svg" width="48px" /> Tus
Partidas <img class="turned-60" src="assets/icons/two-dices-alt.svg" width="48px" />
</h1>
<div class="row mt-5 ">
<div class="col my-3 d-grid d-md-block gap-2 ms-md-5">
Expand Down Expand Up @@ -84,18 +88,18 @@ <h5 class="modal-title" id="passModalTitle"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<form id="aceptPassword">
<div class="input-group">
<input type="hidden" id="gameId" />
<input type="password" id="gamePassword" class="form-control" placeholder="Contraseña"
autocomplete="on">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Aceptar</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary" id="aceptPassword">Aceptar</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -125,10 +129,10 @@ <h5 class="modal-title">Crear Partida</h5>
<i class="fas fa-lock fa-lg"></i></span>
<div class="form-floating flex-grow-1 mb-2">
<input type="password" id="createGamePassword" class="form-control"
placeholder="Contraseña" autocomplete="on"/>
<button id="toggle-password" type="button" class="d-none"
aria-label="Show password as plain text. Warning: this will display your password on the screen.">
</button>
placeholder="Contraseña" autocomplete="on" />
<button id="toggle-password" type="button" class="d-none"
aria-label="Show password as plain text. Warning: this will display your password on the screen.">
</button>
<label class="form-label ms-2" for="createGamePassword">Contraseña</label>
<div id="passwordFeedback" class="invalid-feedback"></div>
</div>
Expand Down
Loading

0 comments on commit ba10302

Please sign in to comment.