Add files via upload

appbrewery · Mar 8, 2024 · 4be7569 · 4be7569
1 parent 210454b
commit 4be7569
Show file tree

Hide file tree

Showing 3 changed files with 223 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./styles/main.css">
+  <link
+    href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400italic,700,700italic&amp;subset=latin,greek,cyrillic"
+    rel="stylesheet" type="text/css">
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous">
+    </script>
+
+  <title>Demo</title>
+</head>
+
+<body>
+  <div class="terminal" id="Terminal">
+    <div class="console-line">Click <button id="run-button">Run</button> to run the final project you will build.</div>
+    <div class="content" id="Content"></div>
+
+  </div>
+</body>
+<script src="./index.js"></script>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,135 @@
+//Current line
+var CurrentId = undefined;
+
+var inputValues = [];
+const inputPrompts = [];
+
+const logo = `
+  / _ \\_   _  ___  ___ ___  /__   \\ |__   ___    /\\ \\ \\_   _ _ __ ___ | |__   ___ _ __ 
+ / /_\\/ | | |/ _ \\/ __/ __|   / /\\/ '_ \\ / _ \\  /  \\/ / | | | '_ ' _ \\| '_ \\ / _ \\ '__|
+/ /_\\\\| |_| |  __/\\__ \\__ \\  / /  | | | |  __/ / /\\  /| |_| | | | | | | |_) |  __/ |   
+\\____/ \\__,_|\\___||___/___/  \\/   |_| |_|\\___| \\_\\ \\/  \\__,_|_| |_| |_|_.__/ \\___|_|        
+`;
+
+const EASY_LEVEL_TURNS = 10;
+const HARD_LEVEL_TURNS = 5;
+let answer;
+let turns;
+
+//Click Run
+$(document).ready(function () {
+  $("#run-button").click(function () {
+    inputValues = [];
+    $("#Content").empty();
+    restart();
+  });
+});
+
+function restart() {
+  answer = Math.floor(Math.random() * 100 + 1);
+
+  NewLine(logo, false);
+  NewLine("Welcome to the Number Guessing Game!", false);
+  NewLine("I'm thinking of a number between 1 and 100.", false);
+  NewLine(`Pssst, the correct answer is ${answer}`);
+  NewLine("Choose a difficulty. Type 'easy' or 'hard': ", true);
+}
+
+//Enter button
+$(document).on("keydown", function (e) {
+  var x = event.which || event.keyCode;
+  if (x === 13 || x == 13) {
+    var consoleLine = $("#" + CurrentId + " input").val();
+    inputValues.push({ id: CurrentId, val: consoleLine });
+
+    if (inputValues.length > 1) {
+      const guess = Number(inputValues[inputValues.length - 1].val);
+      if (guess != answer) {
+        turns -= 1;
+
+        if (guess < answer) {
+          NewLine("Too low.", false);
+        } else if (guess > answer) {
+          NewLine("Too high.", false);
+        }
+
+        if (turns == 0) {
+          $(".console-carrot").remove();
+          NewLine("You've run out of guesses, you lose.", false);
+          return;
+        } else {
+          NewLine("Guess again.", false);
+        }
+      } else {
+        $(".console-carrot").remove();
+        NewLine(`You got it! The answer was ${answer}.`, false);
+        return;
+      }
+    } else {
+      if (inputValues[0].val.toLowerCase().trim() == "easy") {
+        turns = 10;
+      } else if (inputValues[0].val.toLowerCase().trim() == "hard") {
+        turns = 5;
+      }
+    }
+    NewLine(`You have ${turns} attempts remaining to guess the number.`);
+    NewLine("Make a guess: ", true);
+    // $(".console-carrot").remove();
+    // if (biddingShouldContinue) {
+    //   NewLine(inputPrompts[inputValues.length - 1], true);
+    // }
+  }
+});
+$(document).on("keydown", function (e) {
+  var x = event.which || event.keyCode;
+  var line = $("#" + CurrentId + " input");
+  var length = line.val().length;
+  if (x != 8) {
+    line.attr("size", 1 + length);
+  } else {
+    line.attr("size", length * 0.95);
+  }
+  if (length === 0) {
+    $("#" + CurrentId + " input").attr("size", "1");
+  }
+});
+$(document).on("click", function (e) {
+  $("#" + CurrentId + " input").focus();
+});
+
+//New line
+function NewLine(text, isPrompt) {
+  $(".console-carrot").remove();
+  if (CurrentId !== undefined) {
+    $("#" + CurrentId + " input").prop("disabled", true);
+  }
+  CurrentId = "consoleInput-" + GenerateId();
+
+  if (isPrompt) {
+    $("#Content").append(
+      //One Line
+      '<div id="' +
+        CurrentId +
+        '">' +
+        text +
+        '<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="terminal-input" /><div class="console-carrot"></div></div>'
+    );
+    $("#" + CurrentId + " input").focus();
+    $("#" + CurrentId + " input").attr("size", "1");
+  } else {
+    $("#Content").append('<div id="' + CurrentId + '">' + text + "</div>");
+  }
+  document.getElementById(CurrentId).scrollIntoView();
+}
+
+function GenerateId() {
+  return Math.random().toString(16).slice(2);
+}
+
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
diff --git a/styles/main.css b/styles/main.css
@@ -0,0 +1,61 @@
+body {
+  background: #141414;
+}
+
+button {
+  font-size: 30px;
+}
+
+.content {
+  white-space: pre;
+}
+
+.terminal {
+  font-family: "IBM Plex Mono", monospace;
+  color: rgb(187, 187, 187);
+  font-size: 30px;
+  font-weight: 100;
+}
+
+.terminal-input {
+  background: rgba(0, 0, 0, 0);
+  font-family: monospace;
+  color: transparent;
+  font-size: 30px;
+  outline: none;
+  border: none;
+  -webkit-text-fill-color: rgb(187, 187, 187);
+}
+
+.terminal-purple {
+  color: #5050f2;
+}
+
+.console-line {
+  color: rgb(0, 178, 0);
+}
+
+.login-line {
+  color: #fff;
+}
+
+.console-carrot {
+  vertical-align: middle;
+  background: #fff;
+  height: 32px;
+  width: 17px;
+  margin-left: -7px;
+  display: inline-block;
+  animation: blink 1s step-start 0s infinite;
+}
+
+::selection {
+  background-color: #fff;
+  color: #000;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}