content of the confirmation modal can now be changed as needed. Bypas…

…sing the confirmation requirement is now possible.
abbastoof · Aug 22, 2024 · 163b244 · 163b244
1 parent b7b0898
commit 163b244
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 33 deletions.
diff --git a/Frontend/src/index.html b/Frontend/src/index.html
@@ -49,7 +49,6 @@ <h2 class="modal-title" id="waitingLobbyModalLabel">Lobby</h2>
         </div>
     </div>
 
-
     <!-- Pong Game Modal -->
     <div class="modal fade game-modal" id="pongModal" tabindex="-1" role="dialog" aria-labelledby="pongModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-lg" style="max-width: 820px;" role="document">
@@ -73,50 +72,27 @@ <h2 class="modal-title" id="pongModalLabel">P O N G</h2>
     </div>
 
     <!-- Game close confirmation modal -->
-    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
+    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalTitle" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="confirmationModalLabel">Confirm Action</h5>
+                    <h5 class="modal-title" id="confirmationModalTitle">Confirm Action</h5>
                     <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body" style="display: flex; flex-direction: column; align-items: center; justify-content: center;"> <!-- can the body be modified based on the game type? -->
+                <div class="modal-body" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                     <div class="confirm-text" style="margin-bottom: 1rem;">
-                        Are you sure you want to leave the game?
+                        <p id="confirmationModalMessage">Are you sure?</p>
                     </div>
                     <div class="confirm-buttons" style="display: flex; gap: 1rem;">
                         <button type="button" class="btn btn-secondary" id="cancelClose">Cancel</button>
-                        <button type="button" class="btn btn-primary" id="confirmClose">Yes, leave</button>
+                        <button type="button" class="btn btn-primary" id="confirmClose">Confirm</button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 
-<!-- Game close confirmation modal -->
- <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="confirmationModalLabel">Confirm Action</h5>
-                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body" style="display: flex; flex-direction: column; align-items: center; justify-content: center;"> <!-- can the body be modified based on the game type? -->
-                <div class="confirm-text" style="margin-bottom: 1rem;">
-                    Are you sure you want to leave the game?
-                </div>
-                <div class="confirm-buttons" style="display: flex; gap: 1rem;">
-                    <button type="button" class="btn btn-secondary" id="cancelClose">Cancel</button>
-                    <button type="button" class="btn btn-primary" id="confirmClose">Yes, leave</button>
-                </div>
-            </div>
-        </div>
-    </div>
- </div>
-
-
-
-      <!-- Tournament Modal -->
+    <!-- Tournament Modal -->
     <div class="tournament"></div>
 
     <!-- About Modal -->

diff --git a/Frontend/src/js/modals/quitConfirmation.js b/Frontend/src/js/modals/quitConfirmation.js
@@ -1,6 +1,14 @@
 import * as bootstrap from 'bootstrap';
 
-export function initializeConfirmationModal(modalId) {
+/**
+ * initialize a confirmation modal that will be shown before closing another modal.
+ * The confirmation modal will be shown when the modal with the given modalId is about to be hidden.
+ * @param {string} modalId - The id of the modal that will be hidden
+ * @param {string} title - The title of the confirmation modal
+ * @param {string} message - The message of the confirmation modal
+ * @returns {function} bypassConfirmationModal - A function that can be called to bypass the confirmation modal and hide the modal with the given modalId
+*/
+export function initializeConfirmationModal(modalId, title, message) {
 
 	const confirmationModalElement = document.getElementById('confirmationModal');
 	const confirmationModal = new bootstrap.Modal(confirmationModalElement, {
@@ -9,15 +17,19 @@ export function initializeConfirmationModal(modalId) {
 	});
 
 	let isConfirmed = false;
+	let bypassConfirmation = false;
 
     document.getElementById(modalId).addEventListener('hide.bs.modal', function(event){
         // console.log("in ", modalId, ".hide with isConfirmed:", isConfirmed);
-        if (!isConfirmed) {
+        if (!isConfirmed && !bypassConfirmation) {
             // console.log("no confirmation.. preventing default");
             event.preventDefault();
+			document.getElementById('confirmationModalTitle').innerText = title;
+            document.getElementById('confirmationModalMessage').innerText = message;
             confirmationModal.show();
         } else {
             isConfirmed = false;
+			bypassConfirmation = false
         }
      });
 
@@ -33,4 +45,11 @@ export function initializeConfirmationModal(modalId) {
         const modal = bootstrap.Modal.getInstance(document.getElementById(modalId));
         modal.hide(); // Use Bootstrap's native method to hide the modal
     });
+
+	// function to bypass the confirmation modal
+	return function bypassConfirmationModal() {
+		bypassConfirmation = true;
+		const modal = bootstrap.Modal.getInstance(document.getElementById(modalId));
+		modal.hide();
+	};
 }
diff --git a/Frontend/src/js/pong/pong.js b/Frontend/src/js/pong/pong.js
@@ -201,7 +201,25 @@ document.addEventListener('DOMContentLoaded', () => {
         }, 500); // Ensure the modal is fully visible
     });
 
-     initializeConfirmationModal('pongModal');
+    let title = "Quit Game";
+    let message = "Are you sure you want to quit the game?";
+
+    // if (gameSession.isRemote === true) {
+    //     title = "Forfeit Game";
+    //     message = "Are you sure you want to forfeit?\nyou will lose!";
+    // } else if (gameSession.isLocalTournament === true) {
+    //     title = "End Tournament";
+    //     message = "Are you sure you want to end the tournament?";
+    // }
+
+    const bypassConfirmationModal = initializeConfirmationModal('pongModal', title, message);
+
+    // test bypassing the confirmation modal
+    // document.addEventListener('keydown', function(event) {
+    //     if (event.key === 'Backspace') {
+    //         bypassConfirmationModal();
+    //     }
+    // });
 
     document.getElementById('pongModal').addEventListener('hidden.bs.modal', function(event) {
         // Thinking we should add a check here to see if the game was quit instead of it ending naturally and handle