From 31b590a54218f18a1d533304e87eddddbcddc3c1 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 7 Jul 2023 22:07:41 -0700 Subject: [PATCH] WIP checkpoint abandoning this though --- components/GridRep/index.tsx | 20 ++++-- components/character/CharacterGrid/index.tsx | 68 +++++++++++++++---- components/character/CharacterModal/index.tsx | 36 +++++++--- components/mastery/RingSelect/index.tsx | 26 +++---- transformers/GridCharacterTransformer.tsx | 13 +++- transformers/GridTransformer.tsx | 8 +-- transformers/WeaponTransformer.tsx | 6 +- utils/mapToGridArray.tsx | 6 ++ 8 files changed, 133 insertions(+), 50 deletions(-) create mode 100644 utils/mapToGridArray.tsx diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx index 0f908d72..e64fd734 100644 --- a/components/GridRep/index.tsx +++ b/components/GridRep/index.tsx @@ -9,6 +9,7 @@ import 'fix-date' import { accountState } from '~utils/accountState' import { formatTimeAgo } from '~utils/timeAgo' import { ElementMap } from '~utils/elements' +import { mapToGridArray } from '~utils/mapToGridArray' import Button from '~components/common/Button' @@ -73,9 +74,18 @@ const GridRep = (props: Props) => { }) useEffect(() => { - setMainhand(props.weapons.mainWeapon?.object) - setWeapons(Object.values(props.weapons.allWeapons).map((w) => w?.object)) - setGrid(props.weapons.allWeapons) + if (props.weapons && props.weapons.mainWeapon) { + setMainhand(props.weapons.mainWeapon?.object) + } + + if (props.weapons && props.weapons.allWeapons) { + setWeapons( + mapToGridArray( + Object.values(props.weapons.allWeapons).map((w) => w?.object) + ) + ) + setGrid(props.weapons.allWeapons) + } }, [props.weapons]) function navigate() { @@ -86,7 +96,7 @@ const GridRep = (props: Props) => { let url = '' if (mainhand) { - const weapon = props.weapons.mainWeapon + const weapon = props.weapons?.mainWeapon if (mainhand.element === ElementMap.null && weapon && weapon.element) { url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblueId}_${weapon.element}.jpg` @@ -190,7 +200,7 @@ const GridRep = (props: Props) => { {` · ${t('party.details.labels.full_auto')}`} )} - {props.raid && props.raid.group.extra && ( + {props.raid && props.raid.group?.extra && ( {` · EX`} )} diff --git a/components/character/CharacterGrid/index.tsx b/components/character/CharacterGrid/index.tsx index 39622d05..f5e8ed42 100644 --- a/components/character/CharacterGrid/index.tsx +++ b/components/character/CharacterGrid/index.tsx @@ -20,6 +20,7 @@ import * as CharacterTransformer from '~transformers/CharacterTransformer' import * as GridCharacterTransformer from '~transformers/GridCharacterTransformer' import styles from './index.module.scss' +import { use } from 'i18next' // Props interface Props { @@ -77,16 +78,36 @@ const CharacterGrid = (props: Props) => { [key: number]: number | undefined }>({}) + useEffect(() => { + console.log('loading chara grid') + }, []) + useEffect(() => { setJob(appState.party.protagonist.job) - setJobSkills(appState.party.protagonist.skills) - setJobAccessory(appState.party.protagonist.accessory) - }, [appState]) + setJobSkills( + appState.party.protagonist.skills + ? appState.party.protagonist.skills + : { + 0: undefined, + 1: undefined, + 2: undefined, + 3: undefined, + } + ) + setJobAccessory( + appState.party.protagonist.accessory + ? appState.party.protagonist.accessory + : undefined + ) + }, []) // Initialize an array of current uncap values for each characters useEffect(() => { let initialPreviousUncapValues: { [key: number]: number } = {} - Object.values(appState.party.grid.characters).map((o) => { + const values = appState.party.grid.characters + ? appState.party.grid.characters + : {} + Object.values(values).map((o) => { o ? (initialPreviousUncapValues[o.position] = o.uncapLevel) : 0 }) setPreviousUncapValues(initialPreviousUncapValues) @@ -151,7 +172,11 @@ const CharacterGrid = (props: Props) => { function storeGridCharacter(data: any) { const gridCharacter = GridCharacterTransformer.toObject(data) - appState.party.grid.characters[gridCharacter.position] = gridCharacter + + appState.party.grid.characters = { + ...appState.party.grid.characters, + [gridCharacter.position]: gridCharacter, + } } async function resolveConflict() { @@ -169,7 +194,11 @@ const CharacterGrid = (props: Props) => { // Remove conflicting characters from state conflicts.forEach( - (c) => (appState.party.grid.characters[c.position] = null) + (c) => + (appState.party.grid.characters = { + ...appState.party.grid.characters, + [c.position]: null, + }) ) // Reset conflict @@ -191,7 +220,10 @@ const CharacterGrid = (props: Props) => { async function removeCharacter(id: string) { try { const response = await api.endpoints.grid_characters.destroy({ id: id }) - appState.party.grid.characters[response.data.position] = null + appState.party.grid.characters = { + ...appState.party.grid.characters, + [response.data.position]: null, + } } catch (error) { console.error(error) } @@ -383,10 +415,13 @@ const CharacterGrid = (props: Props) => { position: number, uncapLevel: number | undefined ) => { - const character = appState.party.grid.characters[position] + const character = appState.party.grid.characters?.[position] if (character && uncapLevel) { character.uncapLevel = uncapLevel - appState.party.grid.characters[position] = character + appState.party.grid.characters = { + ...appState.party.grid.characters, + [position]: character, + } } } @@ -394,7 +429,7 @@ const CharacterGrid = (props: Props) => { // Save the current value in case of an unexpected result let newPreviousValues = { ...previousUncapValues } - if (party.grid.characters[position]) { + if (party.grid.characters && party.grid.characters[position]) { newPreviousValues[position] = party.grid.characters[position]?.uncapLevel setPreviousUncapValues(newPreviousValues) } @@ -479,10 +514,13 @@ const CharacterGrid = (props: Props) => { position: number, stage: number | undefined ) => { - const character = appState.party.grid.characters[position] + const character = appState.party.grid.characters?.[position] if (character && stage !== undefined) { character.transcendenceStep = stage - appState.party.grid.characters[position] = character + appState.party.grid.characters = { + ...appState.party.grid.characters, + [position]: character, + } } } @@ -490,7 +528,7 @@ const CharacterGrid = (props: Props) => { // Save the current value in case of an unexpected result let newPreviousValues = { ...previousUncapValues } - if (party.grid.characters[position]) { + if (party.grid.characters && party.grid.characters[position]) { newPreviousValues[position] = party.grid.characters[position]?.uncapLevel setPreviousTranscendenceStages(newPreviousValues) } @@ -545,7 +583,9 @@ const CharacterGrid = (props: Props) => { return (
  • { + console.log('Setting up grid character') + console.log(gridCharacter) + + if (gridCharacter.mastery.overMastery) { + setRings(gridCharacter.mastery.overMastery) + } else { + setRings(emptyRingset) + } + if (gridCharacter.mastery.aetherialMastery) { setEarring({ modifier: gridCharacter.mastery.aetherialMastery.modifier, @@ -93,7 +109,11 @@ const CharacterModal = ({ } setAwakening(gridCharacter.mastery.awakening.type) - setAwakeningLevel(gridCharacter.mastery.awakening.level) + setAwakeningLevel( + gridCharacter.mastery.awakening.level + ? gridCharacter.mastery.awakening.level + : 1 + ) setPerpetuity(gridCharacter.mastery.perpetuity) }, [gridCharacter]) @@ -149,14 +169,6 @@ const CharacterModal = ({ } function ringsChanged() { - // Create an empty ExtendedMastery object - const emptyRingset: CharacterOverMastery = { - 1: { ...emptyExtendedMastery, modifier: 1 }, - 2: { ...emptyExtendedMastery, modifier: 2 }, - 3: emptyExtendedMastery, - 4: emptyExtendedMastery, - } - // Check if the current ringset is empty on the current GridCharacter and our local state const isEmptyRingset = gridCharacter.mastery.overMastery === undefined && @@ -259,7 +271,11 @@ const CharacterModal = ({ setRings(gridCharacter.mastery.overMastery || emptyExtendedMastery) setAwakening(gridCharacter.mastery.awakening.type) - setAwakeningLevel(gridCharacter.mastery.awakening.level) + setAwakeningLevel( + gridCharacter.mastery.awakening.level + ? gridCharacter.mastery.awakening.level + : 1 + ) setAlertOpen(false) setOpen(false) diff --git a/components/mastery/RingSelect/index.tsx b/components/mastery/RingSelect/index.tsx index 4fbdaf92..508db88e 100644 --- a/components/mastery/RingSelect/index.tsx +++ b/components/mastery/RingSelect/index.tsx @@ -19,11 +19,11 @@ const emptyRing: ExtendedMastery = { } interface Props { - gridCharacter: GridCharacter + rings: CharacterOverMastery sendValues: (overMastery: CharacterOverMastery) => void } -const RingSelect = ({ gridCharacter, sendValues }: Props) => { +const RingSelect = ({ rings: overMastery, sendValues }: Props) => { // Ring value states const [rings, setRings] = useState({ 1: { ...emptyRing, modifier: 1 }, @@ -33,15 +33,13 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => { }) useEffect(() => { - if (gridCharacter.mastery.overMastery) { - setRings({ - 1: gridCharacter.mastery.overMastery[1], - 2: gridCharacter.mastery.overMastery[2], - 3: gridCharacter.mastery.overMastery[3], - 4: gridCharacter.mastery.overMastery[4], - }) - } - }, [gridCharacter]) + setRings({ + 1: overMastery[1], + 2: overMastery[2], + 3: overMastery[3], + 4: overMastery[4], + }) + }, [overMastery]) useEffect(() => { sendValues(rings) @@ -80,6 +78,7 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => { function receiveRingValues(index: number, left: number, right: number) { // console.log(`Receiving values from ${index}: ${left} ${right}`) if (index == 1 || index == 2) { + console.log('1 or 2') setSyncedRingValues(index, right) } else if (index == 3 && left == 0) { setRings({ @@ -132,6 +131,7 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => { {[...Array(4)].map((e, i) => { const index = i + 1 const ringStat = rings[index] + console.log(ringStat) return ( { key={`ring-${index}`} dataSet={dataSet(index)} leftSelectDisabled={index === 1 || index === 2} - leftSelectValue={ringStat.modifier ? ringStat.modifier : 0} - rightSelectValue={ringStat.strength ? ringStat.strength : 0} + leftSelectValue={ringStat?.modifier ? ringStat?.modifier : 0} + rightSelectValue={ringStat?.strength ? ringStat?.strength : 0} sendValues={(left: number, right: number) => { receiveRingValues(index, left, right) }} diff --git a/transformers/GridCharacterTransformer.tsx b/transformers/GridCharacterTransformer.tsx index e2ebdba3..76d0e4b0 100644 --- a/transformers/GridCharacterTransformer.tsx +++ b/transformers/GridCharacterTransformer.tsx @@ -12,7 +12,18 @@ export function toObject(data: any): GridCharacter { mastery: { overMastery: data.over_mastery ? data.over_mastery - : [null, null, null, null], + : [ + { + modifier: 1, + strength: 0, + }, + { + modifier: 2, + strength: 0, + }, + null, + null, + ], aetherialMastery: data.aetherial_mastery ? data.aetherial_mastery : null, awakening: { type: Awakening.toObject(data.awakening.type), diff --git a/transformers/GridTransformer.tsx b/transformers/GridTransformer.tsx index d4a7cd09..b6201b0e 100644 --- a/transformers/GridTransformer.tsx +++ b/transformers/GridTransformer.tsx @@ -24,19 +24,19 @@ export function toObject(data: any): Grid { return { characters: data.characters - ? mapToGridArray(data.characters, GridCharacter.toObject) + ? mapToGridArrayWithTransformer(data.characters, GridCharacter.toObject) : null, summons: { mainSummon: mainSummon ? GridSummon.toObject(mainSummon) : null, friendSummon: friendSummon ? GridSummon.toObject(friendSummon) : null, allSummons: allSummons - ? mapToGridArray(allSummons, GridSummon.toObject) + ? mapToGridArrayWithTransformer(allSummons, GridSummon.toObject) : null, }, weapons: { mainWeapon: mainWeapon ? GridWeapon.toObject(mainWeapon) : null, allWeapons: data.weapons - ? mapToGridArray(data.weapons, GridWeapon.toObject) + ? mapToGridArrayWithTransformer(data.weapons, GridWeapon.toObject) : null, }, } @@ -53,7 +53,7 @@ function removeItem(arr: Array, values: T[]): Array { return arr } -function mapToGridArray( +export function mapToGridArrayWithTransformer( arr: any[], transformer: (data: any) => T ): GridArray { diff --git a/transformers/WeaponTransformer.tsx b/transformers/WeaponTransformer.tsx index 489218e8..f34a19c9 100644 --- a/transformers/WeaponTransformer.tsx +++ b/transformers/WeaponTransformer.tsx @@ -35,9 +35,9 @@ export function toObject(data: any): Weapon { }, ax: data.ax, axType: data.ax_type, - awakenings: data.awakenings.map((awakening: any) => - Awakening.toObject(awakening) - ), + awakenings: data.awakenings + ? data.awakenings.map((awakening: any) => Awakening.toObject(awakening)) + : null, maxAwakeningLevel: data.max_awakening_level, } } diff --git a/utils/mapToGridArray.tsx b/utils/mapToGridArray.tsx new file mode 100644 index 00000000..e7bde310 --- /dev/null +++ b/utils/mapToGridArray.tsx @@ -0,0 +1,6 @@ +export function mapToGridArray(arr: any[]): GridArray { + return arr.reduce( + (gridArray, item) => ({ ...gridArray, [item.position]: item }), + {} as GridArray + ) +}