Merge branch 'staging' of https://github.com/DishpitDev/Slopify

DishpitDev · Jan 4, 2025 · 5be9b11 · 5be9b11
2 parents d34f781 + 43cc5b7
commit 5be9b11
Show file tree

Hide file tree

Showing 27 changed files with 310 additions and 9 deletions.
diff --git a/calc.html b/calc.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<html lang="en">
+<meta charset="UTF-8" />
+    <head>
+        <title>calc</title>
+        <style>
+            body {
+            background: linear-gradient(
+            270deg,
+            #ff0000,
+            #ff7f00,
+            #ffff00,
+            #00ff00,
+            #0000ff,
+            #4b0082,
+            #8b00ff
+            );
+            background-size: 1400% 1400%;
+            animation: rainbow 10s ease infinite;
+            color: white;
+            text-align: center;
+            padding: 50px;
+            font-family: "'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;"
+        }
+        .calculator {
+            background: url("static/images/maths.gif");
+            padding: 30px;
+            width: 1000px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            text-align: center;
+        }
+
+        input[type="button"] {
+            font-size: 20px;
+            padding: 20px;
+            width: 100px;
+            height: 100px;
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            background-size: contain !important
+        }
+        #zero{
+            background: url("static/images/calc/0.gif")
+        }
+        #one{
+            background: url("static/images/calc/1.gif")
+        }
+        #two{
+            background: url("static/images/calc/2.webp")
+        }
+        #three{
+            background: url("static/images/calc/3.gif")
+        }
+        #four{
+            background: url("static/images/calc/4.gif")
+        }
+        #five{
+            background: url("static/images/calc/5.gif")
+        }
+        #six{
+            background: url("static/images/calc/6.gif")
+        }
+        #seven{
+            background: url("static/images/calc/7.gif")
+        }
+        #eight{
+            background: url("static/images/calc/8.gif")
+        }
+        #nine{
+            background: url("static/images/calc/9.gif")
+        }
+        #zero{
+            background: url("static/images/calc/0.gif")
+        }
+        #plus, #mult{
+            background: url("static/images/calc/plusmult.gif")
+        }
+        #minus{
+            background: url("static/images/calc/minus.gif")
+        }
+        #divide{
+            background: url("static/images/calc/divide.gif")
+        }
+        #equals{
+            background: url("static/images/calc/equals.gif")
+        }
+        #clear{
+            background: url("static/images/calc/clear.gif")
+        }
+        #decimal{
+            background: url("static/images/calc/decimal.webp")
+        }
+
+        @keyframes rainbow {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+        100% {
+          background-position: 0% 50%;
+        }
+      }
+        </style>
+    </head>
+    <body>
+        <div class="calculator">
+            <img src="static/images/calc/math.gif" style="height: 100px;">
+            <input type="text" id="result" disabled style="margin-bottom: 10px;">
+            <div class="row">
+                <input type="button" id="seven"onclick="appendNumber(7)">
+                <input type="button" id="eight"onclick="appendNumber(8)">
+                <input type="button" id="nine"onclick="appendNumber(9)">
+                <input type="button" id="divide" onclick="appendOperator('/')">
+            </div>
+            <div class="row">
+                <input type="button" id="four" onclick="appendNumber(4)">
+                <input type="button" id="five" onclick="appendNumber(5)">
+                <input type="button" id="six" onclick="appendNumber(6)">
+                <input type="button" id="mult" onclick="appendOperator('*')">
+            </div>
+            <div class="row">
+                <input type="button" id="one" onclick="appendNumber(1)">
+                <input type="button" id="two" onclick="appendNumber(2)">
+                <input type="button" id="three" onclick="appendNumber(3)">
+                <input type="button" id="minus" onclick="appendOperator('-')">
+            </div>
+            <div class="row">
+                <input type="button" id="zero" onclick="appendNumber(0)">
+                <input type="button" id="decimal" onclick="appendDecimal()">
+                <input type="button" id="clear" onclick="clearResult()">
+                <input type="button" id="plus" onclick="appendOperator('+')">
+            </div>
+            <div class="row">
+                <input type="button" id="equals" onclick="calculateResult()">
+            </div>
+        </div>
+
+        <script>
+            let currentInput = "";
+            let previousInput = "";
+            let operator = "";
+
+            function play_audio(audio){
+                var audio = new Audio("static/audio/"+audio+".mp3");
+                audio.play();
+            }
+            function appendNumber(number) {
+                play_audio("fart")
+                currentInput += number;
+                document.getElementById("result").value = currentInput;
+            }
+
+            function appendOperator(op) {
+                play_audio("sigma")
+                if (currentInput === "") return;
+                if (previousInput !== "") {
+                    calculateResult();
+                }
+                operator = op;
+                previousInput = currentInput;
+                currentInput = "";
+            }
+
+            function appendDecimal() {
+                play_audio("fart")
+                if (currentInput.includes(".")) return;
+                currentInput += ".";
+                document.getElementById("result").value = currentInput;
+            }
+
+            function clearResult() {
+                currentInput = "";
+                previousInput = "";
+                operator = "";
+                document.getElementById("result").value = "";
+            }
+
+            function calculateResult() {
+                play_audio("skippidy")
+                if (previousInput === "" || currentInput === "") return;
+                let result;
+                switch (operator) {
+                    case "+":
+                        result = parseFloat(previousInput) + parseFloat(currentInput);
+                        break;
+                    case "-":
+                        result = parseFloat(previousInput) - parseFloat(currentInput);
+                        break;
+                    case "*":
+                        result = parseFloat(previousInput) * parseFloat(currentInput);
+                        break;
+                    case "/":
+                        if (currentInput === "0") {
+                            alert("Cannot divide by zero");
+                            return;
+                        }
+                        result = parseFloat(previousInput) / parseFloat(currentInput);
+                        break;
+                    default:
+                        return;
+                }
+                currentInput = result.toString();
+                operator = "";
+                previousInput = "";
+                document.getElementById("result").value = currentInput;
+            }
+        </script>
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -141,7 +141,7 @@
   </head>
 
   <body>
-    <div style="z-index: 1000001; padding: 1rem; position: absolute; left: 0" id="deslopification"></div>
+    <div id="deslopification"></div>
     <div
       data-bs-theme="dark"
       class="use-bootstrap"

diff --git a/static/audio/fart.mp3 b/static/audio/fart.mp3
diff --git a/static/audio/sigma.mp3 b/static/audio/sigma.mp3
diff --git a/static/audio/skippidy.mp3 b/static/audio/skippidy.mp3
diff --git a/static/css/style.css b/static/css/style.css
@@ -809,4 +809,47 @@ body.wokeMode {
   width: 100%;
   height: 100%;
   border: none;
+}
+
+#deslopification button {
+  padding: 10px 20px;
+  background-color: #315f9b;
+  color: #dedede;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 5px;
+  transition: all 0.3s ease-in-out;
+  border: 2px solid #315f9b;
+  margin-top: 20px;
+}
+
+#deslopification button:hover {
+  background-color: #507cb7;
+  transform: scale(1.05);
+  border: 2px solid #dedede;
+}
+
+#deslopification {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 1000001;
+  border: 2px solid #dedede;
+  border-radius: 5px;
+  padding: 1.5rem;
+}
+
+.deslopify-checkbox {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: 10px;
+}
+
+.deslopify-button-container {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-top: 20px;
+  gap: 10px;
 }
diff --git a/static/images/calc/0.gif b/static/images/calc/0.gif
diff --git a/static/images/calc/1.gif b/static/images/calc/1.gif
diff --git a/static/images/calc/2.webp b/static/images/calc/2.webp
diff --git a/static/images/calc/3.gif b/static/images/calc/3.gif
diff --git a/static/images/calc/4.gif b/static/images/calc/4.gif
diff --git a/static/images/calc/5.gif b/static/images/calc/5.gif
diff --git a/static/images/calc/6.gif b/static/images/calc/6.gif
diff --git a/static/images/calc/7.gif b/static/images/calc/7.gif
diff --git a/static/images/calc/8.gif b/static/images/calc/8.gif
diff --git a/static/images/calc/9.gif b/static/images/calc/9.gif
diff --git a/static/images/calc/clear.gif b/static/images/calc/clear.gif
diff --git a/static/images/calc/decimal.webp b/static/images/calc/decimal.webp
diff --git a/static/images/calc/divide.gif b/static/images/calc/divide.gif
diff --git a/static/images/calc/equals.gif b/static/images/calc/equals.gif
diff --git a/static/images/calc/math.gif b/static/images/calc/math.gif
diff --git a/static/images/calc/maths.gif b/static/images/calc/maths.gif
diff --git a/static/images/calc/minus.gif b/static/images/calc/minus.gif
diff --git a/static/images/calc/plusmult.gif b/static/images/calc/plusmult.gif
diff --git a/static/js/main.js b/static/js/main.js
@@ -7,6 +7,7 @@ import { initReverseScroll } from "./reverseScroll.js";
 import { initShaderToy } from "./shadertoyLoader.js";
 import { initDyslexia } from "./dyslexia.js";
 import { initKaboom } from "./kaboom.js";
+import { setSurpriseEnabled } from "./surprise.js";
 
 // Welcome to "main.js". This is where all the ~magic~ SLOP happens.
 
@@ -51,6 +52,10 @@ const INIT_FUNCTIONS = {
     name: "Mouse Kaboom",
     run: () => initKaboom(),
   },
+  "handsome-surprise": {
+    name: "Handsome Surprise",
+    run: () => setSurpriseEnabled(true),
+  }
 };
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -65,22 +70,26 @@ document.addEventListener("DOMContentLoaded", () => {
     checkbox.type = "checkbox";
     checkbox.value = key;
     checkbox.checked = true;
+    checkbox.id = `deslopify-${key}`;
 
     const label = document.createElement("label");
-    label.htmlFor = key;
+    label.htmlFor = `deslopify-${key}`;
     label.innerText = value.name;
 
     const div = document.createElement("div");
+    div.className = "deslopify-checkbox";
     div.appendChild(checkbox);
     div.appendChild(label);
 
     deslopification.appendChild(div);
   });
 
+  const buttonDiv = document.createElement("div");
+  buttonDiv.className = "deslopify-button-container";
+
   const deslopifyButton = document.createElement("button");
   deslopifyButton.innerText = "Deslopify";
   deslopifyButton.id = "deslopify-button";
-  deslopification.appendChild(deslopifyButton);
 
   deslopifyButton.addEventListener("click", () => {
     const checkboxes = document.querySelectorAll("#deslopification input[type=checkbox]:checked");
@@ -91,4 +100,28 @@ document.addEventListener("DOMContentLoaded", () => {
 
     deslopification.remove();
   });
+
+  const selectAllButton = document.createElement("button");
+  selectAllButton.innerText = "Select All";
+  selectAllButton.id = "select-all-deslopifications-button";
+
+  selectAllButton.addEventListener("click", () => {
+    const checkboxes = document.querySelectorAll("#deslopification input[type=checkbox]");
+    checkboxes.forEach((checkbox) => checkbox.checked = true);
+  });
+
+  const deselectAllButton = document.createElement("button");
+  deselectAllButton.innerText = "Deselect All";
+  deselectAllButton.id = "deselect-all-deslopifications-button";
+
+  deselectAllButton.addEventListener("click", () => {
+    const checkboxes = document.querySelectorAll("#deslopification input[type=checkbox]");
+    checkboxes.forEach((checkbox) => checkbox.checked = false);
+  });
+
+  buttonDiv.appendChild(deslopifyButton);
+  buttonDiv.appendChild(selectAllButton);
+  buttonDiv.appendChild(deselectAllButton);
+
+  deslopification.appendChild(buttonDiv);
 });
diff --git a/static/js/surprise.js b/static/js/surprise.js
@@ -47,14 +47,23 @@ function showFullScreenImage(
   }, displayDuration + fadeDuration);
 }
 
-var audio = new Audio("static/audio/protocol.mp3");
-document.addEventListener("click", function (event) {
+let surpriseEnabled = false;
+
+export function setSurpriseEnabled(enabled) {
+  surpriseEnabled = enabled;
+}
+
+const audio = new Audio("static/audio/protocol.mp3");
+document.addEventListener("click", () => {
+  if (!surpriseEnabled) {
+    return;
+  }
   // Check if the clicked element is a button
 
-  var LUCKY_NUMBER = getRandomInt(THE_OPPENHEIMER_INDEX);
+  let LUCKY_NUMBER = getRandomInt(THE_OPPENHEIMER_INDEX);
   if (LUCKY_NUMBER === 0) {
     audio.volume = 1;
     audio.play();
-    showFullScreenImage("static/images/handsome.jpg", 1500, 1500);
+    showFullScreenImage("/static/images/handsome.jpg", 1500, 1500);
   }
 });
diff --git a/static/js/world_map.js b/static/js/world_map.js
@@ -32,7 +32,7 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   // Fetch the local cities.json once
-  fetch("data/cities.json")
+  fetch("/static/data/cities.json")
     .then((resp) => resp.json())
     .then((data) => {
       citiesData = data;
@@ -171,5 +171,5 @@ function drawCityMarker(cityId) {
 
 // Initialize the map after the DOM is fully loaded
 document.addEventListener("DOMContentLoaded", function () {
-  initWorldMap("world-map", "../data/cities.json");
+  initWorldMap("world-map", "/static/data/cities.json");
 });