Merge pull request #812 from sharma-shray/view

Customizations
Areso · Apr 2, 2024 · a8ebb11 · a8ebb11
2 parents f0ea122 + d8fdec8
commit a8ebb11
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 23 deletions.
diff --git a/css/game.css b/css/game.css
@@ -32,13 +32,29 @@ body {
   padding: 4px;
 }
 
+#loadGameButton:hover,
+#saveGameButton:hover {
+  transition: 0.4s;
+  cursor: pointer;
+  background-color: #555; 
+  color: #fff; 
+  border-color: #fff;
+}
+
 #saveGameButton {
-  top:150px;
+  font-weight: bold;
+  transition: 0.4s;
+  width: 140px;
+  height: 30px;
+  bottom:20px;
   left: 20px
 }
 
 #loadGameButton {
-  top:210px;
+  font-weight: bold;
+  width: 140px;
+  height: 30px;
+  bottom: 60px;
   left: 20px;
   display: none;
 }
@@ -296,6 +312,7 @@ body {
   position: absolute;
   left: 20px;
   top: 100px;
+  border-radius: 0.3rem;
   border: 1px solid #333;
   display:none;
 }

diff --git a/js/lib/lib_dialogue.js b/js/lib/lib_dialogue.js
@@ -111,29 +111,31 @@ function getElementPosition (element) {
     }
     return pos;
 }
-function tap (e) {
-    pos = getElementPosition(canvas);
-    loc = {};
-    tapX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX;
-    tapY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
-    canvasScaleRatio = canvas.width / canvas.offsetWidth;
+function tap(e) {
+    const pos = getElementPosition(canvas);
+    const loc = {};
+    const tapX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX;
+    const tapY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
+    const canvasScaleRatio = canvas.width / canvas.offsetWidth;
     loc.x = (tapX - pos.x) * canvasScaleRatio;
     loc.y = (tapY - pos.y) * canvasScaleRatio;
-    //console.log(e.pageX, e.pageY, loc.x, loc.y);
-    if (loc.x >= buttonOneOffsetX && loc.x <= buttonOneOffsetX+buttonOneLength) {
-        if (loc.y >= buttonsOffsetY && loc.y <= buttonsOffsetY+20) {
-            document.getElementById("myDCanvas").classList.remove('active-modal');
-            answer = 2;
-            clearCanvas();
-            dialogShown = false;
-        }
+
+    const checkButton = (offsetX, length, answer) => {
+        return loc.x >= offsetX && loc.x <= offsetX + length &&
+            loc.y >= buttonsOffsetY && loc.y <= buttonsOffsetY + 20;
+    };
+
+    if (checkButton(buttonOneOffsetX, buttonOneLength, 2)) {
+        document.getElementById("myDCanvas").classList.remove('active-modal');
+        answer = 2;
+        clearCanvas();
+        dialogShown = false;
     }
-    if (loc.x >= buttonTwoOffsetX && loc.x <= buttonTwoOffsetX+buttonTwoLength) {
-        if (loc.y >= buttonsOffsetY && loc.y <= buttonsOffsetY+20) {
-            document.getElementById("myDCanvas").classList.remove('active-modal');
-            answer = 3;
-            clearCanvas();
-            dialogShown = false;
-        }
+
+    if (checkButton(buttonTwoOffsetX, buttonTwoLength, 3)) {
+        document.getElementById("myDCanvas").classList.remove('active-modal');
+        answer = 3;
+        clearCanvas();
+        dialogShown = false;
     }
 }