Serving colors with ratings.

Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor

@@ -51,8 +51,6 @@
         height: 30px;
         color: white;
         padding: 4px 8px;
-        text-align: center;
-        vertical-align: middle;
         border-radius: 30px;
     }
     .statText {
@@ -86,7 +84,15 @@
         background-color: #47a0fc;
     }
 
-
+    .finalScore {
+        width: 30px;
+        height: 30px;
+        color: white;
+        padding: 4px 8px;
+        text-align: center;
+        vertical-align: middle;
+        border-radius: 3px;
+    }
 
 
 </style>
@@ -266,11 +272,13 @@ else
                         </div>
 
                       
-
+                        <!-- Calculate -->
                         <div class="d-flex justify-content-between align-items-center mt-3">
                             <button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
-                            <h4>Final Score: <span>@FinalScore</span></h4>
+                            <h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4>
                         </div>
+
+
                     </div>
                 }
             </div>
@@ -310,6 +318,8 @@ else
     private Pokemon SelectedPokemon;
 
     private int FinalScore;
+    private string ScoreBackgroundColor;
+    private string ScoreColor;
 
     private string PokemonImageUrl => SelectedPokemon != null
         ? $"https://www.serebii.net/pokemonsleep/pokemon/{SelectedPokemon.Id}.png"
@@ -377,5 +387,52 @@ else
             "Skills" => nature.SkillRating + subskill1.SkillRank + subskill2.SkillRank + subskill3.SkillRank,
             _ => 0
         };
+
+        ScoreBackgroundColor = FinalScore switch
+        {
+            8 => "#16C47F",
+            7 => "#33CB8F",
+            6 => "#50D39F",
+            5 => "#6DDAAF",
+            4 => "#8BE2BF",
+            3 => "#A8E9CF",
+            2 => "#C5F0DF",
+            1 => "#E2F8EF",
+            0 => "#FFFFFF",
+            -1 => "#FFE7E7",
+            -2 => "#FED0D0",
+            -3 => "#FEB8B8",
+            -4 => "#FDA0A0",
+            -5 => "#FD8888",
+            -6 => "#FC7171",
+            -7 => "#FC5959",
+            -8 => "#FB4141",
+            _ => "#FFFFFF"
+
+        };
+        ScoreColor = FinalScore switch
+        {
+            8 => "#FFFFFF",
+            7 => "#FFFFFF",
+            6 => "#FFFFFF",
+            5 => "#FFFFFF",
+            4 => "#FFFFFF",
+            3 => "#FFFFFF",
+            2 => "#FFFFFF",
+            1 => "#FFFFFF",
+            0 => "#000",
+            -1 => "#FFFFFF",
+            -2 => "#FFFFFF",
+            -3 => "#FFFFFF",
+            -4 => "#FFFFFF",
+            -5 => "#FFFFFF",
+            -6 => "#FFFFFF",
+            -7 => "#FFFFFF",
+            -8 => "#FFFFFF",
+            _ => "#FFFFFF"
+
+        };
     }
+
+
 }