diff --git a/components/summon/SummonUnit/index.scss b/components/summon/SummonUnit/index.scss index 2124ed0b..0ab90fad 100644 --- a/components/summon/SummonUnit/index.scss +++ b/components/summon/SummonUnit/index.scss @@ -112,4 +112,48 @@ opacity: 0; } } + + &:hover .QuickSummon.Empty { + opacity: 1; + } + + &.main .QuickSummon, + &.friend .QuickSummon { + $diameter: $unit-6x; + background-size: $diameter $diameter; + top: -2%; + right: 28%; + width: $diameter; + height: $diameter; + } + + &.grid .QuickSummon { + $diameter: $unit-5x; + background-size: $diameter $diameter; + top: -5%; + right: 22%; + width: $diameter; + height: $diameter; + } + + .QuickSummon { + position: absolute; + background-image: url('/icons/quick_summon/filled.svg'); + z-index: 20; + transition: $duration-zoom opacity ease-in-out; + + &:hover { + background-image: url('/icons/quick_summon/empty.svg'); + cursor: pointer; + } + + &.Empty { + background-image: url('/icons/quick_summon/empty.svg'); + opacity: 0; + + &:hover { + background-image: url('/icons/quick_summon/filled.svg'); + } + } + } } diff --git a/components/summon/SummonUnit/index.tsx b/components/summon/SummonUnit/index.tsx index 2359cce3..35bbe18d 100644 --- a/components/summon/SummonUnit/index.tsx +++ b/components/summon/SummonUnit/index.tsx @@ -1,8 +1,12 @@ import React, { MouseEvent, useEffect, useState } from 'react' import { useRouter } from 'next/router' import { Trans, useTranslation } from 'next-i18next' +import { AxiosResponse } from 'axios' import classNames from 'classnames' +import api from '~utils/api' +import { appState } from '~utils/appState' + import Alert from '~components/common/Alert' import Button from '~components/common/Button' import { @@ -93,6 +97,10 @@ const SummonUnit = ({ setContextMenuOpen(!contextMenuOpen) } + function handleQuickSummonClick() { + if (gridSummon) updateQuickSummon(!gridSummon.quick_summon) + } + // Methods: Handle open change function handleContextMenuOpenChange(open: boolean) { if (!open) setContextMenuOpen(false) @@ -103,6 +111,38 @@ const SummonUnit = ({ } // Methods: Mutate data + + // Send the GridSummonObject to the server + async function updateQuickSummon(value: boolean) { + if (gridSummon) + return await api + .updateQuickSummon({ id: gridSummon.id, value: value }) + .then((response) => processResult(response)) + .catch((error) => processError(error)) + } + + // Save the server's response to state + function processResult(response: AxiosResponse) { + // TODO: We will have to update multiple grid summons at once + // because there can only be one at once. + // If a user sets a quick summon while one is already set, + // the previous one will be unset. + const gridSummons: GridSummon[] = response.data.summons + for (const gridSummon of gridSummons) { + if (gridSummon.main) { + appState.grid.summons.mainSummon = gridSummon + } else if (gridSummon.friend) { + appState.grid.summons.friendSummon = gridSummon + } else { + appState.grid.summons.allSummons[gridSummon.position] = gridSummon + } + } + } + + function processError(error: any) { + console.error(error) + } + function passUncapData(uncap: number) { if (gridSummon) updateUncap(gridSummon.id, position, uncap) } @@ -230,6 +270,17 @@ const SummonUnit = ({ } // Methods: Core element rendering + const quickSummon = () => { + if (gridSummon) { + const classes = classNames({ + QuickSummon: true, + Empty: !gridSummon.quick_summon, + }) + + return + } + } + const image = () => { let image = (
{contextMenu()} + {quickSummon()} {image()} {gridSummon ? (