Merge pull request #6 from dragoni7/manifest

integrated armor permutation/parsed class armor
dragoni7 · Jul 23, 2024 · 8650717 · 8650717
2 parents cac7e27 + 6942e5c
commit 8650717
Show file tree

Hide file tree

Showing 32 changed files with 1,320 additions and 4,303 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,23 +10,28 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/material": "^5.15.20",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^5.16.4",
     "@mui/system": "^5.15.20",
     "@reduxjs/toolkit": "^2.2.6",
     "@tanstack/react-table": "^8.17.3",
     "axios": "^1.7.2",
+    "dexie": "^4.0.8",
+    "dexie-react-hooks": "^1.1.7",
+    "dotenv": "^16.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
+    "react-window": "^1.8.10",
     "redux": "^5.0.1"
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",

diff --git a/src/app/routes/Dashboard.tsx b/src/app/routes/Dashboard.tsx
@@ -1,24 +1,19 @@
+import React, { useEffect, useState, useMemo } from "react";
 import { styled } from "@mui/system";
 import SingleDiamondButton from "../../components/SingleDiamondButton";
 import NumberBoxes from "../../components/NumberBoxes";
 import StatsTable from "../../components/StatsTable";
-
-// import React from 'react';
-// import './App.css';
-// import Background from './components/Background';
-// import CustomizationPanel from './components/CustomizationPanel';
-
-// function App() {
-//   return (
-//     <Background>
-//       <div className="overlay-container">
-//         <CustomizationPanel />
-//       </div>
-//     </Background>
-//   );
-// }
-
-// export default App;
+import { store } from "../../store";
+import { getDestinyMembershipId } from "../../features/membership/BungieAccount";
+import { updateMembership } from "../../store/MembershipReducer";
+import { getProfileArmor } from "../../features/profile/DestinyProfile";
+import { updateProfileArmor } from "../../store/ProfileReducer";
+import { useDispatch } from "react-redux";
+import { updateManifest } from "../../lib/bungie_api/Manifest";
+import { separateArmor } from "../../features/armor-optimization/separatedArmor";
+import { generatePermutations } from "../../features/armor-optimization/generatePermutations";
+import { filterPermutations } from "../../features/armor-optimization/filterPermutations";
+import { DestinyArmor, ArmorByClass } from "../../types"; // Corrected import
 
 const Container = styled("div")({
   display: "flex",
@@ -32,8 +27,8 @@ const HeaderContainer = styled("div")({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  marginBottom: "10px", // Further reduced margin to bring items closer
-  gap: "20px", // Add gap to ensure proper spacing
+  marginBottom: "10px",
+  gap: "20px",
 });
 
 const ContentContainer = styled("div")({
@@ -42,31 +37,75 @@ const ContentContainer = styled("div")({
   justifyContent: "center",
   alignItems: "flex-start",
   width: "100%",
-  padding: "10px", // Further reduced padding to bring items closer
+  padding: "10px",
 });
 
 const LeftPane = styled("div")({
-  marginRight: "10px", // Reduced margin
+  marginRight: "10px",
 });
 
 const RightPane = styled("div")({
   flexGrow: 1,
 });
 
 export const Dashboard = () => {
+  const dispatch = useDispatch();
+  const [separatedArmor, setSeparatedArmor] = useState<ArmorByClass | null>(
+    null
+  );
+  const [permutations, setPermutations] = useState<DestinyArmor[][] | null>(
+    null
+  );
+  const [filteredPermutations, setFilteredPermutations] = useState<
+    DestinyArmor[][] | null
+  >(null);
+  const [selectedValues, setSelectedValues] = useState<{
+    [key: string]: number;
+  }>({});
+
+  useEffect(() => {
+    const updateProfile = async () => {
+      await updateManifest();
+      const destinyMembership = await getDestinyMembershipId();
+      dispatch(updateMembership(destinyMembership));
+      const armor = await getProfileArmor();
+      dispatch(updateProfileArmor(armor));
+      const separated = separateArmor(armor);
+      const warlockPermutations = generatePermutations(separated.warlock);
+      setPermutations(warlockPermutations);
+      setFilteredPermutations(warlockPermutations);
+    };
+
+    updateProfile().catch(console.error);
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (permutations) {
+      const filtered = filterPermutations(permutations, selectedValues);
+      setFilteredPermutations(filtered);
+    }
+  }, [selectedValues, permutations]);
+
+  const handleThresholdChange = (thresholds: { [key: string]: number }) => {
+    setSelectedValues(thresholds);
+  };
+
   return (
     <Container>
-      <div>{localStorage.getItem("profile")}</div>
       <HeaderContainer>
         <SingleDiamondButton />
       </HeaderContainer>
       <ContentContainer>
         <LeftPane>
-          <NumberBoxes />
+          <NumberBoxes onThresholdChange={handleThresholdChange} />
         </LeftPane>
         <RightPane>
           <h1 style={{ fontSize: "16px" }}>Armour Combinations</h1>
-          <StatsTable />
+          {filteredPermutations ? (
+            <StatsTable permutations={filteredPermutations} />
+          ) : (
+            <p>Loading...</p>
+          )}
         </RightPane>
       </ContentContainer>
     </Container>

diff --git a/src/app/routes/Landing.tsx b/src/app/routes/Landing.tsx
@@ -1,45 +1,36 @@
 import { useNavigate } from "react-router";
 
-import React, { useEffect } from "react";
+import { useEffect, useState } from "react";
 import BungieLogin from "../../features/auth/BungieLogin";
 import { regenerateTokens } from "../../lib/bungie_api/TokenService";
-import { isAuthenticated } from "../../lib/bungie_api/AuthService";
+import { isAuthenticated } from "../../lib/bungie_api/Authorization";
 import { Container, Grid, Paper } from "@mui/material";
-import { useDispatch } from "react-redux";
-import { updateMembershipId } from "../../store/MembershipReducer";
-import { getDestinyMembershipId } from "../../features/membership/BungieAccount";
-import { getProfile } from "../../features/profile/DestinyProfile";
-import { store } from "../../store";
 
 export const LandingRoute = () => {
   const navigate = useNavigate();
-  const dispatch = useDispatch();
+
+  const [hidden, setHidden] = useState(true);
 
   useEffect(() => {
     setTimeout(async () => {
       if (isAuthenticated()) {
         console.log("Already authenticated");
-        var destinyMembershipId = await getDestinyMembershipId();
-        dispatch(updateMembershipId(destinyMembershipId));
-
-        // update / get manifest
-        // get player data
-        await getProfile(store.getState().membership.membershipId);
 
         navigate("/app");
-      } else if (regenerateTokens()) {
+      } else if (await regenerateTokens()) {
         console.log("Tokens regenerated and authenticated");
-        var destinyMembershipId = await getDestinyMembershipId();
-        dispatch(updateMembershipId(destinyMembershipId));
+
         navigate("/app");
       } else {
         console.log("Not authenticated");
       }
+
+      setHidden(false);
     }, 300);
   }, []);
 
-  return (
-    <React.Fragment>
+  return !hidden ? (
+    <div>
       <Container maxWidth="md">
         <Paper
           elevation={8}
@@ -66,6 +57,8 @@ export const LandingRoute = () => {
           </Grid>
         </Paper>
       </Container>
-    </React.Fragment>
+    </div>
+  ) : (
+    false
   );
 };
diff --git a/src/app/routes/Return.tsx b/src/app/routes/Return.tsx
@@ -9,11 +9,15 @@ export const ReturnRoute = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (handleAuthReturn()) {
-      // exit component if successful
-      navigate("/");
-    }
+    const init = async () => {
+      if (await handleAuthReturn()) {
+        // exit component if successful
+        navigate("/");
+      }
+    };
+
+    init().catch(console.error);
   }, []);
 
-  return <div>Authentication Error</div>;
+  return false;
 };
diff --git a/src/app/routes/index.tsx b/src/app/routes/index.tsx
@@ -1,6 +1,6 @@
 import { createBrowserRouter } from "react-router-dom";
 import { Dashboard } from "./Dashboard";
-import { ProtectedRoute } from "../../lib/bungie_api/AuthService";
+import { ProtectedRoute } from "../../lib/bungie_api/Authorization";
 
 export const createRouter = () => {
   return createBrowserRouter([

diff --git a/src/components/NumberBoxes.tsx b/src/components/NumberBoxes.tsx
@@ -2,75 +2,88 @@ import React, { useState } from "react";
 import { styled } from "@mui/system";
 import Typography from "@mui/material/Typography";
 
-const Root = styled('div')({
-  width: 'fit-content',
-  margin: '10px 0', // Reduced margin
+const Root = styled("div")({
+  width: "fit-content",
+  margin: "10px 0",
 });
 
-const StatRow = styled('div')({
-  marginBottom: '10px', // Reduced margin
-  display: 'flex',
-  alignItems: 'center',
+const StatRow = styled("div")({
+  marginBottom: "10px",
+  display: "flex",
+  alignItems: "center",
 });
 
-const NumberBoxContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
+const NumberBoxContainer = styled("div")({
+  display: "flex",
+  alignItems: "center",
 });
 
 interface NumberBoxProps {
   isSelected: boolean;
 }
 
-const NumberBox = styled('div')<NumberBoxProps>(({ isSelected }) => ({
-  display: 'inline-block',
-  width: '14px', // Smaller width
-  height: '14px', // Smaller height
-  lineHeight: '14px', // Match height
-  textAlign: 'center',
-  border: isSelected ? '1px solid lightblue' : '1px solid white',
-  marginRight: '1px', // Small margin to stick boxes together
-  backgroundColor: 'transparent',
-  color: isSelected ? 'lightblue' : 'white',
-  cursor: 'pointer',
-  fontSize: '8px', // Smaller font size
+const NumberBox = styled("div")<NumberBoxProps>(({ isSelected }) => ({
+  display: "inline-block",
+  width: "14px",
+  height: "14px",
+  lineHeight: "14px",
+  textAlign: "center",
+  border: isSelected ? "1px solid lightblue" : "1px solid white",
+  marginRight: "1px",
+  backgroundColor: "transparent",
+  color: isSelected ? "lightblue" : "white",
+  cursor: "pointer",
+  fontSize: "8px",
 }));
 
 const stats = [
-  'Mobility',
-  'Resilience',
-  'Recovery',
-  'Discipline',
-  'Intellect',
-  'Strength',
+  "Mobility",
+  "Resilience",
+  "Recovery",
+  "Discipline",
+  "Intellect",
+  "Strength",
 ];
 
-interface selectedNumbers {
-  [key: string]: number
+interface SelectedNumbers {
+  [key: string]: number;
 }
 
-const NumberBoxes: React.FC = () => {
-  const [selectedNumbers, setSelectedNumbers] = useState<selectedNumbers>({});
+interface NumberBoxesProps {
+  onThresholdChange: (thresholds: SelectedNumbers) => void;
+}
+
+const NumberBoxes: React.FC<NumberBoxesProps> = ({ onThresholdChange }) => {
+  const [selectedNumbers, setSelectedNumbers] = useState<SelectedNumbers>({});
 
-  const handleSelect = (stat : string, number : number) => {
-    setSelectedNumbers((prev) => ({
-      ...prev,
+  const handleSelect = (stat: string, number: number) => {
+    const updatedNumbers = {
+      ...selectedNumbers,
       [stat]: number,
-    }));
+    };
+    setSelectedNumbers(updatedNumbers);
+    onThresholdChange(updatedNumbers);
   };
 
   return (
     <Root>
       {stats.map((stat) => (
         <StatRow key={stat}>
-          <Typography id={`${stat}-boxes`} gutterBottom style={{ marginRight: '10px', fontSize: '10px', minWidth: '70px' }}>
+          <Typography
+            id={`${stat}-boxes`}
+            gutterBottom
+            style={{ marginRight: "10px", fontSize: "10px", minWidth: "70px" }}
+          >
             {stat}
           </Typography>
           <NumberBoxContainer>
             {[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((number) => (
               <NumberBox
                 key={number}
-                isSelected={selectedNumbers[stat] !== undefined && number <= selectedNumbers[stat]}
+                isSelected={
+                  selectedNumbers[stat] !== undefined &&
+                  number <= selectedNumbers[stat]
+                }
                 onClick={() => handleSelect(stat, number)}
               >
                 {number}