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