diff --git a/demo/Jimmys20.BlazorComponents.Demo/Pages/SpinningWheel.razor b/demo/Jimmys20.BlazorComponents.Demo/Pages/SpinningWheel.razor index 2547ec1..afb4d76 100644 --- a/demo/Jimmys20.BlazorComponents.Demo/Pages/SpinningWheel.razor +++ b/demo/Jimmys20.BlazorComponents.Demo/Pages/SpinningWheel.razor @@ -5,16 +5,40 @@

Spinning wheel

- +
+
+ -Spin + @for (var i = 0; i < _numberOfSlots; i++) + { + + } + + + Spin +
+ +
+ + + + + + +
+
@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 = diff --git a/src/Jimmys20.BlazorComponents.Bootstrap/Components/Alert/JmAlert.razor.cs b/src/Jimmys20.BlazorComponents.Bootstrap/Components/Alert/JmAlert.razor.cs index af4188f..108e06c 100644 --- a/src/Jimmys20.BlazorComponents.Bootstrap/Components/Alert/JmAlert.razor.cs +++ b/src/Jimmys20.BlazorComponents.Bootstrap/Components/Alert/JmAlert.razor.cs @@ -26,7 +26,7 @@ public partial class JmAlert : BootstrapComponentBase [Parameter] public Color Color { get; set; } /// - /// Specifies content of the alert. + /// Specifies the content of the alert. /// [Parameter] public RenderFragment ChildContent { get; set; } diff --git a/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor b/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor index ef4b36c..7d6cb23 100644 --- a/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor +++ b/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor @@ -1,3 +1,7 @@ @namespace Jimmys20.BlazorComponents + + + @ChildContent + diff --git a/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor.cs b/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor.cs index 0fcfa3e..4d29eed 100644 --- a/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor.cs +++ b/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheel.razor.cs @@ -1,7 +1,6 @@ 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; @@ -9,12 +8,6 @@ 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 _selfReference; private ElementReference _canvasRef; @@ -22,16 +15,7 @@ public partial class JmSpinningWheel : IAsyncDisposable private bool _isSpinning = false; private double _angle = 0; private int _selectedSlotIndex = -1; - - /// - /// - /// - [Parameter] public int NumberOfSlots { get; set; } = 18; - - /// - /// - /// - [Parameter] public IList SlotNames { get; set; } + private readonly List _sectors = []; /// /// @@ -53,6 +37,11 @@ public partial class JmSpinningWheel : IAsyncDisposable /// [Parameter] public int Size { get; set; } + /// + /// + /// + [Parameter] public RenderFragment ChildContent { get; set; } + /// /// Captures values that don't match any other parameter. /// @@ -60,6 +49,7 @@ public partial class JmSpinningWheel : IAsyncDisposable [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(); + } + } } diff --git a/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheelSector.cs b/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheelSector.cs new file mode 100644 index 0000000..a1fee3e --- /dev/null +++ b/src/Jimmys20.BlazorComponents/SpinningWheel/JmSpinningWheelSector.cs @@ -0,0 +1,29 @@ +using Microsoft.AspNetCore.Components; + +namespace Jimmys20.BlazorComponents; + +public class JmSpinningWheelSector : ComponentBase, IDisposable +{ + /// + /// + /// + [Parameter] public string Color { get; set; } + + /// + /// + /// + [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); + } +}