From df63826fed98547dbb0428bc4eb54dbf5b728c9b Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 20 Dec 2022 08:13:55 -0600
Subject: [PATCH] Make ribbon costs highlight unmet conditions

---
 src/data/layers/ribbon.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/data/layers/ribbon.tsx b/src/data/layers/ribbon.tsx
index 03f598a..5b85488 100644
--- a/src/data/layers/ribbon.tsx
+++ b/src/data/layers/ribbon.tsx
@@ -60,8 +60,20 @@ const layer = createLayer(id, () => {
             title: "Make Ribbon",
             description: jsx(() => (
                 <>
-                    Create another ribbon with {format(currentDyeCost.value)}{" "}
-                    {currentDyeType.value.name} and {format(1e9)} {cloth.cloth.displayName}
+                    Create another ribbon with{" "}
+                    <span
+                        class={
+                            Decimal.lt(currentDyeType.value.value, currentDyeCost.value)
+                                ? "unaffordable"
+                                : ""
+                        }
+                    >
+                        {format(currentDyeCost.value)} {currentDyeType.value.name}
+                    </span>{" "}
+                    and{" "}
+                    <span class={Decimal.lt(cloth.cloth.value, 1e9) ? "unaffordable" : ""}>
+                        {format(1e9)} {cloth.cloth.displayName}
+                    </span>
                     <br />
                     {render(ribbonProgressBar)}
                 </>