Allow user to set uncap level

doesn't save to server yet

components/UncapIndicator/index.tsx

@@ -15,6 +15,8 @@ interface Props {
 const UncapIndicator = (props: Props) => {
     let numStars
 
+    const [uncap, setUncap] = useState(props.uncapLevel)
+
     if (props.type === 'character') {
         if (props.flb) {
             numStars = 5
@@ -31,18 +33,25 @@ const UncapIndicator = (props: Props) => {
         }
     }
 
+    function toggleStar(index: number, empty: boolean) {
+        if (empty)
+            setUncap(index + 1)
+        else
+            setUncap(index)
+    }
+
     return (
         <ul className="UncapIndicator">
             {
                 Array.from(Array(numStars)).map((x, i) => {
                     if (props.type === 'character' && i > 4) {
-                        return <UncapStar ulb={true} key={`star_${i}`} />
+                        return <UncapStar ulb={true} empty={i >= uncap} key={`star_${i}`} index={i} onClick={toggleStar} />
                     } else if (
                         props.type === 'character' && i == 4 ||
                         props.type !== 'character' && i > 2) {
-                        return <UncapStar flb={true} key={`star_${i}`} />
+                        return <UncapStar flb={true} empty={i >= uncap} key={`star_${i}`} index={i} onClick={toggleStar} />
                     } else {
-                        return <UncapStar key={`star_${i}`} />
+                        return <UncapStar empty={i >= uncap} key={`star_${i}`} index={i} onClick={toggleStar} />
                     }
                 })
             }

components/UncapStar/index.scss

@@ -9,7 +9,11 @@
         transform: scale(1.2);
     }
 
-    &.empty {
+    &.empty,
+    &.empty.mlb,
+    &.empty.flb,
+    &.empty.ulb,
+    &.empty.special {
         background: url('/icons/uncap/empty.svg');
     }
 

components/UncapStar/index.tsx

@@ -4,14 +4,18 @@ import classnames from 'classnames'
 import './index.scss'
 
 interface Props {
+    empty: boolean
     special: boolean
     flb: boolean
     ulb: boolean
+    index: number
+    onClick: (index: number, empty: boolean) => void
 }
 
 const UncapStar = (props: Props) => {
     const classes = classnames({
         UncapStar:  true,
+        'empty':    props.empty,
         'special':  props.special,
         'mlb':      !props.special,
         'flb':      props.flb,
@@ -19,12 +23,17 @@ const UncapStar = (props: Props) => {
 
     })
 
+    function clicked() {
+        props.onClick(props.index, props.empty)
+    }
+
     return (
         <li className={classes}><img alt="" src="/icons/star.svg" /></li>
     )
 }
 
 UncapStar.defaultProps = {
+    empty: false,
     special: false,
     flb: false,
     ulb: false