Better move error visibility

Shogi.UI/Shared/TemporaryModal.razor

@@ -0,0 +1,39 @@
+@using System.Timers
+<div class="TemporaryModal PrimaryTheme ThemeVariant--Contrast">
+	<div class="content">
+		@ChildContent
+	</div>
+	<button class="close" @onclick="OnClickClose">X</button>
+	<div class="countdown" style="--timeToClose: @TimeToClose">
+		<div class="time-background">
+			<div class="time"></div>
+		</div>
+		<div class="time-helper-text">This message will close soon.</div>
+	</div>
+</div>
+
+@code {
+	[Parameter][EditorRequired] public RenderFragment? ChildContent { get; set; }
+	[Parameter][EditorRequired] public EventCallback OnClickClose { get; set; }
+
+	[Parameter] public int SecondsUntilClose { get; set; } = 3;
+
+	private string TimeToClose => $"{SecondsUntilClose}s";
+	private System.Timers.Timer closingTimer = new System.Timers.Timer();
+
+	protected override void OnParametersSet()
+	{
+		closingTimer = new System.Timers.Timer(TimeSpan.FromSeconds(SecondsUntilClose).TotalMilliseconds)
+			{
+				AutoReset = false
+			};
+		closingTimer.Elapsed += new System.Timers.ElapsedEventHandler(OnTimerElapsed);
+
+		closingTimer.Start();
+	}
+
+	private void OnTimerElapsed(object? source, ElapsedEventArgs elapsedEventArgs)
+	{
+		OnClickClose.InvokeAsync();
+	}
+}

Shogi.UI/Shared/TemporaryModal.razor.css

@@ -0,0 +1,64 @@
+/* Grid layout */
+.TemporaryModal {
+	--timeToClose: 3s;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	grid-template-rows: repeat(1fr, 3) auto;
+	grid-template-areas:
+		"content			close"
+		"content			."
+		"countdown		countdown"
+		"helper-text	helper-text";
+	gap: 0.5rem;
+}
+
+.content {
+	grid-area: content;
+}
+
+button.close {
+	grid-area: close;
+}
+
+.countdown {
+	grid-area: countdown;
+}
+
+
+.time-helper-text {
+	grid-area: helper-text;
+}
+
+/* Apperance */
+
+.TemporaryModal {
+	padding: 0.5rem;
+}
+
+.countdown .time-background {
+	background-color: beige;
+	height: 1ch;
+}
+
+.countdown .time {
+	background-color: red;
+	height: 100%;
+	width: 100%;
+	animation: countdown var(--timeToClose) ease-in-out;
+	animation-fill-mode: both;
+}
+
+.countdown .time-helper-text {
+	font-size: 70%;
+	text-align: center;
+}
+
+@keyframes countdown {
+	0% {
+		width: 100%;
+	}
+
+	100% {
+		width: 0
+	}
+}