implemented score tracking, winning and losing, game now is fully fun…

…ctional aside from music/sounds and customizable keybinds
mrdandelion6 · Jan 9, 2024 · 8824e39 · 8824e39
1 parent 9b2bba7
commit 8824e39
Show file tree

Hide file tree

Showing 3 changed files with 282 additions and 35 deletions.
diff --git a/css/style.css b/css/style.css
@@ -30,7 +30,7 @@ a {
     position: fixed;
     width: 100vw;
     justify-content: flex-end;
-    z-index: 3;
+    z-index: 4;
 }
 
 #popmenu {
@@ -511,7 +511,7 @@ footer {
 }
 
 #pongExitPrompt, #pongSPPrompt, #pongMPPrompt, #backToMenuPrompt, #restartPrompt {
-    z-index: 2;
+    z-index: 3;
     margin: 0;
     height: 300px;
     width: calc(max(400px, 16vw));
@@ -570,3 +570,29 @@ footer {
     margin-left: calc(12vw) !important;
     margin-right: 0;
 }
+
+#playerTwoScore {
+    position: absolute;
+    /* top: 190px;
+    left: calc(20% - 16px); */
+    top: 60px;
+    left: calc(50% - 60px);
+    z-index: 2;
+    margin: 0;
+    font-size: 35px;
+}
+
+#playerOneScore {
+    position: absolute;
+    /* top: 190px;
+    left: calc(80% - 16px); */
+    top: 60px;
+    left: calc(50% + 40px);
+    z-index: 2;
+    margin: 0;
+    font-size: 35px;
+}
+
+.endTitle {
+    margin-bottom: 140px !important;
+}
diff --git a/index.html b/index.html
@@ -115,11 +115,28 @@ <h2 id="cupTitle"><span class="flashing">></span> play pong</h2>
                 <p style="margin-top: 60px;"><span id="restartY" class="pongButton">(Y) yes</span> &nbsp; <span id="restartN" class="pongButton">(N) no</span></p>
             </div>
 
+            <p id="playerOneScore" class="hidden">1</p>
+            <p id="playerTwoScore" class="hidden">2</p>
             <div id="pongMenu" class="menuPong hidden">
                 <h2 class="pongTitle"><span class="flashing">></span> play pong</h2>
                 <p id="chooseSP" class="pongButton">(1) one player</p>
                 <p id="chooseMP" class="pongButton">(2) two players</p>
             </div>
+            <div id="spLoseScreen" class="menuPong hidden">
+                <h2 class="pongTitle endTitle"><span class="flashing">></span> you lost!</h2>
+                <p id="SPplayAgainL" class="pongButton">(1) play again</p>
+                <p id="SPbackMenuL" class="pongButton">(2) back to menu</p>
+            </div>
+            <div id="spWinScreen" class="menuPong hidden">
+                <h2 class="pongTitle endTitle"><span class="flashing">></span> you won!</h2>
+                <p id="SPplayAgainW" class="pongButton">(1) play again</p>
+                <p id="SPbackMenuW" class="pongButton">(2) back to menu</p>
+            </div>
+            <div id="mpEndScreen" class="menuPong hidden">
+                <h2 class="pongTitle endTitle"><span class="flashing">></span> player <span id="winnerNum">x</span> won!</h2>
+                <p id="MPplayAgain" class="pongButton">(1) play again</p>
+                <p id="MPbackMenu" class="pongButton">(2) back to menu</p>
+            </div>
             <div id="singleMenu" class="menuPong hidden">
                 <h2 class="pongTitle"><span class="flashing">></span> difficulty</h2>
                 <p id="SPeasy" class="pongButton">(1) easy</p>