diff --git a/index.html b/index.html index cd322a4..9a90d85 100644 --- a/index.html +++ b/index.html @@ -111,6 +111,11 @@

000

+
+ + + +
@@ -208,7 +213,7 @@

Virtual Clicker Banner -

+ diff --git a/package-lock.json b/package-lock.json index de018cd..ed566b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "virtual-clicker", - "version": "4.4.2", + "version": "4.4.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "virtual-clicker", - "version": "4.4.2", + "version": "4.4.3", "dependencies": { "bootstrap-icons": "^1.11.3", "mathlive": "^0.104.0", diff --git a/package.json b/package.json index 45f4be3..9537a6b 100644 --- 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 index 0371dc0..938c214 100644 --- 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 = `

${item.question}. ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}

\n

${item.answer}${(item.question === '1') ? '/9' : ''}

`; } } else { - button.innerHTML = `

${item.question}. ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}

\n

${item.answer.split('[')[1].split(']')[0]}

`; + button.innerHTML = `

${item.question}. ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}

\n

${item.answer.slice(1, -1)}

`; } } else { button.innerHTML = `

${item.question}. ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}

\n${convertLatexToMarkup(item.answer)}\n

(Equation may not display properly)

`; @@ -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 = ''; + document.querySelectorAll('[data-answer-mode="set"] .button-grid')[1].innerHTML = ''; 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 index 9a67388..8ad89fd 100644 --- 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 index 7ecb31d..eaa23ea 100644 --- 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 ? " dev" : ""); + element.innerHTML = "

v" + version + "

" + (DEVELOPER_MODE ? " dev" : ""); }); } - 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 index cc6c376..6546f22 100644 --- 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 index 51d21dc..a7be061 100644 --- 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 index 53677d3..04241db 100644 --- 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 index 22d3f5e..7e529c6 100644 --- 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); +} \ No newline at end of file diff --git a/src/themes/themes.js b/src/themes/themes.js index c213a9f..b3e0825 100644 --- 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}`);