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
MaximilianAdF · Feb 9, 2024 · d72dd31 · d72dd31
1 parent c69e4eb
commit d72dd31
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 35 deletions.
diff --git 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
@@ -22,21 +22,14 @@ <h2>Same Game</h2>
  </div>
  <div class="lose-message">
  <i class="fa-solid fa-circle-xmark"></i>
- <p>Failed</p>
+ <p>Failed!</p>
  </div>
  <div class="win-message">
  <i class="fa-solid fa-circle-check"></i>
- <p>Success</p>
+ <p>Success!</p>
  </div>
  <div class="hack-box">
- <div class="position-container">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- version="1.1"
- width="100%"
- height="100%"
- ></svg>
- </div>
+ <div class="overlay" style="display: none;"></div>
  <div class="lock-container" id="container"></div>
  </div>
  <div class="timer-container">

diff --git 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
@@ -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();
-})
+ resetGame();
+});