From fe46206547b56c0574a354771506339ce617719a Mon Sep 17 00:00:00 2001
From: MKM <kaanmesum@gmail.com>
Date: Fri, 19 Apr 2024 21:21:35 +0300
Subject: [PATCH] =?UTF-8?q?F=C4=B0N=C4=B0SHED=20SEND=20REQUSETSDAS=C4=9EOK?=
 =?UTF-8?q?D=20AJS=C5=9ELD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Backend/Apps/Game/urls.py          |  2 +-
 Backend/static/scripts/requests.js |  2 +-
 Backend/static/scripts/spa.js      | 65 ++++++++++++++++++++++++------
 3 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/Backend/Apps/Game/urls.py b/Backend/Apps/Game/urls.py
index 925329e6..68e883b0 100644
--- a/Backend/Apps/Game/urls.py
+++ b/Backend/Apps/Game/urls.py
@@ -4,5 +4,5 @@
 from . import views
 
 urlpatterns = [
-    path('<uuid:game_id>',views.index,name='index'),
+    path('<uuid:game_id>/',views.index,name='index'),
 ]
\ No newline at end of file
diff --git a/Backend/static/scripts/requests.js b/Backend/static/scripts/requests.js
index b59f09af..6dfadd92 100644
--- a/Backend/static/scripts/requests.js
+++ b/Backend/static/scripts/requests.js
@@ -66,7 +66,7 @@ async function handleGameAcceptedCallback(data)
             game_id: response.game_id,
         }
         socket.send(JSON.stringify(sendBody));
-        console.log("redirected to game")
+        loadPage(`/game/${response.game_id}/`);
     }
     catch (error)
     {
diff --git a/Backend/static/scripts/spa.js b/Backend/static/scripts/spa.js
index fbf407b1..688f5a73 100644
--- a/Backend/static/scripts/spa.js
+++ b/Backend/static/scripts/spa.js
@@ -484,16 +484,51 @@ const routes = new Map([
         auth_required: true,
         url: [/game\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})/],
         html: `
-          <div class="container">
-                <div class="player">
-                  <img src="/static/public/liked.svg" style="width: 20px" alt="Player 1">
-                  <p>Player 1 &nbsp <br>Point: 2000&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</p>
-                  <p>Player 2 &nbsp <br>Point: 2000</p>
-                  <img src="/static/public/liked.svg" style="width: 20px" alt="Player 2">
-                </div>
-                <canvas class="canvas-class" id="pongCanvas" width="800" height="400"></canvas>
-              </div>
 
+     <div
+        class="background container-fluid social-background"
+        style="padding: 0"
+      >
+    <div class="game-container">
+
+        <div class="game-wrapper">
+            <div class="game-data-wrapper">
+                
+            <div class="game-player-data" id="player-one">
+                <div class="player-image">
+                     <img src="https://picsum.photos/seed/picsum/200/300" alt="Player 2">
+                </div>
+                <div class="player-description" id="player-one-details">
+                    <span class="player-name">Player 1</span>
+                    <span class="player-points">Points?</span>
+                </div>
+            </div>
+            <div class="game-points">
+                <h1 id="game-points" class="skeleton">
+
+                </h1>
+            </div>
+            <div class="game-player-data" id="player-two">
+                <div class="player-image">
+                     <img src="https://picsum.photos/seed/picsum/200/300" alt="Player 2">
+                </div>
+                <div class="player-description" id="player-two-details">
+                    <span class="player-name">Player 2</span>
+                    <span class="player-name">Points?</span>
+                </div>
+            </div>
+
+        </div>
+           <div class="" id="canvas-wrapper">
+        <div class="spectators-wrapper" id="spectators-wrapper">
+        </div>
+               <div class="canvas-wrapper">
+                <canvas class="canvas-class" id="pongCanvas" width="1368" height="600"></canvas>
+               </div>
+           </div>
+        </div>
+    </div>
+        </div>
             `
     }],
     ['error', {
@@ -596,7 +631,6 @@ export function loadPage(fileName) {
     let data = findRouteFile(fileName);
     const route = routes.get(data);
     let isMatch = false;
-
     if (Array.isArray(route.url)) {
         isMatch = route.url.some(url => {
             if (url instanceof RegExp) {
@@ -610,9 +644,16 @@ export function loadPage(fileName) {
     } else {
         isMatch = window.location.pathname.includes(route.url);
     }
-
+        let split = fileName.split('/').filter(Boolean);
     if (!isMatch) {
-        history.pushState({}, '', window.location.origin + route.url);
+        if(split.length > 1)
+        {
+            console.log("split",split)
+            history.pushState({}, '', window.location.origin + `/${split[0]}/${split[1]}/`);
+        }
+        else
+            history.pushState({}, '', window.location.origin + route.url);
+
     }
     let content = document.getElementById('main');
     content.innerHTML = route.html;