From 0c4909b7099fc57343ee03a4cb259a0871998f47 Mon Sep 17 00:00:00 2001
From: 18Venus <149051659+18Venus@users.noreply.github.com>
Date: Wed, 29 May 2024 01:55:47 +0530
Subject: [PATCH] Dialogue Boxes instead of alert
---
game.js | 115 ++++++++++++++++++++++++++++++--
index.html | 190 ++++++++++++++++++++++++++++++++++++++++++-----------
2 files changed, 260 insertions(+), 45 deletions(-)
diff --git a/game.js b/game.js
index eae1700..f8d0b9b 100644
--- a/game.js
+++ b/game.js
@@ -1,7 +1,7 @@
document.addEventListener('touchmove', function(e) {e.preventDefault();}, false);
document.addEventListener('touchstart', function(e) {e.preventDefault();}, false);
-alert("welcome to the Squared Game");
+// alert("welcome to the Squared Game");
var canvas = document.getElementById('game');
@@ -1359,29 +1359,71 @@ var presstobegin = introstart.ptb;
var squaredlines = new NewGame();
+// var scorealert = function () {
+// if (squaredlines) {
+// var score = squaredlines.i.score;
+// if (score<500) {
+// alert(score+' bricks computed. Next time work harder.');
+// } else {
+// alert(score+' blocks. You are a computer. Go compute.');
+// }
+// }
+// };
+
+// function showLevelCompleteMessage(level) {
+// alert("Congratulations! You have completed level " + level + ". Moving to the next level!");
+// }
+
+
+// GameStatusChanger.end = function () {
+// console.log("Game end function called");
+// scorealert();
+// //scorealert();
+// squaredlines.newgame();
+// };
+
+// Function to display the modal with a custom message
+function showModal(message) {
+ var modal = document.getElementById("myModal");
+ var modalMessage = document.getElementById("modalMessage");
+ var span = document.getElementsByClassName("close")[0];
+
+ modalMessage.textContent = message;
+ modal.style.display = "block";
+
+ span.onclick = function() {
+ modal.style.display = "none";
+ }
+
+ window.onclick = function(event) {
+ if (event.target == modal) {
+ modal.style.display = "none";
+ }
+ }
+}
+
var scorealert = function () {
if (squaredlines) {
var score = squaredlines.i.score;
- if (score<500) {
- alert(score+' bricks computed. Next time work harder.');
+ if (score < 500) {
+ showModal(score + ' bricks computed. Next time work harder.');
} else {
- alert(score+' blocks. You are a computer. Go compute.');
+ showModal(score + ' blocks. You are a computer. Go compute.');
}
}
};
function showLevelCompleteMessage(level) {
- alert("Congratulations! You have completed level " + level + ". Moving to the next level!");
+ showModal("Congratulations! You have completed level " + level + ". Moving to the next level!");
}
-
GameStatusChanger.end = function () {
console.log("Game end function called");
scorealert();
- //scorealert();
squaredlines.newgame();
};
+
GameStatusChanger.nextlevel = function () {
console.log("Next level function called");
console.log("Current level:", squaredlines.i.level);
@@ -1414,3 +1456,62 @@ GameStatusChanger.win = function () {
alert(score+' blocks make for a nice computing indeed.');
squaredlines.newgame();
};
+
+
+function showDialog() {
+ document.getElementById('dialogBox').style.display = 'block';
+ document.getElementById('overlay').style.display = 'block';
+ }
+
+ function closeDialog() {
+ document.getElementById('dialogBox').style.display = 'none';
+ document.getElementById('overlay').style.display = 'none';
+ }
+
+ // Show the dialog box when the page loads
+ window.onload = showDialog;
+
+
+// function showDialog(message, callback) {
+// const dialogBox = document.getElementById('dialogBox');
+// const overlay = document.getElementById('overlay');
+// const dialogMessage = document.getElementById('dialogMessage');
+// const dialogButton = document.getElementById('dialogButton');
+
+// dialogMessage.textContent = message;
+
+// dialogBox.style.display = 'block';
+// overlay.style.display = 'block';
+
+// dialogButton.onclick = function() {
+// dialogBox.style.display = 'none';
+// overlay.style.display = 'none';
+// if (callback) callback();
+// };
+// }
+
+// var scorealert = function () {
+// if (squaredlines) {
+// var score = squaredlines.i.score;
+// if (score < 500) {
+// showDialog(score + ' bricks computed. Next time work harder.');
+// } else {
+// showDialog(score + ' blocks. You are a computer. Go compute.');
+// }
+// }
+// };
+
+// function showLevelCompleteMessage(level) {
+// showDialog("Congratulations! You have completed level " + level + ". Moving to the next level!");
+// }
+
+// GameStatusChanger.end = function () {
+// console.log("Game end function called");
+// scorealert();
+// squaredlines.newgame();
+// };
+
+// // Call this function to start the game and initialize the dialog
+// window.onload = function() {
+// showDialog("Welcome to the Squared Game");
+// };
\ No newline at end of file
diff --git a/index.html b/index.html
index 9769d11..0b86c79 100644
--- a/index.html
+++ b/index.html
@@ -1,28 +1,30 @@
+
-
+
-
-
+
+
-
+
-
-Squared Lines
-
+ #dialogBox button:hover {
+ color: darkgreen;
+ }
+
+ #dialogBox button:active {
+ color: darkgreen;
+
+ }
+
+ #overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+ }
+
+
+ .modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.4);
+ padding-top: 60px;
+ }
+
+ .modal-content {
+ background-image: linear-gradient(to bottom right, rgb(255, 255, 208), rgb(255, 192, 203));
+ margin: 5% auto;
+ padding: 20px;
+ margin-top: 200px;
+ border: 1px solid #000000;
+ width: 30%;
+ }
+
+
+ .close {
+ color: #000000;
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ .close:hover,
+ .close:focus {
+ color: rgb(13, 146, 1);
+ text-decoration: none;
+ cursor: pointer;
+ }
+
+
+ Squared Lines
+
-
-
-
-
+
+
Welcome to the Squared Game
+
+
+
+
+
+
+
-
+
+