unified front for games done

frontend/src/pages/pong/pong.css

@@ -42,9 +42,6 @@
     absolute
     text-xl
   }
-  .pong-bat {
-    @apply absolute w-3 h-20 bg-white;
-  }
   .disp-key {
     @apply
       inline-flex
@@ -56,9 +53,13 @@
       font-mono text-sm font-medium
       select-none  
   }
-}
+  .page-title {
-@layer components {
+    @apply text-3xl font-bold text-gray-800
-  .pong-btn-style {
+  }
+  .displaybox {
+    @apply bg-[#43536b];
+  }
+  .dflt-btn-style {
     @apply
     text-white
     cursor-pointer
@@ -68,14 +69,7 @@
     active:translate-y-px
     active:shadow-[0_2px_0_0_black];
   }
-  .page-title {
+  .game-mainBoxDisplay {
-    @apply text-3xl font-bold text-gray-800
-  }
-  .displaybox {
-    @apply bg-[#43536b];
-  }
-  /* pong decorative */
-  .pong-mainboxDisplay {
     @apply
     fixed
     top-1/2
@@ -86,6 +80,11 @@
     bg-gray-200 border-gray-200
     p-6
   }
+}
+
+/*  PONG ONLY ELEMENTS  */
+@layer components {
+  /* pong decorative */
   .pongbox-style {
     @apply
     h-112.5
@@ -106,6 +105,9 @@
       bg-size-[4px_20px];
   }
   /* game pong moving elements */
+  .pong-bat {
+    @apply absolute w-3 h-20 bg-white;
+  }
   .pong-batleft {
     @apply
     absolute left-4 top-0;

frontend/src/pages/pong/pong.html

@@ -1,5 +1,5 @@
 <div class="base-box displaybox">
-	<div id="mainbox" class="pong-mainboxDisplay rounded-elem">
+	<div id="mainbox" class="game-mainboxDisplay rounded-elem">
 		<div class="grid grid-cols-3">
 			<div class="flex flex-col gap-2">
 				<button id="QueueBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Queue

frontend/src/pages/ttt/ttt.css

@@ -5,85 +5,112 @@
   src: url("/fonts/DejaVuSansMono.woff2") format("woff2");
 }
 
-.displaybox {
+@tailwind utilities;
-  @apply
-  fixed
-  inset-0
-  flex
-  items-center
-  justify-center
-  bg-[#43536b];
 
-}
+@layer utilities {
-
+  .gray-color {
-.mainboxDisplay {
+    @apply border-gray-500 bg-gray-500
-  @apply
+  }
-  fixed 
+  .white-color {
-  top-1/2 
+    @apply border-white bg-white
-  left-1/2 
+  }
-  -translate-x-1/2 
+  .fit-all {
-  -translate-y-1/2 
-  bg-gray-200 
-  p-6 rounded-xl 
-  shadow-2xl 
-  text-center z-50;
-}
-
-
-.btn-style {
-  @apply
-  w-25
-  h-8
-  border 
-  border-gray-500
-  rounded-3xl
-  bg-gray-500
-  text-white
-  cursor-pointer
-  shadow-[0_2px_0_0_black]
-  transition-all
-  hover:bg-blue-200
-  active:bg-gray-400
-  active:translate-y-px
-  active:shadow-[0_2px_0_0_black];
-}
-
-
-.grid-box {
     @apply
-    bg-white
+    w-fit h-fit
-    p-8 
+  }
-    rounded-3xl
+  .blue-hover {
-    border
+    @apply
-    border-black
+    hover:bg-blue-200
+    hover:border-blue-200
+  }
+  .rounded-elem {
+    @apply
+    border-6 rounded-3xl
+  }
+  .circle-8 {
+    @apply w-8 h-8 rounded-full
+  }
+  .base-box {
+    @apply
+    flex items-center justify-center
+  }
+  .focus-elem {
+    @apply
+    z-50
     shadow-2xl
-}
+    text-center
-
+    text-black
-
+    absolute
-.grid-layout {
+    text-xl
+  }
+  .disp-key {
     @apply
-
+      inline-flex
-    grid 
+      items-center
-    grid-cols-3 
+      justify-center
-    gap-1 
+      min-w-[2rem] h-8 px-2
-    max-w-2xl 
+      rounded-md border border-gray-300
-    mx-auto
+      bg-gray-100 text-gray-800
-}
+      font-mono text-sm font-medium
-
+      select-none  
-.ttt-cell {
+  }
+  .page-title {
+    @apply text-3xl font-bold text-gray-800
+  }
+  .displaybox {
+    @apply bg-[#43536b];
+  }
+  .dflt-btn-style {
     @apply
-    bg-black 
-    aspect-square
-    flex
-    items-center 
-    justify-center 
     text-white
-    text-9xl 
+    cursor-pointer
-    font-bold 
+    shadow-[0_2px_0_0_black]
-    hover:bg-gray-500
+    transition-all
+    active:bg-gray-400
+    active:translate-y-px
+    active:shadow-[0_2px_0_0_black];
+  }
+  .game-mainBoxDisplay {
+    @apply
+    fixed
+    top-1/2
+    left-1/2
+    -translate-x-1/2
+    -translate-y-1/2
+    w-212.5
+    bg-gray-200 border-gray-200
+    p-6
+  }
 }
 
-#historyBtn {
+/*  TIC-TAC-TOE ONLY ELEMENTS  */
-  @apply
+@layer components {
-  text-white
+  /* ttt decorative */
+  .player-name {
+    @apply
+    font-semibold text-gray-800
+  }
+  .player-timer {
+    @apply
+    text-lg text-gray-800
+  }
+  /* ttt game elements */
+  .ttt-play-area {
+    @apply
+    grid grid-cols-3 gap-1 
+    max-w-2xl mx-auto
+    relative overflow-hidden
+  }
+  .ttt-cell {
+      @apply 
+      bg-black 
+      aspect-square
+      flex
+      items-center 
+      justify-center 
+      text-white 
+      text-9xl 
+      font-bold 
+      hover:bg-gray-500
+  }
 }

frontend/src/pages/ttt/ttt.html

@@ -1,17 +1,21 @@
-<div class="displaybox">
+<div class="base-box displaybox">
-    <div class="mainboxDisplay" id="mainbox">
+    <div class="game-mainboxDisplay rounded-elem white-color" id="mainbox">
-        <button class="btn-style absolute top-4 left-6" id="historyBtn">History</button>
+        <div class="grid grid-cols-[1fr_2fr_1fr] items-center">
-        <button class="btn-style absolute top-4 right-6" id="JoinQueueBtn">Join Queue</button>
+            <div class="flex flex-col gap-2 p-8">
-        <h1 class="text-3xl font-bold text-gray-800">
+                <button class="dflt-btn-style fit-all gray-color rounded-elem" id="historyBtn">History</button>
-            Tic-tac-toe Box<span id="t-username"></span>
-        </h1><br>
-        <div class="grid grid-cols-[auto_1fr_auto_1fr_auto] items-center rounded-lg px-4 py-3">
-            <div class="text-7xl text-gray-800 mx-4 font-bold" id="playerX">
-                X
             </div>
+            <div class="flex flex-col gap-2">
+                <h1 class="page-title">Tic-tac-toe Box<span id="t-username"></span></h1>
+            </div>
+            <div class="flex flex-col gap-2 p-8 items-end">
+                <button class="dflt-btn-style fit-all gray-color rounded-elem" id="JoinQueueBtn">Join Queue</button>
+            </div>
+        </div>
+        <div class="grid grid-cols-[auto_1fr_auto_1fr_auto] items-center px-4 py-3">
+            <div class="text-7xl text-gray-800 mx-4 font-bold" id="playerX">X</div>
             <div class="text-left">
-                <div class="font-semibold text-gray-800" id="playerX-name"></div>
+                <div class="player-name" id="playerX-name"></div>
-                <div class="text-lg text-gray-800" id="playerX-timer"></div>
+                <div class="player-timer" id="playerX-timer"></div>
             </div>
 
             <div class="text-center text-sm text-gray-800 px-4 whitespace-nowrap">
@@ -20,18 +24,15 @@
             </div>
 
             <div class="text-right">
-                <div class="font-semibold text-gray-800" id="playerO-name"></div>
+                <div class="player-name" id="playerO-name"></div>
-                <div class="text-lg text-gray-800" id="playerO-timer"></div>
+                <div class="player-timer" id="playerO-timer"></div>
-            </div>
-            <div class="text-7xl text-gray-800 mx-4 font-bold" id="playerO">
-                O
             </div>
+            <div class="text-7xl text-gray-800 mx-4 font-bold" id="playerO">O</div>
         </div>
-        <div class="grid-box mt-2">
+        <div class="rounded-elem white-color p-8 mt-2">
-            <div class="grid-layout relative rounded-lg overflow-hidden">
+            <div class="ttt-play-area">
-                <div class="absolute inset-0 flex flex-col items-center justify-center z-10 bg-gray-900/85 text-white hidden"
+                <div class="absolute inset-0 flex items-center justify-center">
-                     id="ttt-end-screen">
+                   <div class="focus-elem white-color rounded-elem hidden" id="ttt-end-screen">outcome</div>
-                    outcome
                 </div> 
                 <div class="ttt-cell" id="cell1"></div>
                 <div class="ttt-cell" id="cell2"></div>