SmokeCrack Improvements & Fixes

Fixes: - SmokeCrack only removed the created keypress listener when player pressed a wrong key. Discovered and fixed by @DiGatsby. Improvements: - Added a difficulty level system (Easy, Medium, Hard) with different character counts and timer values. - Introduced a Salty App like Mac / IP address system to differentiate between difficulty levels.
MaximilianAdF · Feb 11, 2024 · c2f5839 · c2f5839
1 parent b2e4578
commit c2f5839
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 36 deletions.
diff --git a/SmokeCrack/SmokeCrack.css b/SmokeCrack/SmokeCrack.css
@@ -1,4 +1,5 @@
 body {
+ font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: aliceblue;
  background-color: blakc; /* Set background-color to transparent */
  overflow: hidden;
@@ -352,4 +353,91 @@ body {
 
 .minigame-over p {
  color: rgba(208, 208, 208, 0.834);
+}
+
+.mac-ip-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ width: 1000px;
+ margin: 100px auto;
+ height: 100%;
+ gap: 15px;
+}
+
+.row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(153, 153, 153, 0.319);
+
+}
+
+.difficulty-bars {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ gap: 7px;
+
+}
+
+.row p {
+ margin-left: 10px;
+ font-size: 20px;
+}
+
+.lvl-easy,
+.lvl-medium,
+.lvl-hard {
+ display: flex;
+ align-items: center;
+}
+
+.lvl-easy span,
+.lvl-medium span,
+.lvl-hard span {
+ font-size: 20px;
+ display: inline-block;
+ white-space: nowrap;
+ margin-left: 50px;
+ margin-right: 10px;
+}
+
+.lvl-easy span {
+ color: rgb(85, 255, 164);
+ text-shadow: 0 0 3px rgb(84, 255, 164);
+
+}
+
+.lvl-medium span {
+ color: yellow;
+ text-shadow: 0 0 3px yellow;
+}
+
+.lvl-hard span {
+ color: rgb(255, 84, 84);
+ text-shadow: 0 0 3px rgb(255, 84, 84);
+}
+
+.difficulty-bar {
+ width: 6px;
+ height: 20px;
+ background-color: rgba(153, 153, 153, 0.319);
+}
+
+.lvl-easy .difficulty-bar:nth-child(-n+2) {
+ background-color: rgb(85, 255, 164);
+}
+
+.lvl-medium .difficulty-bar:nth-child(-n+3) {
+ background-color: yellow;
+}
+
+.lvl-hard .difficulty-bar {
+ background-color: rgb(255, 84, 84);
 }
diff --git a/SmokeCrack/SmokeCrack.html b/SmokeCrack/SmokeCrack.html
@@ -67,5 +67,50 @@ <h2>Hacking failed!</h2>
  <p>You failed to hack the Wi-Fi</p>
  </div>
  </div>
+
+ <div class="mac-ip-container">
+ <div class="row easy">
+ <p>7c:89:3e:c8:cc:65</p>
+ <p>192.168.0.105</p>
+ <div class="lvl-easy">
+ <div class="difficulty-bars">
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ </div>
+ <span>Easy Level</span>
+ </div>
+ </div>
+ <div class="row medium">
+ <p>fb:d4:31:c:38:e8&nbsp;</p>
+ <p>192.168.0.205</p>
+ <div class="lvl-medium">
+ <div class="difficulty-bars">
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ </div>
+ <span>Mid Level&nbsp;</span>
+ </div>
+ </div>
+ <div class="row hard">
+ <p>71:21:e3:ea:f6:d0</p>
+ <p>192.168.0.179</p>
+ <div class="lvl-hard">
+ <div class="difficulty-bars">
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ <div class="difficulty-bar"></div>
+ </div>
+ <span>Hard Level</span>
+ </div>
+ </div>
+ </div>
 </body>
 </html>
diff --git a/SmokeCrack/SmokeCrack.js b/SmokeCrack/SmokeCrack.js
@@ -2,7 +2,33 @@ var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 var timerInterval = null;
 var secondsRemaining = 0;
 var totalSeconds = 0;
-function stopGame(gameWin) {
+var maxChars = 0;
+var minChars = 0;
+function getInputValues() {
+ var _a;
+ var _b, _c;
+ var macInput = document.getElementById('mac-input');
+ var ipInput = document.getElementById('ip-input');
+ var macIpCombs = {
+ '7c:89:3e:c8:cc:65-192.168.0.105': [5, 16, 10], //Easy (seconds, maxChars)
+ 'fb:d4:31:c:38:e8-192.168.0.205': [5, 18, 14], //Medium 
+ '71:21:e3:ea:f6:d0-192.168.0.179': [4, 20, 16], //Hard
+ };
+ var macInputValue = (_b = macInput === null || macInput === void 0 ? void 0 : macInput.value.toLowerCase()) !== null && _b !== void 0 ? _b : '';
+ var ipInputValue = (_c = ipInput === null || ipInput === void 0 ? void 0 : ipInput.value) !== null && _c !== void 0 ? _c : '';
+ if (macIpCombs["".concat(macInputValue, "-").concat(ipInputValue)]) {
+ _a = macIpCombs["".concat(macInputValue, "-").concat(ipInputValue)], secondsRemaining = _a[0], maxChars = _a[1], minChars = _a[2];
+ }
+ else {
+ console.log('Invalid MAC-IP combination, using EASY mode as default');
+ secondsRemaining = 5;
+ maxChars = 16;
+ minChars = 10;
+ }
+ totalSeconds = secondsRemaining;
+}
+function stopGame(gameWin, keyPressListener) {
+ document.removeEventListener('keydown', keyPressListener);
  if (timerInterval) {
  clearInterval(timerInterval);
  timerInterval = null;
@@ -36,9 +62,11 @@ function resetGame() {
  var macInput = document.getElementById('mac-input');
  var ipInput = document.getElementById('ip-input');
  var timerProgress = document.querySelector('.timer-progress-bar-fill');
+ var macIpContainer = document.querySelector('.mac-ip-container');
  if (minigameContainer && crackButton) {
  minigameContainer.style.display = 'none';
  crackButton.style.display = 'flex';
+ macIpContainer.style.display = 'flex';
  }
  if (macInput && ipInput) {
  macInput.disabled = false;
@@ -115,20 +143,19 @@ function updateFeedback(isCorrect, currSquareIdx) {
 function initTimer() {
  var timerContainer = document.querySelector('.timer-container');
  var letterContainer = document.querySelector('.letter-container');
- //Defining how long timer should be
- totalSeconds = secondsRemaining = 5;
  if (timerContainer && letterContainer) {
  var letterContainerWidth = letterContainer.clientWidth;
  timerContainer.style.width = "".concat(letterContainerWidth, "px");
  }
  updateTimerDisplay();
 }
-function runTimer() {
+function runTimer(keyPressListener) {
+ document.addEventListener('keydown', keyPressListener);
  timerInterval = setInterval(function () {
  secondsRemaining--;
  updateTimerDisplay();
  if (secondsRemaining <= 0) {
- stopGame(false);
+ stopGame(false, keyPressListener);
  }
  }, 1000);
 }
@@ -154,9 +181,12 @@ function startCracking() {
  var minigameContainer = document.querySelector('.minigame-container');
  var letterContainer = document.querySelector('.letter-container');
  var crackButton = document.getElementById('crackButton');
- if (crackButton && minigameContainer) {
+ var macIpContainer = document.querySelector('.mac-ip-container');
+ getInputValues();
+ if (crackButton && minigameContainer && macIpContainer) {
  crackButton.style.display = 'none'; //Remove the crack button
- var numOfChars = getRandomNumber(8, 16);
+ macIpContainer.style.display = 'none'; //Hide the mac-ip container
+ var numOfChars = getRandomNumber(minChars, maxChars);
  var randomChars_1 = generateRandomChars(numOfChars);
  if (letterContainer) {
  letterContainer.innerHTML = ''; //Clear the container
@@ -168,10 +198,7 @@ function startCracking() {
  letterContainer.appendChild(letterSquare); //Append the letter square to the letter container
  });
  minigameContainer.style.display = 'flex'; //Show the minigame
- initTimer();
- runTimer();
  var handleKeyPress_1 = function (event) {
- console.log(event.key.toUpperCase());
  if (!chars.includes(event.key.toUpperCase()))
  return;
  if (letterContainer && secondsRemaining) {
@@ -182,21 +209,18 @@ function startCracking() {
  updateFeedback(true, currSquareIdx_1);
  currSquareIdx_1++;
  if (currSquareIdx_1 === randomChars_1.length) {
- //All squares ok
- document.removeEventListener('keydown', handleKeyPress_1);
- stopGame(true);
+ stopGame(true, handleKeyPress_1);
  }
  }
  else {
  updateFeedback(false, currSquareIdx_1);
- document.removeEventListener('keydown', handleKeyPress_1);
  currentSquare.style.backgroundColor = 'rgb(215, 73, 73)';
- stopGame(false);
+ stopGame(false, handleKeyPress_1);
  }
  }
  };
- //Event listener for keyboard presses
- document.addEventListener('keydown', handleKeyPress_1);
+ initTimer();
+ runTimer(handleKeyPress_1);
  var currSquareIdx_1 = 0;
  }
  else {