From c2f5839cff2b22bebb32db670bd04d5c08162f49 Mon Sep 17 00:00:00 2001
From: Maximilian Alvim de Faria
 <63980031+MaximilianAdF@users.noreply.github.com>
Date: Sun, 11 Feb 2024 21:08:19 +0100
Subject: [PATCH] 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.
---
 SmokeCrack/SmokeCrack.css  | 88 ++++++++++++++++++++++++++++++++++++++
 SmokeCrack/SmokeCrack.html | 45 +++++++++++++++++++
 SmokeCrack/SmokeCrack.js   | 58 +++++++++++++++++--------
 SmokeCrack/SmokeCrack.ts   | 61 ++++++++++++++++++--------
 4 files changed, 216 insertions(+), 36 deletions(-)

diff --git a/SmokeCrack/SmokeCrack.css b/SmokeCrack/SmokeCrack.css
index 83a55d0..f30e251 100644
--- 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);
 }
\ No newline at end of file
diff --git a/SmokeCrack/SmokeCrack.html b/SmokeCrack/SmokeCrack.html
index 0d5265c..51bfdb6 100644
--- 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
index d416df9..2eb56b3 100644
--- 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 {
diff --git a/SmokeCrack/SmokeCrack.ts b/SmokeCrack/SmokeCrack.ts
index 976bd09..acedc11 100644
--- a/SmokeCrack/SmokeCrack.ts
+++ b/SmokeCrack/SmokeCrack.ts
@@ -1,9 +1,34 @@
 const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 let timerInterval: NodeJS.Timeout | null = null;
-let secondsRemaining = 0;
-let totalSeconds =  0;
+let secondsRemaining: number = 0;
+let totalSeconds: number =  0;
+let maxChars: number = 0;
+let minChars: number = 0;
+
+function getInputValues(): void {
+    const macInput: HTMLInputElement | null = document.getElementById('mac-input') as HTMLInputElement | null;
+    const ipInput: HTMLInputElement | null = document.getElementById('ip-input') as HTMLInputElement | null;
+    const macIpCombs: { [key: string]: [number, number, number] } = {
+        '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
+    };
+    const macInputValue: string = macInput?.value.toLowerCase() ?? '';
+    const ipInputValue: string = ipInput?.value ?? '';
+
+    if (macIpCombs[`${macInputValue}-${ipInputValue}`]) {
+        [secondsRemaining, maxChars, minChars] = macIpCombs[`${macInputValue}-${ipInputValue}`];
+    } else {
+        console.log('Invalid MAC-IP combination, using EASY mode as default');
+        secondsRemaining = 5;
+        maxChars = 16;
+        minChars = 10;   
+    }
+    totalSeconds = secondsRemaining;
+}
 
-function stopGame(gameWin: boolean) {
+function stopGame(gameWin: boolean, keyPressListener: (event: KeyboardEvent) => void) {
+    document.removeEventListener('keydown', keyPressListener);
     if (timerInterval) {
         clearInterval(timerInterval);
         timerInterval = null;
@@ -40,10 +65,12 @@ function resetGame() {
     const macInput = document.getElementById('mac-input') as HTMLInputElement | null;
     const ipInput = document.getElementById('ip-input') as HTMLInputElement | null;
     const timerProgress = document.querySelector('.timer-progress-bar-fill') as HTMLElement;
+    const macIpContainer = document.querySelector('.mac-ip-container') as HTMLElement;
 
     if (minigameContainer && crackButton) {
         minigameContainer.style.display = 'none';
         crackButton.style.display = 'flex';   
+        macIpContainer.style.display = 'flex';
     }
 
     if (macInput && ipInput) {
@@ -134,9 +161,6 @@ function updateFeedback(isCorrect: boolean, currSquareIdx: number): void {
 function initTimer() {
     const timerContainer = document.querySelector('.timer-container') as HTMLElement;
     const letterContainer = document.querySelector('.letter-container') as HTMLElement;
-    
-    //Defining how long timer should be
-    totalSeconds = secondsRemaining = 5
 
     if (timerContainer && letterContainer) {
         const letterContainerWidth = letterContainer.clientWidth;
@@ -145,13 +169,14 @@ function initTimer() {
     updateTimerDisplay();
 }
 
-function runTimer() {
+function runTimer(keyPressListener: (event: KeyboardEvent) => void) {
+    document.addEventListener('keydown', keyPressListener);
     timerInterval = setInterval(() => {
         secondsRemaining--;
         updateTimerDisplay();
 
         if (secondsRemaining <= 0) {
-            stopGame(false);
+            stopGame(false, keyPressListener);
         }
     }, 1000);
 }
@@ -181,11 +206,14 @@ function startCracking() {
     const minigameContainer = document.querySelector('.minigame-container') as HTMLElement;
     const letterContainer = document.querySelector('.letter-container');
     const crackButton = document.getElementById('crackButton');
+    const macIpContainer = document.querySelector('.mac-ip-container') as HTMLElement;
 
-    if (crackButton && minigameContainer) {
+    getInputValues();
+    if (crackButton && minigameContainer && macIpContainer) {
         crackButton.style.display = 'none'; //Remove the crack button
+        macIpContainer.style.display = 'none'; //Hide the mac-ip container
 
-        const numOfChars = getRandomNumber(8,16);
+        const numOfChars = getRandomNumber(minChars,maxChars);
         const randomChars = generateRandomChars(numOfChars);
 
         if (letterContainer) {
@@ -199,8 +227,6 @@ function startCracking() {
                 letterContainer.appendChild(letterSquare) //Append the letter square to the letter container
             })
             minigameContainer.style.display = 'flex' //Show the minigame
-            initTimer();
-            runTimer();
 
             const handleKeyPress = function(event: KeyboardEvent) {
                 if (!chars.includes(event.key.toUpperCase())) return;
@@ -214,21 +240,18 @@ function startCracking() {
                         currSquareIdx++;
 
                         if (currSquareIdx === randomChars.length) {
-                            //All squares ok
-                            document.removeEventListener('keydown', handleKeyPress);
-                            stopGame(true);
+                            stopGame(true, handleKeyPress);
                         }
                     } else {
                         updateFeedback(false, currSquareIdx);
-                        document.removeEventListener('keydown', handleKeyPress);
                         currentSquare.style.backgroundColor = 'rgb(215, 73, 73)'
-                        stopGame(false);
+                        stopGame(false, handleKeyPress);
                     }
                 }
             }
 
-            //Event listener for keyboard presses
-            document.addEventListener('keydown', handleKeyPress);
+            initTimer();
+            runTimer(handleKeyPress);
             let currSquareIdx = 0;