From d72dd31f6e1679e017947bbe3e8689705c378705 Mon Sep 17 00:00:00 2001
From: Maximilian Alvim de Faria
<63980031+MaximilianAdF@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:12:57 +0100
Subject: [PATCH] Finalizing ACRobberies
Fixes:
- Win/Loss Message Implemented
- Game resets itself after a win/loss
- Timer works as it should now
Remaining:
- Can still create unsolvable games
- Doesn't constantly check if a game is non-solvable
---
ACRobberies/ACRobberies.css | 27 ++++++++++++++----
ACRobberies/ACRobberies.html | 13 ++-------
ACRobberies/ACRobberies.js | 45 ++++++++++++++++++++++++------
ACRobberies/ACRobberies.ts | 54 ++++++++++++++++++++++++++++--------
4 files changed, 104 insertions(+), 35 deletions(-)
diff --git a/ACRobberies/ACRobberies.css b/ACRobberies/ACRobberies.css
index 39d1e5c..b5c2039 100644
--- a/ACRobberies/ACRobberies.css
+++ b/ACRobberies/ACRobberies.css
@@ -104,7 +104,7 @@ body {
.lose-message {
gap: 10px;
margin-top: -50px;
- margin-bottom: 20px;
+ margin-bottom: 15px;
margin-left: 440px;
display: none;
color: white;
@@ -118,7 +118,7 @@ body {
.win-message {
gap: 10px;
margin-top: -50px;
- margin-bottom: 20px;
+ margin-bottom: 15px;
margin-left: 440px;
display: none;
color: white;
@@ -153,17 +153,32 @@ body {
z-index: 1000;
}
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ z-index: 9999;
+}
+
+.empty {
+ background: none;
+ border: none;
+}
+
.cuber {
- background-color: var(--cube-color-red, rgb(222, 28, 28));
+ background-color: var(--cube-color-red, rgb(229, 28, 28));
box-shadow: 0px 10px 0px var(--cube-color-red-shadow, rgb(96, 35, 34));
}
.cubeg {
- background-color: var(--cube-color-green, rgb(132, 186, 80));
- box-shadow: 0px 10px 0px var(--cube-color-green-shadow, rgb(79, 122, 59));
+ background-color: var(--cube-color-green, rgb(137, 218, 61));
+ box-shadow: 0px 10px 0px var(--cube-color-green-shadow, rgb(79, 122, 59));
}
.cubeb {
- background-color: var(--cube-color-blue, rgb(90, 149, 192));
+ background-color: var(--cube-color-blue, rgb(82, 156, 209));
box-shadow: 0px 10px 0px var(--cube-color-blue-shadow, rgb(40, 71, 86));
}
diff --git a/ACRobberies/ACRobberies.html b/ACRobberies/ACRobberies.html
index 7ebb6e0..e497e5b 100644
--- a/ACRobberies/ACRobberies.html
+++ b/ACRobberies/ACRobberies.html
@@ -22,21 +22,14 @@ Same Game
diff --git a/ACRobberies/ACRobberies.js b/ACRobberies/ACRobberies.js
index 792e174..2abad4d 100644
--- a/ACRobberies/ACRobberies.js
+++ b/ACRobberies/ACRobberies.js
@@ -1,5 +1,5 @@
var timerInterval = null;
-var secondsRemaining = 20;
+var secondsRemaining = 15;
var Cube = /** @class */ (function () {
function Cube() {
this.container = document.getElementById("container");
@@ -102,9 +102,8 @@ var Cube = /** @class */ (function () {
Cube.prototype.checkwin = function () {
var container = document.getElementById("container");
var divsInsideContainer = container.querySelectorAll('.empty');
- console.log(divsInsideContainer.length === 25);
if (divsInsideContainer.length === 25) {
- alert("You won!");
+ endGame("win");
}
};
Cube.prototype.squareClick = function () {
@@ -113,6 +112,37 @@ var Cube = /** @class */ (function () {
};
return Cube;
}());
+//Make function that checks solvability of the board
+function endGame(outcome) {
+ var timerProgress = document.querySelector(".timer-progress-bar");
+ var overlay = document.querySelector(".overlay");
+ clearInterval(timerInterval);
+ timerProgress.style.display = "none";
+ timerProgress.style.width = "100%";
+ overlay.style.display = "block";
+ if (outcome === "win") {
+ var winMsg_1 = document.querySelector(".win-message");
+ winMsg_1.style.display = "flex";
+ setTimeout(function () { winMsg_1.style.display = 'none'; }, 2000);
+ }
+ else {
+ var loseMsg_1 = document.querySelector(".lose-message");
+ loseMsg_1.style.display = "flex";
+ setTimeout(function () { loseMsg_1.style.display = 'none'; }, 2000);
+ }
+ setTimeout(function () {
+ timerProgress.style.display = 'flex';
+ overlay.style.display = 'none';
+ resetGame();
+ }, 2000);
+}
+function resetGame() {
+ var container = document.getElementById("container");
+ container.innerHTML = "";
+ secondsRemaining = 15;
+ generateCubes();
+ runTimer();
+}
function generateCubes() {
var container = document.getElementById("container");
for (var i = 0; i < 25; i++) {
@@ -122,7 +152,7 @@ function generateCubes() {
}
function updateTimerDisplay() {
var timerProgress = document.querySelector(".timer-progress-bar");
- var percentageLeft = Math.floor(100 * secondsRemaining / 20);
+ var percentageLeft = Math.floor(100 * secondsRemaining / 15);
if (timerProgress) {
timerProgress.style.width = "".concat(percentageLeft, "%");
}
@@ -131,12 +161,11 @@ function runTimer() {
timerInterval = setInterval(function () {
secondsRemaining--;
updateTimerDisplay();
- if (secondsRemaining <= 0) {
- //resetGame("lose");
+ if (secondsRemaining < 0) {
+ endGame("lose");
}
}, 1000);
}
document.addEventListener("DOMContentLoaded", function () {
- generateCubes();
- runTimer();
+ resetGame();
});
diff --git a/ACRobberies/ACRobberies.ts b/ACRobberies/ACRobberies.ts
index 422734f..78bc3f1 100644
--- a/ACRobberies/ACRobberies.ts
+++ b/ACRobberies/ACRobberies.ts
@@ -1,6 +1,5 @@
let timerInterval: NodeJS.Timeout | null = null;
-let secondsRemaining = 20;
-
+let secondsRemaining = 15;
class Cube {
container: HTMLDivElement = document.getElementById("container") as HTMLDivElement;
@@ -14,7 +13,7 @@ class Cube {
this.element.classList.add(this.color);
this.element.addEventListener("click", this.squareClick.bind(this));
}
-
+
cubeLeftShift() {
const containerCopy = Array.from(this.container.childNodes);
for (let i = 24; i >= 0; i--) {
@@ -115,9 +114,8 @@ class Cube {
checkwin() {
const container = document.getElementById("container") as HTMLElement;
const divsInsideContainer = container.querySelectorAll('.empty');
- console.log(divsInsideContainer.length === 25)
if (divsInsideContainer.length === 25) {
- alert("You won!");
+ endGame("win");
}
}
@@ -127,6 +125,41 @@ class Cube {
}
}
+//Make function that checks solvability of the board
+
+function endGame(outcome: string): void {
+ const timerProgress = document.querySelector(".timer-progress-bar") as HTMLElement;
+ const overlay = document.querySelector(".overlay") as HTMLElement;
+ clearInterval(timerInterval as NodeJS.Timeout);
+
+ timerProgress.style.display = "none";
+ timerProgress.style.width = "100%";
+ overlay.style.display = "block";
+
+ if (outcome === "win") {
+ const winMsg = document.querySelector(".win-message") as HTMLElement;
+ winMsg.style.display = "flex";
+ setTimeout(function () {winMsg.style.display = 'none';}, 2000);
+ } else {
+ const loseMsg = document.querySelector(".lose-message") as HTMLElement;
+ loseMsg.style.display = "flex";
+ setTimeout(function () {loseMsg.style.display = 'none';}, 2000);
+ }
+ setTimeout(function () {
+ timerProgress.style.display = 'flex';
+ overlay.style.display = 'none';
+ resetGame();
+ }, 2000);
+}
+
+function resetGame(): void {
+ const container = document.getElementById("container") as HTMLElement;
+ container.innerHTML = "";
+ secondsRemaining = 15;
+ generateCubes();
+ runTimer();
+}
+
function generateCubes(): void {
const container: HTMLDivElement = document.getElementById("container") as HTMLDivElement;
for (let i = 0; i < 25; i++) {
@@ -137,7 +170,7 @@ function generateCubes(): void {
function updateTimerDisplay() {
const timerProgress = document.querySelector(".timer-progress-bar") as HTMLElement;
- let percentageLeft = Math.floor(100 * secondsRemaining / 20);
+ let percentageLeft = Math.floor(100 * secondsRemaining / 15);
if (timerProgress) {
timerProgress.style.width = `${percentageLeft}%`;
}
@@ -147,13 +180,12 @@ function runTimer() {
timerInterval = setInterval(function () {
secondsRemaining--;
updateTimerDisplay();
- if (secondsRemaining <= 0) {
- //resetGame("lose");
+ if (secondsRemaining < 0) {
+ endGame("lose");
}
}, 1000);
}
document.addEventListener("DOMContentLoaded", function () {
- generateCubes();
- runTimer();
-})
\ No newline at end of file
+ resetGame();
+});
\ No newline at end of file