Skip to content

Commit

Permalink
Good enough
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ice-mourne
Ice-mourne committed May 21, 2024
1 parent bae54f5 commit 984d145
Showing 1 changed file with 117 additions and 140 deletions.
257 changes: 117 additions & 140 deletions src/components/sideBar/Selection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,53 @@
import { FolderTypes, PerkTypes } from "@icemourne/description-converter";
import { TypedObject } from "@icemourne/tool-box";
import { AnyAction, Dispatch, ThunkDispatch } from "@reduxjs/toolkit";
import { useEffect, useState } from "react";
import { changePerkType, changeSelectedPerk } from "src/redux/globalSlice";
import { useAppDispatch, useAppSelector } from "src/redux/hooks";
import { store } from "src/redux/store";
import { GlobalState } from "src/redux/types";
import { sortPerks } from "src/utils/sortPerks";
import { Updater, useImmer } from "use-immer";

import { Select } from "../universal/Select";
import { AnyAction, Dispatch, ThunkDispatch } from '@reduxjs/toolkit'
import { FolderTypes, PerkTypes } from '@icemourne/description-converter'
import { Updater, useImmer } from 'use-immer'
import { changePerkType, changeSelectedPerk } from 'src/redux/globalSlice'
import { useAppDispatch, useAppSelector } from 'src/redux/hooks'
import { useEffect, useState } from 'react'

import { GlobalState } from 'src/redux/types'
import { Select } from '../universal/Select'
import { TypedObject } from '@icemourne/tool-box'
import { sortPerks } from 'src/utils/sortPerks'
import { store } from 'src/redux/store'

export function DescriptionTypeSelection() {
const dispatch = useAppDispatch();
const { settings } = useAppSelector((state) => state.global);
const dispatch = useAppDispatch()
const { settings } = useAppSelector((state) => state.global)

const options: { [key: string]: { [key in PerkTypes]?: string } } = {
Exotics: {
"Armor Trait Exotic": "Armor",
"Weapon Frame Exotic": "Weapon",
'Armor Trait Exotic': 'Armor',
'Weapon Frame Exotic': 'Weapon',
},
Weapon: {
"Weapon Trait": "Trait",
"Weapon Trait Enhanced": "Enhanced Trait",
"Weapon Perk": "Perk",
"Weapon Trait Origin": "Origin Trait",
"Weapon Frame": "Frame",
"Weapon Frame Enhanced": "Enhanced Frame",
'Weapon Trait': 'Trait',
'Weapon Trait Enhanced': 'Enhanced Trait',
'Weapon Perk': 'Perk',
'Weapon Trait Origin': 'Origin Trait',
'Weapon Frame': 'Frame',
'Weapon Frame Enhanced': 'Enhanced Frame',
},
"Abilities / Subclass Options": {
"Subclass Fragment": "Fragment",
"Subclass Aspect": "Aspect",
"Subclass Super": "Super",
"Subclass Grenade": "Grenade",
"Subclass Melee": "Melee",
"Subclass Class": "Class",
"Subclass Movement": "Movement",
'Abilities / Subclass Options': {
'Subclass Fragment': 'Fragment',
'Subclass Aspect': 'Aspect',
'Subclass Super': 'Super',
'Subclass Grenade': 'Grenade',
'Subclass Melee': 'Melee',
'Subclass Class': 'Class',
'Subclass Movement': 'Movement',
},
Mods: {
"Armor Mod General": "Armor General",
"Armor Mod Activity": "Armor Activity",
"Armor Mod Seasonal": "Armor Seasonal",
"Weapon Mod": "Weapon",
"Ghost Mod": "Ghost",
'Armor Mod General': 'Armor General',
'Armor Mod Activity': 'Armor Activity',
'Armor Mod Seasonal': 'Armor Seasonal',
'Weapon Mod': 'Weapon',
'Ghost Mod': 'Ghost',
},
};
}

return (
<Select
value={settings.selectedType}
onChange={(e) => dispatch(changePerkType(e.target.value as PerkTypes))}
>
<Select value={settings.selectedType} onChange={(e) => dispatch(changePerkType(e.target.value as PerkTypes))}>
<option value="none">Select description type</option>

{Object.keys(options).map((group, i) => (
Expand All @@ -63,155 +60,135 @@ export function DescriptionTypeSelection() {
</optgroup>
))}
</Select>
);
)
}

// change selected perk with shift mouse wheel
type DispatchType = ThunkDispatch<
{ global: GlobalState },
undefined,
AnyAction
> &
Dispatch<AnyAction>;
type DispatchType = ThunkDispatch<{ global: GlobalState }, undefined, AnyAction> & Dispatch<AnyAction>
const changePerk = (
displayedPerkList: string[] | number[],
dispatch: DispatchType,
setSelectedPerk: Updater<number>
) => {
const [externalEvent, setExternalEvent] = useState<WheelEvent | null>(null);
const [externalEvent, setExternalEvent] = useState<WheelEvent | null>(null)
useEffect(() => {
const changePerkEvent = (e: WheelEvent) => {
if (!e.shiftKey) return;
e.preventDefault();
setExternalEvent(e);
};
const mainEditor = document.querySelector("#main-editor > div") as any;
const secondaryEditor = document.querySelector(
"#secondary-editor > div"
) as any;
window.addEventListener("wheel", changePerkEvent, { passive: false });
mainEditor?.addEventListener("wheel", changePerkEvent, { passive: false });
secondaryEditor?.addEventListener("wheel", changePerkEvent, {
if (!e.shiftKey) return
e.preventDefault()
setExternalEvent(e)
}
const mainEditor = document.querySelector('#main-editor > div') as any
const secondaryEditor = document.querySelector('#secondary-editor > div') as any
window.addEventListener('wheel', changePerkEvent, { passive: false })
mainEditor?.addEventListener('wheel', changePerkEvent, { passive: false })
secondaryEditor?.addEventListener('wheel', changePerkEvent, {
passive: false,
});
}, [externalEvent]);
})
}, [externalEvent])
useEffect(() => {
if (externalEvent === null) return;
const currentlySelected =
store.getState().global.settings.currentlySelected;
const index = Object.values(displayedPerkList).findIndex(
(hash) => Number(hash) === currentlySelected
);
if (externalEvent === null) return
const currentlySelected = store.getState().global.settings.currentlySelected
const index = Object.values(displayedPerkList).findIndex((hash) => Number(hash) === currentlySelected)

const perkHash =
externalEvent.deltaY < 0
? displayedPerkList[Math.max(index - 1, 0)]
: displayedPerkList[Math.min(index + 1, displayedPerkList.length - 1)];
: displayedPerkList[Math.min(index + 1, displayedPerkList.length - 1)]

if (perkHash) {
dispatch(changeSelectedPerk(Number(perkHash)));
setSelectedPerk(Number(perkHash));
dispatch(changeSelectedPerk(Number(perkHash)))
setSelectedPerk(Number(perkHash))
}
}, [externalEvent]);
};
}, [externalEvent])
}

const PerkSelectionOptions = ({
displayedPerkList,
}: {
displayedPerkList: string[] | number[];
}) => {
const { database, settings } = useAppSelector((state) => state.global);
const { language } = settings;
const PerkSelectionOptions = ({ displayedPerkList }: { displayedPerkList: string[] | number[] }) => {
const { database, settings } = useAppSelector((state) => state.global)
const { language } = settings

const component = displayedPerkList.map((perkHash, i) => {
if (database[perkHash] === undefined) return;
const perk = database[perkHash];
const updateTracker = perk.updateTracker.descriptions;
if (database[perkHash] === undefined) return
const perk = database[perkHash]
const updateTracker = perk.updateTracker.descriptions
return (
<option key={i} value={perkHash}>
{perk.type === "Armor Trait Exotic"
? perk.itemName || perk.name
: perk.name}
{perk.type === 'Armor Trait Exotic' ? perk.itemName || perk.name : perk.name}
{Number(perkHash) > 10 && (
<>
{perk.inLiveDatabase ? "" : `❌`}
{language !== "en" &&
updateTracker[language]?.lastUpdate! < updateTracker.en?.lastUpdate!
? " ⏳"
: ""}
{perk.inLiveDatabase ? '' : `❌`}
{language !== 'en' && updateTracker[language]?.lastUpdate! < updateTracker.en?.lastUpdate! ? ' ⏳' : ''}
</>
)}
</option>
);
});
)
})

return <>{component}</>;
};
return <>{component}</>
}

export const PerkSelection = () => {
const dispatch = useAppDispatch();
const dispatch = useAppDispatch()
const {
settings,
databaseSettings: { folders },
} = useAppSelector((state) => state.global);

const [displayedPerkList, setDisplayedPerkList] = useImmer<
string[] | number[]
>([]);
const [displayedFolderList, setDisplayedFolderList] = useImmer<
string[] | null
>(null);
const [selectedPerk, setSelectedPerk] = useImmer<number>(0);
const [selectedFolder, setSelectedFolder] = useImmer<string | null>(null);

const setDisplayedPerks = (foldersName: string) => {
const folderPerks = folders[settings.selectedType as FolderTypes].find(
(folder) => folder.name === foldersName
);
setDisplayedPerkList(folderPerks?.has ?? []);
dispatch(changeSelectedPerk(Number([folderPerks?.has[0] ?? 0])));
};
} = useAppSelector((state) => state.global)

const [displayedPerkList, setDisplayedPerkList] = useImmer<string[] | number[]>([])
const [displayedFolderList, setDisplayedFolderList] = useImmer<string[] | null>(null)
const [selectedPerk, setSelectedPerk] = useImmer<number>(0)
const [selectedFolder, setSelectedFolder] = useImmer<string | null>(null)

const setDisplayedPerks = (foldersName_: string) => {
const index = foldersName_.split('___')[1]

const foldersName = foldersName_.replace(/___\d+/, '')

const folderPerks = folders[settings.selectedType as FolderTypes][index]

Check failure on line 146 in src/components/sideBar/Selection.tsx

View workflow job for this annotation

GitHub Actions / build 

Element implicitly has an 'any' type because index expression is not of type 'number'.
// [settings.selectedType as FolderTypes].filter(
// (folder) => folder.name === foldersName
// )[0]
setDisplayedPerkList(folderPerks?.has ?? [])
dispatch(changeSelectedPerk(Number([folderPerks?.has[0] ?? 0])))
}

useEffect(() => {
if (folders[settings.selectedType as FolderTypes]) {
const folderNames = folders[settings.selectedType as FolderTypes].map(
(folder) => folder.name
);
const firstFolder = folderNames[0];
setDisplayedFolderList(folderNames);
setSelectedFolder(firstFolder);

const folderPerks = folders[settings.selectedType as FolderTypes][0].has;
setDisplayedPerkList(folderPerks);
setSelectedPerk(folderPerks[0]);
dispatch(changeSelectedPerk(folderPerks[0]));
const folderNames = folders[settings.selectedType as FolderTypes].map((folder) => folder.name)
const firstFolder = folderNames[0]
setDisplayedFolderList(folderNames)
setSelectedFolder(firstFolder)

const folderPerks = folders[settings.selectedType as FolderTypes][0].has
setDisplayedPerkList(folderPerks)
setSelectedPerk(folderPerks[0])
dispatch(changeSelectedPerk(folderPerks[0]))
} else {
const sortedPerks = sortPerks();
debugger;
const sortedPerks = sortPerks()
debugger

setDisplayedPerkList(sortedPerks);
setSelectedPerk(Number(sortedPerks[0]));
dispatch(changeSelectedPerk(Number(sortedPerks[0])));
setDisplayedPerkList(sortedPerks)
setSelectedPerk(Number(sortedPerks[0]))
dispatch(changeSelectedPerk(Number(sortedPerks[0])))

setDisplayedFolderList(null);
setSelectedFolder(null);
setDisplayedFolderList(null)
setSelectedFolder(null)
}
}, [settings.selectedType]);
}, [settings.selectedType])

changePerk(displayedPerkList, dispatch, setSelectedPerk);
changePerk(displayedPerkList, dispatch, setSelectedPerk)

return (
<>
{displayedFolderList && selectedFolder && (
<Select
onChange={(e) => {
setSelectedFolder(e.target.value);
setDisplayedPerks(e.target.value);
setSelectedFolder(e.target.value)
setDisplayedPerks(e.target.value)
}}
value={selectedFolder}
>
{displayedFolderList.map((folderName, i) => (
<option value={folderName} key={i}>
<option value={folderName + '___' + i} key={i}>
{folderName}
</option>
))}
Expand All @@ -220,13 +197,13 @@ export const PerkSelection = () => {

<Select
onChange={(e) => {
setSelectedPerk(Number(e.target.value));
dispatch(changeSelectedPerk(Number([e.target.value])));
setSelectedPerk(Number(e.target.value))
dispatch(changeSelectedPerk(Number([e.target.value])))
}}
value={selectedPerk}
>
<PerkSelectionOptions displayedPerkList={displayedPerkList} />
</Select>
</>
);
};
)
}

0 comments on commit 984d145

Please sign in to comment.