GridRep adjustments

* Properly unset mainhand when cells get reused and the new team doesnt have one
* Slightly better styling to make the grid more correct
This commit is contained in:
Justin Edmund 2023-03-21 06:23:46 -07:00
parent 7b633a6c25
commit d623431386
2 changed files with 14 additions and 4 deletions

View file

@ -35,9 +35,9 @@
} }
& > .Grid { & > .Grid {
aspect-ratio: 2/1; aspect-ratio: 2/0.95;
display: grid; display: grid;
grid-template-columns: 1fr 3fr; /* left column takes up 1 fraction, right column takes up 3 fractions */ grid-template-columns: 1fr 3.36fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
grid-gap: $unit; /* add a gap of 8px between grid items */ grid-gap: $unit; /* add a gap of 8px between grid items */
.Weapon { .Weapon {
@ -49,6 +49,7 @@
aspect-ratio: 73/153; aspect-ratio: 73/153;
display: grid; display: grid;
grid-column: 1 / 2; /* spans one column */ grid-column: 1 / 2; /* spans one column */
max-height: 140px;
} }
.GridWeapons { .GridWeapons {
@ -62,6 +63,8 @@
1fr 1fr
); /* create 3 rows, each taking up 1 fraction */ ); /* create 3 rows, each taking up 1 fraction */
gap: $unit; gap: $unit;
// column-gap: $unit;
// row-gap: $unit-2x;
} }
.Grid.Weapon { .Grid.Weapon {

View file

@ -62,14 +62,21 @@ const GridRep = (props: Props) => {
const newWeapons = Array(numWeapons) const newWeapons = Array(numWeapons)
const gridWeapons = Array(numWeapons) const gridWeapons = Array(numWeapons)
let foundMainhand = false
for (const [key, value] of Object.entries(props.grid)) { for (const [key, value] of Object.entries(props.grid)) {
if (value.position == -1) setMainhand(value.object) if (value.position == -1) {
else if (!value.mainhand && value.position != null) { setMainhand(value.object)
foundMainhand = true
} else if (!value.mainhand && value.position != null) {
newWeapons[value.position] = value.object newWeapons[value.position] = value.object
gridWeapons[value.position] = value gridWeapons[value.position] = value
} }
} }
if (!foundMainhand) {
setMainhand(undefined)
}
setWeapons(newWeapons) setWeapons(newWeapons)
setGrid(gridWeapons) setGrid(gridWeapons)
}, [props.grid]) }, [props.grid])