From b10b8f1e5cbf172b6e361243f9f5e19fc2bf8b90 Mon Sep 17 00:00:00 2001
From: Makrowave <35488365+Makrowave@users.noreply.github.com>
Date: Thu, 18 Jan 2024 15:03:37 +0100
Subject: [PATCH] refactor: changed hard code item rarity colors to css
 variables

---
 Server/Components/UI/ItemCard.razor | 16 ++++++++--------
 Server/wwwroot/css/game.css         |  9 +++++++++
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/Server/Components/UI/ItemCard.razor b/Server/Components/UI/ItemCard.razor
index 3d96d0d..1ddead3 100644
--- 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
index 2b59309..26e1a08 100644
--- 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;
+}
\ No newline at end of file