Clean up with Prettier and add Discord emojis

2024-11-15 15:50:59 -05:00 · 2024-11-15 15:50:59 -05:00 · 8a606359a1
commit 8a606359a1
parent 368af782bd
4 changed files with 1439 additions and 38 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/index.html
+++ b/index.html
@ -1,24 +1,40 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-<style type="text/css">
-.box {
-  display: flex;
-  flex-direction: column;
-  width: 400px;
-  padding: 10px
-}
-.box > * {
-  padding: 3px;
-}
-.box > button {
-  padding: 3px 0;
-}
-p {
-  margin: 0;
-}
-</style>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type="text/css">
+      .box {
+        display: flex;
+        flex-direction: column;
+        width: 400px;
+        padding: 0.75rem;
+      }
+      .box > * {
+        padding: 0.25rem;
+      }
+      .box > button {
+        padding: 0.25rem 0;
+        margin-bottom: 0.25rem;
+      }
+      .emojis {
+        display: flex;
+        align-items: center;
+        padding: 0.25rem 0;
+      }
+      .emojis > button {
+        margin: 0;
+        margin-right: 0.25rem;
+        user-select: none;
+      }
+      .emojis > button > span {
+        font-weight: 600;
+        margin-left: 0.375rem;
+        text-align: center;
+      }
+      p {
+        margin: 0;
+      }
+    </style>
  </head>
  <body>
    <div class="box">
@ -30,27 +46,63 @@ p {
    </div>
    <div class="box">
      <p><span id="discordServers">0</span> Discord servers</p>
-      <button id="createDiscordServer" onClick="createDiscordServerClicked()">Create Discord server</button>
+      <button id="createDiscordServer" onClick="createDiscordServerClicked()">
+        Create Discord server
+      </button>
+      <div id="discordEmojis" class="emojis" style="display: none">
+        <button onClick="discordEmojiClicked(0)">
+          💜 <span id="discordEmoji1"></span>
+        </button>
+        <button onClick="discordEmojiClicked(1)">
+          🥰 <span id="discordEmoji2"></span>
+        </button>
+        <button onClick="discordEmojiClicked(2)">
+          🥺 <span id="discordEmoji3"></span>
+        </button>
+      </div>
    </div>
    <div class="box">
      <p><span id="twitchChannels">0</span> Twitch channels</p>
      <p><span id="twitchFollowers">0</span> followers</p>
-      <button id="createTwitchChannel" onClick="createTwitchChannelClicked()">Create Twitch channel</button>
+      <button id="createTwitchChannel" onClick="createTwitchChannelClicked()">
+        Create Twitch channel
+      </button>
    </div>
    <div class="box">
      <p><span id="catEars">0</span> cat ears</p>
-      <button id="buyCatEars" onClick="buyCatEarsClicked()">Buy cat ears</button>
+      <button id="buyCatEars" onClick="buyCatEarsClicked()">
+        Buy cat ears
+      </button>
      <p>Cat ears cost: $ <span id="catEarsCost">5.00</span></p>
    </div>
    <div class="box">
-      <p><span id="minecraftServers">0</span> Minecraft servers <span id="percentRunning"></span></p>
-      <button id="launchMinecraftServer" onClick="launchMinecraftServerClicked()">Launch Minecraft server</button>
-      <button id="deployCloudOrchestration" onClick="deployCloudOrchestrationClicked()" style="display: none">Deploy cloud orchestration</button>
-      <p>Cloud instance cost: $ <span id="minecraftServersCost">12.00</span> / month</p>
+      <p>
+        <span id="minecraftServers">0</span> Minecraft servers
+        <span id="percentRunning"></span>
+      </p>
+      <button
+        id="launchMinecraftServer"
+        onClick="launchMinecraftServerClicked()"
+      >
+        Launch Minecraft server
+      </button>
+      <button
+        id="deployCloudOrchestration"
+        onClick="deployCloudOrchestrationClicked()"
+        style="display: none"
+      >
+        Deploy cloud orchestration
+      </button>
+      <p>
+        Cloud instance cost: $ <span id="minecraftServersCost">12.00</span> /
+        month
+      </p>
    </div>
    <div class="box">
      <p><span id="synthesizers">0</span> synthesizers</p>
-      <button id="buySynthesizer" onClick="buySynthesizerClicked()">Buy synthesizer</button>
+      <button id="buySynthesizer" onClick="buySynthesizerClicked()">
+        Buy synthesizer
+      </button>
      <p>Synthesizer cost: $ <span id="synthesizersCost">100.00</span></p>
    </div>

@ -58,12 +110,13 @@ p {
      var cutieCount = 0;
      var funds = 0;
      var discordServers = 0;
+      var discordEmoji = [0, 0, 0];
      var twitchChannels = 0;
      var twitchFollowers = 0;
      var catEars = 0;
-      var catEarsCost = 5.00;
+      var catEarsCost = 5.0;
      var minecraftServers = 0;
-      var minecraftServersCost = 12.00;
+      var minecraftServersCost = 12.0;
      var minecraftServersTotalCost = 0;
      var cloudOrchestration = false;
      var synthesizers = 0;
@ -72,14 +125,23 @@ p {
      var cutiesElement = document.getElementById("cuties");
      var fundsElement = document.getElementById("funds");
      var discordServersElement = document.getElementById("discordServers");
+      var discordEmojisElement = document.getElementById("discordEmojis");
+      var discordEmojiElements = [];
+      discordEmojiElements.push(document.getElementById("discordEmoji1"));
+      discordEmojiElements.push(document.getElementById("discordEmoji2"));
+      discordEmojiElements.push(document.getElementById("discordEmoji3"));
      var twitchChannelsElement = document.getElementById("twitchChannels");
      var twitchFollowersElement = document.getElementById("twitchFollowers");
      var catEarsElement = document.getElementById("catEars");
      var buyCatEarsElement = document.getElementById("buyCatEars");
      var catEarsCostElement = document.getElementById("catEarsCost");
      var minecraftServersElement = document.getElementById("minecraftServers");
-      var minecraftServersCostElement = document.getElementById("minecraftServersCost");
-      var deployCloudOrchestrationElement = document.getElementById("deployCloudOrchestration");
+      var minecraftServersCostElement = document.getElementById(
+        "minecraftServersCost",
+      );
+      var deployCloudOrchestrationElement = document.getElementById(
+        "deployCloudOrchestration",
+      );
      var percentRunningElement = document.getElementById("percentRunning");
      var buySynthesizerElement = document.getElementById("buySynthesizer");
      var synthesizersElement = document.getElementById("synthesizers");
@ -91,6 +153,11 @@ p {

      function createDiscordServerClicked() {
        discordServers++;
+        discordEmojisElement.style.display = "";
+      }
+
+      function discordEmojiClicked(index) {
+        discordEmoji[index]++;
      }

      function createTwitchChannelClicked() {
@ -125,18 +192,29 @@ p {
      }

      var fundsBaseRate = 0.00001227;
-      var discordRate = 0.00001;
+      var discordRate = 0.001;
      var streamerBaseRate = 0.01;
      var streamerWithCatEarsRate = 0.005;
      var twitchEarningRate = 0.00001;
      var synthRepRate = 0.0001;

-      window.setInterval(function() {
+      window.setInterval(function () {
        if (discordServers > 0) {
-          cutieCount += Math.min(discordServers, cutieCount / 100) * cutieCount * discordRate;
+          cutieCount +=
+            Math.min(discordServers, cutieCount / 100.0) * discordRate;
+
+          const emoji = Math.floor(Math.random() * 1000 * (100 / cutieCount));
+          if (emoji < 3) {
+            discordEmoji[emoji]++;
+          }
        }

-        var streamers = Math.min(twitchChannels, cutieCount * (streamerBaseRate + Math.min(cutieCount, catEars) * streamerWithCatEarsRate));
+        var streamers = Math.min(
+          twitchChannels,
+          cutieCount *
+            (streamerBaseRate +
+              Math.min(cutieCount, catEars) * streamerWithCatEarsRate),
+        );
        if (streamers > 0) {
          if (twitchFollowers < streamers * 10000) {
            twitchFollowers += 0.01 * (streamers * 10000 - twitchFollowers);
@ -145,10 +223,12 @@ p {
          }
        }

-        funds += cutieCount * fundsBaseRate + twitchFollowers * twitchEarningRate;
+        funds +=
+          cutieCount * fundsBaseRate + twitchFollowers * twitchEarningRate;

        if (minecraftServers > 0) {
-          var cloudServerCosts = minecraftServersTotalCost / (12 * 24 * 60 * 60 * 100);
+          var cloudServerCosts =
+            minecraftServersTotalCost / (12 * 24 * 60 * 60 * 100);
          if (cloudServerCosts < funds) {
            percentRunningElement.style.display = "none";
            funds -= cloudServerCosts;
@ -158,7 +238,10 @@ p {
            }
          } else {
            percentRunningElement.style.display = "";
-            percentRunningElement.innerHTML = "(" + Math.floor(100 * funds / cloudServerCosts) + " % running)"
+            percentRunningElement.innerHTML =
+              "(" +
+              Math.floor((100 * funds) / cloudServerCosts) +
+              " % running)";
            funds = 0;
          }
        }
@ -168,6 +251,9 @@ p {
        cutiesElement.innerHTML = Math.floor(cutieCount);
        fundsElement.innerHTML = funds.toFixed(2);
        discordServersElement.innerHTML = discordServers;
+        for (const [index, element] of discordEmojiElements.entries()) {
+          element.innerHTML = discordEmoji[index];
+        }
        twitchChannelsElement.innerHTML = twitchChannels;
        twitchFollowersElement.innerHTML = Math.floor(twitchFollowers);
        catEarsElement.innerHTML = catEars;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,18 @@
+{
+  "name": "polycule",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.html",
+  "scripts": {
+    "style": "npx prettier index.html -w"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.blorp.dev/zo/polycule"
+  },
+  "author": "zoe.gauthier@blorp.dev",
+  "license": "MIT",
+  "devDependencies": {
+    "prettier": "^3.3.3"
+  }
+}