Modal confirm clear players

TyHil · Dec 4, 2024 · 67fa1d8 · 67fa1d8
1 parent f86f7f8
commit 67fa1d8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -37,6 +37,7 @@
     <link href="/style-guide/inputs/style.css" rel="stylesheet" type="text/css" />
     <link href="/style-guide/inputs/featured/style.css" rel="stylesheet" type="text/css" />
     <link href="/style-guide/footer/style.css" rel="stylesheet" type="text/css" />
+    <link href="/style-guide/modal/style.css" rel="stylesheet" type="text/css" />
     <link href="/response-display/style.css" rel="stylesheet" type="text/css" />
   </head>
 
@@ -109,9 +110,20 @@ <h3>Players</h3>
       </div>
     </footer>
 
+    <div id="playersClearConfirm" class="modalBg out">
+      <div class="modal">
+        <h2>Clear Players?</h2>
+        <div class="options">
+          <button id="playersClearNo" class="medium">No</button>
+          <button id="playersClearYes" class="medium">Yes</button>
+        </div>
+      </div>
+    </div>
+
     <script src="https://www.gstatic.com/firebasejs/10.1.0/firebase-app-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.1.0/firebase-analytics-compat.js"></script>
     <script src="/style-guide/script.js"></script>
+    <script src="/style-guide/modal/script.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.1.0/firebase-app-check-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.1.0/firebase-database-compat.js"></script>
     <script src="/response-display/script.js"></script>

diff --git a/script.js b/script.js
@@ -274,8 +274,15 @@ playersDatabase.listen(list => {
 });
 
 //Players clear
+const playersClearConfirm = document.getElementById('playersClearConfirm');
 document.getElementById('playersClear').addEventListener('click', () => {
-  playersDatabase.clear();
+  openModal(playersClearConfirm);
+});
+document.getElementById('playersClearNo').addEventListener('click', () => {
+  closeModal(playersClearConfirm);
+});
+document.getElementById('playersClearYes').addEventListener('click', () => {
+  playersDatabase.clear().then(() => closeModal(playersClearConfirm));
 });
 
 //Player hide

diff --git a/style.css b/style.css
@@ -20,6 +20,12 @@ footer {
   margin-top: auto;
 }
 
+/* Modal Extra */
+
+.modal {
+  height: fit-content;
+}
+
 /* STYLES */
 
 /* playerOperator */