From 1c9c98b1c35fae8c698389532dc5a93d335e7f0c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 25 Jan 2022 23:18:01 -0800
Subject: [PATCH] Implement new stars

---
 components/UncapIndicator/index.scss |  4 ++++
 components/UncapIndicator/index.tsx  | 12 ++++++-----
 components/UncapStar/index.scss      | 32 ++++++++++++++++++++++++----
 components/UncapStar/index.tsx       | 18 +++++++++++++---
 4 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/components/UncapIndicator/index.scss b/components/UncapIndicator/index.scss
index ceafd8d2..431f20d1 100644
--- a/components/UncapIndicator/index.scss
+++ b/components/UncapIndicator/index.scss
@@ -7,4 +7,8 @@
     list-style: none;
     margin: 0;
     padding: 0;
+
+    &:hover {
+        cursor: pointer;
+    }
 }
\ No newline at end of file
diff --git a/components/UncapIndicator/index.tsx b/components/UncapIndicator/index.tsx
index ee74c9d5..ef8c00ab 100644
--- a/components/UncapIndicator/index.tsx
+++ b/components/UncapIndicator/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import classnames from 'classnames'
+import React, { useState } from 'react'
 import UncapStar from '~components/UncapStar'
 
 import './index.scss'
@@ -36,11 +35,14 @@ const UncapIndicator = (props: Props) => {
         <ul className="UncapIndicator">
             {
                 Array.from(Array(numStars)).map((x, i) => {
-                    if (props.type === 'character' && i > 3 ||
+                    if (props.type === 'character' && i > 4) {
+                        return <UncapStar ulb={true} key={`star_${i}`} />
+                    } else if (
+                        props.type === 'character' && i == 4 ||
                         props.type !== 'character' && i > 2) {
-                        return <UncapStar uncap={true} key={`star_${i}`} />
+                        return <UncapStar flb={true} key={`star_${i}`} />
                     } else {
-                        return <UncapStar uncap={false} key={`star_${i}`} />
+                        return <UncapStar key={`star_${i}`} />
                     }
                 })
             }
diff --git a/components/UncapStar/index.scss b/components/UncapStar/index.scss
index 7014dbef..e0cab927 100644
--- a/components/UncapStar/index.scss
+++ b/components/UncapStar/index.scss
@@ -1,7 +1,31 @@
 .UncapStar {
-    color: #FFA15E;
-}
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    display: block;
+    height: 18px;
+    width: 18px;
 
-.UncapStar.uncap {
-    color: #65DAFF;
+    &:hover {
+        transform: scale(1.2);
+    }
+
+    &.empty {
+        background: url('/icons/uncap/empty.svg');
+    }
+
+    &.mlb {
+        background: url('/icons/uncap/yellow.svg')
+    }
+
+    &.special {
+        background: url('/icons/uncap/red.svg')
+    }
+
+    &.flb {
+        background: url('/icons/uncap/blue.svg')
+    }
+
+    &.ulb {
+        background: url('/icons/uncap/purple.svg')
+    }
 }
\ No newline at end of file
diff --git a/components/UncapStar/index.tsx b/components/UncapStar/index.tsx
index 6cc0d45e..74c76dea 100644
--- a/components/UncapStar/index.tsx
+++ b/components/UncapStar/index.tsx
@@ -4,13 +4,19 @@ import classnames from 'classnames'
 import './index.scss'
 
 interface Props {
-    uncap: boolean
+    special: boolean
+    flb: boolean
+    ulb: boolean
 }
 
 const UncapStar = (props: Props) => {
     const classes = classnames({
-        UncapStar: true,
-        'uncap': props.uncap
+        UncapStar:  true,
+        'special':  props.special,
+        'mlb':      !props.special,
+        'flb':      props.flb,
+        'ulb':      props.ulb
+
     })
 
     return (
@@ -18,4 +24,10 @@ const UncapStar = (props: Props) => {
     )
 }
 
+UncapStar.defaultProps = {
+    special: false,
+    flb: false,
+    ulb: false
+}
+
 export default UncapStar
\ No newline at end of file