Updated feature system to show relevant content. Adding content for n…

…ew patch.
DamonGreenhalgh · Apr 15, 2022 · 116fd4c · 116fd4c
1 parent 83db8b4
commit 116fd4c
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 63 deletions.
diff --git a/src/App.css b/src/App.css
@@ -176,12 +176,14 @@ input:focus {
   color: white;
   padding: 1rem;
   height: 100%;
-  transition: background-color .25s;
 }
 
-.arrow:hover {
-  color: white;
-  background-color: rgba(255, 255, 255, 0.226);
+.arrow--right:hover {
+  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25));
+}
+
+.arrow--left:hover {
+  background-image: linear-gradient(-90deg, transparent, rgba(255, 255, 255, 0.25));
 }
 
 @media only screen and (max-width: 1050px) {

diff --git a/src/App.jsx b/src/App.jsx
@@ -56,9 +56,9 @@ const App = () => {
   useEffect(() => { 
 
     // Local storage display for testing.
-    for (let i = 0; i < localStorage.length; i++)   {
-      console.log(localStorage.key(i) + "=[" + localStorage.getItem(localStorage.key(i)) + "]");
-    }
+    // for (let i = 0; i < localStorage.length; i++)   {
+    //   console.log(localStorage.key(i) + "=[" + localStorage.getItem(localStorage.key(i)) + "]");
+    // }
 
     // Load settings
     const localSettings = JSON.parse(localStorage.getItem('settings'));

diff --git a/src/components/Featured.css b/src/components/Featured.css
@@ -8,45 +8,35 @@
 }
 
 .featured__overlay {
-    color: white;
     width: 100%;
     height: 100%;
     z-index: 2;
     position: absolute;
     display: flex;
     justify-content: space-between;
-    background-image: linear-gradient(170deg, transparent 50%, var(--color-news));
     align-items: center;
     gap: .5rem;
-    transition: background-color .5s;
-}
-
-.featured__overlay:hover {
-    background-color: rgba(39, 41, 46, 0.25);
-}
-
-.featured__overlay:hover .arrow {
-    opacity: 1;
+    background-image: linear-gradient(170deg, #222229b2, transparent 30%, #212024);
 }
 
 .featured__overlay a {
     width: 100%;
     height: 100%;
 }
 
-.text {
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    gap: .5rem;
-    padding-bottom: 1rem;
-    text-align: end;
+.featured__overlay h4 {
+    background-color: var(--color-completed);
+    box-shadow: 0 .5rem 1rem var(--c-shadow);
     color: white;
+    border-radius: .25rem;
+    padding: .5rem;
+    position: absolute;
+    left: 1rem;
+    top: 1rem;
 }
 
-.text h2 {
-    color: white;
+.featured__overlay p {
+    color: #d9dfe4;
 }
 
 .featured__banners {

diff --git a/src/components/Featured.jsx b/src/components/Featured.jsx
@@ -3,13 +3,22 @@ import endwalkerBanner from '../images/featured/endwalker.png';
 import newfoundAdventureBanner from '../images/featured/newfound-adventure.png';
 import littleLadiesDayBanner from '../images/featured/little-ladies-day.png';
 import moogleTreasureTroveBanner from '../images/featured/moogle-treasure-trove.png';
+import hatchingTideBanner from '../images/featured/hatching-tide.png';
 import { useState, useEffect, useRef } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import featureJSON from '../data/feature.json';
 
+
+// Reference to currently live events/relevant content.
+const live = [
+    'event2',
+    '6.1',
+    '6.0'
+]
+
 const Featured = () => {
 
-    const length = Object.keys(featureJSON).length;
+    const length = live.length;
     const backgroundContainer = useRef(null);
     const [index, setIndex] = useState(0);
     const [auto, setAuto] = useState(true);
@@ -44,27 +53,34 @@ const Featured = () => {
         <div className="featured">
             <div className="featured__overlay">
                 <button 
-                    className="arrow" 
+                    className="arrow arrow--left" 
                     onClick={() => {updateIndex(-1); setAuto(false)}}
                 >
                     <FaChevronLeft />
                 </button>
-                <a className="text" href={featureJSON[index].link}>
-                    <p>{featureJSON[index].prefix}</p>
-                    <h2>{featureJSON[index].title}</h2>
-                </a>
+                <a href={featureJSON[live[index]].link} />                    
+                <h4>{featureJSON[live[index]].type}</h4>
+                <div className='col text-end' style={{
+                    position: 'absolute',
+                    bottom: '1rem',
+                    right: '1rem'
+                }}>
+                    <p>{featureJSON[live[index]].date}</p>
+                    <h2>{featureJSON[live[index]].title}</h2>
+
+                </div>
+
                 <button 
-                    className="arrow" 
+                    className="arrow arrow--right" 
                     onClick={() => {updateIndex(1); setAuto(false)}}
                 >
                     <FaChevronRight />
                 </button>
             </div>
             <div className="featured__banners" ref={backgroundContainer} >
-                <img src={endwalkerBanner} />
+                <img src={hatchingTideBanner} />
                 <img src={newfoundAdventureBanner} />
-                <img src={littleLadiesDayBanner} />
-                <img src={moogleTreasureTroveBanner} />
+                <img src={endwalkerBanner} />
             </div>
         </div>
     );

diff --git a/src/components/Quests.jsx b/src/components/Quests.jsx
@@ -87,8 +87,6 @@ const Quests = (props) => {
                 <h3>{Math.round(totals[panel][0] / totals[panel][1] * 100)} %</h3> 
             </div>
 
-
-
             <div className='row gap align-center'>
                 <img src={questIcon[panel]} className="icon--quests" alt={achievementsJSON[panel].name  + " Icon"} />
                 <h2>{achievementsJSON[panel].name}</h2>
@@ -100,7 +98,6 @@ const Quests = (props) => {
                     style={{marginLeft: 'auto'}}
                 />
             </div>
-
 
             <div className="column" ref={msqRef}>
 
@@ -146,6 +143,7 @@ const Quests = (props) => {
                     <div className='quests__column'>
                         <h3 className="quests__sub-header">Endwalker</h3>
                         <a href={eorzeadbBaseUrl + "quest/52a65d1961d/"} className="eorzeadb_link spoiler"><FaCheck className="icon hidden" />Endwalker</a>
+                        <a href={eorzeadbBaseUrl + "quest/52a65d1961d/"} className="eorzeadb_link spoiler"><FaCheck className="icon hidden" />New Found Adventure</a>
                     </div>
 
                 </ol>
@@ -257,6 +255,7 @@ const Quests = (props) => {
                         <a href={eorzeadbBaseUrl + "duty/ba59c193b71/"} className="eorzeadb_link spoiler"><FaCheck className="icon hidden" />The Dead Ends<img src={msqIcon} className="icon--msq" alt="" /></a>
                         <a href={eorzeadbBaseUrl + "duty/175e6a7245d/"} className="eorzeadb_link"><FaCheck className="icon hidden" />Smileton</a>
                         <a href={eorzeadbBaseUrl + "duty/25f8ec27427/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Stigma Dreamscape</a>
+                        <a href={eorzeadbBaseUrl + "duty/d56ff366a07"} className="eorzeadb_link spoiler"><FaCheck className="icon hidden" />Alzadaal's Legacy</a>
                     </div>
                 </ol>
 
@@ -273,9 +272,6 @@ const Quests = (props) => {
                         <a href={eorzeadbBaseUrl + "duty/0850a8627aa/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Whorleater<img src={msqIcon} className="icon--msq" alt="" /></a>
                         <a href={eorzeadbBaseUrl + "duty/4d8cae741db/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Striking Tree<img src={msqIcon} className="icon--msq" alt="" /></a>
                         <a href={eorzeadbBaseUrl + "duty/5f786d57228/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Akh Afah Amphitheatre<img src={msqIcon} className="icon--msq" alt="" /></a>
-                        <a href={eorzeadbBaseUrl + "duty/2fac3746c16/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Chrysalis<img src={msqIcon} className="icon--msq" alt="" /></a>
-                        <a href={eorzeadbBaseUrl + "duty/f80af21461f/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Steps of Faith<img src={msqIcon} className="icon--msq" alt="" /></a>
-                        <a href={eorzeadbBaseUrl + "duty/cb876745bce/"} className="eorzeadb_link"><FaCheck className="icon hidden" />Battle in the Big Keep</a>
                         <a href={eorzeadbBaseUrl + "duty/21d8c5bd54b/"} className="eorzeadb_link"><FaCheck className="icon hidden" />Urth's Fount</a>
 
                         <h3 className="quests__sub-header">Heavensward</h3>
@@ -300,7 +296,6 @@ const Quests = (props) => {
                         <a href={eorzeadbBaseUrl + "duty/52328939737/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Great Hunt</a>
                         <a href={eorzeadbBaseUrl + "duty/628e9a05d34/"} className="eorzeadb_link"><FaCheck className="icon hidden" />Hells' Kier</a>
                         <a href={eorzeadbBaseUrl + "duty/c79d50c803d/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Wreath of Snakes</a>
-                        <a href={eorzeadbBaseUrl + "duty/bad56c435a5/"} className="eorzeadb_link"><FaCheck className="icon hidden" />Kugane Ohashi</a>
 
                         <h3 className="quests__sub-header">Shadowbringers</h3>
 
@@ -318,7 +313,7 @@ const Quests = (props) => {
 
                         <a href={eorzeadbBaseUrl + "duty/f40a8f14d6d/"} className="eorzeadb_link spoiler"><FaCheck className="icon hidden" />Zodiark's Fall<img src={msqIcon} className="icon--msq" alt="" /></a>
                         <a href={eorzeadbBaseUrl + "duty/0dbba05fd0f/"} className="eorzeadb_link spoiler"><FaCheck className="icon hidden" />Hydaelyn's Call<img src={msqIcon} className="icon--msq" alt="" /></a>
-                        <a href={eorzeadbBaseUrl + "duty/7b4070f67f6/"} className="eorzeadb_link spoiler"><FaCheck className="icon hidden" />The Final Day<img src={msqIcon} className="icon--msq" alt="" /></a>
+                        <a href={eorzeadbBaseUrl + "duty/0c90d0fd67b/"} className="eorzeadb_link spoiler"><FaCheck className="icon hidden" />Endsinger Aria<img src={msqIcon} className="icon--msq" alt="" /></a>
                     </div>
                 </ol>
 
@@ -352,7 +347,7 @@ const Quests = (props) => {
 
                         <h3 className="quests__sub-header">Pandæmonium</h3>
 
-                        <a href={eorzeadbBaseUrl + "duty/d53631d5202/"} className="eorzeadb_link"><FaCheck className="icon hidden" />Asphodelos</a>
+                        <a href={eorzeadbBaseUrl + "duty/8766feb6d35/"} className="eorzeadb_link"><FaCheck className="icon hidden" />Asphodelos</a>
                     </div>
                     <div className='quests__column'>
                         <h3 className="quests__sub-header">Crystal Tower</h3>
@@ -378,6 +373,12 @@ const Quests = (props) => {
                         <a href={eorzeadbBaseUrl + "duty/ed86e5291b2/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Copied Factory</a>
                         <a href={eorzeadbBaseUrl + "duty/889b8d8cfa4/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Puppets' Bunker</a>
                         <a href={eorzeadbBaseUrl + "duty/f1a29897772/"} className="eorzeadb_link"><FaCheck className="icon hidden" />The Tower at Paradigm's Breach</a>
+
+                        <h3 className="quests__sub-header">Myths of the Realm</h3>
+
+                        <a href={eorzeadbBaseUrl + "duty/f1a29897772/"} className="eorzeadb_link"><FaCheck className="icon hidden" />Aglaia</a>
+
+
                     </div>
                     <div className='quests__column'></div>
                 </ol>  

diff --git a/src/data/achievements.json b/src/data/achievements.json
@@ -27,7 +27,8 @@
             "Reflections in Crystal": 2642,
             "Futures Rewritten": 2714,
             "Death Unto Dawn": 2851,
-            "Endwalker": 2958
+            "Endwalker": 2958,
+            "New Found Adventure": 3075
         }
     },
     "1": {
@@ -117,7 +118,8 @@
             "The Aitiascope": 2984,
             "The Dead Ends": 2985,
             "Smileton": 2987,
-            "The Stigma Dreamscape": 2986
+            "The Stigma Dreamscape": 2986,
+            "Alzadaal’s Legacy": 3070
         }
     },
     "2": {
@@ -130,9 +132,6 @@
             "The Whorleater": 893,
             "The Striking Tree": 994,
             "Akh Afah Amphitheatre": 1045,
-            "The Chrysalis": 1067,
-            "The Steps of Faith": 1065,
-            "Battle in the Big Keep": 1066,
             "Urth's Fount": 1064,
             "Thok ask Thok": 1221,
             "The Limitless Blue": 1220,
@@ -149,7 +148,6 @@
             "The Great Hunt": 2109,
             "Hell's Kier": 2117,
             "The Wreath of Snakes": 2165,
-            "Kugane Ohashi": 2236,
             "The Dancing Plague": 2385,
             "The Crown of the Immaculate": 2386,
             "Hade's Elegy": 2441,
@@ -160,7 +158,7 @@
             "The Cloud Deck": 2846,
             "Zodiark's Fall": 2988,
             "Hydaelyn's Call": 2989,
-            "The Final Day": 2958
+            "The Final Day": 3072
         }
     },
     "3": {
@@ -190,7 +188,8 @@
             "The Orbonne Monastery": 2164,
             "The Copied Factory": 2443,
             "The Puppet's Bunker": 2622,
-            "The Tower at Paradigm's Breach": 2847
+            "The Tower at Paradigm's Breach": 2847,
+            "Aglaia": 3071
         }
     },
     "4": {

diff --git a/src/data/feature.json b/src/data/feature.json
@@ -1,22 +1,32 @@
 {
-    "0": {
+    "6.0": {
         "title": "ENDWALKER",
-        "prefix": "Latest Expansion",
+        "type": "Expansion",
+        "date": "December 19th 2021",
         "link": "https://na.finalfantasyxiv.com/endwalker"
     },
-    "1": {
+    "6.1": {
         "title": "NEWFOUND ADVENTURE",
-        "prefix": "Upcoming Patch",
+        "type": "Patch",
+        "date": "April 12th 2022",
         "link": "https://na.finalfantasyxiv.com/endwalker/patch_6_1/"
     },
-    "2": {
+    "event0": {
         "title": "LITTLE LADIES' DAY",
-        "prefix": "Live Event",
+        "type": "Event",
+        "date": "March 14 - March 31",
         "link": "https://na.finalfantasyxiv.com/lodestone/special/2022/Little_Ladies_Day/jsuk7gn8z4"
     },
-    "3": {
+    "event1": {
         "title": "MOOGLE TREASURE TROVE",
-        "prefix": "Live Event",
+        "type": "Event",
+        "date": "March 14 - April 12",
         "link": "https://na.finalfantasyxiv.com/lodestone/special/mogmog-collection/202203/dceh8sj926"
+    },
+    "event2": {
+        "title": "HATCHING TIDE",
+        "type": "Event",
+        "date": "April 13 - April 27",
+        "link": "https://na.finalfantasyxiv.com/lodestone/special/2022/Hatching_tide/qeng0r6k46"
     }
 }
diff --git a/src/images/featured/endwalker.png b/src/images/featured/endwalker.png
diff --git a/src/images/featured/hatching-tide.png b/src/images/featured/hatching-tide.png
diff --git a/src/images/featured/little-ladies-day.png b/src/images/featured/little-ladies-day.png
diff --git a/src/images/featured/moogle-treasure-trove.png b/src/images/featured/moogle-treasure-trove.png
diff --git a/src/images/featured/newfound-adventure.png b/src/images/featured/newfound-adventure.png