From 70a5704c3ca82b70d3fae9b85819c6729b761519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon?= <haakonu97@gmail.com>
Date: Tue, 23 Jan 2024 11:51:24 +0100
Subject: [PATCH] chore: added overcharmed as build info entry

---
 src/App.css | 10 ++++++----
 src/App.tsx | 30 ++++++++++++++++++++++++++++--
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index 41efdc5..4a10e38 100644
--- 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
index 41282fd..1516e6e 100644
--- 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>
           ))}