JonathanMcCaffrey/Fellowship-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Error toast and key skill display

Browse Source
This commit is contained in:
Jonathan McCaffrey
2026-06-17 23:09:23 -04:00
parent 1ab018591d
commit 12dc012dce
2 changed files with 373 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Fellowship/Web/Pages/Keyboard.razor
+178 -1
View File
@@ -2,6 +2,22 @@
<PageTitle>Keyboard</PageTitle>
<div class="kb-layout">
<div class="kb-left">
@if (toast != null)
{
<div class="toast-notification @(toast.Visible ? "toast-show" : "toast-hide")">
<div class="toast-content">
<span class="toast-icon">&#x26A0;</span>
<div class="toast-text">
<span class="toast-title">@toast.SkillName</span>
<span class="toast-message">Cannot cast yet — @toast.Remaining seconds remaining</span>
</div>
</div>
</div>
}
<div class="character-selector">
<label>Character:</label>
<select @bind="selectedCharacter" @bind:after="RebuildKeyboardData">
@@ -259,6 +275,108 @@
</div>
</div>
</div>
</div>
<div class="kb-right">
@if (selectedSkill != null)
{
<div class="skill-detail">
<div class="skill-detail-header">
<h3 class="skill-detail-name">@Path.GetFileNameWithoutExtension(selectedSkill.FileName)</h3>
<span class="skill-detail-key">@selectedSkill.Key</span>
</div>
@if (!string.IsNullOrEmpty(selectedSkill.Description))
{
<div class="skill-detail-desc">
@foreach (var line in selectedSkill.Description.Split('\n'))
{
<p>@line</p>
}
</div>
}
<div class="skill-detail-stats">
@if (!string.IsNullOrEmpty(selectedSkill.Cast))
{
<div class="stat-row">
<span class="stat-label">Cast</span>
<span class="stat-value">@selectedSkill.Cast</span>
</div>
}
@if (ParseValue(selectedSkill.Damage) > 0)
{
<div class="stat-row">
<span class="stat-label">Damage</span>
<span class="stat-value">@FormatStat(selectedSkill.Damage)</span>
</div>
}
@if (!string.IsNullOrEmpty(selectedSkill.DamageType))
{
<div class="stat-row">
<span class="stat-label">Type</span>
<span class="stat-value">@selectedSkill.DamageType</span>
</div>
}
@if (ParseValue(selectedSkill.Heal) > 0)
{
<div class="stat-row">
<span class="stat-label">Healing</span>
<span class="stat-value">@FormatStat(selectedSkill.Heal)</span>
</div>
}
@if (ParseValue(selectedSkill.Shield) > 0)
{
<div class="stat-row">
<span class="stat-label">Shield</span>
<span class="stat-value">@FormatStat(selectedSkill.Shield)</span>
</div>
}
@if (!string.IsNullOrEmpty(selectedSkill.Cooldown) && ParseValue(selectedSkill.Cooldown) > 0)
{
<div class="stat-row">
<span class="stat-label">Cooldown</span>
<span class="stat-value">@selectedSkill.Cooldown s</span>
</div>
}
@if (ParseValue(selectedSkill.Mana) > 0)
{
<div class="stat-row">
<span class="stat-label">Mana</span>
<span class="stat-value">@FormatStat(selectedSkill.Mana)</span>
</div>
}
@if (!string.IsNullOrEmpty(selectedSkill.Range) && ParseValue(selectedSkill.Range) > 0)
{
<div class="stat-row">
<span class="stat-label">Range</span>
<span class="stat-value">@selectedSkill.Range</span>
</div>
}
</div>
@if (selectedSkill.Tags is { Count: > 0 })
{
<div class="skill-detail-tags">
@foreach (var tag in selectedSkill.Tags)
{
<span class="tag-badge">@tag</span>
}
</div>
}
</div>
}
else
{
<div class="skill-detail skill-detail-empty">
<div class="empty-hint">
<span class="empty-icon">&#x2328;</span>
<p>Press a key to view skill details</p>
</div>
</div>
}
</div>
</div>
@code {
private ElementReference containerRef;
@@ -269,6 +387,9 @@
private KeyData shiftSpaceKey = null!;
private string selectedCharacter = "Xavian";
private List<string> Characters = [];
private ToastData? toast;
private CancellationTokenSource? toastCts;
private SkillDoc? selectedSkill;
public class KeyData
{
@@ -276,6 +397,7 @@
public string Label { get; set; } = "";
public string? SkillName { get; set; }
public string? Character { get; set; }
public SkillDoc? SkillDoc { get; set; }
public double CooldownDuration { get; set; }
public double Remaining { get; set; }
public bool OnCooldown => Remaining > 0;
@@ -349,6 +471,7 @@
Label = label,
SkillName = skillName,
Character = skill?.Character,
SkillDoc = skill,
CooldownDuration = ParseCooldown(skill?.Cooldown)
};
}).ToList();
@@ -361,6 +484,7 @@
Label = "Space",
SkillName = spaceSkill != null ? Path.GetFileNameWithoutExtension(spaceSkill.FileName) : spaceAction,
Character = spaceSkill?.Character,
SkillDoc = spaceSkill,
CooldownDuration = ParseCooldown(spaceSkill?.Cooldown)
};
@@ -376,6 +500,7 @@
Label = "Shift+" + label,
SkillName = skillName,
Character = skill?.Character,
SkillDoc = skill,
CooldownDuration = ParseCooldown(skill?.Cooldown)
};
}).ToList();
@@ -388,8 +513,11 @@
Label = "Shift+Space",
SkillName = shiftSpaceSkill != null ? Path.GetFileNameWithoutExtension(shiftSpaceSkill.FileName) : shiftSpaceAction,
Character = shiftSpaceSkill?.Character,
SkillDoc = shiftSpaceSkill,
CooldownDuration = ParseCooldown(shiftSpaceSkill?.Cooldown)
};
selectedSkill = null;
}
private static double ParseCooldown(string? cooldown)
@@ -399,6 +527,20 @@
return 0;
}
private static double ParseValue(string? value)
{
if (string.IsNullOrEmpty(value)) return 0;
var clean = value.Replace(",", "").Trim();
if (double.TryParse(clean, out var result)) return result;
return 0;
}
private static string FormatStat(string? value)
{
if (string.IsNullOrEmpty(value)) return "";
return value;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
@@ -437,11 +579,46 @@
}
}
private record ToastData(string SkillName, double Remaining, bool Visible);
private async void ShowToast(string skillName, double remaining)
{
toastCts?.Cancel();
toastCts = new CancellationTokenSource();
var token = toastCts.Token;
toast = new ToastData(skillName, remaining, true);
StateHasChanged();
try
{
await Task.Delay(2000, token);
if (!token.IsCancellationRequested)
{
toast = toast with { Visible = false };
StateHasChanged();
await Task.Delay(300, token);
if (!token.IsCancellationRequested)
{
toast = null;
StateHasChanged();
}
}
}
catch (TaskCanceledException) { }
}
private void ActivateKey(KeyData key)
{
if (key.OnCooldown) return;
if (key.OnCooldown)
{
ShowToast(key.SkillName ?? key.Label, Math.Ceiling(key.Remaining));
return;
}
if (key.Character == null) return;
selectedSkill = key.SkillDoc;
var duration = key.CooldownDuration > 0 ? key.CooldownDuration : 0.5;
key.Remaining = duration;
Fellowship/Web/Pages/Keyboard.razor.css
+195
View File
@@ -1,3 +1,57 @@
.toast-notification {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
background: #1a1a1a;
border: 1px solid #ff4444;
border-radius: 10px;
padding: 14px 22px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 68, 68, 0.2);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.toast-notification.toast-show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.toast-notification.toast-hide {
opacity: 0;
transform: translateX(-50%) translateY(-12px);
}
.toast-content {
display: flex;
align-items: center;
gap: 12px;
}
.toast-icon {
font-size: 20px;
color: #ff4444;
flex-shrink: 0;
}
.toast-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.toast-title {
font-size: 15px;
font-weight: 700;
color: #fff;
}
.toast-message {
font-size: 12px;
color: #ff8888;
}
.keyboard-container {
outline: none;
padding: 20px;
@@ -166,3 +220,144 @@
width: 80%;
text-align: center;
}
.kb-layout {
display: flex;
gap: 24px;
align-items: flex-start;
}
.kb-left {
flex-shrink: 0;
}
.kb-right {
flex: 1;
min-width: 280px;
position: sticky;
top: 20px;
}
.skill-detail {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.skill-detail-empty {
border-style: dashed;
border-color: #333;
background: #141414;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.empty-hint {
text-align: center;
color: #555;
}
.empty-icon {
font-size: 32px;
display: block;
margin-bottom: 8px;
}
.empty-hint p {
margin: 0;
font-size: 13px;
}
.skill-detail-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #2a2a2a;
}
.skill-detail-name {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.skill-detail-key {
font-size: 11px;
font-weight: 600;
color: #888;
background: #2a2a2a;
padding: 3px 8px;
border-radius: 4px;
border: 1px solid #444;
text-transform: uppercase;
}
.skill-detail-desc {
margin-bottom: 14px;
}
.skill-detail-desc p {
margin: 0 0 6px;
font-size: 13px;
line-height: 1.5;
color: #bbb;
}
.skill-detail-desc p:last-child {
margin-bottom: 0;
}
.skill-detail-stats {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
border-bottom: 1px solid #222;
}
.stat-row:last-child {
border-bottom: none;
}
.stat-label {
font-size: 12px;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-value {
font-size: 14px;
font-weight: 600;
color: #cce;
}
.skill-detail-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.skill-detail-tags .tag-badge {
font-size: 11px;
padding: 3px 8px;
background: #2a2a40;
border: 1px solid #3a3a55;
border-radius: 4px;
color: #99b;
}