diff --git a/index.html b/index.html index 011af8b..e41d753 100644 --- a/index.html +++ b/index.html @@ -276,7 +276,7 @@

Virtual Clicker Banner - + @@ -309,77 +309,6 @@

-
-
-

000

-

Question

-
-

Answer

-
-
-
-
- -
-
- - -
-
-
-

000

-

Question

-
-

Answer

-
-
-
-
- - - - - - - -
- -
- -
-
- - -
-
-

Ctrl + Enter Submit click

Alt + 1-9 Insert nth symbol

@@ -461,6 +390,82 @@

000

The Virtual Clicker is undergoing maintenance. Please try again later.

+ + +
+
+

000

+

Question

+
+
+

Answer

+
+
+
+
+ +
+
+ + +
+
+
+
+

000

+

Question

+
+
+

Answer

+
+
+
+
+ + + + + + + +
+ +
+ +
+
+ + +
+
+
diff --git a/public/store/backdrop/aeroplane.png b/public/store/backdrop/aeroplane.png new file mode 100644 index 0000000..26f5fde Binary files /dev/null and b/public/store/backdrop/aeroplane.png differ diff --git a/public/store/backdrop/black-sand.png b/public/store/backdrop/black-sand.png new file mode 100644 index 0000000..a6a3798 Binary files /dev/null and b/public/store/backdrop/black-sand.png differ diff --git a/public/store/backdrop/blizzard-pro.png b/public/store/backdrop/blizzard-pro.png new file mode 100644 index 0000000..71f7f70 Binary files /dev/null and b/public/store/backdrop/blizzard-pro.png differ diff --git a/public/store/backdrop/galaxy-2.png b/public/store/backdrop/galaxy-2.png new file mode 100644 index 0000000..c460448 Binary files /dev/null and b/public/store/backdrop/galaxy-2.png differ diff --git a/public/store/backdrop/galaxy.png b/public/store/backdrop/galaxy.png new file mode 100644 index 0000000..1a12203 Binary files /dev/null and b/public/store/backdrop/galaxy.png differ diff --git a/public/store/backdrop/jellyfish-2.png b/public/store/backdrop/jellyfish-2.png new file mode 100644 index 0000000..dd7b910 Binary files /dev/null and b/public/store/backdrop/jellyfish-2.png differ diff --git a/public/store/backdrop/jellyfish-pro.png b/public/store/backdrop/jellyfish-pro.png new file mode 100644 index 0000000..70472df Binary files /dev/null and b/public/store/backdrop/jellyfish-pro.png differ diff --git a/public/store/backdrop/jellyfish.png b/public/store/backdrop/jellyfish.png new file mode 100644 index 0000000..ca21991 Binary files /dev/null and b/public/store/backdrop/jellyfish.png differ diff --git a/public/store/backdrop/lavender-2.png b/public/store/backdrop/lavender-2.png new file mode 100644 index 0000000..85d8021 Binary files /dev/null and b/public/store/backdrop/lavender-2.png differ diff --git a/public/store/backdrop/lavender-pro.png b/public/store/backdrop/lavender-pro.png new file mode 100644 index 0000000..0290fab Binary files /dev/null and b/public/store/backdrop/lavender-pro.png differ diff --git a/public/store/backdrop/milky-way.png b/public/store/backdrop/milky-way.png new file mode 100644 index 0000000..4788975 Binary files /dev/null and b/public/store/backdrop/milky-way.png differ diff --git a/public/store/backdrop/northern-lights.png b/public/store/backdrop/northern-lights.png new file mode 100644 index 0000000..19e2fca Binary files /dev/null and b/public/store/backdrop/northern-lights.png differ diff --git a/public/store/backdrop/rainy-day.png b/public/store/backdrop/rainy-day.png new file mode 100644 index 0000000..363f61e Binary files /dev/null and b/public/store/backdrop/rainy-day.png differ diff --git a/public/store/backdrop/rose-pro.png b/public/store/backdrop/rose-pro.png new file mode 100644 index 0000000..5ae769e Binary files /dev/null and b/public/store/backdrop/rose-pro.png differ diff --git a/public/store/backdrop/sage-pro.png b/public/store/backdrop/sage-pro.png new file mode 100644 index 0000000..d2eaf89 Binary files /dev/null and b/public/store/backdrop/sage-pro.png differ diff --git a/public/store/backdrop/sandy-beach.png b/public/store/backdrop/sandy-beach.png new file mode 100644 index 0000000..32d0695 Binary files /dev/null and b/public/store/backdrop/sandy-beach.png differ diff --git a/public/store/backdrop/shells.png b/public/store/backdrop/shells.png new file mode 100644 index 0000000..f5adb19 Binary files /dev/null and b/public/store/backdrop/shells.png differ diff --git a/public/store/backdrop/snow.png b/public/store/backdrop/snow.png new file mode 100644 index 0000000..7d418ff Binary files /dev/null and b/public/store/backdrop/snow.png differ diff --git a/public/store/backdrop/stealth-2.png b/public/store/backdrop/stealth-2.png new file mode 100644 index 0000000..c27a580 Binary files /dev/null and b/public/store/backdrop/stealth-2.png differ diff --git a/public/store/backdrop/synthwave-pro.png b/public/store/backdrop/synthwave-pro.png new file mode 100644 index 0000000..3f18e32 Binary files /dev/null and b/public/store/backdrop/synthwave-pro.png differ diff --git a/public/store/backdrop/tides.png b/public/store/backdrop/tides.png new file mode 100644 index 0000000..f5d5b2b Binary files /dev/null and b/public/store/backdrop/tides.png differ diff --git a/public/store/thumb/aeroplane.png b/public/store/thumb/aeroplane.png new file mode 100644 index 0000000..ff9a558 Binary files /dev/null and b/public/store/thumb/aeroplane.png differ diff --git a/public/store/thumb/black-sand.png b/public/store/thumb/black-sand.png new file mode 100644 index 0000000..03e2fa6 Binary files /dev/null and b/public/store/thumb/black-sand.png differ diff --git a/public/store/thumb/blizzard-pro.png b/public/store/thumb/blizzard-pro.png new file mode 100644 index 0000000..0538bdd Binary files /dev/null and b/public/store/thumb/blizzard-pro.png differ diff --git a/public/store/thumb/butterfly.png b/public/store/thumb/butterfly.png new file mode 100644 index 0000000..f76d568 Binary files /dev/null and b/public/store/thumb/butterfly.png differ diff --git a/public/store/thumb/galaxy-2.png b/public/store/thumb/galaxy-2.png new file mode 100644 index 0000000..642ffb0 Binary files /dev/null and b/public/store/thumb/galaxy-2.png differ diff --git a/public/store/thumb/galaxy.png b/public/store/thumb/galaxy.png new file mode 100644 index 0000000..b6ca0a3 Binary files /dev/null and b/public/store/thumb/galaxy.png differ diff --git a/public/store/thumb/jellyfish-2.png b/public/store/thumb/jellyfish-2.png new file mode 100644 index 0000000..6509fc1 Binary files /dev/null and b/public/store/thumb/jellyfish-2.png differ diff --git a/public/store/thumb/jellyfish-pro.png b/public/store/thumb/jellyfish-pro.png new file mode 100644 index 0000000..953e761 Binary files /dev/null and b/public/store/thumb/jellyfish-pro.png differ diff --git a/public/store/thumb/jellyfish.png b/public/store/thumb/jellyfish.png new file mode 100644 index 0000000..f599062 Binary files /dev/null and b/public/store/thumb/jellyfish.png differ diff --git a/public/store/thumb/lavender-2.png b/public/store/thumb/lavender-2.png new file mode 100644 index 0000000..8c6946e Binary files /dev/null and b/public/store/thumb/lavender-2.png differ diff --git a/public/store/thumb/lavender-pro.png b/public/store/thumb/lavender-pro.png new file mode 100644 index 0000000..04002ac Binary files /dev/null and b/public/store/thumb/lavender-pro.png differ diff --git a/public/store/thumb/milky-way.png b/public/store/thumb/milky-way.png new file mode 100644 index 0000000..67462cd Binary files /dev/null and b/public/store/thumb/milky-way.png differ diff --git a/public/store/thumb/northern-lights.png b/public/store/thumb/northern-lights.png new file mode 100644 index 0000000..8812483 Binary files /dev/null and b/public/store/thumb/northern-lights.png differ diff --git a/public/store/thumb/rainy-day.png b/public/store/thumb/rainy-day.png new file mode 100644 index 0000000..49e51ed Binary files /dev/null and b/public/store/thumb/rainy-day.png differ diff --git a/public/store/thumb/rose-pro.png b/public/store/thumb/rose-pro.png new file mode 100644 index 0000000..4cae44c Binary files /dev/null and b/public/store/thumb/rose-pro.png differ diff --git a/public/store/thumb/sage-pro.png b/public/store/thumb/sage-pro.png new file mode 100644 index 0000000..aaa2354 Binary files /dev/null and b/public/store/thumb/sage-pro.png differ diff --git a/public/store/thumb/sandy-beach.png b/public/store/thumb/sandy-beach.png new file mode 100644 index 0000000..01fd6ca Binary files /dev/null and b/public/store/thumb/sandy-beach.png differ diff --git a/public/store/thumb/shells.png b/public/store/thumb/shells.png new file mode 100644 index 0000000..9816edb Binary files /dev/null and b/public/store/thumb/shells.png differ diff --git a/public/store/thumb/snow.png b/public/store/thumb/snow.png new file mode 100644 index 0000000..8e0d256 Binary files /dev/null and b/public/store/thumb/snow.png differ diff --git a/public/store/thumb/stealth-2.png b/public/store/thumb/stealth-2.png new file mode 100644 index 0000000..0103576 Binary files /dev/null and b/public/store/thumb/stealth-2.png differ diff --git a/public/store/thumb/synthwave-pro.png b/public/store/thumb/synthwave-pro.png new file mode 100644 index 0000000..2eb5dac Binary files /dev/null and b/public/store/thumb/synthwave-pro.png differ diff --git a/public/store/thumb/tides.png b/public/store/thumb/tides.png new file mode 100644 index 0000000..fdbd219 Binary files /dev/null and b/public/store/thumb/tides.png differ diff --git a/src/clicker/clicker.js b/src/clicker/clicker.js index a57f413..7e9678d 100644 --- a/src/clicker/clicker.js +++ b/src/clicker/clicker.js @@ -3,6 +3,7 @@ import * as ui from "/src/modules/ui.js"; import storage from "/src/modules/storage.js"; import * as auth from "/src/modules/auth.js"; +import * as themes from "/src/themes/themes.js"; import { autocomplete } from "/src/symbols/symbols.js"; import { unixToTimeString } from "/src/modules/time.js"; @@ -568,6 +569,8 @@ try { }, ]); } + // Render Theme Store + themes.renderStore(); } // Show multiple choice card diff --git a/src/design.css b/src/design.css index ea7449c..00ab40f 100644 --- a/src/design.css +++ b/src/design.css @@ -29,7 +29,7 @@ } ::-webkit-scrollbar-track { - background-color: transparent; + background-color: var(--background-color); } ::-webkit-scrollbar-thumb { @@ -55,6 +55,13 @@ body { gap: 50px !important; } +body[data-theme] { + background-position: center !important; + background-size: cover !important; + background-attachment: fixed !important; + background-repeat: no-repeat !important; +} + body.enable-transitions { --easing: cubic-bezier(0.32, 0, 0.67, 0); } diff --git a/src/modules/auth.js b/src/modules/auth.js index 517f187..b761964 100644 --- a/src/modules/auth.js +++ b/src/modules/auth.js @@ -598,29 +598,26 @@ export async function bulkLoad(fields = [], usr = null, pwd = null, isAdmin = fa var updatedBulkLoad = {}; for (const table in fetchedBulkLoad) { if (table === 'asOf' || table === 'syncDeleted') continue; - if (storage.get((isAdmin || isTA) ? "lastAdminBulkLoad" : "lastBulkLoad") || null) { - var deletedData; - var existingData; - var mergedData; - if (!Array.isArray(fetchedBulkLoad[table] || [])) { - updatedBulkLoad[table] = fetchedBulkLoad[table]; - continue; - } - deletedData = fetchedBulkLoad.syncDeleted?.[table] || []; - const cacheObj = (await storage.idbGet((isAdmin || isTA) ? "adminCache" : "cache")) || storage.get((isAdmin || isTA) ? "adminCache" : "cache") || {}; - existingData = (Array.isArray(cacheObj[table]) ? cacheObj[table] : []).filter(item => { - return !deletedData.includes(String(item.id || item.seatCode || item.period || item.key || item.username || 0)); + const fetchedTableData = fetchedBulkLoad[table]; + if (!Array.isArray(fetchedTableData) || (fetchedTableData.length > 0 && (typeof fetchedTableData[0] !== 'object' || Array.isArray(fetchedTableData[0])))) { + updatedBulkLoad[table] = fetchedTableData; + continue; + } + const currentCacheKey = (isAdmin || isTA) ? "adminCache" : "cache"; + const lastBulkLoadKey = (isAdmin || isTA) ? "lastAdminBulkLoad" : "lastBulkLoad"; + if (storage.get(lastBulkLoadKey)) { + let deletedData = fetchedBulkLoad.syncDeleted?.[table] || []; + const cacheObj = (await storage.idbGet(currentCacheKey)) || storage.get(currentCacheKey) || {}; + const deletedSet = new Set(deletedData.map(item => String(item.id || item.seatCode || item.period || item.key || item.username || 0))); + const existingData = Array.isArray(cacheObj[table]) ? cacheObj[table].filter(item => !deletedSet.has(String(item.id || item.seatCode || item.period || item.key || item.username || 0))) : []; + const mergedMap = {}; + existingData.forEach(item => { + mergedMap[String(item.id || item.seatCode || item.period || item.key || item.username || 0)] = item; }); - mergedData = [...existingData]; (fetchedBulkLoad[table] || []).forEach(newItem => { - const index = mergedData.findIndex(item => String(item.id || item.seatCode || item.period || item.key || item.username || 0) === String(newItem.id || newItem.seatCode || newItem.period || newItem.key || newItem.username || 0)); - if (index !== -1) { - mergedData[index] = newItem; - } else { - mergedData.push(newItem); - } + mergedMap[String(newItem.id || newItem.seatCode || newItem.period || newItem.key || newItem.username || 0)] = newItem; }); - updatedBulkLoad[table] = mergedData; + updatedBulkLoad[table] = Object.values(mergedMap); } else { updatedBulkLoad[table] = fetchedBulkLoad[table]; } @@ -643,4 +640,43 @@ export async function clearBulkLoad() { await storage.idbDelete("adminCache").catch((e) => console.error('IDB delete failed', e)); storage.delete("lastAdminBulkLoad"); console.log('🟢 Bulk load cleared'); +} + +export async function buyTheme(theme = null, cost = 0) { + if (!theme || !cost || !storage.get("code")) return; + await fetch(domain + '/buy_theme', { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + "seatCode": storage.get("code"), + "password": storage.get("password"), + "theme": theme, + "cost": cost, + }) + }) + .then(async (r) => { + if (!r.ok) { + try { + var re = await r.json(); + if (re.error || re.message) { + ui.toast(re.error || re.message, 5000, "error", "bi bi-exclamation-triangle-fill"); + if ((re.error === "Access denied.") || (re.message === "Access denied.")) { + if (storage.get("password")) storage.delete("password"); + } + throw new Error(re.error || re.message); + } else { + throw new Error("API error"); + } + } catch (e) { + throw new Error(e.message || "API error"); + } + } + return await r.json(); + }) + .catch((e) => { + console.error(e); + if (!e.message || (e.message && !e.message.includes("."))) ui.view("api-fail"); + }); } \ No newline at end of file diff --git a/src/modules/ui.css b/src/modules/ui.css index a7cd958..0be20fb 100644 --- a/src/modules/ui.css +++ b/src/modules/ui.css @@ -10,6 +10,7 @@ dialog { border: none; border-radius: 1rem; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2); + background: var(--background-color); } dialog::backdrop { @@ -417,4 +418,200 @@ body:has(.topbar) { .alert button { width: -webkit-fill-available !important; } -} \ No newline at end of file +} + +[data-modal-page="store"] { + width: min(100%, 1500px); + height: min(90%, 800px); + gap: 10px; + opacity: 1; + transition: 0.25s background-color; +} + +[data-modal-page="store"]:has(.promo button:hover), +[data-modal-page="store"]:has(.themes-grid .theme-item button:hover) { + color: transparent; + background-color: transparent; + box-shadow: none; + overflow-y: hidden; + padding-right: 1.75rem; + transition: 0.25s background-color; +} + +[data-modal-page="store"]:has(.promo button:hover) .theme-item:not(:has(button:hover)), +[data-modal-page="store"]:has(.promo button:hover) [data-modal-buttons], +[data-modal-page="store"]:has(.themes-grid .theme-item button:hover) .promo, +[data-modal-page="store"]:has(.themes-grid .theme-item button:hover) + .theme-item:not(:has(button:hover)), +[data-modal-page="store"]:has(.themes-grid .theme-item button:hover) [data-modal-buttons] { + opacity: 0; + transition: 0.25s opacity; +} + +[data-modal-page="store"] > b { + margin-top: 5px; + margin-bottom: -5px; +} + +[data-modal-page="store"] .promo { + padding: 25px 35px; + background: linear-gradient(90deg, var(--background-color) 0%, var(--surface-color) 100%); + background-position: center 60% !important; + background-size: cover !important; + background-repeat: no-repeat !important; + border-radius: 15px; + border: 4px solid var(--accent-color); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +[data-modal-page="store"] .promo::before { + content: "Featured"; + color: var(--text-color); + font-size: 20px; + font-weight: bold; +} + +[data-modal-page="store"] .promo:has(button:hover) { + background-image: none !important; + border-color: transparent; +} + +[data-modal-page="store"] .promo .promo-inner { + color: var(--text-color); + background: var(--surface-color); + width: fit-content; + padding: 15px 25px; + font-size: 50px; + font-weight: 500; + line-height: 50px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + border: 3px solid var(--accent-color); +} + +[data-modal-page="store"] .promo .promo-inner i { + font-size: 0.75em; +} + +[data-modal-page="store"] .promo button { + color: var(--text-color); + border: 2px solid var(--accent-color); + transition: background-color 0.25s ease-in-out; +} + +[data-modal-page="store"] .promo button:hover { + color: var(--accent-text-color); + transition: background-color 0.25s ease-in-out; +} + +[data-modal-page="store"] .themes-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 10px; +} + +[data-modal-page="store"] .themes-grid .theme-item { + display: flex; + flex-direction: column; + align-items: flex-start; + color: var(--text-color); + padding: 20px 15px; + border-radius: 10px; + background: linear-gradient(90deg, var(--background-color) 0%, var(--surface-color) 100%); + background-color: var(--background-color); + background-position: center !important; + background-size: cover !important; + background-repeat: no-repeat !important; + border: 2px solid var(--accent-color); + transition: border-right-width 0.25s ease-in-out; +} + +[data-modal-page="store"] .themes-grid .theme-item:hover { + border-right-width: 15px; + transition: border-right-width 0.25s ease-in-out; +} + +[data-modal-page="store"] .themes-grid .theme-item i:not(.hd) { + position: absolute; + bottom: 10px; + right: 20px; + font-size: 50px; + opacity: 0.2; + transition: opacity 0.25s ease-in-out; +} + +[data-modal-page="store"] .themes-grid .theme-item:hover i:not(.hd) { + opacity: 1; + transition: opacity 0.25s ease-in-out; +} + +[data-modal-page="store"] .themes-grid .theme-item i.hd { + position: absolute; + top: 10px; + right: 20px; + font-size: 25px; +} + +[data-modal-page="store"] .themes-grid .theme-item h5, +[data-modal-page="store"] .themes-grid .theme-item p, +[data-modal-page="store"] .themes-grid .theme-item small { + background: none; +} + +[data-modal-page="store"] .themes-grid .theme-item button { + color: var(--text-color); + margin-top: auto; + transition: background-color 0.25s ease-in-out; +} + +[data-modal-page="store"] .themes-grid .theme-item small { + margin-bottom: 5px; +} + +[data-modal-page="store"] .themes-grid .theme-item:not(:has(small)) p { + margin-bottom: 5px; +} + +[data-modal-page="store"] .themes-grid .theme-item button:hover { + color: var(--accent-text-color); + transition: background-color 0.25s ease-in-out; +} + +[data-modal-page="store"] .promo[data-theme="default"], +[data-modal-page="store"] .themes-grid .theme-item[data-theme="default"] { + color-scheme: light; + --text-color: #2c2c2c; + --background-color: #fafafa; + --surface-color: #e7e7e7; + --accent-color: #424242; + --accent-text-color: #ffffff; + --error-color: #fa8796; +} + +[data-modal-page="store"] .cost-info { + margin-top: 10px; +} + +[data-modal-page="store"] .cost-info i { + margin-left: -20px; +} + +#controls-container .pill::before { + content: attr(checks); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + min-width: 100%; + background: var(--accent-color); + color: var(--accent-text-color); + padding: 7.5px 17.5px 2.5px 17.5px; + border-radius: 50vh 50vh 0 0; +} diff --git a/src/themes/butterfly/butterfly.css b/src/themes/butterfly/butterfly.css index a7be061..90c290a 100644 --- a/src/themes/butterfly/butterfly.css +++ b/src/themes/butterfly/butterfly.css @@ -16,6 +16,11 @@ --accent-color: #000000; --accent-text-color: #ffffff; --error-color: #cb2b25; + --backlight-color: #9d87da; + background-image: url("./background.png") !important; + background-position: center !important; + background-size: cover !important; + background-attachment: fixed !important; } #virtual-clicker-butterfly { @@ -24,8 +29,6 @@ body[data-theme="butterfly"] { background-image: url("./background.png"); - background-position: center; - background-size: cover; font-family: "typerwriter"; font-weight: normal; } diff --git a/src/themes/themes.css b/src/themes/themes.css index b164d67..22bd927 100644 --- a/src/themes/themes.css +++ b/src/themes/themes.css @@ -294,4 +294,239 @@ body[data-theme="dune-2"] #atreides-logo { body[data-theme="dune-2"] #header > .virtual-clicker-logo { display: none; +} + +/* Premium Themes */ + +[data-theme="jellyfish"] { + color-scheme: dark; + --text-color: #ffffff; + --background-color: #000067; + --surface-color: #213e8e; + --accent-color: #054dc6; + --accent-text-color: #7bace5; + --error-color: #eb324b; + background: url(/store/backdrop/jellyfish.png) !important; +} + +[data-theme="jellyfish-2"] { + color-scheme: dark; + --text-color: #ffffff; + --background-color: #000815; + --surface-color: #5f74e3; + --accent-color: #575ed3; + --accent-text-color: #ffffff; + --error-color: #eb324b; + background: url(/store/backdrop/jellyfish-2.png) !important; +} + +[data-theme="jellyfish-pro"] { + color-scheme: dark; + --text-color: #ffffff; + --background-color: #000815; + --surface-color: #5f74e3; + --accent-color: #575ed3; + --accent-text-color: #ffffff; + --error-color: #eb324b; + background: url(/store/backdrop/jellyfish-pro.png) !important; +} + +[data-theme="black-sand"] { + color-scheme: dark; + --text-color: #ffffff; + --background-color: #1f1f1f; + --surface-color: #2d2f30; + --accent-color: #444d58; + --accent-text-color: #ffffff; + --error-color: #eb324b; + background: url(/store/backdrop/black-sand.png) !important; +} + +[data-theme="blizzard-pro"] { + color-scheme: light; + --text-color: #2c2c2c; + --background-color: #cde7f5; + --surface-color: #abd0e6; + --accent-color: #71b2d3; + --accent-text-color: #2c2c2c; + --error-color: #eb324b; + background: url(/store/backdrop/blizzard-pro.png) !important; +} + +[data-theme="sage-pro"] { + color-scheme: light; + --text-color: #2c2c2c; + --background-color: #bacbb0; + --surface-color: #a0b395; + --accent-color: #5c8a5b; + --accent-text-color: #2c2c2c; + --error-color: #eb324b; + background: url(/store/backdrop/sage-pro.png) !important; +} + +[data-theme="sandy-beach"] { + color-scheme: light; + --text-color: #f0f0f0; + --background-color: #9c8460; + --surface-color: #574832; + --accent-color: #a58d6b; + --accent-text-color: #2c2c2c; + --error-color: #eb324b; + background: url(/store/backdrop/sandy-beach.png) !important; +} + +[data-theme="rose-pro"] { + color-scheme: dark; + --text-color: #ffffff; + --background-color: #f30837; + --surface-color: #d74d4d; + --accent-color: #ff6767; + --accent-text-color: #ffffff; + --error-color: #eb324b; + background: url(/store/backdrop/rose-pro.png) !important; +} + +[data-theme="lavender-pro"] { + color-scheme: light; + --text-color: #e8e8e8; + --background-color: #b996d6; + --surface-color: #a88ada; + --accent-color: #866ed5; + --accent-text-color: #d7d7d7; + --error-color: #eb324b; + background: url(/store/backdrop/lavender-pro.png) !important; +} + +[data-theme="stealth-2"] { + color-scheme: dark; + --text-color: #f2f2f2; + --background-color: #818181; + --surface-color: #5e5047; + --accent-color: #4c4746; + --accent-text-color: #f2f2f2; + --error-color: #eb324b; + background: url(/store/backdrop/stealth-2.png) !important; +} + +[data-theme="synthwave-pro"] { + color-scheme: dark; + --text-color: #2de2e6; + --background-color: #0d0221; + --surface-color: #920075; + --accent-color: #540d6e; + --accent-text-color: #2de2e6; + --error-color: #ea1b2d; + --backlight-color: #ff00ec; + background: url(/store/backdrop/synthwave-pro.png) !important; +} + +[data-theme="aeroplane"] { + color-scheme: dark; + --text-color: #f2f2f2; + --background-color: #0a0a0a; + --surface-color: #141414; + --accent-color: #f2f2f2; + --accent-text-color: #1c1c1c; + --error-color: #eb324b; + --backlight-color: #141414; + background: url(/store/backdrop/aeroplane.png) !important; +} + +[data-theme="lavender-2"] { + color-scheme: light; + --text-color: #2c2c2c; + --background-color: #d9c4ed; + --surface-color: #b68cc9; + --accent-color: #825895; + --accent-text-color: #e4e4e4; + --error-color: #eb324b; + background: url(/store/backdrop/lavender-2.png) !important; +} + +[data-theme="rainy-day"] { + color-scheme: dark; + --text-color: #dedede; + --background-color: #203c26; + --surface-color: #3a9cb7; + --accent-color: #2d8ba5; + --accent-text-color: #e4e4e4; + --error-color: #eb324b; + background: url(/store/backdrop/rainy-day.png) !important; +} + +[data-theme="snow"] { + color-scheme: light; + --text-color: #2c2c2c; + --background-color: #c1becc; + --surface-color: #87acc9; + --accent-color: #9cb7d2; + --accent-text-color: #474747; + --error-color: #eb324b; + background: url(/store/backdrop/snow.png) !important; +} + +[data-theme="shells"] { + color-scheme: light; + --text-color: #2c2c2c; + --background-color: #f1e8db; + --surface-color: #ddd3c6; + --accent-color: #b28766; + --accent-text-color: #2c2c2c; + --error-color: #eb324b; + background: url(/store/backdrop/shells.png) !important; +} + +[data-theme="tides"] { + color-scheme: dark; + --text-color: #fafafa; + --background-color: #112628; + --surface-color: #204445; + --accent-color: #2e9993; + --accent-text-color: #fafafa; + --error-color: #eb324b; + background: url(/store/backdrop/tides.png) !important; +} + +[data-theme="northern-lights"] { + color-scheme: dark; + --text-color: #dedede; + --background-color: #08161f; + --surface-color: #104943; + --accent-color: #1e644a; + --accent-text-color: #e4e4e4; + --error-color: #eb324b; + background: url(/store/backdrop/northern-lights.png) !important; +} + +[data-theme="galaxy"] { + color-scheme: dark; + --text-color: #dee3fc; + --background-color: #0d1627; + --surface-color: #526aa2; + --accent-color: #6269af; + --accent-text-color: #dee3fc; + --error-color: #eb324b; + background: url(/store/backdrop/galaxy.png) !important; +} + +[data-theme="galaxy-2"] { + color-scheme: dark; + --text-color: #e5e4cd; + --background-color: #0a141e; + --surface-color: #755853; + --accent-color: #bb9890; + --accent-text-color: #e5e4cd; + --error-color: #eb324b; + background: url(/store/backdrop/galaxy-2.png) !important; +} + +[data-theme="milky-way"] { + color-scheme: dark; + --text-color: #a89c90; + --background-color: #171719; + --surface-color: #5c606c; + --accent-color: #a5978e; + --accent-text-color: #171719; + --error-color: #eb324b; + background: url(/store/backdrop/milky-way.png) !important; } \ No newline at end of file diff --git a/src/themes/themes.js b/src/themes/themes.js index c1a1155..15b0934 100644 --- a/src/themes/themes.js +++ b/src/themes/themes.js @@ -30,7 +30,7 @@ export function resetTheme() { removeCustomTheme(); document.getElementById("theme-preview").removeAttribute("data-theme"); enableTransitions(); - storage.delete("theme"); + storage.set("theme", "default"); storage.delete("custom-theme"); } @@ -94,6 +94,7 @@ function updateEditorFields() { function updateEditorPreview(theme = customTheme) { const preview = document.getElementById("editor-preview"); + if (!preview) return; Object.entries(theme).forEach(([key, value]) => { const prefix = key == "color-scheme" ? "" : "--"; preview?.style.setProperty(prefix + key, value); @@ -185,6 +186,235 @@ export function initializeThemeEditor() { }); } +export async function renderStore() { + const store = document.querySelector(`[data-modal-page="store"]`); + if (!store) return; + store.innerHTML = ""; + await storage.idbReady; + var initialTheme = storage.get("theme") || "default"; + var checks = (await storage.idbGet("cache"))?.checksCount || 0; + document.querySelector('#controls-container .pill')?.setAttribute('checks', checks); + var ownedThemes = (await storage.idbGet("cache"))?.ownedThemes || []; + if (document.body.getAttribute('data-theme') && !ownedThemes.includes(document.body.getAttribute('data-theme')) && themes.find(theme => theme[0] === document.body.getAttribute('data-theme'))?.[3]) { + resetTheme(); + ui.toast("Applied theme is not owned.", 2000, "error", "bi bi-exclamation-triangle-fill"); + await auth.syncPush("theme"); + renderStore(); + return; + } + var featuredTheme = themes.filter(t => t[3] && (t[0] !== document.body.getAttribute('data-theme')))[Math.floor(Math.random() * themes.filter(t => t[3] && (t[0] !== document.body.getAttribute('data-theme'))).length)]; + const checksText = document.createElement("p"); + checksText.classList = 'checks-text'; + checksText.innerHTML = ` You've got ${checks} Check${checks == 1 ? '' : 's'} available to spend!`; + store.appendChild(checksText); + if (featuredTheme) { + const promo = document.createElement("div"); + promo.classList = 'promo'; + promo.setAttribute('data-theme', featuredTheme[0] || ''); + const promoInner = document.createElement("div"); + promoInner.classList = 'promo-inner'; + promoInner.innerHTML = `${featuredTheme[1] || featuredTheme[0]}`; + promo.appendChild(promoInner); + const promoButton = document.createElement("button"); + promoButton.textContent = ownedThemes.includes(featuredTheme[0]) ? "Owned" : "Preview Theme"; + promoButton.addEventListener("mouseover", () => { + initialTheme = document.body.getAttribute('data-theme') || ''; + document.body.setAttribute('data-theme', featuredTheme[0] || ''); + if (ownedThemes.includes(featuredTheme[0]) || !featuredTheme[3]) { + promoButton.textContent = "Apply Theme"; + } else if (featuredTheme[4] && featuredTheme[4].length && !featuredTheme[4].some(t => ownedThemes.includes(t))) { + promoButton.textContent = "Locked"; + } else if (checks >= featuredTheme[3]) { + promoButton.textContent = `Purchase for ${featuredTheme[3]} Check${featuredTheme[3] == 1 ? '' : 's'}`; + } else { + promoButton.textContent = "Insufficient Checks"; + } + }); + promoButton.addEventListener("mouseout", () => { + document.body.setAttribute('data-theme', initialTheme); + promoButton.textContent = ownedThemes.includes(featuredTheme[0]) ? "Owned" : "Preview Theme"; + }); + promoButton.addEventListener("click", async () => { + if (ownedThemes.includes(featuredTheme[0]) || !featuredTheme[3]) { + initialTheme = featuredTheme[0]; + storage.set("theme", featuredTheme[0]); + document.body.setAttribute('data-theme', featuredTheme[0]); + Array.from(store.querySelectorAll('.theme-item.selected')).forEach(el => el.classList.remove('selected')); + Array.from(store.querySelectorAll(`.theme-item[data-theme="${featuredTheme[0]}"]`)).forEach(el => el.classList.add('selected')); + Array.from(store.querySelectorAll('.theme-item button')).forEach(btn => { + btn.textContent = btn.parentElement.classList.contains('selected') ? "Applied" : (ownedThemes.includes(btn.parentElement.getAttribute('data-theme')) ? "Owned" : "Preview"); + }); + await auth.syncPush("theme"); + ui.toast(`Applied ${featuredTheme[1] || featuredTheme[0]} theme.`, 2000, "success", "bi bi-check2-circle"); + } else { + if (featuredTheme[4] && featuredTheme[4].length && !featuredTheme[4].some(t => ownedThemes.includes(t))) { + ui.toast(`Cannot purchase ${featuredTheme[1] || featuredTheme[0]} theme. Missing required themes: ${featuredTheme[4].map(t => themes.find(th => th[0] == t)[1] || t).join(', ')}.`, 4000, "error", "bi bi-exclamation-triangle-fill"); + return; + } + if (checks >= featuredTheme[3]) { + ui.modal({ + title: `Purchase ${featuredTheme[1] || featuredTheme[0]} Theme`, + body: `

Are you sure you want to purchase the ${featuredTheme[1] || featuredTheme[0]} theme for ${featuredTheme[3]} Check${featuredTheme[3] == 1 ? '' : 's'}? You have ${checks} Check${checks == 1 ? '' : 's'} and will have ${checks - featuredTheme[3]} Check${(checks - featuredTheme[3]) == 1 ? '' : 's'} remaining.

`, + buttons: [ + { + text: 'Cancel', + icon: 'bi-x-lg', + class: 'cancel-button', + onclick: () => { + ui.view("store"); + }, + close: true, + }, + { + text: 'Purchase', + icon: 'bi-bag-check-fill', + class: 'submit-button', + onclick: async () => { + await auth.buyTheme(featuredTheme[0], featuredTheme[3]); + ownedThemes.push(featuredTheme[0]); + const cache = await storage.idbGet("cache") || {}; + cache.ownedThemes = ownedThemes; + cache.checksCount = (cache.checksCount || 0) - featuredTheme[3]; + await storage.idbSet("cache", cache); + Array.from(store.querySelectorAll(`.theme-item[data-theme="${featuredTheme[0]}"]`)).forEach(el => el.classList.add('selected')); + Array.from(store.querySelectorAll('.theme-item button')).forEach(btn => { + btn.textContent = btn.parentElement.classList.contains('selected') ? "Applied" : (ownedThemes.includes(btn.parentElement.getAttribute('data-theme')) ? "Owned" : "Preview"); + }); + checksText.innerHTML = ` You've got ${cache.checksCount} Check${(cache.checksCount == 1) ? '' : 's'} available to spend!`; + storage.set("theme", featuredTheme[0]); + document.body.setAttribute('data-theme', featuredTheme[0]); + await auth.syncPush("theme"); + ui.toast(`Purchased and applied ${featuredTheme[1] || featuredTheme[0]} theme.`, 2000, "success", "bi bi-bag-check-fill"); + }, + close: true, + }, + ], + }); + } else { + ui.toast(`Insufficient Checks to purchase ${featuredTheme[1] || featuredTheme[0]} theme.`, 2000, "error", "bi bi-exclamation-triangle-fill"); + } + } + }); + promo.appendChild(promoButton); + store.appendChild(promo); + } + const freeThemesGrid = document.createElement("div"); + freeThemesGrid.classList = 'themes-grid'; + const premiumThemesGrid = document.createElement("div"); + premiumThemesGrid.classList = 'themes-grid'; + themes.forEach(theme => { + const value = theme[0]; + const name = theme[1] || theme[0]; + const themeItem = document.createElement("div"); + themeItem.classList = 'theme-item'; + themeItem.setAttribute("data-theme", value); + if (theme[3]) { + themeItem.setAttribute('tooltip', `${checks}/${theme[3]} Check${theme[3] == 1 ? '' : 's'}${theme[4].filter(t => !ownedThemes.includes(t[0])) && theme[4].filter(t => !ownedThemes.includes(t[0])).length ? `. You need: ${theme[4].filter(t => !ownedThemes.includes(t[0])).map(t => themes.find(th => th[0] == t)[1] || t).join(', ')}` : ''}`); + themeItem.setAttribute('style', `background: url('/store/thumb/${theme[0]}.png') center / cover no-repeat !important;`); + } + themeItem.innerHTML = `${theme[2] ? `` : ''}${theme[5] ? `` : ''}
${name}

${theme[3] ? `${theme[3]} Check${theme[3] == 1 ? '' : 's'}` : 'Free'}

${theme[4] && theme[4].length ? `Requires: ${theme[4].map(t => themes.find(th => th[0] == t)[1] || t).join(', ')}` : ''}`; + if (value === initialTheme) themeItem.classList.add('selected'); + const themeButton = document.createElement("button"); + themeButton.textContent = (value === initialTheme) ? "Applied" : (ownedThemes.includes(theme[0]) ? "Owned" : "Preview"); + themeButton.addEventListener("mouseover", () => { + initialTheme = document.body.getAttribute('data-theme') || ''; + document.body.setAttribute('data-theme', theme[0] || ''); + if (themeItem.classList.contains('selected')) { + themeButton.textContent = "Applied"; + } else if (ownedThemes.includes(theme[0]) || !theme[3]) { + themeButton.textContent = "Apply Now"; + } else if (theme[4] && theme[4].length && !theme[4].some(t => ownedThemes.includes(t))) { + themeButton.textContent = "Locked"; + } else if (checks >= theme[3]) { + themeButton.textContent = `Purchase for ${theme[3]} Check${theme[3] == 1 ? '' : 's'}`; + } else { + themeButton.textContent = "Insufficient Checks"; + } + }); + themeButton.addEventListener("mouseout", () => { + document.body.setAttribute('data-theme', initialTheme); + themeButton.textContent = themeItem.classList.contains('selected') ? "Applied" : (ownedThemes.includes(theme[0]) ? "Owned" : "Preview"); + }); + themeButton.addEventListener("click", async () => { + if (themeItem.classList.contains('selected')) return; + if (ownedThemes.includes(theme[0]) || !theme[3]) { + initialTheme = theme[0]; + storage.set("theme", theme[0]); + document.body.setAttribute('data-theme', theme[0]); + Array.from(store.querySelectorAll('.theme-item.selected')).forEach(el => el.classList.remove('selected')); + themeItem.classList.add('selected'); + Array.from(store.querySelectorAll('.theme-item button')).forEach(btn => { + btn.textContent = btn.parentElement.classList.contains('selected') ? "Applied" : (ownedThemes.includes(btn.parentElement.getAttribute('data-theme')) ? "Owned" : "Preview"); + }); + await auth.syncPush("theme"); + ui.toast(`Applied ${name} theme.`, 2000, "success", "bi bi-check2-circle"); + } else { + if (theme[4] && theme[4].length && !theme[4].some(t => ownedThemes.includes(t))) { + ui.toast(`Cannot purchase ${name} theme. Missing required themes: ${theme[4].map(t => themes.find(th => th[0] == t)[1] || t).join(', ')}.`, 4000, "error", "bi bi-exclamation-triangle-fill"); + return; + } + if (checks >= theme[3]) { + ui.modal({ + title: `Purchase ${name} Theme`, + body: `

Are you sure you want to purchase the ${name} theme for ${theme[3]} Check${theme[3] == 1 ? '' : 's'}? You have ${checks} Check${checks == 1 ? '' : 's'} and will have ${checks - theme[3]} Check${(checks - theme[3]) == 1 ? '' : 's'} remaining.

`, + buttons: [ + { + text: 'Cancel', + icon: 'bi-x-lg', + class: 'cancel-button', + onclick: () => { + ui.view("store"); + }, + close: true, + }, + { + text: 'Purchase', + icon: 'bi-bag-check-fill', + class: 'submit-button', + onclick: async () => { + await auth.buyTheme(theme[0], theme[3]); + ownedThemes.push(theme[0]); + const cache = await storage.idbGet("cache") || {}; + cache.ownedThemes = ownedThemes; + cache.checksCount = (cache.checksCount || 0) - theme[3]; + await storage.idbSet("cache", cache); + themeItem.classList.add('selected'); + Array.from(store.querySelectorAll('.theme-item button')).forEach(btn => { + btn.textContent = btn.parentElement.classList.contains('selected') ? "Applied" : (ownedThemes.includes(btn.parentElement.getAttribute('data-theme')) ? "Owned" : "Preview"); + }); + checksText.innerHTML = ` You've got ${cache.checksCount} Check${(cache.checksCount == 1) ? '' : 's'} available to spend!`; + storage.set("theme", theme[0]); + document.body.setAttribute('data-theme', theme[0]); + await auth.syncPush("theme"); + ui.toast(`Purchased and applied ${name} theme.`, 2000, "success", "bi bi-bag-check-fill"); + }, + close: true, + }, + ], + }); + } else { + ui.toast(`Insufficient Checks to purchase ${name} theme.`, 2000, "error", "bi bi-exclamation-triangle-fill"); + } + } + }); + themeItem.appendChild(themeButton); + if (theme[3]) premiumThemesGrid.append(themeItem); + if (!theme[3]) freeThemesGrid.append(themeItem); + }); + const freeThemesGridText = document.createElement("b"); + freeThemesGridText.innerText = 'Free Themes'; + store.appendChild(freeThemesGridText); + store.appendChild(freeThemesGrid); + const premiumThemesGridText = document.createElement("b"); + premiumThemesGridText.innerText = 'Premium Themes'; + store.appendChild(premiumThemesGridText); + store.appendChild(premiumThemesGrid); + const costInfo = document.createElement("ul"); + costInfo.classList = 'cost-info'; + costInfo.innerHTML = ` Information
  • Checks can be obtained by responding to a question correctly, at any time.
  • Checks conversion rate is 1 Check to 1 correct answer.
  • Checks may only be obtained on the Virtual Checker platform.
  • If your response is marked correct late, you will get your Checks at that time.
  • If your response is falsely marked as correct and later marked incorrect, your Checks balance will be deducted from.
  • The minimum Checks balance is 0.
  • Themes marked as "Free" can be applied without spending any Checks.
  • Premium themes require you to spend your available Checks to unlock and use them.
  • Themes that have requirements need you to own the specified themes before you can purchase them.
  • HD themes may require more resources to run smoothly, and cost more Checks.
  • All theme images are licensed Free To Use.
  • The cost for themes are based on average student correct answer data.
    • `; + store.appendChild(costInfo); +} + try { themes.forEach((theme) => { const value = theme[0]; @@ -331,6 +561,10 @@ try { seasonalThemeButton.setAttribute("tooltip", `${seasonalName} Theme (Limited Time)`); document.getElementById("controls-container")?.appendChild(seasonalThemeButton); } + + document.querySelector('[data-modal-view="store"]')?.addEventListener("click", () => { + ui.view(); + }); } catch (error) { if (storage.get("developer")) { alert(`Error @ themes.js: ${error.message}`); diff --git a/src/themes/themes.json b/src/themes/themes.json index edf79be..1fb3e18 100644 --- a/src/themes/themes.json +++ b/src/themes/themes.json @@ -1,27 +1,49 @@ [ - ["classic", "Classic"], - ["abyss", "Abyss"], - ["graphite", "Graphite"], - ["blizzard", "Blizzard"], - ["sage", "Sage"], - ["dune", "Dune"], - ["dune-2", "Dune 2"], - ["rose", "Rose"], - ["lavender", "Lavender"], - ["cream", "Cream"], - ["ravenclaw", "Ravenclaw"], - ["hufflepuff", "Hufflepuff"], - ["slytherin", "Slytherin"], - ["gryffindor", "Gryffindor"], - ["catppuccin-latte", "Catppuccin Latte"], - ["catppuccin-frappe", "Catppuccin Frappé"], - ["catppuccin-macchiato", "Catppuccin Macchiato"], - ["catppuccin-mocha", "Catppuccin Mocha"], - ["butterfly", "GUTS"], - ["stealth", "Stealth"], - ["synthwave", "Synthwave"], - ["synthwave-2077", "Synthwave 2077"], - ["synthwave-2077-solarized", "Synthwave 2077 Solarized"], - ["casino", "Casino"], - ["kfc", "KFC"] + ["default", "Default", "", 0, [], false], + ["classic", "Classic", "", 0, [], false], + ["abyss", "Abyss", "", 0, [], false], + ["graphite", "Graphite", "", 0, [], false], + ["blizzard", "Blizzard", "", 0, [], false], + ["sage", "Sage", "", 0, [], false], + ["dune", "Dune", "", 0, [], false], + ["dune-2", "Dune 2", "", 0, [], false], + ["rose", "Rose", "", 0, [], false], + ["lavender", "Lavender", "", 0, [], false], + ["cream", "Cream", "", 0, [], false], + ["ravenclaw", "Ravenclaw", "", 0, [], false], + ["hufflepuff", "Hufflepuff", "", 0, [], false], + ["slytherin", "Slytherin", "", 0, [], false], + ["gryffindor", "Gryffindor", "", 0, [], false], + ["catppuccin-latte", "Catppuccin Latte", "", 0, [], false], + ["catppuccin-frappe", "Catppuccin Frappé", "", 0, [], false], + ["catppuccin-macchiato", "Catppuccin Macchiato", "", 0, [], false], + ["catppuccin-mocha", "Catppuccin Mocha", "", 0, [], false], + ["stealth", "Stealth", "", 0, [], false], + ["synthwave", "Synthwave", "", 0, [], false], + ["synthwave-2077", "Synthwave 2077", "", 0, [], false], + ["synthwave-2077-solarized", "Synthwave 2077 Solarized", "", 0, [], false], + ["casino", "Casino", "", 0, [], false], + ["kfc", "KFC", "", 0, [], false], + ["butterfly", "GUTS", "stars", 150, [], false], + ["sage-pro", "Sage Pro", "leaf", 60, [], false], + ["rose-pro", "Rose Pro", "leaf", 60, [], false], + ["synthwave-pro", "Synthwave Pro", "robot", 60, [], false], + ["lavender-2", "Lavender 2", "leaf", 60, [], false], + ["lavender-pro", "Lavender Pro", "leaf", 60, ["lavender-2"], false], + ["stealth-2", "Stealth 2", "airplane-engines", 60, [], false], + ["aeroplane", "Aeroplane", "airplane-engines", 60, ["stealth-2"], false], + ["jellyfish", "Jellyfish", "water", 60, [], false], + ["jellyfish-2", "Jellyfish 2", "water", 70, ["jellyfish"], true], + ["jellyfish-pro", "Jellyfish Pro", "water", 80, ["jellyfish", "jellyfish-2"], true], + ["blizzard-pro", "Blizzard Pro", "snow", 70, [], true], + ["snow", "Snow", "snow", 80, ["blizzard-pro"], true], + ["sandy-beach", "Sandy Beach", "image-alt", 70, [], true], + ["black-sand", "Black Sand", "image-alt", 80, ["sandy-beach"], true], + ["rainy-day", "Rainy Day", "cloud-rain", 60, [], false], + ["shells", "Shells", "image-alt", 70, ["sandy-beach"], true], + ["tides", "Tides", "tsunami", 70, ["sandy-beach"], true], + ["galaxy", "Galaxy", "moon-stars", 70, [], true], + ["galaxy-2", "Galaxy 2", "moon-stars", 70, ["galaxy"], true], + ["northern-lights", "Northern Lights", "moon-stars", 80, ["galaxy", "galaxy-2"], true], + ["milky-way", "Milky Way", "moon-stars", 80, ["galaxy", "galaxy-2"], true] ]