Implement Cadence completion tracking with counters and checkmarks

Author: DerekGooding

Mythril.Blazor/Components/CadenceDragExpander.razor

@@ -4,9 +4,19 @@
 
 <div class="expander shadow-theme">
     <div class="expander-header" @onclick="Toggle">
-        <div class="inventory-item cadence-draggable" draggable="true" @ondragstart="HandleDragStart" @onclick:stopPropagation="true">
+        <div class="inventory-item cadence-draggable flex-grow-1" draggable="true" @ondragstart="HandleDragStart" @onclick:stopPropagation="true">
             <div class="d-flex flex-column text-start">
-                <span class="item-name">@Cadence.Name</span>
+                <div class="d-flex align-items-center gap-2">
+                    <span class="item-name">@Cadence.Name</span>
+                    @if (TotalCount > 0)
+                    {
+                        <span class="completion-counter small text-muted">(@CompletedCount/@TotalCount)</span>
+                        @if (CompletedCount >= TotalCount)
+                        {
+                            <span class="text-success small">✔</span>
+                        }
+                    }
+                </div>
                 <span class="small text-muted">@Cadence.Description</span>
             </div>
         </div>
@@ -23,6 +33,12 @@
     [Parameter]
     public Cadence Cadence { get; set; }
 
+    [Parameter]
+    public int CompletedCount { get; set; }
+
+    [Parameter]
+    public int TotalCount { get; set; }
+
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 

Mythril.Blazor/Components/CadenceDragExpander.razor.css

@@ -69,3 +69,18 @@
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }
+
+.item-name {
+    font-weight: bold;
+    color: var(--text-color);
+}
+
+.completion-counter {
+    font-variant-numeric: tabular-nums;
+    font-weight: normal;
+}
+
+.text-success {
+    color: #28a745;
+    font-weight: bold;
+}

Mythril.Blazor/Components/CadencePanel.razor

@@ -1,14 +1,19 @@
 @using Mythril.Data
 @using Mythril.Blazor.Services
 @inject DragDropService DragDropService
+@inject ResourceManager resourceManager
 
 <div class="cadence-panel d-flex flex-column h-100">
     <div class="flex-grow-1 overflow-auto mt-2">
         @if (UnlockedCadences is not null && UnlockedCadences.Any())
         {
             @foreach (var cadence in UnlockedCadences)
             {
-                <CadenceDragExpander Cadence="cadence" @key="@cadence.Name">
+                var stats = GetCompletionStats(cadence);
+                <CadenceDragExpander Cadence="cadence" 
+                                     @key="@cadence.Name"
+                                     CompletedCount="@stats.Completed"
+                                     TotalCount="@stats.Total">
                     <CadenceTree CadenceData="cadence" />
                 </CadenceDragExpander>
             }
@@ -39,4 +44,14 @@
             await OnUnequip.InvokeAsync(cadence);
         }
     }
+
+    private (int Completed, int Total) GetCompletionStats(Cadence cadence)
+    {
+        if (cadence.Abilities == null) return (0, 0);
+        
+        int total = cadence.Abilities.Length;
+        int completed = cadence.Abilities.Count(a => resourceManager.UnlockedAbilities.Contains($"{cadence.Name}:{a.Ability.Name}"));
+        
+        return (completed, total);
+    }
 }

README.md

@@ -33,6 +33,7 @@ Mythril is an RPG-inspired web application built with **.NET 10** and **Blazor W
 - **CI/CD**: GitHub Actions for automated deployment and health monitoring.
 
 ## 🚀 Recent Updates (March 4, 2026)
+- **Cadence Completion Tracking**: Implemented a progress counter and checkmark system for Cadences, similar to Location tracking. Users can now see how many abilities have been unlocked for each job at a glance.
 - **Location Completion Tracking**: Added a quest counter to location expanders, showing progress on one-time quests. A green checkmark now appears when all unique tasks in a region are finished.
 - **Logistics I Ability**: Implemented a new progression tier allowing characters to perform two tasks simultaneously. Features automated task cancellation and cost refunding when the ability is lost.
 - **Location Gating System**: Refactored the world map to gate major biomes (Whispering Woods, Ancient Ruins, etc.) behind prerequisite story quests, improving early-game focus and sense of discovery.

docs/instructions.md

@@ -56,6 +56,9 @@ Advanced quests in regions like the **Iron Mines** or **Sun-Drenched Desert** re
 ### Location Completion
 You can track your progress in each region by checking the counter on the location expanders. It shows how many **one-time quests** (Single or Unlock types) you have completed out of the total available in that area. Once you've cleared everything unique in a region, a green checkmark will appear!
 
+### Cadence Completion
+Similarly, you can track your research progress for each job in the **Cadence** tab. The counter shows how many abilities you have unlocked out of the total available for that Cadence. A green checkmark indicates you have mastered that job!
+
 ## 💡 Tips for Success
 - **Specialization**: Differentiate your characters! Give one high Magic for fast research and another high Strength for resource farming.