Color-coordinate characters and cadence equipment UI

Author: DerekGooding

Mythril.Blazor/Components/CadenceDragExpander.razor

@@ -4,12 +4,12 @@
 @inject DragDropService DragDropService
 @inject ResourceManager ResourceManager
 
-<div class="expander shadow-theme @(IsHighlighted ? "highlighted" : "") @(isEquipped ? "equipped" : "")">
+<div class="expander shadow-theme @(IsHighlighted ? "highlighted" : "") @(isEquipped ? "equipped" : "")" style="@(assignedCharacter.HasValue ? $"border-left-color: {assignedCharacter.Value.Color};" : "")">
     <div class="expander-header d-flex align-items-center" @onclick="Toggle">
         @if (assignedCharacter.HasValue)
         {
-            <div class="equipped-portrait me-2" title="Equipped by @assignedCharacter.Value.Name">
-                <span class="material-icons" style="font-size: 20px;">account_circle</span>
+            <div class="equipped-portrait me-2" title="Equipped by @assignedCharacter.Value.Name" style="color: @assignedCharacter.Value.Color;">
+                <span class="material-icons" style="font-size: 20px;">@assignedCharacter.Value.Icon</span>
                 <span class="character-initial">@assignedCharacter.Value.Name[0]</span>
             </div>
         }

Mythril.Blazor/Components/CharacterDisplay.razor

@@ -44,9 +44,11 @@
         <div class="flex-grow-1 min-width-0">
             <div class="character-header">
                 <div class="d-flex flex-column flex-grow-1 min-width-0">
-                    <h4 class="character-name text-truncate m-0">@Character.Name</h4>
-                    <div class="cadence-info small text-muted">
-                        @if (assignedCadences.Any())
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="material-icons" style="color: @Character.Color; font-size: 1.5rem;">@Character.Icon</span>
+                        <h4 class="character-name text-truncate m-0">@Character.Name</h4>
+                    </div>
+                    <div class="cadence-info small text-muted">                        @if (assignedCadences.Any())
                         {
                             <div class="d-flex flex-wrap gap-1 mt-1">
                                 @foreach (var cadence in assignedCadences)
@@ -99,14 +101,13 @@
 
             @if (resourceManager.ShowMiniLogs && resourceManager.CharacterMiniLogs.TryGetValue(Character.Name, out var log) && log.Any())
             {
-                <div class="mini-log mt-1">
+                <div class="mini-log mt-1" style="border-left-color: @Character.Color;">
                     @foreach (var entry in log.Reverse())
                     {
                         <div class="log-entry text-truncate">@entry</div>
                     }
                 </div>
             }
-
             <div class="task-slots-container mt-2 d-flex flex-column gap-2">
                 @for (int i = 0; i < taskLimit; i++)
                 {

Mythril.Blazor/Components/CharacterDisplay.razor.css

@@ -80,7 +80,7 @@
     background: rgba(0, 0, 0, 0.05);
     padding: 2px 6px;
     border-radius: 4px;
-    border-left: 2px solid var(--accent-color);
+    border-left: 2px solid transparent;
 }
 
 .log-entry {

Mythril.Data/Models.cs

@@ -108,7 +108,24 @@ public partial record struct Cadence(string Name, string Description, CadenceUnl
 public partial record struct Location(string Name, IEnumerable<Quest> Quests, string? RequiredQuest = null, string? Type = null) : INamed;
 
 // Character
-public partial record struct Character(string Name);
+public partial record struct Character(string Name)
+{
+    public string Color => Name switch
+    {
+        "Protagonist" => "#ff4444",
+        "Wifu" => "#4444ff",
+        "Himbo" => "#44ff44",
+        _ => "#00adb5"
+    };
+
+    public string Icon => Name switch
+    {
+        "Protagonist" => "person",
+        "Wifu" => "face",
+        "Himbo" => "sentiment_satisfied_alt",
+        _ => "account_circle"
+    };
+}
 
 // Stats
 public partial record struct Stat(string Name, string Description) : INamed;