Added JmSpinnningWheelSector

demo/Jimmys20.BlazorComponents.Demo/Pages/SpinningWheel.razor

@@ -5,16 +5,40 @@
 
 <h1>Spinning wheel</h1>
 
-<JmSpinningWheel @ref="_spinningWheelRef"
-                 NumberOfSlots="_numberOfSlots"
-                 SlotNames="_slotNames"
-                 Size="600"
-                 SpinStarted="OnSpinStarted"
-                 SpinCompleted="OnSpinCompleted" />
+<div class="row">
+    <div class="col-lg-6">
+        <JmSpinningWheel @ref="_spinningWheelRef"
+                         Size="600"
+                         SpinStarted="OnSpinStarted"
+                         SpinCompleted="OnSpinCompleted">
 
-<JmButton Color="Color.Primary" Clicked="Spin">Spin</JmButton>
+            @for (var i = 0; i < _numberOfSlots; i++)
+            {
+                <JmSpinningWheelSector Color="@Colors[i % Colors.Length]"
+                                       Label="@_slotNames[i % _slotNames.Length]" />
+            }
+        </JmSpinningWheel>
+
+        <JmButton Color="Color.Primary" Clicked="Spin">Spin</JmButton>
+    </div>
+
+    <div class="col-lg-6">
+        <JmSpinningWheel Size="300">
+            <JmSpinningWheelSector Color="#f82" Label="Winter" />
+            <JmSpinningWheelSector Color="#0bf" Label="Autumn" />
+            <JmSpinningWheelSector Color="#fb0" Label="Summer" />
+            <JmSpinningWheelSector Color="#0fb" Label="Spring" />
+        </JmSpinningWheel>
+    </div>
+</div>
 
 @code {
+    //private static readonly string[] Colors = ["#f82", "#0bf", "#fb0", "#0fb", "#b0f", "#f0b", "#bf0"];
+    private static readonly string[] Colors =
+    [
+        "#ffcc01", "#675ca1", "#059dde", "#a7d02a", "#26cda2", "#903288", "#222025", "#e50305", "#eb7008"
+    ];
+
     private JmSpinningWheel _spinningWheelRef;
     private int _numberOfSlots = 18;
     private string[] _slotNames =

src/Jimmys20.BlazorComponents.Bootstrap/Components/Alert/JmAlert.razor.cs

@@ -26,7 +26,7 @@ public partial class JmAlert : BootstrapComponentBase
     [Parameter] public Color Color { get; set; }
 
     /// <summary>
-    /// Specifies content of the alert.
+    /// Specifies the content of the alert.
     /// </summary>
     [Parameter] public RenderFragment ChildContent { get; set; }
 

src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor

@@ -1,3 +1,7 @@
 @namespace Jimmys20.BlazorComponents
 
 <canvas @ref="_canvasRef" id="wheel" width="@Size" height="@Size" @attributes="AdditionalAttributes"></canvas>
+
+<CascadingValue Value="this" IsFixed>
+    @ChildContent
+</CascadingValue>

src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor.cs

@@ -1,37 +1,21 @@
 using Excubo.Blazor.Canvas;
 using Excubo.Blazor.Canvas.Contexts;
 using Jimmys20.BlazorComponents.Extensions;
-using Jimmys20.BlazorComponents.SpinningWheel.Internal;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 
 namespace Jimmys20.BlazorComponents;
 
 public partial class JmSpinningWheel : IAsyncDisposable
 {
-    //private static readonly string[] Colors = ["#f82", "#0bf", "#fb0", "#0fb", "#b0f", "#f0b", "#bf0"];
-    private static readonly string[] Colors =
-    [
-        "#ffcc01", "#675ca1", "#059dde", "#a7d02a", "#26cda2", "#903288", "#222025", "#e50305", "#eb7008"
-    ];
-
     private IJSObjectReference _module;
     private DotNetObjectReference<JmSpinningWheel> _selfReference;
     private ElementReference _canvasRef;
     private Context2D _context = null;
     private bool _isSpinning = false;
     private double _angle = 0;
     private int _selectedSlotIndex = -1;
-
-    /// <summary>
-    /// 
-    /// </summary>
-    [Parameter] public int NumberOfSlots { get; set; } = 18;
-
-    /// <summary>
-    /// 
-    /// </summary>
-    [Parameter] public IList<string> SlotNames { get; set; }
+    private readonly List<JmSpinningWheelSector> _sectors = [];
 
     /// <summary>
     /// 
@@ -53,13 +37,19 @@ public partial class JmSpinningWheel : IAsyncDisposable
     /// </summary>
     [Parameter] public int Size { get; set; }
 
+    /// <summary>
+    /// 
+    /// </summary>
+    [Parameter] public RenderFragment ChildContent { get; set; }
+
     /// <summary>
     /// Captures values that don't match any other parameter.
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)] public IDictionary<string, object> AdditionalAttributes { get; set; }
 
     [Inject] private IJSRuntime JS { get; set; }
 
+    private int NumberOfSlots => _sectors.Count;
     private double Diameter => Size;
     private double Radius => Diameter / 2;
     private double Arc => Math.Tau / NumberOfSlots;
@@ -91,17 +81,13 @@ private async Task DrawWheel()
 
         for (var i = 0; i < NumberOfSlots; i++)
         {
-            var sector = new Sector
-            {
-                Color = Colors[i % Colors.Length],
-                Label = SlotNames[i % SlotNames.Count],
-            };
+            var sector = _sectors[i];
 
             await DrawSector(batch, sector, i);
         }
     }
 
-    private async Task DrawSector(Batch2D batch, Sector sector, int i)
+    private async Task DrawSector(Batch2D batch, JmSpinningWheelSector sector, int i)
     {
         double angle = Arc * i;
 
@@ -158,7 +144,7 @@ public async Task HandleAnimationFinish()
         _isSpinning = false;
         //_selectedSlotIndex = -1;
 
-        var nameOfSelectedSlot = SlotNames[_selectedSlotIndex];
+        var nameOfSelectedSlot = _sectors[_selectedSlotIndex].Label;
         await SpinCompleted.InvokeAsync(nameOfSelectedSlot);
     }
 
@@ -177,4 +163,21 @@ public async ValueTask DisposeAsync()
             await _context.DisposeAsync();
         }
     }
+
+    internal void AddSector(JmSpinningWheelSector spinningWheelSector)
+    {
+        if (!_sectors.Contains(spinningWheelSector))
+        {
+            _sectors.Add(spinningWheelSector);
+            //StateHasChanged();
+        }
+    }
+
+    internal void RemoveSector(JmSpinningWheelSector spinningWheelSector)
+    {
+        if (_sectors.Remove(spinningWheelSector))
+        {
+            //StateHasChanged();
+        }
+    }
 }

src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheelSector.cs

@@ -0,0 +1,29 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Jimmys20.BlazorComponents;
+
+public class JmSpinningWheelSector : ComponentBase, IDisposable
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    [Parameter] public string Color { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    [Parameter] public string Label { get; set; }
+
+    [CascadingParameter]
+    private JmSpinningWheel SpinningWheel { get; set; }
+
+    protected override void OnInitialized()
+    {
+        SpinningWheel.AddSector(this);
+    }
+
+    public void Dispose()
+    {
+        SpinningWheel.RemoveSector(this);
+    }
+}