114 lines
2.5 KiB
Plaintext
114 lines
2.5 KiB
Plaintext
@using Koogle.Domain.Enums
|
|
|
|
<div class="pin @GetPinClass()" @onclick="OnClick" style="@GetStyle()">
|
|
<span class="pin-number">@PinNumber</span>
|
|
</div>
|
|
|
|
<style>
|
|
.pin {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: all 0.15s ease;
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
border: 3px solid transparent;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.pin:hover:not(.pin-disabled) {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.pin:active:not(.pin-disabled) {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.pin-standing {
|
|
background-color: var(--mud-palette-primary);
|
|
color: white;
|
|
border-color: var(--mud-palette-primary-darken);
|
|
}
|
|
|
|
.pin-fallen {
|
|
background-color: var(--mud-palette-error);
|
|
color: white;
|
|
border-color: var(--mud-palette-error-darken);
|
|
}
|
|
|
|
.pin-disabled {
|
|
background-color: var(--mud-palette-gray-light);
|
|
color: var(--mud-palette-gray-dark);
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.pin-number {
|
|
pointer-events: none;
|
|
}
|
|
|
|
@@media (max-width: 600px) {
|
|
.pin {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
@code {
|
|
/// <summary>
|
|
/// The pin number (1-9).
|
|
/// </summary>
|
|
[Parameter]
|
|
public int PinNumber { get; set; }
|
|
|
|
/// <summary>
|
|
/// Current status of the pin.
|
|
/// </summary>
|
|
[Parameter]
|
|
public PinStatus Status { get; set; } = PinStatus.Standing;
|
|
|
|
/// <summary>
|
|
/// Whether the pin is interactive.
|
|
/// </summary>
|
|
[Parameter]
|
|
public bool IsInteractive { get; set; } = true;
|
|
|
|
/// <summary>
|
|
/// Callback when pin is clicked.
|
|
/// </summary>
|
|
[Parameter]
|
|
public EventCallback<int> OnPinClicked { get; set; }
|
|
|
|
private string GetPinClass() => Status switch
|
|
{
|
|
PinStatus.Standing => "pin-standing",
|
|
PinStatus.Fallen => "pin-fallen",
|
|
PinStatus.Disabled => "pin-disabled",
|
|
_ => "pin-standing"
|
|
};
|
|
|
|
private string GetStyle()
|
|
{
|
|
if (!IsInteractive || Status == PinStatus.Disabled)
|
|
{
|
|
return "pointer-events: none;";
|
|
}
|
|
return string.Empty;
|
|
}
|
|
|
|
private async Task OnClick()
|
|
{
|
|
if (!IsInteractive || Status == PinStatus.Disabled)
|
|
return;
|
|
|
|
await OnPinClicked.InvokeAsync(PinNumber);
|
|
}
|
|
}
|