From c08193526846a76dc7a03c005bfe136f40639774 Mon Sep 17 00:00:00 2001 From: Vahdet Parlak Date: Tue, 16 Jul 2024 22:59:00 +0300 Subject: [PATCH] last-dance-merged --- frontend/src/routes/ai/ai.html | 2 +- .../confilctusername/Conflictusername.js | 54 ------------------- .../conflictusername/Conflictusername.js | 54 +++++++++++++++++++ .../conflictusername.html | 4 +- frontend/src/routes/edit/Edit.js | 25 +++++++-- frontend/src/routes/edit/edit.html | 1 + frontend/src/routes/game/Game.js | 5 -- frontend/src/routes/game/game.html | 2 + frontend/src/routes/homepage/homepage.html | 4 +- frontend/src/routes/localgame/localgame.html | 2 +- .../routes/localtournament/Localtournament.js | 23 +++++--- .../localtournament/localtournament.html | 5 +- frontend/src/routes/quickplay/Quickplay.js | 54 +++++++++++-------- frontend/src/routes/quickplay/quickplay.html | 3 +- frontend/src/utils/navTo.js | 2 +- 15 files changed, 136 insertions(+), 104 deletions(-) delete mode 100644 frontend/src/routes/confilctusername/Conflictusername.js create mode 100644 frontend/src/routes/conflictusername/Conflictusername.js rename frontend/src/routes/{confilctusername => conflictusername}/conflictusername.html (84%) diff --git a/frontend/src/routes/ai/ai.html b/frontend/src/routes/ai/ai.html index 13bdd91..05192b9 100644 --- a/frontend/src/routes/ai/ai.html +++ b/frontend/src/routes/ai/ai.html @@ -16,7 +16,7 @@ } #scoreBoard { position: absolute; - top: 20px; + top: 365px; font-size: 24px; font-weight: bold; color: #000000; diff --git a/frontend/src/routes/confilctusername/Conflictusername.js b/frontend/src/routes/confilctusername/Conflictusername.js deleted file mode 100644 index d968127..0000000 --- a/frontend/src/routes/confilctusername/Conflictusername.js +++ /dev/null @@ -1,54 +0,0 @@ -import { navigateTo } from "../../utils/navTo.js"; -import { insertIntoElement, toggleHidden } from "../../utils/utils.js"; - - -const url = "http://127.0.0.1:8000/user/update/username"; - -export async function fetchConflictusername() { - -const form = document.getElementById("uname-code"); - -form.addEventListener("submit", (e) => { - - e.preventDefault(); - const username = document.getElementById("username").value; - const fields_warning = document.getElementById('fields-warning'); - const access_token = urlParams.get("access_token"); - const refresh_token = urlParams.get("refresh_token"); - - if (!code) - { - insertIntoElement('fields-warning', "code shouldn't be empty"); - return; - } - toggleHidden('uname-code'); - toggleHidden('login-spinner'); - fetch(url, { - method: "PATCH", - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${access_token}`, - }, - body: JSON.stringify({ - username: username, - }), - }) - .then(res => { - if (!res.ok) { - fields_warning.innerText = "invalid username"; - throw new Error("couldn't log in"); - } - document.getElementById('nav-bar').style.display = 'flex'; - return res.json(); - }) - .then(data => { - localStorage.setItem("access_token", access_token); - localStorage.setItem("refresh_token", refresh_token); - navigateTo("/"); - }) - .catch((err) => { - toggleHidden('uname-code'); - toggleHidden('login-spinner'); - }); -}) -} diff --git a/frontend/src/routes/conflictusername/Conflictusername.js b/frontend/src/routes/conflictusername/Conflictusername.js new file mode 100644 index 0000000..830abe6 --- /dev/null +++ b/frontend/src/routes/conflictusername/Conflictusername.js @@ -0,0 +1,54 @@ +import { navigateTo } from "../../utils/navTo.js"; +import { insertIntoElement, toggleHidden } from "../../utils/utils.js"; + +const url = "http://127.0.0.1:8000/user/username"; + +export async function fetchConflictusername() { + const form = document.getElementById("uname-code"); + + const urlParams = new URLSearchParams(window.location.search); + const access_token = urlParams.get("access_token"); + const refresh_token = urlParams.get("refresh_token"); + + form.addEventListener("submit", async (e) => { + e.preventDefault(); + const username = document.getElementById("username").value; + const fields_warning = document.getElementById('fields-warning'); + if (!username) { + insertIntoElement('fields-warning', "Username shouldn't be empty"); + return; + } + toggleHidden('uname-code'); + toggleHidden('login-spinner'); + + try { + const response = await fetch(url, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${access_token}`, + }, + body: JSON.stringify({ + username: username, + }) + }); + + if (!response.ok) { + const errorData = await response.json(); + throw errorData; + } + localStorage.setItem("access_token", access_token); + localStorage.setItem("refresh_token", refresh_token); + navigateTo("/"); + } catch (err) { + console.log("123123123123123", err); + if (err.error) { + insertIntoElement('fields-warning', "Error: " + err.error); + } else if (err.username) { + insertIntoElement('fields-warning', "Username error: " + err.username); + } + toggleHidden('uname-code'); + toggleHidden('login-spinner'); + } + }); +} diff --git a/frontend/src/routes/confilctusername/conflictusername.html b/frontend/src/routes/conflictusername/conflictusername.html similarity index 84% rename from frontend/src/routes/confilctusername/conflictusername.html rename to frontend/src/routes/conflictusername/conflictusername.html index 510bbc3..c90664b 100644 --- a/frontend/src/routes/confilctusername/conflictusername.html +++ b/frontend/src/routes/conflictusername/conflictusername.html @@ -2,6 +2,7 @@

Enter Username!

+
That Username Already Exist
@@ -14,9 +15,8 @@

Enter Username!

-
Username Already Exist
- +

diff --git a/frontend/src/routes/edit/Edit.js b/frontend/src/routes/edit/Edit.js index 230650b..a8c0cd1 100644 --- a/frontend/src/routes/edit/Edit.js +++ b/frontend/src/routes/edit/Edit.js @@ -1,4 +1,5 @@ import { navigateTo } from "../../utils/navTo.js"; +import { insertIntoElement } from "../../utils/utils.js"; const userDetailUrl = "http://127.0.0.1:8000/user/details"; const updateUserUrl = "http://127.0.0.1:8000/user/update"; @@ -45,6 +46,7 @@ export async function fetchEdit() { const firstName = document.querySelector("input[name='first-name']").value; const lastName = document.querySelector("input[name='last-name']").value; const phone = document.querySelector("input[name='phone']").value; + const fields_warning = document.getElementById('fields-warning'); let body = { first_name: firstName, @@ -66,12 +68,27 @@ export async function fetchEdit() { if (!response.ok) { const errorData = await response.json(); - throw new Error(errorData.error); + throw errorData; } + alert("Profile updated successfully"); navigateTo("/profile"); - } catch (err) { - console.log(err); - } + + } catch (err) { + if (err.error) { + insertIntoElement('fields-warning', "Error: " + err.error); + } else if (err.username) { + insertIntoElement('fields-warning', "Username error: " + err.username); + } else if (err.phone) { + insertIntoElement('fields-warning', "Phone error: " + err.phone); + } else if (err.first_name) { + insertIntoElement('fields-warning', "First name error: " + err.first_name); + } else if (err.last_name) { + insertIntoElement('fields-warning', "Last name error: " + err.last_name); + } else { + insertIntoElement('fields-warning', "Error: internal server error"); + console.log(err); + } + } }); document.getElementById("cancel-button").addEventListener("click", () => { diff --git a/frontend/src/routes/edit/edit.html b/frontend/src/routes/edit/edit.html index ca8bae0..e879afd 100644 --- a/frontend/src/routes/edit/edit.html +++ b/frontend/src/routes/edit/edit.html @@ -85,6 +85,7 @@
Avatar
+

diff --git a/frontend/src/routes/game/Game.js b/frontend/src/routes/game/Game.js index f23e0e5..fe8b89d 100644 --- a/frontend/src/routes/game/Game.js +++ b/frontend/src/routes/game/Game.js @@ -129,9 +129,4 @@ export async function fetchGame() { 83: "s", }; - // if route changes, close the websocket connection - window.addEventListener("popstate", function () { - ws.close(); - }); - } diff --git a/frontend/src/routes/game/game.html b/frontend/src/routes/game/game.html index ef0cbe9..8a2598f 100644 --- a/frontend/src/routes/game/game.html +++ b/frontend/src/routes/game/game.html @@ -13,3 +13,5 @@ } + + diff --git a/frontend/src/routes/homepage/homepage.html b/frontend/src/routes/homepage/homepage.html index 031df5e..4a40084 100644 --- a/frontend/src/routes/homepage/homepage.html +++ b/frontend/src/routes/homepage/homepage.html @@ -40,8 +40,8 @@
- CREATE GAME - JOIN GAME + CREATE GAME + JOIN GAME
diff --git a/frontend/src/routes/localgame/localgame.html b/frontend/src/routes/localgame/localgame.html index 4b9863b..bc7e3cc 100644 --- a/frontend/src/routes/localgame/localgame.html +++ b/frontend/src/routes/localgame/localgame.html @@ -16,7 +16,7 @@ } #scoreBoard { position: absolute; - top: 20px; + top: 365px; font-size: 24px; font-weight: bold; color: #000000; diff --git a/frontend/src/routes/localtournament/Localtournament.js b/frontend/src/routes/localtournament/Localtournament.js index 9a5413d..4f865c8 100644 --- a/frontend/src/routes/localtournament/Localtournament.js +++ b/frontend/src/routes/localtournament/Localtournament.js @@ -126,23 +126,30 @@ export async function fetchLocaltournament() { // Clear canvas ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); - + // Draw paddles ctx.fillStyle = '#fff'; - ctx.fillRect(0, gameState.paddle1.y, 20, 100); - ctx.fillRect(canvas.width - 20, gameState.paddle2.y, 20, 100); - + ctx.fillRect(0, gameState.paddle1.y, 15, 100); + ctx.fillRect(canvas.width - 15, gameState.paddle2.y, 15, 100); + // Draw ball ctx.beginPath(); ctx.arc(gameState.ball.x, gameState.ball.y, 10, 0, Math.PI * 2); ctx.fill(); - - // Draw center line - ctx.setLineDash([5, 15]); + + // Draw center line (net) + drawNet(); + } + + function drawNet() { + ctx.setLineDash([15, 5]); + ctx.strokeStyle = '#fff'; + ctx.beginPath(); ctx.moveTo(canvas.width / 2, 0); ctx.lineTo(canvas.width / 2, canvas.height); ctx.stroke(); - } + ctx.setLineDash([]); // Clear the dashed setting + } function resetBall() { gameState.ball.x = canvas.width / 2; diff --git a/frontend/src/routes/localtournament/localtournament.html b/frontend/src/routes/localtournament/localtournament.html index dae3589..5c7993c 100644 --- a/frontend/src/routes/localtournament/localtournament.html +++ b/frontend/src/routes/localtournament/localtournament.html @@ -13,10 +13,11 @@ background-color: #000; } #scoreBoard { - font-size: 30px; + font-size: 24px; margin: 10px 0; position: absolute; - top: 400px; + font-weight: bold; + top: 365px; } #tournamentInfo { font-size: 18px; diff --git a/frontend/src/routes/quickplay/Quickplay.js b/frontend/src/routes/quickplay/Quickplay.js index ee0fe99..cf1f983 100644 --- a/frontend/src/routes/quickplay/Quickplay.js +++ b/frontend/src/routes/quickplay/Quickplay.js @@ -1,13 +1,20 @@ import { navigateTo } from "../../utils/navTo.js"; +import { insertIntoElement } from "../../utils/utils.js"; const gameCreateUrl = "http://127.0.0.1:8000/game/room"; export async function fetchQuickplay() { - + const access_token = localStorage.getItem("access_token"); + if (!access_token) { + navigateTo("/login"); + return; + } + else { console.log("fetchingquickplay"); const form = document.querySelector(".requires-validation2"); - form.addEventListener("submit", function (event) { event.preventDefault(); event.stopPropagation(); + const fields_warning = document.getElementById('fields-warning'); + if (form.checkValidity()) { const user2 = document.querySelector('input[name="user2"]').value; const user3 = document.querySelector('input[name="user3"]').value; @@ -21,36 +28,36 @@ export async function fetchQuickplay() { user4 ] }; - // JSON verisini console'da görüntüleyin fetch(gameCreateUrl, { method: "POST", headers: { "Content-Type": "application/json", - "authorization": "Bearer " + localStorage.getItem("access_token"), + "Authorization": "Bearer " + access_token, }, body: JSON.stringify(data), - }).then((response) => { + }).then(response => { if (!response.ok) { - throw new Error("Failed to create game room"); + return response.json().then(errorData => { + throw errorData; + }); } return response.json(); - } - ).then((data) => { - console.log(data); + }).then(data => { localStorage.setItem("game_id", data.data.game_id); navigateTo("/game"); - }).catch((error) => { - console.error(error); - }) + }).catch((err) => { + console.error(err.error); + insertIntoElement('fields-warning', "Error: " + err.error); + }); } form.classList.add('was-validated'); }, false); const form2 = document.querySelector(".requires-validation"); - form2.addEventListener("submit", function (event) { event.preventDefault(); event.stopPropagation(); + const fields_warning_one = document.getElementById('fields-warning-one'); if (form2.checkValidity()) { const user5 = document.querySelector('input[name="user5"]').value; @@ -64,23 +71,24 @@ export async function fetchQuickplay() { method: "POST", headers: { "Content-Type": "application/json", - "Authorization": "Bearer " + localStorage.getItem("access_token"), + "Authorization": "Bearer " + access_token, }, body: JSON.stringify(data), - }).then((response) => { + }).then(response => { if (!response.ok) { - throw new Error("Failed to create game room"); + return response.json().then(errorData => { + throw errorData; + }); } - return response.json(); - } - ).then((data) => { + }).then(data => { localStorage.setItem("game_id", data.data.game_id); navigateTo("/game"); - }).catch((error) => { - console.error(error); - }) + }).catch((err) => { + console.error(err.error); + insertIntoElement('fields-warning-one', "Error: " + err.error); + }); } form2.classList.add('was-validated'); }, false); } - +} diff --git a/frontend/src/routes/quickplay/quickplay.html b/frontend/src/routes/quickplay/quickplay.html index 2b28a85..bea9f46 100644 --- a/frontend/src/routes/quickplay/quickplay.html +++ b/frontend/src/routes/quickplay/quickplay.html @@ -116,6 +116,7 @@

Create Game

+

@@ -123,7 +124,6 @@

Create Game

Create Tournament

Enter the Username below to join a game.

-
Enter User!
@@ -141,6 +141,7 @@

Create Tournament

+

diff --git a/frontend/src/utils/navTo.js b/frontend/src/utils/navTo.js index 5314f0f..15788a1 100644 --- a/frontend/src/utils/navTo.js +++ b/frontend/src/utils/navTo.js @@ -24,7 +24,7 @@ const route = { "/forgot-password": "fetchForgotpassword", "/reset-password": "fetchResetpassword", "/change-password": "fetchChangepassword", - "/conflictusername": "fetchConflictusername", + "/uname": "fetchConflictusername", // add more routes here. };