Initial Slop
This commit is contained in:
@@ -0,0 +1,404 @@
|
||||
@page "/keyboard"
|
||||
|
||||
<PageTitle>Keyboard</PageTitle>
|
||||
|
||||
<div class="keyboard-container" @onkeydown="HandleKeyDown" tabindex="0" @ref="containerRef">
|
||||
<div class="keyboard-wrapper">
|
||||
<div class="kb-row">
|
||||
@foreach (var k in Keys.Take(6))
|
||||
{
|
||||
<div class="kb-key @(k.OnCooldown ? "on-cd" : "")" @onclick="() => ActivateKey(k)" title="@k.Tooltip">
|
||||
<span class="key-label">@k.Label</span>
|
||||
@if (k.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@k.SkillName</span>
|
||||
}
|
||||
@if (k.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - k.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@k.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kb-row kb-offset-1">
|
||||
@foreach (var k in Keys.Skip(6).Take(5))
|
||||
{
|
||||
<div class="kb-key @(k.OnCooldown ? "on-cd" : "")" @onclick="() => ActivateKey(k)" title="@k.Tooltip">
|
||||
<span class="key-label">@k.Label</span>
|
||||
@if (k.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@k.SkillName</span>
|
||||
}
|
||||
@if (k.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - k.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@k.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kb-row kb-offset-2">
|
||||
@foreach (var k in Keys.Skip(11).Take(5))
|
||||
{
|
||||
<div class="kb-key @(k.OnCooldown ? "on-cd" : "")" @onclick="() => ActivateKey(k)" title="@k.Tooltip">
|
||||
<span class="key-label">@k.Label</span>
|
||||
@if (k.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@k.SkillName</span>
|
||||
}
|
||||
@if (k.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - k.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@k.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kb-row kb-offset-1">
|
||||
@foreach (var k in Keys.Skip(16).Take(5))
|
||||
{
|
||||
<div class="kb-key @(k.OnCooldown ? "on-cd" : "")" @onclick="() => ActivateKey(k)" title="@k.Tooltip">
|
||||
<span class="key-label">@k.Label</span>
|
||||
@if (k.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@k.SkillName</span>
|
||||
}
|
||||
@if (k.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - k.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@k.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kb-row kb-space-row">
|
||||
<div class="kb-key kb-space @(spaceKey.OnCooldown ? "on-cd" : "")" @onclick="() => ActivateKey(spaceKey)"
|
||||
title="@spaceKey.Tooltip">
|
||||
<span class="key-label">@spaceKey.Label</span>
|
||||
@if (spaceKey.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@spaceKey.SkillName</span>
|
||||
}
|
||||
@if (spaceKey.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - spaceKey.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@spaceKey.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kb-divider">Shift + Key</div>
|
||||
|
||||
<div class="kb-row">
|
||||
@foreach (var k in ShiftKeys.Take(6))
|
||||
{
|
||||
<div class="kb-key kb-shift @(k.OnCooldown ? "on-cd" : "")" @onclick="() => ActivateKey(k)"
|
||||
title="@k.Tooltip">
|
||||
<span class="key-label">@k.Label</span>
|
||||
@if (k.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@k.SkillName</span>
|
||||
}
|
||||
@if (k.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - k.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@k.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kb-row kb-offset-1">
|
||||
@foreach (var k in ShiftKeys.Skip(6).Take(5))
|
||||
{
|
||||
<div class="kb-key kb-shift @(k.OnCooldown ? "on-cd" : "")" @onclick="() => ActivateKey(k)"
|
||||
title="@k.Tooltip">
|
||||
<span class="key-label">@k.Label</span>
|
||||
@if (k.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@k.SkillName</span>
|
||||
}
|
||||
@if (k.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - k.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@k.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kb-row kb-offset-2">
|
||||
@foreach (var k in ShiftKeys.Skip(11).Take(5))
|
||||
{
|
||||
<div class="kb-key kb-shift @(k.OnCooldown ? "on-cd" : "")" @onclick="() => ActivateKey(k)"
|
||||
title="@k.Tooltip">
|
||||
<span class="key-label">@k.Label</span>
|
||||
@if (k.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@k.SkillName</span>
|
||||
}
|
||||
@if (k.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - k.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@k.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kb-row kb-offset-1">
|
||||
@foreach (var k in ShiftKeys.Skip(16).Take(5))
|
||||
{
|
||||
<div class="kb-key kb-shift @(k.OnCooldown ? "on-cd" : "")" @onclick="() => ActivateKey(k)"
|
||||
title="@k.Tooltip">
|
||||
<span class="key-label">@k.Label</span>
|
||||
@if (k.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@k.SkillName</span>
|
||||
}
|
||||
@if (k.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - k.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@k.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kb-row kb-space-row">
|
||||
<div class="kb-key kb-space kb-shift @(shiftSpaceKey.OnCooldown ? "on-cd" : "")"
|
||||
@onclick="() => ActivateKey(shiftSpaceKey)" title="@shiftSpaceKey.Tooltip">
|
||||
<span class="key-label">@shiftSpaceKey.Label</span>
|
||||
@if (shiftSpaceKey.SkillName != null)
|
||||
{
|
||||
<span class="skill-name">@shiftSpaceKey.SkillName</span>
|
||||
}
|
||||
@if (shiftSpaceKey.OnCooldown)
|
||||
{
|
||||
<div class="cd-overlay">
|
||||
<svg viewBox="0 0 100 100" class="cd-svg">
|
||||
<circle cx="50" cy="50" r="45" class="cd-bg"/>
|
||||
<circle cx="50" cy="50" r="45" class="cd-progress"
|
||||
stroke-dasharray="282.74"
|
||||
stroke-dashoffset="@(282.74 * (1 - shiftSpaceKey.CooldownFraction))"/>
|
||||
</svg>
|
||||
<span class="cd-text">@shiftSpaceKey.RemainingSeconds</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private ElementReference containerRef;
|
||||
|
||||
private List<KeyData> Keys { get; set; } = new();
|
||||
private List<KeyData> ShiftKeys { get; set; } = new();
|
||||
private KeyData spaceKey = null!;
|
||||
private KeyData shiftSpaceKey = null!;
|
||||
|
||||
public class KeyData
|
||||
{
|
||||
public string Id { get; set; } = "";
|
||||
public string Label { get; set; } = "";
|
||||
public string? SkillName { get; set; }
|
||||
public string? Character { get; set; }
|
||||
public double CooldownDuration { get; set; }
|
||||
public double Remaining { get; set; }
|
||||
public bool OnCooldown => Remaining > 0;
|
||||
public double RemainingSeconds => Math.Ceiling(Remaining);
|
||||
public double CooldownFraction => CooldownDuration > 0 ? Math.Min(1, Remaining / CooldownDuration) : 0;
|
||||
|
||||
public void Tick(double seconds)
|
||||
{
|
||||
if (Remaining > 0)
|
||||
Remaining = Math.Max(0, Remaining - seconds);
|
||||
}
|
||||
|
||||
public string Tooltip
|
||||
{
|
||||
get
|
||||
{
|
||||
var parts = new List<string>();
|
||||
if (Character != null) parts.Add(Character);
|
||||
if (SkillName != null) parts.Add(SkillName);
|
||||
if (CooldownDuration > 0) parts.Add($"CD: {CooldownDuration}s");
|
||||
return parts.Count > 0 ? string.Join(" - ", parts) : Label;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Keys = new List<KeyData>
|
||||
{
|
||||
new() { Id = "1", Label = "1", SkillName = "Aura of Solace", Character = "Xavian", CooldownDuration = 3 },
|
||||
new() { Id = "2", Label = "2" },
|
||||
new() { Id = "3", Label = "3" },
|
||||
new() { Id = "4", Label = "4" },
|
||||
new() { Id = "5", Label = "5" },
|
||||
new() { Id = "6", Label = "6" },
|
||||
new() { Id = "q", Label = "Q", SkillName = "Shinning Halo", Character = "Xavian", CooldownDuration = 30 },
|
||||
new() { Id = "w", Label = "W", SkillName = "Brilliant Flash", Character = "Xavian", CooldownDuration = 0 },
|
||||
new() { Id = "e", Label = "E", SkillName = "Move Forward" },
|
||||
new() { Id = "r", Label = "R", SkillName = "Sun Strike", Character = "Xavian", CooldownDuration = 0 },
|
||||
new() { Id = "t", Label = "T", SkillName = "Sky Crash", Character = "Xavian", CooldownDuration = 60 },
|
||||
new() { Id = "a", Label = "A", SkillName = "Solar Shield", Character = "Xavian", CooldownDuration = 15 },
|
||||
new() { Id = "s", Label = "S", SkillName = "Move Left" },
|
||||
new() { Id = "d", Label = "D", SkillName = "Move Back" },
|
||||
new() { Id = "f", Label = "F", SkillName = "Move Right" },
|
||||
new() { Id = "g", Label = "G", SkillName = "Blinding Slash", Character = "Xavian", CooldownDuration = 6 },
|
||||
new() { Id = "z", Label = "Z" },
|
||||
new() { Id = "x", Label = "X" },
|
||||
new() { Id = "c", Label = "C" },
|
||||
new() { Id = "v", Label = "V", SkillName = "Interupt", Character = "Xavian", CooldownDuration = 12 },
|
||||
new() { Id = "b", Label = "B", SkillName = "Taunt", Character = "Xavian", CooldownDuration = 8 }
|
||||
};
|
||||
spaceKey = new KeyData { Id = "space", Label = "Space", SkillName = "Jump", CooldownDuration = 0.5 };
|
||||
|
||||
ShiftKeys = new List<KeyData>
|
||||
{
|
||||
new() { Id = "shift-1", Label = "Shift+1" },
|
||||
new() { Id = "shift-2", Label = "Shift+2" },
|
||||
new() { Id = "shift-3", Label = "Shift+3" },
|
||||
new() { Id = "shift-4", Label = "Shift+4" },
|
||||
new() { Id = "shift-5", Label = "Shift+5" },
|
||||
new() { Id = "shift-6", Label = "Shift+6" },
|
||||
new() { Id = "shift-q", Label = "Shift+Q", SkillName = "Decree of the Sun", Character = "Xavian", CooldownDuration = 0 },
|
||||
new() { Id = "shift-w", Label = "Shift+W" },
|
||||
new() { Id = "shift-e", Label = "Shift+E" },
|
||||
new() { Id = "shift-r", Label = "Shift+R", SkillName = "Omnistrike", Character = "Xavian", CooldownDuration = 18 },
|
||||
new() { Id = "shift-t", Label = "Shift+T" },
|
||||
new() { Id = "shift-a", Label = "Shift+A" },
|
||||
new() { Id = "shift-s", Label = "Shift+S" },
|
||||
new() { Id = "shift-d", Label = "Shift+D" },
|
||||
new() { Id = "shift-f", Label = "Shift+F" },
|
||||
new() { Id = "shift-g", Label = "Shift+G", SkillName = "Solar Blades", Character = "Xavian", CooldownDuration = 9 },
|
||||
new() { Id = "shift-z", Label = "Shift+Z" },
|
||||
new() { Id = "shift-x", Label = "Shift+X" },
|
||||
new() { Id = "shift-c", Label = "Shift+C" },
|
||||
new() { Id = "shift-v", Label = "Shift+V" },
|
||||
new() { Id = "shift-b", Label = "Shift+B" }
|
||||
};
|
||||
shiftSpaceKey = new KeyData { Id = "shift-space", Label = "Shift+Space" };
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
await containerRef.FocusAsync();
|
||||
}
|
||||
}
|
||||
|
||||
private void HandleKeyDown(KeyboardEventArgs e)
|
||||
{
|
||||
var isShift = e.ShiftKey;
|
||||
var key = e.Key.ToLower();
|
||||
|
||||
var allKeys = new List<KeyData>();
|
||||
allKeys.AddRange(Keys);
|
||||
allKeys.Add(spaceKey);
|
||||
allKeys.AddRange(ShiftKeys);
|
||||
allKeys.Add(shiftSpaceKey);
|
||||
|
||||
KeyData? target;
|
||||
if (isShift)
|
||||
{
|
||||
if (key == "shift") return;
|
||||
var lookup = "shift-" + (key == " " ? "space" : key);
|
||||
target = allKeys.FirstOrDefault(k => k.Id == lookup);
|
||||
}
|
||||
else
|
||||
{
|
||||
var lookup = key == " " ? "space" : key;
|
||||
target = allKeys.FirstOrDefault(k => k.Id == lookup);
|
||||
}
|
||||
|
||||
if (target != null)
|
||||
{
|
||||
ActivateKey(target);
|
||||
}
|
||||
}
|
||||
|
||||
private void ActivateKey(KeyData key)
|
||||
{
|
||||
if (key.OnCooldown) return;
|
||||
|
||||
var duration = key.CooldownDuration > 0 ? key.CooldownDuration : 0.5;
|
||||
key.Remaining = duration;
|
||||
|
||||
var allKeys = new List<KeyData>();
|
||||
allKeys.AddRange(Keys);
|
||||
allKeys.Add(spaceKey);
|
||||
allKeys.AddRange(ShiftKeys);
|
||||
allKeys.Add(shiftSpaceKey);
|
||||
|
||||
foreach (var k in allKeys)
|
||||
{
|
||||
k.Tick(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user