faisalnjs · faisalnjs · May 14, 2025 · May 13, 2025 · May 14, 2025 · May 14, 2025
diff --git a/index.html b/index.html
@@ -111,6 +111,11 @@ <h1><span class="code" data-modal-view="settings/code">000</span></h1>
             <i class="bi bi-three-dots"></i>
           </button>
         </div>
+        <div id="set-type-selector" data-button-select>
+          <button aria-selected="true" data-value="brackets">&lcub; Brackets &rcub;</button>
+          <button aria-selected="false" data-value="vector">&lt; Vector &gt;</button>
+          <button aria-selected="false" data-value="array">&lbrack; Array &rbrack;</button>
+        </div>
         <div class="button-grid">
           <input type="text" autocomplete="off" id="set-input" data-set-input="1" />
           <button square data-add-set-input><i class="bi bi-plus"></i></button>
@@ -208,7 +213,7 @@ <h2 id="history-date"></h2>
   <!-- Settings -->
   <dialog data-modal-page="settings" data-page-title="Settings">
     <img src="banner-transparent.png" alt="Virtual Clicker Banner">
-    <p id="version-string"><span class="version"></span></p>
+    <span class="version" id="version-string"></span>
     <button data-modal-view="settings/code">Seat Code</button>
     <button data-modal-view="settings/theme">Theme</button>
     <button data-modal-view="settings/keybinds">Keyboard Shortcuts</button>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "virtual-clicker",
   "private": true,
-  "version": "4.4.2",
+  "version": "4.4.3",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

diff --git a/src/clicker/clicker.js b/src/clicker/clicker.js
@@ -19,6 +19,7 @@ try {
   var frqPartInputs = document.querySelectorAll(".frq-parts .part input");
 
   let currentAnswerMode;
+  let currentSetType = "brackets";
   let multipleChoice = null;
   let highestDataElement = null;
 
@@ -109,7 +110,18 @@ try {
           setInputs.forEach(a => {
             if ((a.value.length > 0) && (a.value != ' ')) values.push(a.value)
           });
-          return JSON.stringify(values);
+          var array = JSON.stringify(values);
+          switch (currentSetType) {
+            case "brackets":
+              array = `{${array.slice(1, -1)}}`;
+              break;
+            case "vector":
+              array = `<${array.slice(1, -1)}>`;
+              break;
+            default:
+              break;
+          };
+          return array;
         } else if (mode === "frq") {
           if (part && document.querySelector(`[data-frq-part="${part}"]`)) {
             return document.querySelector(`[data-frq-part="${part}"]`).value;
@@ -559,7 +571,7 @@ try {
               button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n<p>${item.answer}${(item.question === '1') ? '/9' : ''}</p>`;
             }
           } else {
-            button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n<p>${item.answer.split('[')[1].split(']')[0]}</p>`;
+            button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n<p>${item.answer.slice(1, -1)}</p>`;
           }
         } else {
           button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n${convertLatexToMarkup(item.answer)}\n<p class="hint">(Equation may not display properly)</p>`;
@@ -579,11 +591,11 @@ try {
             ui.setButtonSelectValue(document.getElementById("answer-mode-selector"), "set");
             resetSetInput();
             var i = 0;
-            JSON.parse(item.answer).forEach(a => {
+            JSON.parse(`[${item.answer.slice(1, -1)}]`).forEach(a => {
               setInputs = document.querySelectorAll("[data-set-input]");
               setInputs[i].value = a;
               i++;
-              if (i < JSON.parse(item.answer).length) addSet();
+              if (i < JSON.parse(`[${item.answer.slice(1, -1)}]`).length) addSet();
             });
           } else if (frq) {
             answerMode("frq");
@@ -715,6 +727,14 @@ try {
     }
   });
 
+  const setTypeLabel = document.querySelector(`label[for="answer-input"]`);
+
+  // Select set type
+  document.getElementById("set-type-selector").addEventListener("input", (e) => {
+    const mode = e.detail;
+    currentSetType = mode;
+  });
+
   setInputs = document.querySelectorAll('[data-set-input]');
 
   // Add set input
@@ -765,7 +785,7 @@ try {
   }
 
   function resetSetInput() {
-    document.querySelector('[data-answer-mode="set"] .button-grid').innerHTML = '<input type="text" autocomplete="off" id="set-input" data-set-input="1" /><button square data-add-set-input><i class="bi bi-plus"></i></button><button square data-remove-set-input disabled><i class="bi bi-dash"></i></button>';
+    document.querySelectorAll('[data-answer-mode="set"] .button-grid')[1].innerHTML = '<input type="text" autocomplete="off" id="set-input" data-set-input="1" /><button square data-add-set-input><i class="bi bi-plus"></i></button><button square data-remove-set-input disabled><i class="bi bi-dash"></i></button>';
     if (document.querySelector("[data-add-set-input]")) {
       document.querySelector("[data-add-set-input]").addEventListener("click", addSet);
     }

diff --git a/src/design.css b/src/design.css
@@ -325,6 +325,7 @@ div.ML__keyboard {
 
 [data-button-select] > button {
   height: unset;
+  min-height: 1.75em;
   border-radius: 0.25rem;
   cursor: pointer;
 }

diff --git a/src/main.js b/src/main.js
@@ -18,12 +18,12 @@ try {
 
   updateVersionString();
   function updateVersionString() {
-    document.querySelectorAll("span.version").forEach((element) => {
+    document.querySelectorAll(".version").forEach((element) => {
       const DEVELOPER_MODE = storage.get("developer");
-      element.innerHTML = "v" + version + (DEVELOPER_MODE ? " <code>dev</code>" : "");
+      element.innerHTML = "<p>v" + version + "</p>" + (DEVELOPER_MODE ? " <code>dev</code>" : "");
     });
   }
-  document.querySelectorAll("span.hostname").forEach((element) => {
+  document.querySelectorAll(".hostname").forEach((element) => {
     element.innerHTML = window.location.hostname;
   });
 

diff --git a/src/modules/ui.css b/src/modules/ui.css
@@ -27,20 +27,27 @@ dialog img {
 }
 
 dialog #version-string {
-  margin-top: -37px;
-  margin-bottom: 9px;
-  margin-left: 5px;
-  padding: 3px 10px 1px 10px;
-  background-color: var(--text-color);
-  backdrop-filter: blur(5px);
+  margin: -55px auto 20px auto;
   width: fit-content;
-  color: var(--background-color);
-  border-radius: 0.25rem;
   z-index: 1;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  gap: 7px;
 }
 
-dialog #version-string span {
-  background: transparent;
+dialog #version-string p {
+  font-size: 25px;
+  font-weight: 600;
+  background: linear-gradient(0, white 50%, transparent);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+dialog #version-string code {
+  font-size: 15px;
+  color: var(--text-color) !important;
 }
 
 div[data-modal-page] {

diff --git a/src/themes/butterfly/butterfly.css b/src/themes/butterfly/butterfly.css
@@ -42,7 +42,7 @@ body[data-theme="butterfly"] :is(#header, #clicker) {
   background-color: transparent;
 }
 
-body[data-theme="butterfly"] #answer-mode-selector {
+body[data-theme="butterfly"] [data-button-select] {
   background-color: var(--surface-color);
 }
 

diff --git a/src/themes/festive/festive.css b/src/themes/festive/festive.css
@@ -1,4 +1,4 @@
-[data-theme="festive-2023"] {
+[data-theme="festive"] {
   color-scheme: light;
   --text-color: #242424;
   --background-color: #f1e2cc;
@@ -11,15 +11,15 @@
   --green: #42b970;
 }
 
-[data-theme="festive-2023"] button:nth-child(odd):not(button[data-theme]) {
+[data-theme="festive"] button:nth-child(odd):not(button[data-theme]) {
   --surface-color: var(--green);
 }
 
-[data-theme="festive-2023"] button:nth-child(even):not(button[data-theme]) {
+[data-theme="festive"] button:nth-child(even):not(button[data-theme]) {
   --surface-color: var(--red);
 }
 
-[data-theme="festive-2023"]
+[data-theme="festive"]
   :is(
     button,
     input,
@@ -33,7 +33,7 @@
   border: 0.125rem solid #242424;
 }
 
-[data-theme="festive-2023"] #submit-button {
+[data-theme="festive"] #submit-button {
   height: 2.25rem;
   background: linear-gradient(-45deg, white 25%, var(--red) 25% 50%, white 50% 75%, var(--red) 75%);
   background-size: 2rem 2rem;
@@ -43,16 +43,16 @@
     sans-serif;
 }
 
-[data-theme="festive-2023"] #submit-button:is(:hover, :focus) {
+[data-theme="festive"] #submit-button:is(:hover, :focus) {
   color: var(--text-color);
   animation: scroll 500ms linear infinite forwards;
 }
 
-[data-theme="festive-2023"] #answer-input {
+[data-theme="festive"] #answer-input {
   border: none;
 }
 
-[data-theme="festive-2023"] #answer-textarea-container:has(#answer-input:focus) {
+[data-theme="festive"] #answer-textarea-container:has(#answer-input:focus) {
   outline: none;
   box-shadow: 0 0 0 0.125rem var(--accent-color) inset;
   transition: box-shadow 100ms ease;

diff --git a/src/themes/themes.css b/src/themes/themes.css
@@ -204,7 +204,7 @@
 
 /* Seasonal */
 
-[data-theme="halloween-2023"] {
+[data-theme="halloween"] {
   color-scheme: dark;
   --text-color: #ffffff;
   --background-color: #2c173d;
@@ -237,3 +237,8 @@ body[data-theme="dune-2"] #atreides-logo {
 body[data-theme="dune-2"] #header > .virtual-clicker-logo {
   display: none;
 }
+
+body[data-theme="stealth"] dialog img,
+body[data-theme="slytherin"] dialog img {
+  box-shadow: inset 0 0 0px 1000px var(--surface-color);
+}
diff --git a/src/themes/themes.js b/src/themes/themes.js
@@ -243,6 +243,32 @@ try {
     const css = `[data-theme="custom"] {\n  ${properties.join("\n  ")}\n}`;
     navigator.clipboard.writeText(css);
   }
+
+  // Seasonal themes
+
+  var seasonalTheme = "";
+  var seasonalEmoji = "";
+
+  if ((Date.now() < new Date(`${new Date().getFullYear()}-10-31`).getTime()) && (Date.now() > new Date(`${new Date().getFullYear()}-10-23`).getTime())) {
+    seasonalTheme = "halloween";
+    seasonalEmoji = "🎃";
+  } else if ((Date.now() < new Date(`${new Date().getFullYear()}-12-25`).getTime()) && (Date.now() > new Date(`${new Date().getFullYear()}-12-01`).getTime())) {
+    seasonalTheme = "festive";
+    seasonalEmoji = "🎄";
+  }
+
+  if ((seasonalTheme != "") && (seasonalEmoji != "")) {
+    var seasonalThemeButton = document.createElement("button");
+    seasonalThemeButton.className = "icon";
+    seasonalThemeButton.onclick = function () {
+      disableTransitions();
+      document.body.setAttribute("data-theme", seasonalTheme);
+      enableTransitions();
+      storage.set("theme", seasonalTheme);
+    };
+    seasonalThemeButton.innerHTML = seasonalEmoji;
+    document.getElementById("controls-container").appendChild(seasonalThemeButton);
+  }
 } catch (error) {
   if (storage.get("developer")) {
     alert(`Error @ themes.js: ${error.message}`);