Implementation of Chip8 UI in Blazor. (#27)

Author: kurtanr

.gitignore

@@ -425,4 +425,5 @@ FodyWeavers.xsd
 *.msi
 *.msix
 *.msm
-*.msp
+*.msp
+/src/Chip8.UI.Blazor/wwwroot/games

src/Chip8.UI.Blazor/BlazorDisplay.cs

@@ -0,0 +1,64 @@
+namespace Chip8.UI.Blazor;
+
+/// <summary>
+/// Blazor WebAssembly implementation of <see cref="IDisplay"/>.
+/// Maintains a pixel buffer; actual canvas rendering is driven externally via <see cref="GetPixelData"/>.
+/// </summary>
+internal sealed class BlazorDisplay : IDisplay
+{
+  private const int ScreenWidth = 64;
+  private const int ScreenHeight = 32;
+
+  private readonly bool[,] _pixelBuffer = new bool[ScreenWidth, ScreenHeight];
+  private readonly byte[] _pixelData = new byte[ScreenWidth * ScreenHeight];
+  private bool _dirty;
+
+  public void Clear()
+  {
+    Array.Clear(_pixelBuffer);
+    _dirty = true;
+  }
+
+  public void ClearPixel(byte x, byte y)
+  {
+    _pixelBuffer[x, y] = false;
+    _dirty = true;
+  }
+
+  public bool GetPixel(byte x, byte y) => _pixelBuffer[x, y];
+
+  public void SetPixel(byte x, byte y)
+  {
+    _pixelBuffer[x, y] = true;
+    _dirty = true;
+  }
+
+  public void RenderIfDirty()
+  {
+    // No - op in Blazor.Rendering is handled by the game loop via GetPixelData.
+  }
+
+  /// <summary>
+  /// Returns a flat byte array (64×32, row-major, 1=on 0=off) if the display changed since the last call.
+  /// Returns null if nothing changed.
+  /// </summary>
+  public byte[]? GetPixelData()
+  {
+    if (!_dirty)
+    {
+      return null;
+    }
+
+    _dirty = false;
+
+    for (int y = 0; y < ScreenHeight; y++)
+    {
+      for (int x = 0; x < ScreenWidth; x++)
+      {
+        _pixelData[y * ScreenWidth + x] = _pixelBuffer[x, y] ? (byte)1 : (byte)0;
+      }
+    }
+
+    return _pixelData;
+  }
+}

src/Chip8.UI.Blazor/BlazorKeyboard.cs

@@ -0,0 +1,52 @@
+namespace Chip8.UI.Blazor;
+
+/// <summary>
+/// Blazor WebAssembly implementation of <see cref="IKeyboard"/>.
+/// Key state is read from JavaScript as a 16-bit bitmask once per frame via <see cref="UpdateKeyState"/>.
+/// </summary>
+internal sealed class BlazorKeyboard : IKeyboard
+{
+  private int _keyMask;
+
+  private bool _waitingForRelease;
+  private byte? _pressedKey;
+
+  /// <summary>
+  /// Updates the keyboard state from a bitmask where bit N = 1 means CHIP-8 key N is pressed.
+  /// Called once per frame from the game loop.
+  /// </summary>
+  public void UpdateKeyState(int keyMask)
+  {
+    _keyMask = keyMask;
+  }
+
+  public bool IsKeyDown(byte key) => (_keyMask & (1 << key)) != 0;
+
+  public byte? WaitForKeyPressAndRelease()
+  {
+    if (!_waitingForRelease)
+    {
+      for (byte i = 0; i < 16; i++)
+      {
+        if (IsKeyDown(i))
+        {
+          _waitingForRelease = true;
+          _pressedKey = i;
+          return null;
+        }
+      }
+      return null;
+    }
+    else
+    {
+      if (_pressedKey.HasValue && !IsKeyDown(_pressedKey.Value))
+      {
+        _waitingForRelease = false;
+        var key = _pressedKey;
+        _pressedKey = null;
+        return key;
+      }
+      return null;
+    }
+  }
+}

src/Chip8.UI.Blazor/Chip8.UI.Blazor.csproj

@@ -0,0 +1,37 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.2" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Chip8\Chip8.csproj" />
+  </ItemGroup>
+
+  <!-- Copy ROM files from repo games folder to wwwroot/games and generate manifest -->
+  <ItemGroup>
+    <_GameFile Include="..\..\games\*" Exclude="..\..\games\*.c8" />
+  </ItemGroup>
+
+  <Target Name="CopyGamesToWwwroot" BeforeTargets="PrepareForBuild">
+    <MakeDir Directories="wwwroot\games" />
+    <Copy SourceFiles="@(_GameFile)" DestinationFolder="wwwroot\games" SkipUnchangedFiles="true" />
+  </Target>
+
+  <Target Name="GenerateGameManifest" AfterTargets="CopyGamesToWwwroot">
+    <ItemGroup>
+      <_GameFileName Include="@(_GameFile->'&quot;%(Filename)%(Extension)&quot;')" />
+    </ItemGroup>
+    <PropertyGroup>
+      <_GameList>@(_GameFileName, ',')</_GameList>
+    </PropertyGroup>
+    <WriteLinesToFile File="wwwroot\games\games.json" Lines="[$(_GameList)]" Overwrite="true" />
+  </Target>
+
+</Project>

src/Chip8.UI.Blazor/Components/App.razor

@@ -0,0 +1,9 @@
+<Router AppAssembly="typeof(App).Assembly">
+  <Found Context="routeData">
+    <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+    <FocusOnNavigate RouteData="routeData" Selector="h1" />
+  </Found>
+  <NotFound>
+    <p>Page not found.</p>
+  </NotFound>
+</Router>

src/Chip8.UI.Blazor/Components/Layout/MainLayout.razor

@@ -0,0 +1,3 @@
+@inherits LayoutComponentBase
+
+@Body

src/Chip8.UI.Blazor/Components/Layout/MainLayout.razor.css

@@ -0,0 +1,20 @@
+#blazor-error-ui {
+    color-scheme: light only;
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.5rem;
+    }