From 7aa211eee608639e6250445f2cbfecfc7d23fe27 Mon Sep 17 00:00:00 2001
From: Maxime <maxime.tissot@student.reutlingen-university.de>
Date: Sat, 9 Jul 2022 19:30:59 +0200
Subject: [PATCH] Better css and bug fixes
---
.../VSundSOA/backendapi/GameController.java | 1 +
Sudoku.css | 30 ++++--
Sudoku.html | 8 +-
Sudoku.js | 91 ++++++++++++++-----
4 files changed, 96 insertions(+), 34 deletions(-)
diff --git a/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameController.java b/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameController.java
index 1134a86..c5c43db 100644
--- a/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameController.java
+++ b/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameController.java
@@ -28,6 +28,7 @@ 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 b6e9a38..43d5ec1 100644
--- a/Sudoku.css
+++ b/Sudoku.css
@@ -23,6 +23,14 @@ h2{
color: #F6F6F6;
}
+h3{
+ font-size: 300%;
+ font-family: Montserrat-Regular;
+ margin: auto;
+ text-align: center;
+ line-height: 80px;
+}
+
.button{
display: block;
background-color: #7289DA;
@@ -53,7 +61,7 @@ h2{
.Game{
display: grid;
- grid-template-columns: 90% 10%;
+ grid-template-columns: 75% 10% 15%;
align-content: center;
}
@@ -65,18 +73,24 @@ h2{
background: -o-linear-gradient(-68deg, #ac32e4 , #4801ff);
background: -moz-linear-gradient(-68deg, #ac32e4 , #4801ff);
background: linear-gradient(-68deg, #ac32e4 , #4801ff);
- border-radius: 16px;
+ border-radius: 10px;
+ display: grid;
+ grid-template-columns: 33.3% 33.3% 33.3%;
}
-.Sudoku td{
- font-size: 60px;
- font-family: Montserrat-Regular;
- text-align: center;
- line-height: 70px;
+.block{
+ border: 4px solid #999;
+ display: grid;
+ grid-template-columns: 33.3% 33.3% 33.3%;
+}
+
+.cell{
border: 1px solid #999;
+ height: 100%;
+ width: 100%;
}
-.Sudoku td:hover{
+.cell:hover{
background-color: rgba(255,255,255,0.2);
}
diff --git a/Sudoku.html b/Sudoku.html
index 8257fa5..68a3536 100644
--- a/Sudoku.html
+++ b/Sudoku.html
@@ -8,15 +8,17 @@
<body>
<div id="options">
<h1>Sudoku with Friends</h1>
- <h2>Welcome, please enter your username</h2>
+ <h2 id="usernameMessage">Welcome, please enter your username</h2>
<input type="text" id="username" class="input" placeholder="Username"/>
<button type="button" id="login" class="button" onclick="loginOnClick()">Connect</button>
</div>
<div class="Game" id="game">
- <table class="Sudoku" id="Sudoku">
- </table>
+ <div class="Sudoku" id="Sudoku">
+ </div>
<div class="NumberPad" id="number-pad">
</div>
+ <div class="UserList" id="userBlock">
+ </div>
</div>
<script src="Sudoku.js"></script>
</body>
diff --git a/Sudoku.js b/Sudoku.js
index 87fd0fe..59462e3 100644
--- a/Sudoku.js
+++ b/Sudoku.js
@@ -3,18 +3,23 @@ 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 users = {};
function createEmptySudokuGrid() {
const table = document.getElementById('Sudoku');
- for (let row = 0; row < 9; row++) {
- const tr = document.createElement('tr');
- tr.className = 'row';
- table.appendChild(tr)
- for (let cell = 0; cell < 9; cell++) {
- const td = document.createElement('td');
- td.id = `${row + 1}cell${cell + 1}`;
- td.onclick = () => sudokuOnClickAsync(cell, row);
- tr.appendChild(td);
+ 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);
+ }
}
}
}
@@ -33,15 +38,41 @@ function createNumberPadButtons() {
}
}
+function createUserList(){
+ const userBlock = document.getElementById(`userBlock`);
+ const userList = document.getElementById(`userBlock`).children;
+ for (const key of Object.keys(users)){
+ let occurrence = 0;
+ for (const username of userList){
+ if (username.id == `user-${key}`){
+ occurrence++;
+ break;
+ }
+ }
+ if (occurrence == 0){
+ const user = document.createElement(`h2`);
+ user.id = `user-${key}`
+ user.textContent = key;
+ user.style.color = users[key];
+
+ userBlock.appendChild(user);
+ }
+ }
+ console.log(users);
+}
+
async function fillSudokuGrid() {
const sudoku = await getFieldsAsync();
for (let row = 0; row < 9; row++) {
for (let cell = 0; cell < 9; cell++) {
+ const cellText = document.createElement('h3');
if (sudoku[row][cell] > 0) {
- document.getElementById(`${row + 1}cell${cell + 1}`).innerText = sudoku[row][cell];
+ cellText.innerText = sudoku[row][cell];
} else {
- document.getElementById(`${row + 1}cell${cell + 1}`).innerText = '_';
+ cellText.innerText = '_';
}
+ const currentCell = document.getElementById(`${row}cell${cell}`);
+ currentCell.append(cellText);
}
}
}
@@ -86,18 +117,31 @@ async function reloadOnTimerAsync() {
continue;
}
- history.push(element);
- reloadCell(element.x, element.y, element.value, 'red');
+ reloadCell(element);
+ createUserList();
}
}
}
-function reloadCell(X, Y, value, color) {
- document.getElementById(`${Y + 1}cell${X + 1}`).innerText = value.toString();
- document.getElementById(`${Y + 1}cell${X + 1}`).style.color = color;
+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)];
+ }
+
+ 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) { //how to get x, Y?
+async function sudokuOnClickAsync(X, Y) {
if (activeNumber < 1) {
return;
}
@@ -107,17 +151,17 @@ async function sudokuOnClickAsync(X, Y) { //how to get x, Y?
y: Y,
value: activeNumber
};
+ console.log(placement);
const worked = await putPlacementAsync(placement);
if (worked) {
- reloadCell(X, Y, activeNumber, 'green');
- history.push(placement);
+ reloadCell(placement);
}
}
function numbersOnClick(number) {
activeNumber = number;
for (let i = 1; i <= 9; i++) {
- document.getElementById(`number-pad-${i}`).style.backgroundColor = i === number ? 'Yellow' : 'Gray';
+ document.getElementById(`number-pad-${i}`).style.backgroundColor = i === number ? 'blueviolet' : 'Gray';
}
}
@@ -125,12 +169,13 @@ async function loginOnClick() {
username = document.getElementById('username').value;
document.getElementById('login').remove();
document.getElementById('username').remove();
- const span = document.createElement("h2");
- span.innerText = username;
- document.getElementById('options').append(span);
+ document.getElementById("usernameMessage").textContent = username;
+
+ users[username] = colors[Math.floor(Math.random() * colors.length)];
createEmptySudokuGrid();
createNumberPadButtons();
+ createUserList();
await fillSudokuGrid();
await reloadOnTimerAsync();
--
GitLab