From b100435d9c199a7fa03ad444c99d9e1a41187ab7 Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Thu, 4 May 2023 19:46:00 +0300
Subject: [PATCH] Made the dialog close when clicking off of it.

---
 src/main/resources/templates/fragments/common.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 1a858563..50288822 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -115,6 +115,7 @@ document.addEventListener("DOMContentLoaded", function () {
                     document.body.appendChild(script);
                 }
                 let gameScriptLoaded = false;
+                const gameDialog = document.getElementById('game-container-wrapper')
                 $('#show-game-btn').on('click', function() {
                     console.log('Show game button clicked');
                     if (!gameScriptLoaded) {
@@ -127,8 +128,19 @@ document.addEventListener("DOMContentLoaded", function () {
                     } else {
                         window.resetGame();
                     }
-                    document.getElementById('game-container-wrapper').showModal();
+                    gameDialog.showModal();
                 });
+                gameDialog.addEventListener("click", e => {
+                    const dialogDimensions = gameDialog.getBoundingClientRect()
+                    if (
+                        e.clientX < dialogDimensions.left ||
+                        e.clientX > dialogDimensions.right ||
+                        e.clientY < dialogDimensions.top ||
+                        e.clientY > dialogDimensions.bottom
+                    ) {
+                        gameDialog.close()
+                    }
+                })
             })
         </script>
         <div id="game-container">