Add text and uncap stars to grid

assets/new.svg

@@ -1,3 +1,3 @@
 <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 11C5 11.5523 5.44772 12 6 12C6.55228 12 7 11.5523 7 11V7.00006H11C11.5523 7.00006 12 6.55235 12 6.00006C12 5.44778 11.5523 5.00006 11 5.00006H7V1C7 0.447715 6.55228 0 6 0C5.44771 0 5 0.447715 5 1V5.00006H1C0.447715 5.00006 0 5.44778 0 6.00006C0 6.55235 0.447715 7.00006 1 7.00006H5V11Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 11C5 11.5523 5.44772 12 6 12C6.55228 12 7 11.5523 7 11V7.00006H11C11.5523 7.00006 12 6.55235 12 6.00006C12 5.44778 11.5523 5.00006 11 5.00006H7V1C7 0.447715 6.55228 0 6 0C5.44771 0 5 0.447715 5 1V5.00006H1C0.447715 5.00006 0 5.44778 0 6.00006C0 6.55235 0.447715 7.00006 1 7.00006H5V11Z" />
 </svg>

assets/star.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.04894 0.927052C6.3483 0.00574152 7.6517 0.00574078 7.95106 0.927051L8.79611 3.52786C8.92999 3.93989 9.31394 4.21885 9.74717 4.21885H12.4818C13.4505 4.21885 13.8533 5.45846 13.0696 6.02786L10.8572 7.63525C10.5067 7.8899 10.3601 8.34127 10.494 8.75329L11.339 11.3541C11.6384 12.2754 10.5839 13.0415 9.80017 12.4721L7.58779 10.8647C7.2373 10.6101 6.7627 10.6101 6.41221 10.8647L4.19983 12.4721C3.41612 13.0415 2.36164 12.2754 2.66099 11.3541L3.50604 8.75329C3.63992 8.34127 3.49326 7.8899 3.14277 7.63525L0.930391 6.02787C0.146678 5.45846 0.549452 4.21885 1.51818 4.21885H4.25283C4.68606 4.21885 5.07001 3.93989 5.20389 3.52786L6.04894 0.927052Z" />
+</svg>

src/components/UncapIndicator/UncapIndicator.css

@@ -0,0 +1,10 @@
+.UncapIndicator {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: center;
+    gap: 2px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}

src/components/UncapIndicator/UncapIndicator.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import classnames from 'classnames'
+import UncapStar from '~components/UncapStar/UncapStar'
+
+import './UncapIndicator.css'
+
+
+interface Props {
+    uncapLevel: number
+    flb: boolean
+    ulb: boolean
+}
+
+const UncapIndicator = (props: Props) => {
+    let numStars
+    if (props.ulb) {
+        numStars = 5
+    } else if (props.flb) {
+        numStars = 4
+    } else {
+        numStars = 3
+    }
+
+    return (
+        <ul className="UncapIndicator">
+            {
+                Array.from(Array(numStars)).map((x, i) => {
+                    if (i > 2) {
+                        return <UncapStar uncap={true} key={`star_${i}`} />
+                    } else {
+                        return <UncapStar uncap={false} key={`star_${i}`} />
+                    }
+                })
+            }
+        </ul>
+    )
+}
+
+export default UncapIndicator

src/components/UncapStar/UncapStar.css

@@ -0,0 +1,7 @@
+.UncapStar {
+    color: #FFA15E;
+}
+
+.UncapStar.uncap {
+    color: #65DAFF;
+}

src/components/UncapStar/UncapStar.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import './UncapStar.css'
+
+import Star from '../../../assets/star'
+
+interface Props {
+    uncap: boolean
+}
+
+const UncapStar = (props: Props) => {
+    const classes = classnames({
+        UncapStar: true,
+        'uncap': props.uncap
+    })
+
+    return (
+        <li className={classes}><Star /></li>
+    )
+}
+
+export default UncapStar

src/components/WeaponGrid/WeaponGrid.css

@@ -14,7 +14,7 @@
 }
 
 #grid_weapons > * {
-    margin-bottom: 72px;
+    margin-bottom: 24px;
     margin-right: 24px;
 
 }

src/components/WeaponGridMainhand/WeaponGridMainhand.css

@@ -1,31 +1,47 @@
 .WeaponGridMainhand {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 14px;
+    margin-right: 24px;
+    max-width: 200px;
+}
+
+.WeaponGridMainhand .WeaponGridImage {
+    display: flex;
     align-items: center;
+    justify-content: center;
+
     background: white;
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: 8px;
-    display: flex;
     height: 420px;
-    justify-content: center;
-    margin-right: 24px;
     overflow: hidden;
     transition: all 0.18s ease-in-out;
     width: 200px;
 }
 
-.WeaponGridMainhand.editable:hover {
+.editable .WeaponGridMainhand:hover {
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
     cursor: pointer;
     transform: scale(1.05, 1.05);
 }
 
+.WeaponGridMainhand h3 {
+    color: #333;
+    font-weight: 500;
+    margin: 0;
+    text-align: center;
+}
+
 .WeaponGridMainhand img {
     position: relative;
     width: 100%;
     z-index: 2;
 }
 
-.WeaponGridMainhand .icon {
+.WeaponGridImage .icon {
     position: absolute;
     color: #c9c9c9;
     height: 20px;
@@ -33,6 +49,6 @@
     z-index: 1;
 }
 
-.WeaponGridMainhand:hover .icon {
+.WeaponGridImage:hover .icon {
     color: #555;
 }

src/components/WeaponGridMainhand/WeaponGridMainhand.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
-import SearchModal from '~components/SearchModal/SearchModal'
 import { useModal as useModal } from '~utils/useModal'
 
+import SearchModal from '~components/SearchModal/SearchModal'
+import UncapIndicator from '~components/UncapIndicator/UncapIndicator'
+
 import mainhandImages from '../../images/mainhand/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
@@ -33,11 +35,21 @@ function WeaponGridMainhand(props: WeaponGridProps) {
         'editable': props.editable
     })
 
+    const weapon = props.weapon
+
     return (
         <div>
             <div className={classes} onClick={openModalIfEditable}>
-                <img className="grid_image" src={imgSrc} />
-                { (props.editable) ? <span className='icon'><Plus /></span> : '' }
+                <div className="WeaponGridImage">
+                    <img className="grid_image" src={imgSrc} />
+                    { (props.editable) ? <span className='icon'><Plus /></span> : '' }
+                </div>
+                <UncapIndicator 
+                    ulb={weapon?.uncap.ulb || false} 
+                    flb={weapon?.uncap.flb || false }
+                    uncapLevel={3}
+                />
+                <h3 className="WeaponName">{weapon?.name.en}</h3>
             </div>
             {open ? (
                 <SearchModal 

src/components/WeaponGridUnit/WeaponGridUnit.css

@@ -1,4 +1,12 @@
 .WeaponGridUnit {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 14px;
+    max-width: 160px;
+}
+
+.WeaponGridUnit .WeaponGridImage {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -13,20 +21,27 @@
     width: 160px;
 }
 
-.WeaponGridUnit.editable:hover {
+.editable .WeaponGridImage:hover {
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
     cursor: pointer;
     transform: scale(1.1, 1.1);
 }
 
+.WeaponGridUnit h3 {
+    color: #333;
+    font-weight: 500;
+    margin: 0;
+    text-align: center;
+}
+
 .WeaponGridUnit img {
     position: relative;
     width: 100%;
     z-index: 2;
 }
 
-.WeaponGridUnit .icon {
+.WeaponGridImage .icon {
     position: absolute;
     color: #c9c9c9;
     height: 20px;
@@ -34,6 +49,6 @@
     z-index: 1;
 }
 
-.WeaponGridUnit:hover .icon {
+.WeaponGridImage:hover .icon {
     color: #555;
 }

src/components/WeaponGridUnit/WeaponGridUnit.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import classnames from 'classnames'
-import SearchModal from '~components/SearchModal/SearchModal'
 import { useModal as useModal } from '~utils/useModal'
 
+import SearchModal from '~components/SearchModal/SearchModal'
+import UncapIndicator from '~components/UncapIndicator/UncapIndicator'
+
 import gridImages from '../../images/grid/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
@@ -15,6 +17,7 @@ function WeaponGridUnit(props: WeaponGridProps) {
     if (props.weapon) {
         const weapon = props.weapon!
 
+        // Generate the correct source for the weapon
         if (process.env.NODE_ENV === 'development') {
             imgSrc = gridImages[weapon.granblue_id]
         } else if (process.env.NODE_ENV === 'production') {
@@ -29,11 +32,21 @@ function WeaponGridUnit(props: WeaponGridProps) {
         'editable': props.editable
     })
 
+    const weapon = props.weapon
+
     return (
         <li>
             <div className={classes} onClick={openModalIfEditable}>
-                <img className="grid_image" src={imgSrc} />
-                { (props.editable) ? <span className='icon'><Plus /></span> : '' }
+                <div className="WeaponGridImage">
+                    <img className="grid_image" src={imgSrc} />
+                    { (props.editable) ? <span className='icon'><Plus /></span> : '' }
+                </div>
+                <UncapIndicator 
+                    ulb={weapon?.uncap.ulb || false} 
+                    flb={weapon?.uncap.flb || false}
+                    uncapLevel={3}
+                />
+                <h3 className="WeaponName">{weapon?.name.en}</h3>
             </div>
             {open ? (
                 <SearchModal