t

API/static/scripts/spa.js

@@ -522,57 +522,6 @@ const routes = new Map([
         </div>
             `
     }],
-    ['game', {
-        auth_required: true,
-        url: ['/play/'],
-        html: `
-
-     <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', {
         auth_required: false,
         url: ['/error/'],
@@ -762,12 +711,12 @@ const routeToFile = [
     [['/social/', '/social/\\w+/g'], 'social'],
     [['/home/'], 'home'],
     [['/verification/'], 'verification'],
-    [['/play/'], 'offline-game'],
     [[/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})/], 'game'],
     [['/matchmaking/'], 'matchmaking'],
     [['/tournaments/'], 'tournaments'],
     [['/create-tournament/'], 'create-tournament'],
     [[/tournament\/([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})/], 'tournament'],
+    [['/play/'], 'offline-game'],
 ]
 const requiredScripts = [
     '/static/components/Notification.js',

API/static/styles/offline-game.css

@@ -0,0 +1,182 @@
+.game-container{
+    width: 90%;
+    margin: auto;
+    padding: 2rem 0;
+    height: 100%;
+}
+.game-wrapper{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: 100%;
+    position: relative;
+}
+.game-data-wrapper
+{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: smaller;
+    position: relative;
+}
+.game-player-data
+{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.player-image{
+    aspect-ratio: 1/1;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+}
+.player-image img   {
+    aspect-ratio: 1/1;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+}
+.game-points h1{
+    font-size: 3rem;
+}
+.player-description{
+    font-weight: bold;
+    font-size: large;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.canvas-wrapper
+{
+    position: relative;
+    width: 1368px;
+    height: 600px;
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+    border-radius: 2rem;
+}
+#canvas-wrapper{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#countdown {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 5rem;
+    color: white;
+    font-weight: bold;
+    user-select: none;
+    z-index: 20;
+    animation: fadeIn 1s linear;
+}
+#game-message-wrapper{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+    top: 0;
+    gap: 10px;
+    z-index: 20;
+    user-select: none;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+.winner-wrapper{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 1s;
+    gap: 20px;
+}
+
+.play-again {
+    cursor: pointer;
+    transition: all 0.5s;
+}
+
+.play-again:hover {
+    scale: 1.06;
+}
+
+.info-area {
+    display: flex;
+    flex-direction: column;
+}
+
+.winner-wrapper h1 h2 {
+    margin: 0;
+}
+.winner-image-wrapper{
+    aspect-ratio: 1/1;
+    width: 5rem;
+    height: 5rem;
+    border-radius: 50%;
+}
+.spectators-wrapper{
+    position: absolute;
+    right: 50%;
+    top: 3rem;
+    display: flex;
+    justify-content: center;
+}
+.spectator-image{
+    aspect-ratio: 1/1;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+margin-right: -1rem; /* Half of the width */
+}
+
+.spectator-image img{
+    aspect-ratio: 1/1;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.popup-container {
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+    list-style: none;
+    z-index: 10;
+    border: 1px solid white;
+    user-select: none;
+    padding: 10px;
+    position: absolute;
+    top: 3rem;
+    display: flex;
+    flex-direction: column;
+    min-width: 150px;
+}
+
+.popup-container h6 {
+    text-align: center;
+}
+
+.popup-content {
+    padding: 2px;
+    gap: 25px;
+    width: 100px;
+    display: flex;
+    font-size: small;
+    align-items: center;
+    justify-content: space-between;
+}