refactor: changed hard code item rarity colors to css variables

pollubnet · Jan 18, 2024 · b10b8f1 · b10b8f1
1 parent fa77b2b
commit b10b8f1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/Server/Components/UI/ItemCard.razor b/Server/Components/UI/ItemCard.razor
@@ -2,7 +2,7 @@
 
 <div class="col">
     <div class="card" style="width: 15rem;">
-        <div class="card-header" style="background-color: @_color">
+        <div class="card-header" style="background-color: var(@_color)">
             @Item.Name
         </div>
         <div class="card-body">
@@ -43,7 +43,7 @@
     [Parameter] public EventCallback OnEquipClicked { get; set; }
     [Parameter] public EventCallback OnUnequipClicked { get; set; }
 
-    private string _color = "gray";
+    private string _color = "--rarity-common";
 
     protected override void OnInitialized()
     {
@@ -55,12 +55,12 @@
     {
         _color = Item.Rarity switch
         {
-            ItemRarity.Common => "gray",
-            ItemRarity.Uncommon => "#8ef059",
-            ItemRarity.Rare => "#5963f0",
-            ItemRarity.Insane => "#f54c40",
-            ItemRarity.Epic => "#b423f7",
-            ItemRarity.Legendary => "gold",
+            ItemRarity.Common => "--rarity-common",
+            ItemRarity.Uncommon => "--rarity-uncommon",
+            ItemRarity.Rare => "--rarity-rare",
+            ItemRarity.Insane => "--rarity-insane",
+            ItemRarity.Epic => "--rarity-epic",
+            ItemRarity.Legendary => "--rarity-legendary",
             _ => _color
         };
     }

diff --git a/Server/wwwroot/css/game.css b/Server/wwwroot/css/game.css
@@ -62,3 +62,12 @@ body {
     justify-content: center;
     align-items: center;
 }
+
+:root {
+    --rarity-common: #808080;
+    --rarity-uncommon: #8ef059;
+    --rarity-rare: #5963f0;
+    --rarity-insane: #f54c40;
+    --rarity-epic: #b423f7;
+    --rarity-legendary: gold;
+}