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

Fix RingSelect styles and functionality

Browse source 
* Updates styles for CSS modules
* Updates for normalized 1-index object
* Properly falls back to 0 value if value is not set
This commit is contained in:
Justin Edmund 2023-07-02 16:21:14 -07:00
parent 1aec85fb3e
commit 38bd603e16
2 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/mastery/RingSelect/index.module.scss
View file

@ -1,4 +1,4 @@
.Rings { .rings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit; gap: $unit;

38
components/mastery/RingSelect/index.tsx
View file

@ -35,10 +35,10 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => {
useEffect(() => { useEffect(() => {
if (gridCharacter.over_mastery) { if (gridCharacter.over_mastery) {
setRings({ setRings({
1: gridCharacter.over_mastery[0], 1: gridCharacter.over_mastery[1],
2: gridCharacter.over_mastery[1], 2: gridCharacter.over_mastery[2],
3: gridCharacter.over_mastery[2], 3: gridCharacter.over_mastery[3],
4: gridCharacter.over_mastery[3], 4: gridCharacter.over_mastery[4],
}) })
} }
}, [gridCharacter]) }, [gridCharacter])
@ -78,7 +78,7 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => {
} }
function receiveRingValues(index: number, left: number, right: number) { function receiveRingValues(index: number, left: number, right: number) {
console.log(`Receiving values from ${index}: ${left} ${right}`) // console.log(`Receiving values from ${index}: ${left} ${right}`)
if (index == 1 || index == 2) { if (index == 1 || index == 2) {
setSyncedRingValues(index, right) setSyncedRingValues(index, right)
} else if (index == 3 && left == 0) { } else if (index == 3 && left == 0) {
@ -105,41 +105,45 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => {
} }
function setSyncedRingValues(index: 1 | 2, value: number) { function setSyncedRingValues(index: 1 | 2, value: number) {
console.log(`Setting synced value for ${index} with value ${value}`) // console.log(`Setting synced value for ${index} with value ${value}`)
const atkValues = (dataSet(1)[0] as ItemSkill).values ?? [] const atkValues = (dataSet(1)[0] as ItemSkill).values ?? []
const hpValues = (dataSet(2)[0] as ItemSkill).values ?? [] const hpValues = (dataSet(2)[0] as ItemSkill).values ?? []
let found = index === 1 ? atkValues.indexOf(value) : hpValues.indexOf(value) const found =
index === 1 ? atkValues.indexOf(value) : hpValues.indexOf(value)
const atkValue = atkValues[found] ?? 0
const hpValue = hpValues[found] ?? 0
setRings({ setRings({
...rings, ...rings,
1: { 1: {
modifier: 1, modifier: 1,
strength: atkValues[found], strength: atkValue,
}, },
2: { 2: {
modifier: 2, modifier: 2,
strength: hpValues[found], strength: hpValue,
}, },
}) })
} }
return ( return (
<div className="Rings"> <div className={styles.rings}>
{[...Array(4)].map((e, i) => { {[...Array(4)].map((e, i) => {
const ringIndex = i + 1 const index = i + 1
const ringStat = rings[ringIndex] const ringStat = rings[index]
return ( return (
<ExtendedMasterySelect <ExtendedMasterySelect
name={`ring-${ringIndex}`} name={`ring-${index}`}
object="ring" object="ring"
key={`ring-${ringIndex}`} key={`ring-${index}`}
dataSet={dataSet(ringIndex)} dataSet={dataSet(index)}
leftSelectDisabled={i === 0 || i === 1} leftSelectDisabled={index === 1 || index === 2}
leftSelectValue={ringStat.modifier ? ringStat.modifier : 0} leftSelectValue={ringStat.modifier ? ringStat.modifier : 0}
rightSelectValue={ringStat.strength ? ringStat.strength : 0} rightSelectValue={ringStat.strength ? ringStat.strength : 0}
sendValues={(left: number, right: number) => { sendValues={(left: number, right: number) => {
receiveRingValues(ringIndex, left, right) receiveRingValues(index, left, right)
}} }}
/> />
) )