Fix GridReps

src/components/GridRep/index.css

@@ -33,6 +33,8 @@
 }
 
 .GridRep .grid_weapon {
+    background: white;
+    border-radius: 4px;
     float: left;
     margin: 0 8px 8px 0;
     height: 40px;
@@ -43,9 +45,9 @@
     margin-right: 0;
 }
 
-.GridRep .weapon img[src*="jpg"] {
+.GridRep .grid_mainhand img[src*="jpg"],
+.GridRep .grid_weapon img[src*="jpg"] {
     border-radius: 4px;
-    height: 100%;
     width: 100%;
-}
-
+    height: 100%;
+}

src/components/GridRep/index.tsx

@@ -38,28 +38,39 @@ const GridRep = (props: Props) => {
         props.onClick(props.shortcode)
     }
 
+    function generateMainhandImage() {
+        return (mainhand)
+            ? <img src={
+                process.env.NODE_ENV === 'development'
+                    ? mainhandImages[mainhand?.granblue_id || 0]
+                    : `${process.env.SIERO_IMG_URL}/mainhand/${mainhand?.granblue_id}.jpg`
+            } />
+            : <img />
+    }
+
+    function generateGridImage(position: number) {
+        return (weapons[position])
+            ? <img src={
+                process.env.NODE_ENV === 'development'
+                    ? gridImages[weapons[position]?.granblue_id || 0]
+                    : `${process.env.SIERO_IMG_URL}/grid/${weapons[position]?.granblue_id}.jpg`
+            } />
+            : <img />
+    }
+
     return (
         <div className="GridRep" onClick={navigate}>
             <div className="weapon grid_mainhand">
-                <img src={
-                    process.env.NODE_ENV === 'development'
-                        ? mainhandImages[mainhand?.granblue_id || 0]
-                        : `${process.env.SIERO_IMG_URL}/mainhand/${mainhand?.granblue_id}.jpg`
-                } />
+                {generateMainhandImage()}
             </div>
 
             <ul className="grid_weapons">
                 {
                     Array.from(Array(numWeapons)).map((x, i) => {
-                        console.log()
                         return (
-                            <li className="weapon grid_weapon" key={`grid_unit_${i}`}>
-                                <img src={
-                                    process.env.NODE_ENV === 'development'
-                                        ? gridImages[weapons[i]?.granblue_id || 0]
-                                        : `${process.env.SIERO_IMG_URL}/grid/${weapons[i]?.granblue_id}.jpg`
-                                } />
-                            </li>
+                            <div className="grid_weapon">
+                                {generateGridImage(i)}
+                            </div>
                         )
                     })
                 }