chore: added overcharmed as build info entry

imp-dance · Jan 23, 2024 · 70a5704 · 70a5704
1 parent 7cdfe76
commit 70a5704
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/src/App.css b/src/App.css
@@ -380,15 +380,17 @@ h3 {
   gap: 0.5rem;
   align-items: center;
   max-width: 50ch;
+  margin-bottom: 0.5rem;
 
-  & img {
-    width: 2rem;
+  & img,
+  & .img {
+    width: 1.9rem;
     height: 2rem;
     filter: brightness(0.5);
   }
 
-  & p {
-    opacity: 0.75;
+  & .charm-description {
+    opacity: 0.65;
     font-size: 0.875rem;
   }
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -202,6 +202,32 @@ function App() {
       </Stack>
       <div className="subgrid">
         <Section title="Build info">
+          {overcharmed && (
+            <div className="charm-info">
+              <div className="img" />
+              <div>
+                <header>
+                  <h3>Overcharmed</h3>
+                  <div className="charm-cost">
+                    {Array.from({
+                      length:
+                        currentNotchCost > 11
+                          ? currentNotchCost - 11
+                          : 0,
+                    }).map((_, i) => (
+                      <div
+                        className="charm-dot overcharm"
+                        key={i}
+                      />
+                    ))}
+                  </div>
+                </header>
+                <div className="charm-description">
+                  Take double damage, but get more charm notches.
+                </div>{" "}
+              </div>
+            </div>
+          )}
           {selectedCharms.map((charm) => (
             <div key={charm} className="charm-info">
               <img src={`./charms/${charm}.png`} />
@@ -216,13 +242,13 @@ function App() {
                     ))}
                   </div>
                 </header>
-                <p>
+                <div className="charm-description">
                   {charms[charm].description
                     .split("\n")
                     .map((line) => (
                       <p>{line}</p>
                     ))}
-                </p>{" "}
+                </div>
               </div>
             </div>
           ))}