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 = (