updated ui

now shows drop chances also added all items from the datamine can swap back/forth between new/old ui
cecilbowen · Mar 3, 2024 · f2d418b · f2d418b
1 parent aa77928
commit f2d418b
Show file tree

Hide file tree

Showing 13 changed files with 72,953 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "relink-sigil-wishlist",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "homepage": ".",
   "private": true,
   "main": "src/index.js",

diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Find out where to obtain any sigil in Granblue Fantasy: Relink"
+      content="Find out where any sigil (or item) drops in Granblue Fantasy: Relink"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/gotle-favicon.png" />
     <!--

diff --git a/public/sound/gotle_buySomething.wav b/public/sound/gotle_buySomething.wav
diff --git a/public/sound/gotle_unbelievable.wav b/public/sound/gotle_unbelievable.wav
diff --git a/public/sound/gotle_wonderful.wav b/public/sound/gotle_wonderful.wav
diff --git a/src/App.js b/src/App.js
@@ -1,27 +1,31 @@
 /* eslint-disable max-len */
 import './App.css';
 import QuestTable from './components/QuestTable';
+import QuestTableBeta from './components/QuestTableBeta';
 import QUESTS from './data/quests.json';
 import SIDEQUESTS from './data/sideQuests.json';
-import { TextField } from '@mui/material';
+import QUESTS_DATAMINE_ALL from './data/questDrops.json';
+import QUESTS_DATAMINE_SIGILS from './data/questDropsSigils.json';
+import { IconButton, TextField } from '@mui/material';
 import React, { useEffect, useState } from "react";
 import FormControlLabel from '@mui/material/FormControlLabel';
+import FiberNewIcon from '@mui/icons-material/FiberNew';
+import RestoreIcon from '@mui/icons-material/Restore';
 import Checkbox from '@mui/material/Checkbox';
 import debounce from 'lodash/debounce';
-
-const replaceWithRomanNumerals = inputString => {
-  return inputString.replace(/[1-5]/g, digit => ['I', 'II', 'III', 'IV', 'V'][digit - 1] || digit);
-};
+import { replaceWithRomanNumerals } from './util';
 
 const App = () => {
+  const [newUI, setNewUI] = useState(true);
   const [searchText, setSearchText] = useState("");
+  const [showDropChance, setShowDropChance] = useState(true);
   const [filterQuests, setFilterQuests] = useState(true);
-  const [filterSideQuests, setFilterSideQuests] = useState(true);
+  const [filterSideQuests, setFilterSideQuests] = useState(false);
   const [filterFirstClear, setFilterFirstClear] = useState(true);
-
-  if (QUESTS.length === 0) {
-    return null;
-  }
+  const [filterExclusive, setFilterExclusive] = useState(false);
+  const [filterAllItems, setFilterAllItems] = useState(false);
+  const gotleWonderful = new Audio(`/sound/gotle_wonderful.wav`);
+  const gotleUnbelievable = new Audio(`/sound/gotle_unbelievable.wav`);
 
   const debouncedOnChange = debounce(ev => {
     setSearchText(ev.target.value);
@@ -32,36 +36,66 @@ const App = () => {
   return (
     <div className="App">
       <div style={{ display: "flex", flexWrap: 'wrap', margin: '1em 1em 0em 1em' }}>
-        <TextField id="outlined-basic" label="Search sigils" variant="outlined"
-          size="small"
+        <TextField id="outlined-basic" label={`Search ${filterAllItems ? 'drops' : 'sigils'}`} variant="outlined"
+          size="small" autoFocus
           sx={{ display: "flex", width: '40em', marginRight: '1em' }}
           onChange={ev => debouncedOnChange(ev)} />
+        {newUI && <FormControlLabel control={<Checkbox />} label="Exclusive Search"
+          title="Excludes non-searched drops if checked"
+          onChange={ev => setFilterExclusive(ev.target.checked)} />}
       </div>
 
       <div style={{ display: "flex", flexWrap: 'wrap', margin: "0em 1em" }}>
         <FormControlLabel control={<Checkbox defaultChecked />} label="Quests"
           onChange={ev => setFilterQuests(ev.target.checked)} />
-        <FormControlLabel control={<Checkbox defaultChecked />} label="NPC Side Quests"
+        <FormControlLabel control={<Checkbox />} label="NPC Side Quests"
           onChange={ev => setFilterSideQuests(ev.target.checked)} />
         <FormControlLabel control={<Checkbox defaultChecked />} label="Include First-Clear Rewards"
           onChange={ev => setFilterFirstClear(ev.target.checked)} />
+        {newUI && <FormControlLabel control={<Checkbox />} label="All Items"
+          onChange={ev => setFilterAllItems(ev.target.checked)} />}
+        {newUI && <FormControlLabel control={<Checkbox defaultChecked />} label="Show Drop Rates"
+          onChange={ev => setShowDropChance(ev.target.checked)} />}
       </div>
 
       <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
-        <QuestTable quests={QUESTS} sideQuests={SIDEQUESTS}
+        {!newUI && <QuestTable quests={QUESTS} sideQuests={SIDEQUESTS}
           textFilter={moddedTextFilter}
           filters={{
             quests: filterQuests,
             sideQuests: filterSideQuests,
             firstClear: filterFirstClear
           }}
-        />
+        />}
+        {newUI && <QuestTableBeta quests={filterAllItems ? QUESTS_DATAMINE_ALL : QUESTS_DATAMINE_SIGILS} sideQuests={SIDEQUESTS}
+          textFilter={moddedTextFilter}
+          filters={{
+            quests: filterQuests,
+            sideQuests: filterSideQuests,
+            firstClear: filterFirstClear,
+            exclusive: filterExclusive,
+            allItems: filterAllItems
+          }}
+          showDropChance={showDropChance}
+        />}
       </div>
 
       <div>
         <small>
+          <IconButton aria-label="swapUI"
+            color="primary" sx={{ cursor: 'pointer' }}
+            title={newUI ? 'Swap back to the old UI' : 'Swap to the new UI'}
+            onClick={() => {
+              const audio = newUI ? gotleWonderful : gotleUnbelievable;
+              audio.play(); // lol
+              setNewUI(!newUI);
+            }}
+          >
+            {!newUI && <FiberNewIcon />}
+            {newUI && <RestoreIcon />}
+          </IconButton>
           <a target="_blank" rel="noopener noreferrer" href="/~https://github.com/cecilbowen/relink-sigil-wishlist">Source Code</a> |&nbsp;
-          <a target="_blank" rel="noopener noreferrer" href="/~https://github.com/cecilbowen/relink-sigil-wishlist/issues/1">Suggest a Missing Sigil</a> |&nbsp;
+          <a target="_blank" rel="noopener noreferrer" href="/~https://github.com/cecilbowen/relink-sigil-wishlist/issues">Bug Report</a> |
           References:&nbsp;
           <a target="_blank" rel="noopener noreferrer" href="https://redd.it/1aqtuno">reddit</a>&nbsp;
           <a target="_blank" rel="noopener noreferrer" href="https://nenkai.github.io/relink-modding/resources/quest_drop_rates/">nenkai</a>&nbsp;

diff --git a/src/components/QuestTable.js b/src/components/QuestTable.js
@@ -84,7 +84,6 @@ const QuestTable = ({
         };
       });
       if (filters.sideQuests) { tempFilteredQuests.push(...sQuests); }
-      console.log("sigils", sQuests);
       tempFilteredQuests = tempFilteredQuests.filter(x => x.sigils.firstClear.length > 0 ||
         x.sigils.reward.length > 0 || x.sigils.drop.length > 0 || x.sigils?.unlisted?.length > 0 ||
         x.sigils?.npcSideQuest?.length > 0);
@@ -142,10 +141,13 @@ const QuestTable = ({
       }
 
       if (sigilArr.length > 0) {
-        const hasSigil = textFilter && textFilter.length > 0 &&
-          sigilArr.filter(y => y.toLowerCase().includes(textFilter.toLowerCase())).length > 0;
+        let hasSigil = false;
+        if (textFilter && textFilter.length > 0) {
+          hasSigil = sigilArr.filter(y => y.toLowerCase().includes(textFilter.toLowerCase())).length > 0;
+        }
 
         return <TextField id="outlined-basic" label={sigilCatMap[propName]} variant="outlined"
+          key={`tfield-${propName}`}
           size="small"
           sx={{
             display: "flex",