last-dance-merged

yigithankarabulut · Jul 16, 2024 · c081935 · c081935
1 parent 4dc012b
commit c081935
Show file tree

Hide file tree

Showing 15 changed files with 136 additions and 104 deletions.
diff --git 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
diff --git a/frontend/src/routes/conflictusername/Conflictusername.js 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/...es/confilctusername/conflictusername.html → ...es/conflictusername/conflictusername.html b/...es/confilctusername/conflictusername.html → ...es/conflictusername/conflictusername.html
@@ -2,6 +2,7 @@
     <div class="row">
         <div class="col-lg-6 align-self-center mb-5">
             <h1>Enter Username!</h1>
+            <div id="unameHelp" class="form-text">That Username Already Exist</div>
         </div>
         <div class="col-lg-6 d-flex">
             <div class="vr d-none d-lg-block"></div>
@@ -14,9 +15,8 @@ <h1>Enter Username!</h1>
                     <div class="mb-3">
                         <label for="code" class="form-label">Enter Username</label>
                         <input type="text" class="form-control" id="username" name="uname" value="">
-                        <div id="unameHelp" class="form-text">Username Already Exist</div>
                     </div>
-                    <button type="submit" class="btn btn-primary text-white">Submit</button>
+                    <button type="submit" id="submit" class="btn btn-primary text-white">Submit</button>
                     <p class="text-danger mt-2 visible" id="fields-warning"></p>
                 </form>
             </div>

diff --git 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
@@ -85,6 +85,7 @@ <h6 class="mb-0">Avatar</h6>
 								<input id="update-avatar" type="button" class="btn btn-primary px-4" value="Update Avatar">
 								<button id="cancel-button" class="btn btn-danger">Cancel</button>
 								<button id="reset-pass" class="btn btn-warning">Change Password</button>
+								<p class="text-danger mt-2 visible" id="fields-warning"></p>
 							</div>
 						</div>
 					</div>

diff --git 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
@@ -13,3 +13,5 @@
         }
 </style>
 <canvas id="canvas-pong" width="960" height="480"></canvas>
+
+
diff --git a/frontend/src/routes/homepage/homepage.html b/frontend/src/routes/homepage/homepage.html
@@ -40,8 +40,8 @@
 <div class="container">
     <div class="main-container">
         <div class="button-container">
-            <a data-nav id="quickplay-btn" href="/quickplay" class="btn btn-primary">CREATE GAME</a>
-            <a data-nav id="quickplay-btn" href="/join" class="btn btn-primary">JOIN GAME</a>
+            <a data-nav id="quickplay" href="/quickplay" class="btn btn-primary">CREATE GAME</a>
+            <a data-nav id="join" href="/join" class="btn btn-primary">JOIN GAME</a>
         </div>
     </div>
 </div>
diff --git 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
@@ -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
@@ -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
@@ -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);
 }
-
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,3 +13,5 @@
		}
		</style>
		<canvas id="canvas-pong" width="960" height="480"></canvas>