From 942142f19a8e8f41e2f62ec8ead9df9ec53c48f5 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 19:17:52 -0800 Subject: [PATCH 1/2] Add perpetuity icon assets --- public/icons/perpetuity/empty.svg | 49 +++++++++++++++++++++++++++ public/icons/perpetuity/filled.svg | 53 ++++++++++++++++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 public/icons/perpetuity/empty.svg create mode 100644 public/icons/perpetuity/filled.svg diff --git a/public/icons/perpetuity/empty.svg b/public/icons/perpetuity/empty.svg new file mode 100644 index 00000000..47ec18e1 --- /dev/null +++ b/public/icons/perpetuity/empty.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/perpetuity/filled.svg b/public/icons/perpetuity/filled.svg new file mode 100644 index 00000000..d8df6ed8 --- /dev/null +++ b/public/icons/perpetuity/filled.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 4f7d18904f9a66682895686c765062e595574267 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 20:20:25 -0800 Subject: [PATCH 2/2] Add perpetuity control to CharacterUnit This involved moving the code to update a GridCharacter to the CharacterUnit from CharacterModal --- components/CharacterModal/index.tsx | 108 +++++++++++----------------- components/CharacterUnit/index.scss | 30 ++++++++ components/CharacterUnit/index.tsx | 54 +++++++++++++- types/index.d.ts | 22 ++++++ 4 files changed, 145 insertions(+), 69 deletions(-) diff --git a/components/CharacterModal/index.tsx b/components/CharacterModal/index.tsx index d2f31326..6605c6ee 100644 --- a/components/CharacterModal/index.tsx +++ b/components/CharacterModal/index.tsx @@ -41,28 +41,17 @@ import CrossIcon from '~public/icons/Cross.svg' import './index.scss' // Types -import { CharacterOverMastery, ExtendedMastery } from '~types' - -interface GridCharacterObject { - character: { - ring1: ExtendedMastery - ring2: ExtendedMastery - ring3: ExtendedMastery - ring4: ExtendedMastery - earring: ExtendedMastery - awakening: { - type?: number - level?: number - } - transcendence_step: number - perpetuity: boolean - } -} +import { + CharacterOverMastery, + ExtendedMastery, + GridCharacterObject, +} from '~types' interface Props { gridCharacter: GridCharacter open: boolean onOpenChange: (open: boolean) => void + updateCharacter: (object: GridCharacterObject) => Promise } const CharacterModal = ({ @@ -70,6 +59,7 @@ const CharacterModal = ({ children, open: modalOpen, onOpenChange, + updateCharacter, }: PropsWithChildren) => { const router = useRouter() const locale = @@ -133,42 +123,6 @@ const CharacterModal = ({ setPerpetuity(gridCharacter.perpetuity) }, [gridCharacter]) - // Methods: UI state management - function handleOpenChange(open: boolean) { - setOpen(open) - onOpenChange(open) - } - - // Methods: Receive data from components - function receiveRingValues(overMastery: CharacterOverMastery) { - setRings(overMastery) - } - - function receiveEarringValues( - earringModifier: number, - earringStrength: number - ) { - setEarring({ - modifier: earringModifier, - strength: earringStrength, - }) - } - - function handleCheckedChange(checked: boolean) { - setPerpetuity(checked) - } - - function receiveAwakeningValues(type: number, level: number) { - setAwakeningType(type) - setAwakeningLevel(level) - } - - function receiveValidity(isValid: boolean) { - setFormValid(isValid) - } - - // Methods: Data syncing - // Prepare the GridWeaponObject to send to the server function prepareObject() { let object: GridCharacterObject = { @@ -205,27 +159,45 @@ const CharacterModal = ({ return object } - // Send the GridWeaponObject to the server - async function updateCharacter() { - const updateObject = prepareObject() - - return await api.endpoints.grid_characters - .update(gridCharacter.id, updateObject) - .then((response) => processResult(response)) - .catch((error) => processError(error)) + // Methods: UI state management + function handleOpenChange(open: boolean) { + setOpen(open) + onOpenChange(open) } - // Save the server's response to state - function processResult(response: AxiosResponse) { - const gridCharacter: GridCharacter = response.data - appState.grid.characters[gridCharacter.position] = gridCharacter + // Methods: Receive data from components + function receiveRingValues(overMastery: CharacterOverMastery) { + setRings(overMastery) + } + + function receiveEarringValues( + earringModifier: number, + earringStrength: number + ) { + setEarring({ + modifier: earringModifier, + strength: earringStrength, + }) + } + + function handleCheckedChange(checked: boolean) { + setPerpetuity(checked) + } + + async function handleUpdateCharacter() { + await updateCharacter(prepareObject()) setOpen(false) if (onOpenChange) onOpenChange(false) } - function processError(error: any) { - console.error(error) + function receiveAwakeningValues(type: number, level: number) { + setAwakeningType(type) + setAwakeningLevel(level) + } + + function receiveValidity(isValid: boolean) { + setFormValid(isValid) } const ringSelect = () => { @@ -322,7 +294,7 @@ const CharacterModal = ({