Add WeaponConflictModal and hook up to WeaponGrid

components/WeaponConflictModal/index.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { Trans, useTranslation } from 'react-i18next'
+
+import * as Dialog from '@radix-ui/react-dialog'
+import Button from '~components/Button'
+
+import mapWeaponSeries from '~utils/mapWeaponSeries'
+
+import './index.scss'
+
+interface Props {
+  open: boolean
+  incomingWeapon: Weapon
+  conflictingWeapons: GridWeapon[]
+  desiredPosition: number
+  resolveConflict: () => void
+  resetConflict: () => void
+}
+
+const WeaponConflictModal = (props: Props) => {
+  // Localization
+  const router = useRouter()
+  const { t } = useTranslation('common')
+  const locale =
+    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+
+  // States
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    setOpen(props.open)
+  }, [setOpen, props.open])
+
+  function imageUrl(weapon?: Weapon) {
+    return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-square/${weapon?.granblue_id}.jpg`
+  }
+
+  function openChange(open: boolean) {
+    setOpen(open)
+    props.resetConflict()
+  }
+
+  function close() {
+    setOpen(false)
+  }
+
+  const infoString = () => {
+    const series = props.incomingWeapon.series
+    const seriesSlug = t(`series.${mapWeaponSeries(series)}`)
+
+    return [2, 3].includes(series) ? (
+      <Trans i18nKey="modals.conflict.weapon.opus-draconic"></Trans>
+    ) : (
+      <Trans i18nKey="modals.conflict.weapon.generic">
+        Only one weapon from the
+        <strong>{{ series: seriesSlug }} Series</strong> can be included in each
+        party. Do you want to change your weapons?
+      </Trans>
+    )
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={openChange}>
+      <Dialog.Portal>
+        <Dialog.Content
+          className="Conflict Dialog"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <p>{infoString()}</p>
+          <div className="WeaponDiagram Diagram">
+            <ul>
+              {props.conflictingWeapons?.map((weapon, i) => (
+                <li className="weapon" key={`conflict-${i}`}>
+                  <img
+                    alt={weapon.object.name[locale]}
+                    src={imageUrl(weapon.object)}
+                  />
+                  <span>{weapon.object.name[locale]}</span>
+                </li>
+              ))}
+            </ul>
+            <span className="arrow">&rarr;</span>
+            <div className="wrapper">
+              <div className="weapon">
+                <img
+                  alt={props.incomingWeapon?.name[locale]}
+                  src={imageUrl(props.incomingWeapon)}
+                />
+                {props.incomingWeapon?.name[locale]}
+              </div>
+            </div>
+          </div>
+          <footer>
+            <Button onClick={close} text={t('buttons.cancel')} />
+            <Button
+              onClick={props.resolveConflict}
+              text={t('modals.conflict.buttons.confirm')}
+            />
+          </footer>
+        </Dialog.Content>
+        <Dialog.Overlay className="Overlay" />
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+export default WeaponConflictModal

components/WeaponGrid/index.tsx

@@ -15,6 +15,7 @@ import { appState } from '~utils/appState'
 import type { SearchableObject } from '~types'
 
 import './index.scss'
+import WeaponConflictModal from '~components/WeaponConflictModal'
 
 // Props
 interface Props {
@@ -40,6 +41,12 @@ const WeaponGrid = (props: Props) => {
   // Set up state for view management
   const { party, grid } = useSnapshot(appState)
   const [slug, setSlug] = useState()
+  const [modalOpen, setModalOpen] = useState(false)
+
+  // Set up state for conflict management
+  const [incoming, setIncoming] = useState<Weapon>()
+  const [conflicts, setConflicts] = useState<GridWeapon[]>([])
+  const [position, setPosition] = useState(0)
 
   // Create a temporary state to store previous weapon uncap values
   const [previousUncapValues, setPreviousUncapValues] = useState<{
@@ -90,9 +97,33 @@ const WeaponGrid = (props: Props) => {
         )
       })
     } else {
-      saveWeapon(party.id, weapon, position).then((response) =>
+      if (party.editable)
-        storeGridWeapon(response.data)
+        saveWeapon(party.id, weapon, position)
-      )
+          .then((response) => handleWeaponResponse(response.data))
+          .catch((error) => console.error(error))
+    }
+  }
+
+  async function handleWeaponResponse(data: any) {
+    if (data.hasOwnProperty('conflicts')) {
+      if (data.incoming) setIncoming(data.incoming)
+      if (data.conflicts) setConflicts(data.conflicts)
+      if (data.position) setPosition(data.position)
+      setModalOpen(true)
+    } else {
+      storeGridWeapon(data.grid_weapon)
+
+      // If we replaced an existing weapon, remove it from the grid
+      if (data.hasOwnProperty('meta') && data.meta['replaced'] !== undefined) {
+        const position = data.meta['replaced']
+
+        if (position == -1) {
+          appState.grid.weapons.mainWeapon = undefined
+          appState.party.element = 0
+        } else {
+          appState.grid.weapons.allWeapons[position] = undefined
+        }
+      }
     }
   }
 
@@ -125,6 +156,44 @@ const WeaponGrid = (props: Props) => {
     }
   }
 
+  async function resolveConflict() {
+    if (incoming && conflicts.length > 0) {
+      await api
+        .resolveConflict({
+          object: 'weapons',
+          incoming: incoming.id,
+          conflicting: conflicts.map((c) => c.id),
+          position: position,
+        })
+        .then((response) => {
+          // Store new character in state
+          storeGridWeapon(response.data)
+
+          // Remove conflicting characters from state
+          conflicts.forEach((c) => {
+            if (appState.grid.weapons.mainWeapon?.object.id === c.id) {
+              appState.grid.weapons.mainWeapon = undefined
+              appState.party.element = 0
+            } else {
+              appState.grid.weapons.allWeapons[c.position] = undefined
+            }
+          })
+
+          // Reset conflict
+          resetConflict()
+
+          // Close modal
+          setModalOpen(false)
+        })
+    }
+  }
+
+  function resetConflict() {
+    setPosition(-1)
+    setConflicts([])
+    setIncoming(undefined)
+  }
+
   // Methods: Updating uncap level
   // Note: Saves, but debouncing is not working properly
   async function saveUncap(id: string, position: number, uncapLevel: number) {
@@ -242,8 +311,24 @@ const WeaponGrid = (props: Props) => {
     />
   )
 
+  const conflictModal = () => {
+    return incoming && conflicts ? (
+      <WeaponConflictModal
+        open={modalOpen}
+        incomingWeapon={incoming}
+        conflictingWeapons={conflicts}
+        desiredPosition={position}
+        resolveConflict={resolveConflict}
+        resetConflict={resetConflict}
+      />
+    ) : (
+      ''
+    )
+  }
+
   return (
     <div id="WeaponGrid">
+      {conflicts ? conflictModal() : ''}
       <div id="MainGrid">
         {mainhandElement}
         <ul className="grid_weapons">{weaponGridElement}</ul>