Added finished games and more

README.md

@@ -13,8 +13,7 @@
 ### General 
 - [X] Routing URLs ?
 - [X] Add logout
-- [ ] Cancel background image animation cancel
-- [ ] Translate values
+- [X] Translate values
 
 ### Navbar
 - [X] Fix navbar
@@ -34,11 +33,11 @@ See register.js comments
 - [X] Search bar
 - [X] Modal create game
 - [X] Join game
-- [ ] Validations on create game
+- [X] Validations on create game
 - [X] Color on table points
 
 ### Game
 - [X] Game name
 - [X] *'Kiriki'* on roll 
 - [X] Value table
-- [ ] Winning a game, update game
+- [X] Winning a game, update game

game.html

@@ -182,6 +182,28 @@ <h5 id="loserResult"></h5>
         </div>
     </div>
 
+    <div class="modal fade" id="winnerModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="winnerModalLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 class="modal-title">Partida finalizada</h3>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p>
+                        El ganador es de esta partida es <span class="fst-italic fw-bold" id="winner"></span>
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <!-- Button to return to games.html -->
+                    <a href="games.html" class="btn btn-primary">Volver</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="modal fade" id="errorModal" tabindex="-1" data-bs-keyboard="false" aria-labelledby="errorModalLabel"
         aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">

games.html

@@ -75,6 +75,9 @@ <h3 class="text-center mb-5">Juegos en curso</h3>
                 <hr class="border-2 border-top border-secondary">
                 <h3 class="text-center my-5">Juegos sin empezar</h3>
                 <div id="gamesAvailable" class="row row-cols-1 row-cols-md-3 g-4"></div>
+                <hr class="border-2 border-top border-secondary">
+                <h3 class="text-center my-5">Juegos finalizados</h3>
+                <div id="gamesFinished" class="row row-cols-1 row-cols-md-3 g-4"></div>
             </div>
         </div>
     </main>

js/game.js

@@ -27,6 +27,7 @@ function gameData() {
         },
         error: function (result) {
             console.log('Cant load data');
+            console.log(result);
             loadError();
         }
     });
@@ -162,6 +163,15 @@ function loadData(result) {
         hideBid();
         getOwnRoll();
     }
+
+    // if winner show winner modal
+    if (result.winner !== null) {
+        $('#spectate').addClass('d-none');
+        $('#decide').addClass('d-none');
+        $('#roll').addClass('d-none');
+        $('#bid').addClass('d-none');
+        loadWinnerModal(result);
+    }
 }
 
 function loadError() {
@@ -283,10 +293,7 @@ function hideAnnounce() {
 }
 
 function loadPointResultModal(json) {
-
-
-
-    console.log("Loser: " + json.point_loser);
+    console.log('Loading point result modal');
 
     if (json.point_loser === localStorage.getItem('username')) {
         $('#whosLoser').addClass('text-danger').html('Has perdido');
@@ -317,6 +324,11 @@ function loadPointResultModal(json) {
     return false;
 }
 
+function loadWinnerModal(json) {
+    $('#winner').html(json.winner);
+    $('#winnerModal').modal('show');
+}
+
 function changeGameName(json) {
     console.log('Changing game name');
     console.log(json);
@@ -391,11 +403,4 @@ function lessValue(bid, bidImage) {
     });
 
     $(bidImage).addClass("dice-" + val);
-}
-
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-$('#test').on('click', function (e) {
-    displayBidResult();
-
-});
+}

js/games.js

@@ -6,6 +6,7 @@ jQuery(function () {
     } else {
         ajaxGetGames();
         ajaxGetStartedGames();
+        ajaxGetFinishedGames();
     }
 });
 
@@ -76,6 +77,41 @@ function loadStartedGamesWherePlayerIs(json) {
 
 };
 
+function loadFinishedGamesWherePlayerIs(json) {
+    console.log("finished games");
+    let games = json.results;
+    console.log(games);
+
+
+    $('#gamesFinished').html('');
+
+    games.forEach(game => {
+        $('#gamesFinished').append(`
+            <div class="col">
+                <div class="card border-3">
+                    <div class="card-body ">
+                        <h5 class="card-title">${game.name}</h5>
+                        <small class="d-none gameId">${game.id}</small>
+                    </div>
+                    <table class="card-table table table-light table-striped">
+                        <thead>
+                            <tr>
+                                <th scope="col">Nombre</th>
+                                <th scope="col">Puntos</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                        ${getPlayersFinished(game)}
+                        </tbody>
+                    </table>
+                </div>
+            </div>`);
+
+    });
+
+
+};
+
 function colourPoints(points) {
     if (points <= 1) {
         return `<span class="text-danger">${points}</span>`;
@@ -184,9 +220,44 @@ function getPlayersUnestarted(game) {
 
 }
 
+function getPlayersFinished(game) {
+    let players = game.players.results;
+    let result = [];
+    console.log(game);
+
+    players.forEach(player => {
+        console.log(player);
+        result.push(`<tr">
+        <td>${player.name}</td>
+        <td class="fw-bold">${colourPoints(player.points)}</td>
+        </tr>`);
+
+        if (player.name === localStorage.getItem('username')) {
+            result[result.length - 1] = `<tr class="table-info">
+            <td>${player.name}</td>
+            <td class="fw-bold">${colourPoints(player.points)}</td>
+            </tr>`;
+        }
+    });
+
+    return result.join('');
+}
+
 function serverGameValidator(data) {
-    if (data.error === "There is already a game with that name") {
-        alert("Ya existe una partida con ese nombre");
+
+    switch (data.error) {
+        case "There is already a game with that name":
+            return alert("Ya existe una partida con ese nombre");
+        case "Invalid game name":
+            return alert("Nombre de partida no válido, ha de ser de entre 3 y 20 caracteres alfanuméricos");
+        case "There is already a game with that name":
+            return alert("Ya existe una partida con ese nombre");
+        case "Invalid game password":
+            return alert("Contraseña no válida, puede ser opcional");
+        case "Invalid max points":
+            return alert("Los puntos han de ser entre 3 y 9");
+        default:
+            return alert("Error desconocido");
     }
 }
 
@@ -348,6 +419,23 @@ function ajaxGetStartedGames() {
     return false;
 }
 
+function ajaxGetFinishedGames() {
+
+    $.ajax({
+        type: "GET",
+        datatype: "json",
+        url: "https://api-kiriki.herokuapp.com/api/finished_games/?player_name=" + localStorage.getItem('username'),
+        headers: { "Authorization": 'Bearer ' + JSON.parse(localStorage.getItem('token')).value },
+        success: function (result) {
+            loadFinishedGamesWherePlayerIs(result);
+        },
+        error: function (result) {
+            console.log(result);
+        }
+    });
+    return false;
+
+}
 
 
 
@@ -393,6 +481,7 @@ $("#aceptPassword").on("submit", function (event) {
 });
 
 $("#acceptCreateGame").on("click", function (event) {
+    console.log("Creating game...");
     event.preventDefault();
 
     let gameName = $('#createGameName').val();

js/register.js

@@ -104,9 +104,7 @@ function formHasError() {
 
     setValids(errors, elementsId);
 
-    if (errors.size > 0) {
-        return true;
-    }
+    return errors.size === 0;
 }
 
 function serverValidator(data) {