Merge pull request #120 from jedmund/fix-conflict-modal

Fix conflict modals

components/CharacterConflictModal/index.tsx

@@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { Trans, useTranslation } from 'next-i18next'
 
-import * as Dialog from '@radix-ui/react-dialog'
+import { Dialog, DialogContent } from '~components/Dialog'
+import Button from '~components/Button'
+import Overlay from '~components/Overlay'
 
 import { appState } from '~utils/appState'
 
-import Button from '~components/Button'
-
 import './index.scss'
 
 interface Props {
@@ -65,52 +65,52 @@ const CharacterConflictModal = (props: Props) => {
 
   function close() {
     setOpen(false)
+    props.resetConflict()
   }
 
   return (
-    <Dialog.Root open={open} onOpenChange={openChange}>
-      <Dialog.Portal>
-        <Dialog.Content
-          className="Conflict Dialog"
-          onOpenAutoFocus={(event) => event.preventDefault()}
-        >
-          <p>
-            <Trans i18nKey="modals.conflict.character"></Trans>
-          </p>
-          <div className="CharacterDiagram Diagram">
-            <ul>
-              {props.conflictingCharacters?.map((character, i) => (
-                <li className="character" key={`conflict-${i}`}>
-                  <img
-                    alt={character.object.name[locale]}
-                    src={imageUrl(character.object, character.uncap_level)}
-                  />
-                  <span>{character.object.name[locale]}</span>
-                </li>
-              ))}
-            </ul>
-            <span className="arrow">&rarr;</span>
-            <div className="wrapper">
-              <div className="character">
+    <Dialog open={open} onOpenChange={openChange}>
+      <DialogContent
+        className="Conflict Dialog"
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        onEscapeKeyDown={close}
+      >
+        <p>
+          <Trans i18nKey="modals.conflict.character"></Trans>
+        </p>
+        <div className="CharacterDiagram Diagram">
+          <ul>
+            {props.conflictingCharacters?.map((character, i) => (
+              <li className="character" key={`conflict-${i}`}>
                 <img
-                  alt={props.incomingCharacter?.name[locale]}
-                  src={imageUrl(props.incomingCharacter)}
+                  alt={character.object.name[locale]}
+                  src={imageUrl(character.object, character.uncap_level)}
                 />
-                <span>{props.incomingCharacter?.name[locale]}</span>
-              </div>
+                <span>{character.object.name[locale]}</span>
+              </li>
+            ))}
+          </ul>
+          <span className="arrow">&rarr;</span>
+          <div className="wrapper">
+            <div className="character">
+              <img
+                alt={props.incomingCharacter?.name[locale]}
+                src={imageUrl(props.incomingCharacter)}
+              />
+              <span>{props.incomingCharacter?.name[locale]}</span>
             </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>
+        </div>
+        <footer>
+          <Button onClick={close} text={t('buttons.cancel')} />
+          <Button
+            onClick={props.resolveConflict}
+            text={t('modals.conflict.buttons.confirm')}
+          />
+        </footer>
+      </DialogContent>
+      <Overlay open={open} visible={true} />
+    </Dialog>
   )
 }
 

components/WeaponConflictModal/index.tsx

@@ -2,8 +2,9 @@ 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 { Dialog, DialogContent } from '~components/Dialog'
 import Button from '~components/Button'
+import Overlay from '~components/Overlay'
 
 import mapWeaponSeries from '~utils/mapWeaponSeries'
 
@@ -43,6 +44,7 @@ const WeaponConflictModal = (props: Props) => {
 
   function close() {
     setOpen(false)
+    props.resetConflict()
   }
 
   const infoString = () => {
@@ -61,47 +63,46 @@ const WeaponConflictModal = (props: Props) => {
   }
 
   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">
+    <Dialog open={open} onOpenChange={openChange}>
+      <DialogContent
+        className="Conflict Dialog"
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        onEscapeKeyDown={close}
+      >
+        <p>{infoString()}</p>
+        <div className="WeaponDiagram Diagram">
+          <ul>
+            {props.conflictingWeapons?.map((weapon, i) => (
+              <li className="weapon" key={`conflict-${i}`}>
                 <img
-                  alt={props.incomingWeapon?.name[locale]}
-                  src={imageUrl(props.incomingWeapon)}
+                  alt={weapon.object.name[locale]}
+                  src={imageUrl(weapon.object)}
                 />
-                {props.incomingWeapon?.name[locale]}
-              </div>
+                <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>
-          <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>
+        </div>
+        <footer>
+          <Button onClick={close} text={t('buttons.cancel')} />
+          <Button
+            onClick={props.resolveConflict}
+            text={t('modals.conflict.buttons.confirm')}
+          />
+        </footer>
+      </DialogContent>
+      <Overlay open={open} visible={true} />
+    </Dialog>
   )
 }
 

components/WeaponHovercard/index.tsx

@@ -80,7 +80,7 @@ const WeaponHovercard = (props: Props) => {
   }
 
   const createPrimaryAxSkillString = () => {
-    const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]
+    const primaryAxSkills = axData[props.gridWeapon.object.ax_type - 1]
 
     if (props.gridWeapon.ax) {
       const simpleAxSkill = props.gridWeapon.ax[0]
@@ -97,7 +97,7 @@ const WeaponHovercard = (props: Props) => {
   }
 
   const createSecondaryAxSkillString = () => {
-    const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]
+    const primaryAxSkills = axData[props.gridWeapon.object.ax_type - 1]
 
     if (props.gridWeapon.ax) {
       const primarySimpleAxSkill = props.gridWeapon.ax[0]
@@ -230,7 +230,7 @@ const WeaponHovercard = (props: Props) => {
             </div>
           </div>
 
-          {props.gridWeapon.object.ax > 0 &&
+          {props.gridWeapon.object.ax &&
           props.gridWeapon.ax &&
           props.gridWeapon.ax[0].modifier &&
           props.gridWeapon.ax[0].strength

components/WeaponModal/index.tsx

@@ -148,7 +148,7 @@ const WeaponModal = (props: Props) => {
     if (props.gridWeapon.object.series == 17 && weaponKey3Id)
       object.weapon.weapon_key3_id = weaponKey3Id
 
-    if (props.gridWeapon.object.ax > 0) {
+    if (props.gridWeapon.object.ax && props.gridWeapon.object.ax_type > 0) {
       object.weapon.ax_modifier1 = primaryAxModifier
       object.weapon.ax_modifier2 = secondaryAxModifier
       object.weapon.ax_strength1 = primaryAxValue
@@ -287,7 +287,7 @@ const WeaponModal = (props: Props) => {
       <section>
         <h3>{t('modals.weapon.subtitles.ax_skills')}</h3>
         <AXSelect
-          axType={props.gridWeapon.object.ax}
+          axType={props.gridWeapon.object.ax_type}
           currentSkills={props.gridWeapon.ax}
           onOpenChange={receiveAxOpen}
           sendValidity={receiveValidity}
@@ -314,7 +314,7 @@ const WeaponModal = (props: Props) => {
   }
 
   function openChange(open: boolean) {
-    if (props.gridWeapon.object.ax > 0 || props.gridWeapon.object.awakening) {
+    if (props.gridWeapon.object.ax || props.gridWeapon.object.awakening) {
       setFormValid(false)
     } else {
       setFormValid(true)
@@ -369,7 +369,7 @@ const WeaponModal = (props: Props) => {
           {[2, 3, 17, 24].includes(props.gridWeapon.object.series)
             ? keySelect()
             : ''}
-          {props.gridWeapon.object.ax > 0 ? axSelect() : ''}
+          {props.gridWeapon.object.ax ? axSelect() : ''}
           {props.gridWeapon.awakening ? awakeningSelect() : ''}
           <Button
             contained={true}

components/WeaponUnit/index.tsx

@@ -290,7 +290,7 @@ const WeaponUnit = (props: Props) => {
     if (
       props.gridWeapon &&
       props.gridWeapon.object.ax &&
-      props.gridWeapon.object.ax > 0 &&
+      props.gridWeapon.object.ax_type > 0 &&
       props.gridWeapon.ax &&
       axSkill
     ) {
@@ -310,7 +310,7 @@ const WeaponUnit = (props: Props) => {
     let images: JSX.Element[] = []
     if (
       props.gridWeapon &&
-      props.gridWeapon.object.ax > 0 &&
+      props.gridWeapon.object.ax &&
       props.gridWeapon.ax &&
       props.gridWeapon.ax.length > 0
     ) {
@@ -327,10 +327,10 @@ const WeaponUnit = (props: Props) => {
     if (
       props.gridWeapon &&
       props.gridWeapon.object.ax &&
-      props.gridWeapon.object.ax > 0 &&
+      props.gridWeapon.object.ax_type > 0 &&
       props.gridWeapon.ax
     ) {
-      const axOptions = axData[props.gridWeapon.object.ax - 1]
+      const axOptions = axData[props.gridWeapon.object.ax_type - 1]
       const weaponAxSkill: SimpleAxSkill = props.gridWeapon.ax[0]
 
       let axSkill = axOptions.find((ax) => ax.id === weaponAxSkill.modifier)
@@ -355,7 +355,7 @@ const WeaponUnit = (props: Props) => {
     const weapon = gridWeapon.object
 
     return (
-      weapon.ax > 0 ||
+      weapon.ax ||
       weapon.awakening ||
       (weapon.series && [2, 3, 17, 22, 24].includes(weapon.series))
     )

types/Weapon.d.ts

@@ -8,7 +8,8 @@ interface Weapon {
   max_level: number
   max_skill_level: number
   series: number
-  ax: number
+  ax: boolean
+  ax_type: number
   awakening: boolean
   name: {
     [key: string]: string