Initial Slop
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
@page "/counter"
|
||||
|
||||
<PageTitle>Counter</PageTitle>
|
||||
|
||||
<h1>Counter</h1>
|
||||
|
||||
<p role="status">Current count: @currentCount</p>
|
||||
|
||||
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
|
||||
|
||||
@code {
|
||||
private int currentCount;
|
||||
|
||||
private void IncrementCount()
|
||||
{
|
||||
currentCount++;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@page "/"
|
||||
|
||||
<PageTitle>Home</PageTitle>
|
||||
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
Welcome to your new app.
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
.keyboard-container {
|
||||
outline: none;
|
||||
padding: 20px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.keyboard-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kb-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.kb-offset-1 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.kb-offset-2 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.kb-space-row {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.kb-key {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 2px solid #555;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: #2a2a2a;
|
||||
color: #fff;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kb-key:hover {
|
||||
background: #3a3a3a;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.kb-key:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.kb-key.on-cd {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.kb-space {
|
||||
width: 520px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.kb-shift {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.key-label {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
font-size: 10px;
|
||||
opacity: 0.8;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cd-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cd-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cd-bg {
|
||||
fill: none;
|
||||
stroke: #333;
|
||||
stroke-width: 8;
|
||||
}
|
||||
|
||||
.cd-progress {
|
||||
fill: none;
|
||||
stroke: #ff4444;
|
||||
stroke-width: 8;
|
||||
stroke-linecap: round;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
transition: stroke-dashoffset 0.1s linear;
|
||||
}
|
||||
|
||||
.cd-text {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #ff6666;
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.kb-divider {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin: 16px 0 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #444;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@page "/not-found"
|
||||
@layout MainLayout
|
||||
|
||||
<h3>Not Found</h3>
|
||||
<p>Sorry, the content you are looking for does not exist.</p>
|
||||
@@ -0,0 +1,60 @@
|
||||
@page "/weather"
|
||||
@inject HttpClient Http
|
||||
|
||||
<PageTitle>Weather</PageTitle>
|
||||
|
||||
<h1>Weather</h1>
|
||||
|
||||
<p>This component demonstrates fetching data from the server.</p>
|
||||
|
||||
@if (forecasts == null)
|
||||
{
|
||||
<p>
|
||||
<em>Loading...</em>
|
||||
</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th aria-label="Temperature in Celsius">Temp. (C)</th>
|
||||
<th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var forecast in forecasts)
|
||||
{
|
||||
<tr>
|
||||
<td>@forecast.Date.ToShortDateString()</td>
|
||||
<td>@forecast.TemperatureC</td>
|
||||
<td>@forecast.TemperatureF</td>
|
||||
<td>@forecast.Summary</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
@code {
|
||||
private WeatherForecast[]? forecasts;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
|
||||
}
|
||||
|
||||
public class WeatherForecast
|
||||
{
|
||||
public DateOnly Date { get; set; }
|
||||
|
||||
public int TemperatureC { get; set; }
|
||||
|
||||
public string? Summary { get; set; }
|
||||
|
||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user