diff --git a/README.md b/README.md index 729c039..996d5d5 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,19 @@ ## TODO +## Wontfix +- [X] Remind me +- [X] Forgot Password +- [X] Change images + ### Bugs -- [ ] Roll dices and reload +- [X] Roll dices and reload ### General - [X] Routing URLs ? - [X] Add logout +- [ ] Cancel background image animation cancel +- [ ] Translate values ### Navbar - [X] Fix navbar @@ -16,15 +23,11 @@ ### Login See login.js comments - [X] Front Validations -- [ ] Remind me -- [ ] Forgot Password -- [ ] Change image ### Register See register.js comments - [X] Front Validations -- [ ] Terms and Conditions -- [ ] Change image +- [X] Terms and Conditions ### Games - [X] Get games @@ -32,10 +35,10 @@ See register.js comments - [X] Modal create game - [X] Join game - [ ] Validations on create game -- [ ] Color on table points +- [X] Color on table points ### Game -- [ ] Game name -- [ ] *'Kiriki'* on roll -- [ ] Value table -- [ ] Winning a game +- [X] Game name +- [X] *'Kiriki'* on roll +- [X] Value table +- [ ] Winning a game, update game diff --git a/css/style.css b/css/style.css index 876f586..196d3ac 100644 --- a/css/style.css +++ b/css/style.css @@ -7,8 +7,8 @@ body { height: 48px; background-size: 48px 48px; background-repeat: no-repeat; - background-position: center -} + background-position: center; +} .container { margin-bottom: 0; @@ -23,12 +23,11 @@ body { height: 64px; background-size: 64px 64px; background-repeat: no-repeat; - background-position: center + background-position: center; } -.fs-7{ +.fs-7 { font-size: 0.75em; - } .turned-30 { @@ -62,14 +61,13 @@ body { background-image: url("../assets/icons/as-dice.svg"); } -.btn-modifier{ -width: 48px; +.btn-modifier { + width: 48px; } -.flip:hover -{ - transform: rotate(360deg); - transition: all 0.3s ease-in-out 0s; +.flip:hover { + transform: rotate(360deg); + transition: all 0.3s ease-in-out 0s; } .shake:hover { @@ -108,32 +106,32 @@ width: 48px; @keyframes shake-alt { 0% { - transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); } 20% { - transform: translateX(-4px) rotate(-4deg); + transform: translateX(-4px) rotate(-4deg); } 40% { - transform: translateX(-2px) rotate(-2deg); + transform: translateX(-2px) rotate(-2deg); } 60% { - transform: translateX(4px) rotate(4deg); + transform: translateX(4px) rotate(4deg); } 80% { - transform: translateX(2px) rotate(2deg); + transform: translateX(2px) rotate(2deg); } 100% { - transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); } } .zoom { - transition: transform .2s; + transition: transform 0.2s; } .zoom:hover { @@ -191,17 +189,18 @@ button#toggle-password:focus { background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -#password.input-password[type="password"]:valid, #createGamePassword.input-password[type="password"]:valid { +#password.input-password[type="password"]:valid, +#createGamePassword.input-password[type="password"]: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 d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E") !important; } -#password.input-password[type="text"]:valid, #createGamePassword.input-password[type="text"]:valid { +#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 { +@media only screen and (max-width: 768px) { + body { background-image: url("../assets/img/bg-mobile.svg"); } } @@ -212,7 +211,7 @@ button#toggle-password:focus { height: 32px; background-size: 32px 32px; background-repeat: no-repeat; - background-position: center + background-position: center; } .fs-7 { diff --git a/game.html b/game.html index 570dd0c..5a67968 100644 --- a/game.html +++ b/game.html @@ -45,70 +45,14 @@
-
-

Nombre del juego

+

Nombre del juego

-
-
-
- -
-
-
    -
  1. -
    -
    Sumas simples
    -
    - 1 - 2 - 3 - 4 - 5 - 6 -
    -
    - - - - - - -
    -
    - Negras - Rojas - Jota - Dama - Rey - As -
    -
    -
    2. -
  2. -
    -
    Tocho
    - Cras justo odio -
    -
    3. -
  3. -
    -
    Parejas (dos iguales)
    - Cras justo odio -
    -
    4. -
  4. -
    -
    Kiriki
    - Cras justo odio -
    -
    5. -
-
-
+
+
@@ -221,7 +165,7 @@

Es el turno de
-
@@ -232,7 +176,7 @@
- +

@@ -260,6 +204,74 @@
Error!
+ + diff --git a/js/game.js b/js/game.js index eb10734..1eefdc6 100644 --- a/js/game.js +++ b/js/game.js @@ -39,9 +39,10 @@ function getLastBid() { url: "https://api-kiriki.herokuapp.com/api/get_bid?player_name=" + localStorage.getItem('username') + "&game_id=" + gameId, headers: { "Authorization": 'Bearer ' + JSON.parse(localStorage.getItem('token')).value }, success: function (result) { + console.log(result) displayLastBid(result); // Hiding roll in second turn - hideRoll() + hideRoll(); // }, error: function (result) { @@ -60,7 +61,7 @@ function getOwnRoll() { success: function (result) { console.log('Getting own roll'); // Loop of getiing Bid -> Geting own roll - getLastBid(); + // getLastBid(); // displayRollResult(result); hideDecideButtons(); @@ -138,13 +139,14 @@ function getLastRoll() { console.log(result); } }); - + } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function loadData(result) { console.log('Loading data and updating screen .. '); + changeGameName(result); if (result.turn !== localStorage.getItem('username')) { console.log('Not your turn'); $('#decide').addClass('d-none'); @@ -158,7 +160,7 @@ function loadData(result) { $('#spectate').addClass('d-none'); getLastBid(); hideBid(); - getOwnRoll(); + getOwnRoll(); } } @@ -179,7 +181,6 @@ function loadError() { function handlerError(json) { - if (json.error === "No bids yet or its the first turn") { console.log('No bids yet or its the first turn'); hideDecide(); @@ -187,13 +188,9 @@ function handlerError(json) { } if (json.error === "It is not your turn") { - $('#roll').addClass('d-none'); - hideDecide(); - $('#bid').addClass('d-none'); - $('#spectate').removeClass('d-none'); + displaySpectate(); gameData(); } - if (json.error === "You have not rolled yet") { $('#bid').addClass('d-none'); @@ -201,14 +198,19 @@ function handlerError(json) { if (json.error === "You already rolled, make a bid") { changeToBid(); - } + } } function loadErrorModal(json) { - if ( json.error === 'Bid is not greater or equal than last bid'){ - $('#errorMessage').html(`El valor anunciado no es mayor o igual al anunciado por el jugador anterior`); -} + if (json.error === 'Bid is not greater or equal than last bid') { + $('#errorMessage').html(`El valor anunciado no es mayor o igual al anunciado por el jugador anterior`); + } + + if (json.error === 'Not a valid bid') { + $('#errorMessage').html(`No puedes anunciar un KIRIKI, es el valor más alto`); + } + $('#errorModal').modal('show'); } @@ -219,7 +221,7 @@ function displayLastBid(json) { $('#lastImage2').addClass('dice-' + json.bid_2); } -function displayRollDices(){ +function displayRollDices() { console.log('Displaying roll dices'); $('#roll').removeClass('d-none'); $('#bid').addClass('d-none'); @@ -234,7 +236,7 @@ function displayRollResult(result) { $('#roll2').addClass('dice-' + result.roll_2); $('#rollValue').html(result.roll_value); - if (result.roll_value === 'kiriki') { + if (result.roll_value === 'kiriki') { loadPointResultModal(result); } }; @@ -248,56 +250,77 @@ function displayBidResult(result) { $('#yourBidValue').html(result.bid_value); }; -function displaySpectate(){ +function displaySpectate() { + console.log('Displaying spectate'); $('#spectate').removeClass('d-none'); $('#roll').addClass('d-none'); $('#decide').addClass('d-none'); $('#bid').addClass('d-none'); } -function hideDecideButtons(){ +function hideDecideButtons() { $('#decideButtons').addClass('d-none'); } -function hideDecide(){ +function hideDecide() { console.log('Hiding decide'); $('#decide').addClass('d-none'); } -function hideRoll(){ +function hideRoll() { console.log('Hiding roll'); $('#roll').addClass('d-none'); } -function hideBid(){ +function hideBid() { console.log('Hiding bid'); $('#bid').addClass('d-none'); } -function hideAnnounce(){ +function hideAnnounce() { console.log('Hiding announce'); $('#announce').addClass('d-none'); } function loadPointResultModal(json) { - console.log("Loser: " +json.point_loser) - json.point_loser === localStorage.getItem('username') - ? $('#whosLoser').addClass('text-danger').html('Has perdido') - : $('#whosLoser').addClass('text-success').html(json.point_loser + ' ha perdido'); + + + console.log("Loser: " + json.point_loser); + + if (json.point_loser === localStorage.getItem('username')) { + $('#whosLoser').addClass('text-danger').html('Has perdido'); + displayRollDices(); + } else { + $('#whosLoser').addClass('text-success').html(json.point_loser + ' ha perdido'); + displaySpectate(); + } - $('#loserResult').html( - `El jugador anterior ha sacado - ${json.roll_value} - y dijo que tenía - ${json.bid_value}` - ); $('#pointDice1').addClass('dice-' + json.roll_1); $('#pointDice2').addClass('dice-' + json.roll_2); + if (json.roll_value == 'kiriki') { + $('#loserResult').html('Has sacado un kiriki!'); + + } else { + $('#loserResult').html( + `El jugador anterior ha sacado + ${json.roll_value} + y dijo que tenía + ${json.bid_value}` + ); + } $('#resultModal').modal('show'); + gameData(); + return false; +} + +function changeGameName(json) { + console.log('Changing game name'); + console.log(json); + $('#gameName').html(json.name); } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// @@ -309,25 +332,15 @@ $('#acceptButton').on('click', function (e) { }); $('#rejectButton').on('click', function () { - - getLastRoll(); -}); -$('.reloadData').on('click', function (e) { - e.preventDefault(); - gameData(); + getLastRoll(); }); -$('#hideTable').on('click', function (e) { +$('#valueTableButton').on('click', function (e) { e.preventDefault(); console.log('Hiding table'); - if ($('#valueTable').hasClass('d-none')) { - $('#valueTable').removeClass('d-none'); - $('#hideTable').children('i').removeClass('fa-caret-down').addClass('fa-caret-up'); - } else { - $('#valueTable').addClass('d-none'); - $('#hideTable').children('i').removeClass('fa-caret-up').addClass('fa-caret-down'); - } + $('#valueTableModal').modal('show'); + }) //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// @@ -382,7 +395,7 @@ function lessValue(bid, bidImage) { //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -$('#test').on('click', function (e) { +$('#test').on('click', function (e) { displayBidResult(); }); \ No newline at end of file diff --git a/js/games.js b/js/games.js index 27555d2..2964a59 100644 --- a/js/games.js +++ b/js/games.js @@ -76,6 +76,14 @@ function loadStartedGamesWherePlayerIs(json) { }; +function colourPoints(points) { + if (points <= 1) { + return `${points}`; + } + return points; + +} + function buttonToContinue(game) { if (game.turn === localStorage.getItem('username')) { return ` Tu turno!`; @@ -90,6 +98,7 @@ function buttonToJoinGame(game) { let username = localStorage.getItem('username'); if (!players.includes(username)) { + console.log("can join"); return `Unirse`; } @@ -133,19 +142,19 @@ function getPlayersStarted(game) { players.forEach(player => { result.push(` ${player.name} - ${player.points} + ${colourPoints(player.points)} `); if (player.name === localStorage.getItem('username')) { - result[result.length - 1] = ` + result[result.length - 1] = ` ${player.name} - ${player.points} + ${colourPoints(player.points)} `; } if (game.turn === player.name) { - result[result.length - 1] = ` + result[result.length - 1] = ` Turno de ${player.name} - ${player.points} + ${colourPoints(player.points)} `; } }); diff --git a/js/login.js b/js/login.js index 95516c6..f891cbf 100644 --- a/js/login.js +++ b/js/login.js @@ -21,7 +21,6 @@ function serverValidator(data) { console.log(data); if (data.message === "Invalid credentials.") { - console.log("bbb"); $('#username').css('border', '1px solid red'); $('#password').css('border', '1px solid red'); $('#generalFeedback').addClass("d-block") diff --git a/js/register.js b/js/register.js index 0859348..96b63a9 100644 --- a/js/register.js +++ b/js/register.js @@ -163,4 +163,9 @@ $("#register").on("click", function (event) { } }); return false; -}) \ No newline at end of file +}); + +$('#showTerms').on('click', function (e) { + e.preventDefault(); + $('#termsModal').modal('show'); +}); \ No newline at end of file diff --git a/login.html b/login.html index 59a1437..3fbc93f 100644 --- a/login.html +++ b/login.html @@ -107,9 +107,10 @@

Iniciar sesión

+ -
- +
diff --git a/register.html b/register.html index 5ede80f..b408827 100644 --- a/register.html +++ b/register.html @@ -50,9 +50,7 @@

Registrarse

-

Si ya tienes cuenta, Inicia sesión a través de este enlace.

- +

Si ya tienes cuenta, Inicia sesión aquí

@@ -111,7 +109,8 @@

Registrarse

@@ -127,13 +126,48 @@

Registrarse

Sample image + class="img-fluid mt-5" alt="Sample image">
+