granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Fix conflict modals
This commit is contained in:
Justin Edmund 2023-01-02 22:23:49 -08:00 committed by GitHub
commit 9e2b7f2dd7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 95 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
components/CharacterConflictModal/index.tsx
View file

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

77
components/WeaponConflictModal/index.tsx
View file

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

6
components/WeaponHovercard/index.tsx
View file

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

8
components/WeaponModal/index.tsx
View file

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

10
components/WeaponUnit/index.tsx
View file

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

3
types/Weapon.d.ts vendored
View file

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