From c9f7d3b0f8222f9edc5aeb8c1a0b629267faf048 Mon Sep 17 00:00:00 2001 From: Gudine Date: Wed, 15 Nov 2023 16:11:39 -0300 Subject: [PATCH 01/14] feat: adds changelog attribute to dataset entries, and dynamically displays changelogs on page --- index.html | 13 ++++++++---- src/css/styles.css | 17 +++++++++++++++ src/js/data.js | 3 ++- src/js/data/2019-10-04.js | 2 ++ src/js/data/2019-10-05.js | 2 ++ src/js/data/2019-11-26.js | 2 ++ src/js/data/2021-03-29.js | 2 ++ src/js/data/2021-05-09.js | 2 ++ src/js/main.js | 44 +++++++++++++++++++++++++++++++++++++++ 9 files changed, 82 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index b46780799..7db7ddbdc 100644 --- a/index.html +++ b/index.html @@ -88,10 +88,15 @@

-

May 9th, 2021 - Added Unconnected Marketeers (full).

-

March 29th, 2021 - Added Unconnected Marketeers (trial).

-

October 5th, 2019 - Added filter for nameless characters.

-

October 4th, 2019 - Added Wily Beast and Weakest Creature (full).

+ + + + + + + + +
Changelog
diff --git a/src/css/styles.css b/src/css/styles.css index 00999696c..49fc7d01e 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -283,4 +283,21 @@ a:hover { a:visited { color: #6600FF; +} + +.changelog { + margin: auto; +} + +.changelog td, .changelog th { + padding: 8px 5px; + vertical-align: middle; +} + +.changelog td[rowspan], .changelog td[rowspan] ~ td { + border-top: 1px solid black; +} + +.changelog td[rowspan] { + text-align: right; } \ No newline at end of file diff --git a/src/js/data.js b/src/js/data.js index a7e2aa5d2..19394be2c 100644 --- a/src/js/data.js +++ b/src/js/data.js @@ -1,12 +1,13 @@ /** * @typedef {{name: string, key: string, tooltip?: string, checked?: boolean, sub?: {name: string, tooltip?: string, checked?: string}[]}[]} Options * @typedef {{name: string, img: string, opts: Object} + * @type {Object.} */ const dataSet = {}; diff --git a/src/js/data/2019-10-04.js b/src/js/data/2019-10-04.js index f33101c3d..d22d79725 100644 --- a/src/js/data/2019-10-04.js +++ b/src/js/data/2019-10-04.js @@ -1,6 +1,8 @@ dataSetVersion = "2019-10-04"; // Change this when creating a new data set version. YYYY-MM-DD format. dataSet[dataSetVersion] = {}; +dataSet[dataSetVersion].changelog = ["Added Wily Beast and Weakest Creature (full)"]; + dataSet[dataSetVersion].options = [ { name: "Filter by Series Entry", diff --git a/src/js/data/2019-10-05.js b/src/js/data/2019-10-05.js index 76b75e31b..5c42d3e48 100644 --- a/src/js/data/2019-10-05.js +++ b/src/js/data/2019-10-05.js @@ -1,6 +1,8 @@ dataSetVersion = "2019-10-05"; // Change this when creating a new data set version. YYYY-MM-DD format. dataSet[dataSetVersion] = {}; +dataSet[dataSetVersion].changelog = ["Added filter for nameless characters"]; + dataSet[dataSetVersion].options = [ { name: "Filter by Series Entry", diff --git a/src/js/data/2019-11-26.js b/src/js/data/2019-11-26.js index 95b90dbc2..d7a9dc67d 100644 --- a/src/js/data/2019-11-26.js +++ b/src/js/data/2019-11-26.js @@ -1,6 +1,8 @@ dataSetVersion = "2019-11-26"; // Change this when creating a new data set version. YYYY-MM-DD format. dataSet[dataSetVersion] = {}; +dataSet[dataSetVersion].changelog = ["Added Okunoda Miyoi"]; + dataSet[dataSetVersion].options = [ { name: "Filter by Series Entry", diff --git a/src/js/data/2021-03-29.js b/src/js/data/2021-03-29.js index c39bc2b46..0492a5d77 100644 --- a/src/js/data/2021-03-29.js +++ b/src/js/data/2021-03-29.js @@ -1,6 +1,8 @@ dataSetVersion = "2021-03-29"; // Change this when creating a new data set version. YYYY-MM-DD format. dataSet[dataSetVersion] = {}; +dataSet[dataSetVersion].changelog = ["Added Unconnected Marketeers (trial)"]; + dataSet[dataSetVersion].options = [ { name: "Filter by Series Entry", diff --git a/src/js/data/2021-05-09.js b/src/js/data/2021-05-09.js index d9c610956..26b9c8e43 100644 --- a/src/js/data/2021-05-09.js +++ b/src/js/data/2021-05-09.js @@ -1,6 +1,8 @@ dataSetVersion = "2021-05-09"; // Change this when creating a new data set version. YYYY-MM-DD format. dataSet[dataSetVersion] = {}; +dataSet[dataSetVersion].changelog = ["Added Unconnected Marketeers (full)"]; + dataSet[dataSetVersion].options = [ { name: "Filter by Series Entry", diff --git a/src/js/main.js b/src/js/main.js index 231cc10c3..301ce0b3f 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -53,8 +53,14 @@ let totalBattles = 0; let sorterURL = window.location.host + window.location.pathname; let storedSaveType = localStorage.getItem(`${sorterURL}_saveType`); +const dateMap = Object.keys(dataSet) + .map((date) => ({ str: date, val: new Date(date) })) + .sort((date1, date2) => date2.val - date1.val); + /** Initialize script. */ function init() { + /** Adds changelog. */ + addChangelog(); /** Define button behavior. */ document.querySelector('.starting.start.button').addEventListener('click', start); @@ -134,6 +140,44 @@ function init() { if (window.location.search.slice(1) !== '') decodeQuery(); } +/** Extracts changelogs from dataset and adds them to the page */ +function addChangelog() { + const tableBody = document.querySelector(".changelog tbody"); + + const changelogs = dateMap + .map(({ str, val }) => [val, dataSet[str].changelog]) + .filter(([_date, changelog]) => changelog) + .slice(0, 5); + + for (let [date, changelog] of changelogs) { + const tr1 = document.createElement("tr"); + + const dateTd = document.createElement("td"); + dateTd.rowSpan = changelog.length; + dateTd.textContent = date.toLocaleString( + "en-US", + { year: "numeric", month: "long", day: "numeric" } + ); + tr1.appendChild(dateTd); + + const log1Td = document.createElement("td"); + log1Td.textContent = changelog[0]; + tr1.appendChild(log1Td); + + tableBody.appendChild(tr1); + + changelog.slice(1).forEach((log) => { + const trN = document.createElement("tr"); + + const logNTd = document.createElement("td"); + logNTd.textContent = log; + trN.appendChild(logNTd); + + tableBody.appendChild(trN); + }); + } +} + /** Begin sorting. */ function start() { /** Copy data into sorting array to filter. */ From 771a6d2ff6bf7b9384e44444656811ad22a9dbe9 Mon Sep 17 00:00:00 2001 From: Gudine Date: Wed, 15 Nov 2023 16:12:29 -0300 Subject: [PATCH 02/14] refactor: adjusts some functions to use pre-calculated dataset order --- src/js/main.js | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index 301ce0b3f..68269d707 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -676,15 +676,10 @@ function setLatestDataset() { timeTaken = 0; choices = ''; - const latestDateIndex = Object.keys(dataSet) - .map(date => new Date(date)) - .reduce((latestDateIndex, currentDate, currentIndex, array) => { - return currentDate > array[latestDateIndex] ? currentIndex : latestDateIndex; - }, 0); - currentVersion = Object.keys(dataSet)[latestDateIndex]; + currentVersion = dateMap[0].str; - characterData = dataSet[currentVersion].characterData; options = dataSet[currentVersion].options; + characterData = dataSet[currentVersion].characterData; populateOptions(); } @@ -755,16 +750,10 @@ function decodeQuery(queryString = window.location.search.slice(1)) { * If timestamp is before or after any of the datasets, get the closest one. * If timestamp is between any of the datasets, get the one in the past, but if timeError is set, get the one in the future. */ - const seedDate = { str: timestamp, val: new Date(timestamp) }; - const dateMap = Object.keys(dataSet) - .map(date => { - return { str: date, val: new Date(date) }; - }) - const beforeDateIndex = dateMap - .reduce((prevIndex, currDate, currIndex) => { - return currDate.val < seedDate.val ? currIndex : prevIndex; - }, -1); - const afterDateIndex = dateMap.findIndex(date => date.val > seedDate.val); + const seedDate = new Date(timestamp); + const beforeDateIndex = dateMap.findIndex((date) => date.val < seedDate); + const afterDateIndex = dateMap.slice().reverse() + .findIndex((date) => date.val > seedDate); if (beforeDateIndex === -1) { currentVersion = dateMap[afterDateIndex].str; From 5e9c3d86e683921da22cf92d6bc05e163c081929 Mon Sep 17 00:00:00 2001 From: Gudine Date: Wed, 15 Nov 2023 22:34:05 -0300 Subject: [PATCH 03/14] feat: Adds dark mode toggle --- index.html | 11 +++++ src/assets/dark-mode.svg | 12 +++++ src/assets/light-mode.svg | 12 +++++ src/css/styles.css | 92 ++++++++++++++++++++++++++++++++------- src/js/main.js | 20 +++++++++ 5 files changed, 131 insertions(+), 16 deletions(-) create mode 100644 src/assets/dark-mode.svg create mode 100644 src/assets/light-mode.svg diff --git a/index.html b/index.html index 7db7ddbdc..500430d11 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -31,6 +32,16 @@
+
+ +
diff --git a/src/assets/dark-mode.svg b/src/assets/dark-mode.svg new file mode 100644 index 000000000..3d9e1731e --- /dev/null +++ b/src/assets/dark-mode.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/light-mode.svg b/src/assets/light-mode.svg new file mode 100644 index 000000000..44259f6a3 --- /dev/null +++ b/src/assets/light-mode.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/css/styles.css b/src/css/styles.css index 49fc7d01e..7b92781b4 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,6 +1,30 @@ body { + --main-color: black; + --bg-color: white; + --border-color: black; + --progress-bar-color: lightgreen; + --loading-pulse-color: #333; + --link-color: #990000; + --link-hover-color: #FF6600; + --link-visited-color: #6600FF; + + --image-bg-color: transparent; + font-family: Arial, Helvetica, sans-serif; font-size: 16px; + background-color: var(--bg-color); + color: var(--main-color); +} + +body.darkmode { + --main-color: #ddd; + --bg-color: #111; + --border-color: #ddd; + --progress-bar-color: forestgreen; + --loading-pulse-color: #ccc; + --link-color: #DD44CC; + --link-hover-color: #FF6600; + --link-visited-color: #66CCFF; } .container { @@ -19,7 +43,7 @@ body { .progressbar { position: relative; width: 492px; - border: 1px solid black; + border: 1px solid var(--border-color); padding: 3px; margin: 2px 0px; } @@ -34,7 +58,7 @@ body { .progressfill { height: 20px; - background-color: lightgreen; + background-color: var(--progress-bar-color); width: 0%; } @@ -47,7 +71,7 @@ body { } .button { - border: 1px solid black; + border: 1px solid var(--border-color); text-align: center; padding: 10%; grid-column: 2 / 3; @@ -77,7 +101,7 @@ body { width: 25px; height: 25px; margin: 50px auto; - background-color: #333; + background-color: var(--loading-pulse-color); border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; @@ -116,6 +140,7 @@ body { margin: auto; grid-row: 1 / 7; cursor: pointer; + background-color: var(--image-bg-color); } .sorter > .text { @@ -134,12 +159,12 @@ body { .sorter > .left { grid-column: 1 / 2; - border: 1px solid #000000; + border: 1px solid var(--border-color); } .sorter > .right { grid-column: 3 / 4; - border: 1px solid #000000; + border: 1px solid var(--border-color); } .options { @@ -160,7 +185,7 @@ label { } label:hover { - color: #990000; + color: var(--link-color); } .options > .large.option, .options > hr { @@ -213,7 +238,7 @@ label:hover { display: grid; width: 211px; grid-template-columns: repeat(2, 1fr); - border: 1px solid #000; + border: 1px solid var(--border-color); margin-right: 5px; } @@ -223,16 +248,17 @@ label:hover { .result.image img { height: 160px; + background-color: var(--image-bg-color); } .result.spacer { height: 1px; - background-color: #000; + background-color: var(--main-color); } .result.head { - background-color: #000; - color: #FFF; + background-color: var(--main-color); + color: var(--bg-color); } .result > .left { @@ -257,7 +283,7 @@ label:hover { width: 160px; padding: 1px 0em 1px 0em; grid-column: 2 / 3; - border-left: 1px solid #000; + border-left: 1px solid var(--border-color); text-align: center; } @@ -271,18 +297,18 @@ label:hover { } a { - color: #990000; + color: var(--link-color); font-weight: bold; text-decoration: none; cursor: pointer; } a:hover { - color: #FF6600; + color: var(--link-hover-color); } a:visited { - color: #6600FF; + color: var(--link-visited-color); } .changelog { @@ -295,9 +321,43 @@ a:visited { } .changelog td[rowspan], .changelog td[rowspan] ~ td { - border-top: 1px solid black; + border-top: 1px solid var(--border-color); } .changelog td[rowspan] { text-align: right; +} + +.colorchange { + position: absolute; + top: 1em; + right: 1em; + width: 2em; + height: 2em; +} + +.colorchange .toggle { + width: 100%; + height: 100%; + + padding: 0; + border: 0; + background-color: transparent; + + cursor: pointer; + color: inherit; +} + +.colorchange .toggle:hover { + color: var(--link-color); +} + +.colorchange .toggle svg { + width: 100%; + height: 100%; +} + +body:not(.darkmode) .colorchange .toggle svg.light, +.darkmode .colorchange .toggle svg.dark { + display: none; } \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 68269d707..f16442a44 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -62,7 +62,12 @@ function init() { /** Adds changelog. */ addChangelog(); + /** Load saved dark mode setting. */ + loadDarkMode(); + /** Define button behavior. */ + document.querySelector('.colorchange .toggle').addEventListener('click', () => toggleDarkMode()); + document.querySelector('.starting.start.button').addEventListener('click', start); document.querySelector('.starting.load.button').addEventListener('click', loadProgress); @@ -178,6 +183,21 @@ function addChangelog() { } } +/** Load saved dark mode setting from local storage */ +function loadDarkMode() { + const darkMode = localStorage.getItem(`${sorterURL}_darkMode`); + toggleDarkMode(darkMode === "true"); +} + +/** Toggles between dark and light mode + * + * @param {Boolean | undefined} force + */ +function toggleDarkMode(force) { + document.body.classList.toggle("darkmode", force); + localStorage.setItem(`${sorterURL}_darkMode`, document.body.classList.contains("darkmode")); +} + /** Begin sorting. */ function start() { /** Copy data into sorting array to filter. */ From ea0199a8c7b42997961d953a5b87a1a3d2316ca7 Mon Sep 17 00:00:00 2001 From: Gudine Date: Thu, 16 Nov 2023 19:19:32 -0300 Subject: [PATCH 04/14] refactor: changes code structure to use a class to hide elements, instead of inline styling --- index.html | 26 +++++++++++++------------- src/css/styles.css | 12 ++++-------- src/js/main.js | 32 ++++++++++++++++---------------- 3 files changed, 33 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 500430d11..21f76f9b9 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@
-
+