Changes to settings system

DamonGreenhalgh · Apr 15, 2022 · fb6aeef · fb6aeef
1 parent 116fd4c
commit fb6aeef
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 67 deletions.
diff --git 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
@@ -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 (
     <BrowserRouter basename={process.env.PUBLIC_URL}>

diff --git 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 = 
+        <Link to={"/" + props.referenceCharacter.Character.ID}>
+            <img 
+                src={props.referenceCharacter.Character.Avatar} 
+                className="navbar__profile-icon rounded interactable" 
+                title={props.referenceCharacter.Character.Name}
+            />
+        </Link>
+    }
     return (
         <nav className='navbar'>
             <Link to="/" title="Home">
@@ -18,8 +29,9 @@ const Navbar = (props) => {
             <Link to="/settings" title="Settings" style={{marginLeft: "auto"}}>
                 <button><RiSettings3Line className="navbar__icon" /></button>
             </Link>
-            {
-                props.referenceCharacter !== null ?
+            {profile}
+            {/* {
+                 props.referenceCharacter !== null ?
                 <Link to={"/" + props.referenceCharacter.Character.ID}>
                     <img 
                         src={props.referenceCharacter.Character.Avatar} 
@@ -28,7 +40,7 @@ const Navbar = (props) => {
                     />
                 </Link> :
                 null
-            }
+            } */}
         </nav>
     );
 }

diff --git 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
@@ -1,5 +1,6 @@
 {
     "theme": "dark",
     "splash": 5,
-    "personalized": false
+    "personalized": false,
+    "referenceData": {}
 }
diff --git 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(
         <div className="settings">
             <div className="settings__form">
@@ -174,13 +149,12 @@ const Settings = (props) => {
                                 <Button style={{flex: '1'}} onClick={(e) => requestData((e.target.parentNode.firstChild.value))} content="Search"/>
                             </div>
                         }
-                        {referenceBanner}
-                        <p>{statusText}</p>
-
+                        {referenceBanner}                        
                     </div>
+
                 </div>       
             </div>
-            <Button content="Save" onClick={saveSettings} style={{width: "5rem"}} />
+            <Button content="Save" onClick={() => navigate(-1)} style={{width: "5rem"}} />
         </div>
     );
 }