From a54d19296681edae138412f88869a6f476c74b81 Mon Sep 17 00:00:00 2001
From: Maxime <maxime.tissot@student.reutlingen-university.de>
Date: Sat, 9 Jul 2022 20:15:37 +0200
Subject: [PATCH] Clear on win

---
 .../VSundSOA/backendapi/GameController.java   |   1 -
 Sudoku.css                                    |   2 +-
 Sudoku.html                                   |   4 +-
 Sudoku.js                                     | 165 ++++++++++--------
 4 files changed, 91 insertions(+), 81 deletions(-)

diff --git a/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameController.java b/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameController.java
index c5c43db..1134a86 100644
--- a/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameController.java
+++ b/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameController.java
@@ -28,7 +28,6 @@ public class GameController {
     @ResponseStatus(HttpStatus.OK)
     @PutMapping("/game/placement")
     public Boolean ValidatePlacement(@Valid @RequestBody @NotNull Placement placement){
-        System.out.println("Position X: " + placement.getX() + " Position Y: " + placement.getY());
         if (field.getSolutionField()[placement.getX()][placement.getY()] == placement.getValue()){
             history.add(placement);
             return true;
diff --git a/Sudoku.css b/Sudoku.css
index 43d5ec1..b457d73 100644
--- a/Sudoku.css
+++ b/Sudoku.css
@@ -61,7 +61,7 @@ h3{
 
 .Game{
     display: grid;
-    grid-template-columns: 75% 10% 15%;
+    grid-template-columns: 10% 75% 15%;
     align-content: center;
 }
 
diff --git a/Sudoku.html b/Sudoku.html
index 68a3536..1106ee4 100644
--- a/Sudoku.html
+++ b/Sudoku.html
@@ -13,10 +13,10 @@
         <button type="button" id="login" class="button" onclick="loginOnClick()">Connect</button>
     </div>
     <div class="Game" id="game">
-        <div class="Sudoku" id="Sudoku">
-        </div>
         <div class="NumberPad" id="number-pad">
         </div>
+        <div class="Sudoku" id="Sudoku">
+        </div>
         <div class="UserList" id="userBlock">
         </div>
     </div>
diff --git a/Sudoku.js b/Sudoku.js
index 59462e3..3fd554e 100644
--- a/Sudoku.js
+++ b/Sudoku.js
@@ -3,25 +3,29 @@ const GameAPI = 'http://localhost:8080';
 let username = '';
 let activeNumber = 0;
 let history = [];
-let colors = ['gray', 'cyan', 'darkred', 'green', 'yellow', 'indianred', 'lime', 'orangered', 'lightblue', 'salmon', 'purple', 'white', 'palegreen', 'teal', 'olive', 'deeppink'];
+let colors = ['gray', 'cyan', 'darkred', 'green', 'yellow', 'indianred', 'lime', 'orangered', 'lightblue', 'salmon', 'indigo', 'white', 'palegreen', 'teal', 'olive', 'deeppink'];
 let users = {};
 
-function createEmptySudokuGrid() {
-    const table = document.getElementById('Sudoku');
-    for (let block = 0; block < 9; block++) {
-        const blockDiv = document.createElement('div');
-        blockDiv.className = 'block';
-        table.appendChild(blockDiv)
-        for (let row = 0; row < 3; row++){
-            for (let column = 0; column < 3; column++){
-                const cellDiv = document.createElement('div');
-                cellDiv.id = `${row + (Math.floor(block / 3) * 3)}cell${column + ((block % 3) * 3)}`;
-                cellDiv.className = `cell`;
-                cellDiv.onclick = () => sudokuOnClickAsync(row + (Math.floor(block / 3) * 3), column + ((block % 3) * 3));
-                blockDiv.appendChild(cellDiv);
-            }
-        }
-    }
+async function initiateGame() {
+    users[username] = colors[Math.floor(Math.random() * colors.length)];
+
+    createEmptySudokuGrid();
+    createUserList();
+
+    await fillSudokuGrid();
+    await reloadOnTimerAsync();
+
+    setInterval(reloadOnTimerAsync, 2 * 1000);
+}
+
+async function loginOnClick() {
+    username = document.getElementById('username').value;
+    document.getElementById('login').remove();
+    document.getElementById('username').remove();
+    document.getElementById("usernameMessage").textContent = username;
+
+    createNumberPadButtons();
+    await initiateGame();
 }
 
 function createNumberPadButtons() {
@@ -38,18 +42,36 @@ function createNumberPadButtons() {
     }
 }
 
-function createUserList(){
+function createEmptySudokuGrid() {
+    const table = document.getElementById('Sudoku');
+    for (let block = 0; block < 9; block++) {
+        const blockDiv = document.createElement('div');
+        blockDiv.className = 'block';
+        table.appendChild(blockDiv)
+        for (let row = 0; row < 3; row++) {
+            for (let column = 0; column < 3; column++) {
+                const cellDiv = document.createElement('div');
+                cellDiv.id = `${row + (Math.floor(block / 3) * 3)}cell${column + ((block % 3) * 3)}`;
+                cellDiv.className = `cell`;
+                cellDiv.onclick = () => sudokuOnClickAsync(row + (Math.floor(block / 3) * 3), column + ((block % 3) * 3));
+                blockDiv.appendChild(cellDiv);
+            }
+        }
+    }
+}
+
+function createUserList() {
     const userBlock = document.getElementById(`userBlock`);
     const userList = document.getElementById(`userBlock`).children;
-    for (const key of Object.keys(users)){
+    for (const key of Object.keys(users)) {
         let occurrence = 0;
-        for (const username of userList){
-            if (username.id == `user-${key}`){
+        for (const username of userList) {
+            if (username.id == `user-${key}`) {
                 occurrence++;
                 break;
             }
         }
-        if (occurrence == 0){
+        if (occurrence == 0) {
             const user = document.createElement(`h2`);
             user.id = `user-${key}`
             user.textContent = key;
@@ -58,7 +80,6 @@ function createUserList(){
             userBlock.appendChild(user);
         }
     }
-    console.log(users);
 }
 
 async function fillSudokuGrid() {
@@ -69,7 +90,7 @@ async function fillSudokuGrid() {
             if (sudoku[row][cell] > 0) {
                 cellText.innerText = sudoku[row][cell];
             } else {
-                cellText.innerText = '_';
+                cellText.innerText = '-';
             }
             const currentCell = document.getElementById(`${row}cell${cell}`);
             currentCell.append(cellText);
@@ -92,6 +113,42 @@ async function getWinVerificationAsync() {
     return await win.json();
 }
 
+async function reloadCell(placement) {
+    history.push(placement);
+    let occurrence = 0;
+    for (const key of Object.keys(users)) {
+        if (key == placement.username) {
+            occurrence++;
+        }
+    }
+    if (occurrence == 0) {
+        users[placement.username] = colors[Math.floor(Math.random() * colors.length)];
+    }
+
+    const cellText = document.getElementById(`${placement.x}cell${placement.y}`).children;
+    cellText[0].innerText = placement.value;
+    cellText[0].style.color = users[`${placement.username}`];
+
+    if (await getWinVerificationAsync()) {
+        window.alert("you won!");
+        // Reset
+        history = [];
+        users = {};
+        document.getElementById('Sudoku').remove();
+        const field = document.createElement('div');
+        field.id = 'Sudoku';
+        field.className = 'Sudoku';
+        document.getElementById('game').append(field);
+        document.getElementById('userBlock').remove();
+        const list = document.createElement('div');
+        list.id = 'userBlock';
+        list.className = 'UserList';
+        document.getElementById('game').append(list);
+
+        await initiateGame();
+    }
+}
+
 async function putPlacementAsync(placement) {
     const move = await fetch(GameAPI + "/game/placement", {
         method: "PUT",
@@ -102,43 +159,16 @@ async function putPlacementAsync(placement) {
 }
 
 async function reloadOnTimerAsync() {
-    if (await getWinVerificationAsync()) {
-        window.alert("you won!");
-        // Reset
-        history = [];
-        document.getElementById('Sudoku').remove();
-        const table = document.createElement('table');
-        table.id = 'Sudoku';
-        document.getElementById('game').append(table);
-    } else {
-        const historyList = await getHistoryAsync();
-        for (const element of historyList) {
-            if (history.find(h => h.x === element.x && h.y === element.y)) {
-                continue;
-            }
-
-            reloadCell(element);
-            createUserList();
+    const historyList = await getHistoryAsync();
+    for (const element of historyList) {
+        if (history.find(h => h.x === element.x && h.y === element.y)) {
+            continue;
         }
-    }
-}
 
-function reloadCell(placement) {
-    history.push(placement);
-    let occurrence = 0;
-    for (const key of Object.keys(users)){
-        if (key == placement.username){
-            occurrence++;
-        }
-    }
-    if (occurrence == 0){
-        console.log(colors.length);
-        users[placement.username] = colors[Math.floor(Math.random() * colors.length)];
-    }
+        reloadCell(element);
+        createUserList();
 
-    const cellText = document.getElementById(`${placement.x}cell${placement.y}`).children;
-    cellText[0].innerText = placement.value;
-    cellText[0].style.color = users[`${placement.username}`];
+    }
 }
 
 async function sudokuOnClickAsync(X, Y) {
@@ -151,7 +181,6 @@ async function sudokuOnClickAsync(X, Y) {
         y: Y,
         value: activeNumber
     };
-    console.log(placement);
     const worked = await putPlacementAsync(placement);
     if (worked) {
         reloadCell(placement);
@@ -163,22 +192,4 @@ function numbersOnClick(number) {
     for (let i = 1; i <= 9; i++) {
         document.getElementById(`number-pad-${i}`).style.backgroundColor = i === number ? 'blueviolet' : 'Gray';
     }
-}
-
-async function loginOnClick() {
-    username = document.getElementById('username').value;
-    document.getElementById('login').remove();
-    document.getElementById('username').remove();
-    document.getElementById("usernameMessage").textContent = username;
-
-    users[username] = colors[Math.floor(Math.random() * colors.length)];
-
-    createEmptySudokuGrid();
-    createNumberPadButtons();
-    createUserList();
-
-    await fillSudokuGrid();
-    await reloadOnTimerAsync();
-
-    setInterval(reloadOnTimerAsync, 2 * 1000);
 }
\ No newline at end of file
-- 
GitLab