Correctly implement markings for all gens

Pkmds.Rcl/Components/EditForms/Tabs/CosmeticTab.razor

@@ -8,50 +8,5 @@ EntityContext.SplitInvalid or
 EntityContext.MaxInvalid &&
 ((AppState.SelectedBoxNumber is not null && AppState.SelectedBoxSlotNumber is not null) || (AppState.SelectedPartySlotNumber is not null)))
 {
-    <MudGrid Spacing="1"
-             Justify="@Justify.Center">
-
-        <MudItem xs="@ColSpan">
-            <MudCheckBox T="bool"
-                         Label="Circle"
-                         Checked="AppService.GetMarking(Pokemon, 0)"
-                         CheckedChanged="@((checkedValue) => AppService.SetMarking(Pokemon, 0, checkedValue))" />
-        </MudItem>
-
-        <MudItem xs="@ColSpan">
-            <MudCheckBox T="bool"
-                         Label="Triangle"
-                         Checked="AppService.GetMarking(Pokemon, 1)"
-                         CheckedChanged="@((checkedValue) => AppService.SetMarking(Pokemon, 1, checkedValue))" />
-        </MudItem>
-
-        <MudItem xs="@ColSpan">
-            <MudCheckBox T="bool"
-                         Label="Square"
-                         Checked="AppService.GetMarking(Pokemon, 2)"
-                         CheckedChanged="@((checkedValue) => AppService.SetMarking(Pokemon, 2, checkedValue))" />
-        </MudItem>
-
-        <MudItem xs="@ColSpan">
-            <MudCheckBox T="bool"
-                         Label="Heart"
-                         Checked="AppService.GetMarking(Pokemon, 3)"
-                         CheckedChanged="@((checkedValue) => AppService.SetMarking(Pokemon, 3, checkedValue))" />
-        </MudItem>
-
-        <MudItem xs="@ColSpan">
-            <MudCheckBox T="bool"
-                         Label="Star"
-                         Checked="AppService.GetMarking(Pokemon, 4)"
-                         CheckedChanged="@((checkedValue) => AppService.SetMarking(Pokemon, 4, checkedValue))" />
-        </MudItem>
-
-        <MudItem xs="@ColSpan">
-            <MudCheckBox T="bool"
-                         Label="Diamond"
-                         Checked="AppService.GetMarking(Pokemon, 5)"
-                         CheckedChanged="@((checkedValue) => AppService.SetMarking(Pokemon, 5, checkedValue))" />
-        </MudItem>
-
-    </MudGrid>
+    <MarkingsContainer Pokemon="@Pokemon" />
 }

Pkmds.Rcl/Components/EditForms/Tabs/CosmeticTab.razor.cs

@@ -5,8 +5,6 @@ public partial class CosmeticTab : IDisposable
     [Parameter, EditorRequired]
     public PKM? Pokemon { get; set; }
 
-    private int ColSpan => Pokemon?.MarkingCount == 6 ? 4 : 6;
-
     protected override void OnInitialized() =>
         RefreshService.OnAppStateChanged += StateHasChanged;
 

Pkmds.Rcl/Components/MarkingComponent.razor

@@ -0,0 +1,3 @@
+<span class="@MarkingClass" @onclick="@Toggle">
+    @DisplayString
+</span>

Pkmds.Rcl/Components/MarkingComponent.razor.cs

@@ -0,0 +1,37 @@
+using static Pkmds.Rcl.MarkingsHelper;
+
+namespace Pkmds.Rcl.Components;
+
+public partial class MarkingComponent
+{
+    [Parameter, EditorRequired]
+    public PKM? Pokemon { get; set; }
+
+    [Parameter, EditorRequired]
+    public Markings Shape { get; set; }
+
+    private string DisplayString => Shape switch
+    {
+        Markings.Circle => Circle,
+        Markings.Triangle => Triangle,
+        Markings.Square => Square,
+        Markings.Heart => Heart,
+        Markings.Star => Star,
+        Markings.Diamond => Diamond,
+        _ => string.Empty,
+    };
+
+    private string MarkingClass => $"marking{Pokemon?.GetMarking((int)Shape) switch
+    {
+        null => string.Empty,
+        0 => " gray-mark",
+        1 => Pokemon.Generation >= 7 ? " blue-mark" : " black-mark",
+        2 => " red-mark",
+        _ => string.Empty,
+    }}";
+
+    private void Toggle()
+    {
+        Pokemon?.ToggleMarking((int)Shape);
+    }
+}

Pkmds.Rcl/Components/MarkingComponent.razor.css

@@ -0,0 +1,25 @@
+.marking {
+    max-width: 68.63px;
+    font-size: 3.0rem;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid lightgray;
+    border-radius: 10px;
+}
+
+.gray-mark {
+    color: gray;
+}
+
+.black-mark {
+    color: black;
+}
+
+.blue-mark {
+    color: blue;
+}
+
+.red-mark {
+    color: red;
+}

Pkmds.Rcl/Components/MarkingsContainer.razor

@@ -0,0 +1,25 @@
+@if (Pokemon is { Generation: >= 3 })
+{
+    <div class="@ContainerClass">
+        <MarkingComponent Pokemon="@Pokemon"
+                          Shape="MarkingsHelper.Markings.Circle" />
+
+        <MarkingComponent Pokemon="@Pokemon"
+                          Shape="MarkingsHelper.Markings.Triangle" />
+
+        <MarkingComponent Pokemon="@Pokemon"
+                          Shape="MarkingsHelper.Markings.Square" />
+
+        <MarkingComponent Pokemon="@Pokemon"
+                          Shape="MarkingsHelper.Markings.Heart" />
+
+        @if (Pokemon.Generation >= 4)
+        {
+            <MarkingComponent Pokemon="@Pokemon"
+                              Shape="MarkingsHelper.Markings.Star" />
+
+            <MarkingComponent Pokemon="@Pokemon"
+                              Shape="MarkingsHelper.Markings.Diamond" />
+        }
+    </div>
+}

Pkmds.Rcl/Components/MarkingsContainer.razor.cs

@@ -0,0 +1,13 @@
+namespace Pkmds.Rcl.Components;
+
+public partial class MarkingsContainer
+{
+    [Parameter, EditorRequired]
+    public PKM? Pokemon { get; set; }
+
+    private string ContainerClass => $"markings-container{(Pokemon is { Generation: 3 } ? " gen-3" : string.Empty)}";
+
+    protected override void OnInitialized() => RefreshService.OnAppStateChanged += StateHasChanged;
+
+    public void Dispose() => RefreshService.OnAppStateChanged -= StateHasChanged;
+}

Pkmds.Rcl/Components/MarkingsContainer.razor.css

@@ -0,0 +1,12 @@
+.markings-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-gap: 25px;
+    padding-top: 3px;
+}
+
+.gen-3 {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}

Pkmds.Rcl/MarkingsHelper.cs

@@ -0,0 +1,21 @@
+namespace Pkmds.Rcl;
+
+public static class MarkingsHelper
+{
+    public enum Markings
+    {
+        Circle = 0,
+        Triangle = 1,
+        Square = 2,
+        Heart = 3,
+        Star = 4,
+        Diamond = 5,
+    }
+
+    public const string Circle = "●";
+    public const string Triangle = "▲";
+    public const string Square = "■";
+    public const string Heart = "♥︎";
+    public const string Star = "★";
+    public const string Diamond = "♦︎";
+}

Pkmds.Rcl/Services/AppService.cs

@@ -95,15 +95,6 @@ public IEnumerable<ComboItem> SearchMoves(string searchString) => AppState.SaveF
     public ComboItem GetMoveComboItem(int moveId) => GameInfo.FilteredSources.Moves
         .FirstOrDefault(metLocation => metLocation.Value == moveId) ?? default!;
 
-    public bool GetMarking(PKM? pokemon, int index) =>
-        pokemon is not null && index <= pokemon.MarkingCount - 1 && pokemon.GetMarking(index) == 1;
-
-    public void SetMarking(PKM? pokemon, int index, bool value) =>
-        pokemon?.SetMarking(index, value ? 1 : 0);
-
-    public void ToggleMarking(PKM? pokemon, int index) =>
-        pokemon?.ToggleMarking(index);
-
     public void SavePokemon(PKM? pokemon)
     {
         if (AppState.SaveFile is null || pokemon is null)

Pkmds.Rcl/Services/IAppService.cs

@@ -34,12 +34,6 @@ public interface IAppService
 
     ComboItem GetMoveComboItem(int moveId);
 
-    bool GetMarking(PKM? pokemon, int index);
-
-    void SetMarking(PKM? pokemon, int index, bool value);
-
-    void ToggleMarking(PKM? pokemon, int index);
-
     public void SavePokemon(PKM? SelectedPokemon);
 
     string GetCleanFileName(PKM pkm);