From fb6aeefeca118b7d838e60bd597ddcdd7ecc178a Mon Sep 17 00:00:00 2001 From: Damon Greenhalgh Date: Sat, 16 Apr 2022 11:37:00 +1200 Subject: [PATCH] Changes to settings system --- changelog.md | 30 ++++++++++++++++++------------ src/App.jsx | 30 +++++++++++------------------- src/components/Navbar.jsx | 18 +++++++++++++++--- src/data/achievements.json | 2 +- src/data/settings.json | 3 ++- src/pages/Settings.jsx | 36 +++++------------------------------- 6 files changed, 52 insertions(+), 67 deletions(-) diff --git a/changelog.md b/changelog.md index dd0fb30..d3444ac 100644 --- a/changelog.md +++ b/changelog.md @@ -4,27 +4,33 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## Unreleased -## [1.1.1] - 2022-03-28 +## [1.2.0] - 2022-03-28 + +Support for **Final Fantasy XIV** patch 6.1 *Newfound Adventure*. ### Added -- Added character banner at the beggining of the page. -- Added reference feature. This feature allows the user to save a reference character. Spoiler content will be hidden based on the reference character progress. -- Added job icon to portrait image. -- Added stats to tooltip component. -- Added completion metric to mounts, minions, job and achievements(uses points). -- Added decorative diamond to server text. -- Added splash background art. +- Added '**Reference Character**' feature. This feature allows users to reference a character. Some systems change their behaviour based on the progress the reference character has made within the game. + - Content that the reference character has not completed will be blurred. + - Current splash art will be associated with reference character expansion progress. +- Added **Achievements** feature. This feature allows users to view a character's achievements within the game. +- Added *completion* metric to mounts, minions, job and achievements(points). +- Added **Splash Art** background. - Added custom checkbox component. -- Added profile information. -- Added achievements section. -- Added OCE servers to server list. +- Reintroduced character banner at the top of the character page. +- Reintroduced **Profile** feature. +- Added **OCE** servers to server list. ### Changed - Banner component refactor. -- Changed job items to show current / max experience points. +- Job item refactor. +- Changed tooltips to now display item level, main stats and bonuses. +- Changed profile to now include currently active job, experience and level. +- Changed job items to show current/max experience points. - Changed profile page layout. +- Featured component now displays time relevant content (duration/release date) +- Changed server text to now display a diamond next to it. ### Fixed diff --git a/src/App.jsx b/src/App.jsx index b4a4455..9e3409a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -44,13 +44,13 @@ const splashes = { const App = () => { const [showSearchbar, setShowSearchbar] = useState(false); - const [referenceCharacter, setReferenceCharacter] = useState(null); const [loading, setLoading] = useState(true); // Settings const [theme, setTheme] = useState(settingsJSON.theme); const [splash, setSplash] = useState(settingsJSON.splash); const [personalized, setPersonalized] = useState(settingsJSON.personalized); + const [referenceCharacter, setReferenceCharacter] = useState(null); // Mount useEffect(() => { @@ -60,24 +60,13 @@ const App = () => { // console.log(localStorage.key(i) + "=[" + localStorage.getItem(localStorage.key(i)) + "]"); // } - // Load settings + // Load settings from local storage if they exist const localSettings = JSON.parse(localStorage.getItem('settings')); if (localSettings !== null) { setTheme(localSettings.theme); setSplash(localSettings.splash); setPersonalized(localSettings.personalized); - } - - const fetchData = async (id) => { - await fetch("https://xivapi.com/character/" + id + "?extended=1&data=AC", {mode: 'cors'}) - .then(response => response.json()) - .then(data => setReferenceCharacter(data)); - } - - // Load reference character. - const id = localStorage.getItem('id'); - if (id !== null) { - fetchData(id); + setReferenceCharacter(localSettings.referenceData); } setLoading(false); @@ -89,17 +78,20 @@ const App = () => { useEffect(() => { document.body.style.backgroundImage = "url(" + splashes[theme][splash] + ")"; - - localStorage.setItem("theme", theme); - localStorage.setItem('splash', splash); - const keys = Object.keys(themesJSON[theme].colors); const values = Object.values(themesJSON[theme].colors); for (let i = 0; i < keys.length; i++) { document.documentElement.style.setProperty(keys[i], values[i]); } - }, [theme, splash]) + localStorage.setItem('settings', JSON.stringify({ + "theme": theme, + "splash": splash, + "personalized": personalized, + "referenceData": referenceCharacter + })); + + }, [theme, splash, referenceCharacter]) return ( diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 8538f7b..1787707 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -5,6 +5,17 @@ import { RiSettings3Line } from 'react-icons/ri'; import Searchbar from './Searchbar'; const Navbar = (props) => { + let profile; + if (props.referenceCharacter !== null) { + profile = + + + + } return ( ); } diff --git a/src/data/achievements.json b/src/data/achievements.json index b4129b5..d661189 100644 --- a/src/data/achievements.json +++ b/src/data/achievements.json @@ -189,7 +189,7 @@ "The Copied Factory": 2443, "The Puppet's Bunker": 2622, "The Tower at Paradigm's Breach": 2847, - "Aglaia": 3071 + "Aglaia": 3073 } }, "4": { diff --git a/src/data/settings.json b/src/data/settings.json index 30b3d14..cf38218 100644 --- a/src/data/settings.json +++ b/src/data/settings.json @@ -1,5 +1,6 @@ { "theme": "dark", "splash": 5, - "personalized": false + "personalized": false, + "referenceData": {} } \ No newline at end of file diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx index dfa8920..d868f7a 100644 --- a/src/pages/Settings.jsx +++ b/src/pages/Settings.jsx @@ -29,7 +29,6 @@ const Settings = (props) => { const [displayDropdown, setDisplayDropdown] = useState(-1); const [referenceBanner, setReferenceBanner] = useState(null); const [isSearching, setIsSearching] = useState(false); - const [statusText, setStatusText] = useState(""); const navigate = useNavigate(); // Mount @@ -40,26 +39,14 @@ const Settings = (props) => { props.setShowSearchbar(false); document.title = "XIV Tracker | Settings"; - // Load reference character if it exists. - if (props.referenceCharacter !== null) { - if (props.referenceCharacter.Character.ID !== null && props.personalized) { - requestData(props.referenceCharacter.Character.ID); - } - } - - }, [props.personalized]) + }, []) const requestData = async(id) => { - setIsSearching(true); - await fetch("https://xivapi.com/character/" + id + "?extended=1&data=AC", {mode: 'cors'}) .then(response => response.json()) .then(data => { if (data !== undefined) { - - // Save id to local storage. - localStorage.setItem('id', data.Character.ID) // Update reference character. props.setReferenceCharacter(data); @@ -86,23 +73,11 @@ const Settings = (props) => { } props.setSplash(breakpoint + 1) } - setStatusText(""); - } else { - setStatusText("Character with ID: " + id + " does not exist."); - } + } }) setIsSearching(false); } - const saveSettings = () => { - localStorage.setItem('settings', JSON.stringify({ - "theme": props.theme, - "splash": props.splash, - "personalized": props.personalized - })); - navigate(-1); - } - return(
@@ -174,13 +149,12 @@ const Settings = (props) => {
} - {referenceBanner} -

{statusText}

- + {referenceBanner}
+ -