From 0db8436667bcc02c8eb93cd9167cbeefd06874f4 Mon Sep 17 00:00:00 2001
From: Highbyte <highbyte@outlook.com>
Date: Tue, 1 Oct 2024 18:16:04 +0200
Subject: [PATCH] Tweak WASM UI layout

---
 .../Pages/Commodore64/C64ConfigUI.razor       |  30 +++--
 .../Pages/Commodore64/C64Menu.razor           | 121 +++++++++++-------
 .../Pages/Index.razor                         |  40 +++---
 .../wwwroot/css/app.css                       |   4 +-
 .../wwwroot/index.html                        |   6 +
 5 files changed, 118 insertions(+), 83 deletions(-)

diff --git a/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64ConfigUI.razor b/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64ConfigUI.razor
index 14c0200f..05237d74 100644
--- a/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64ConfigUI.razor
+++ b/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64ConfigUI.razor
@@ -11,7 +11,7 @@
 @using static Highbyte.DotNet6502.Systems.Commodore64.TimerAndPeripheral.C64Joystick;
 @using static Highbyte.DotNet6502.App.WASM.Pages.Index
 
-<details id="roms">
+<details id="roms_section">
     <summary>ROMs</summary>
     <p>The C64 system requires the following types of ROM files: <strong>Kernal, Basic, and Character generator</strong>.</p>
     <p>- Use existing C64 ROM files on your computer, or download them to your computer from the internet.</p>
@@ -29,10 +29,10 @@
             }
             else
             {
-                <p>@LoadedROMCount/@_maxC64AllowedRomFiles ROMs loaded</p>
+                <p>@LoadedROMCount/@_requiredNumberOfRomFiles ROMs loaded</p>
                 @if (!string.IsNullOrEmpty(_validationMessage))
                 {
-                    <p>@_validationMessage</p>
+                    <p class="validation-message">@_validationMessage</p>
                 }
                 <ul>
                     @foreach (var romName in C64SystemConfig.RequiredROMs)
@@ -43,7 +43,7 @@
                         }
                         else
                         {
-                            <li>@romName - not loaded</li>
+                            <li class="validation-message" style="font-weight: bold;">@romName - not loaded</li>
                         }
                     }
                 </ul>
@@ -67,8 +67,8 @@
     </div>
 </details>
 
-<details>
-    <summary>General settings</summary>
+<details id="video_audio_section">
+    <summary>Video/audio</summary>
     <div class="row">
         <div class="column">
             @* <h4>General settings</h4> *@
@@ -94,7 +94,7 @@
 
 </details>
 
-<details>
+<details id="joystick_section">
     <summary>Joystick settings</summary>
     <div class="row">
         <div class="column">
@@ -174,8 +174,7 @@
 
 </details>
 
-
-<details>
+<details id="basic_ai_section">
     <summary>Basic AI coding assistant</summary>
 
     <div class="row">
@@ -183,7 +182,7 @@
             @* <h4>Basic AI coding assistant</h4> *@
             <div class="table">
                 <div class="table-row">
-                    <div class="table-cell table-cell-fixed-width-medium twocol">Assistant type</div>
+                    <div class="table-cell table-cell-fixed-width-medium twocol">AI backend type</div>
                     <div class="table-cell table-cell-fixed-width-large twocol">
                         <select value="@C64HostConfig.CodeSuggestionBackendType" @onchange="OnCodeSuggestionBackendTypeChanged">
                             @foreach (var codeSuggestionBackendType in Enum.GetNames<CodeSuggestionBackendTypeEnum>().ToArray())
@@ -245,8 +244,11 @@
 <button @onclick="Cancel">Cancel</button>
 
 @code {
+
     [Inject]
     public ILocalStorageService LocalStorage { get; set; } = default!;
+    [Inject]
+    public IJSRuntime Js { get; set; } = default!;
 
     [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;
 
@@ -261,6 +263,10 @@
         _openAIApiConfig = await C64Setup.GetOpenAIConfig(LocalStorage);
         _customEndpointAIApiConfig = await C64Setup.GetCustomAIEndpointConfig(LocalStorage);
         BlazoredModal.SetTitle("C64 config");
+
+        // If ROMs aren't loadad, expand HTML details element for roms (setting property open to true)
+        if (LoadedROMCount < _requiredNumberOfRomFiles)
+            await Js.InvokeVoidAsync("setOpen", "roms_section", true);
     }
 
     private void UnloadROMs() => C64HostConfig.SystemConfig.ROMs = new List<ROM>();
@@ -287,7 +293,7 @@
 
     private bool _isLoadingC64Roms;
     private long _maxC64RomFileSize = 1024 * 8;
-    private int _maxC64AllowedRomFiles = 3;
+    private int _requiredNumberOfRomFiles = 3;
 
     private Dictionary<string, byte[]> GetLoadedRoms()
     {
@@ -313,7 +319,7 @@
         _isLoadingC64Roms = true;
         _validationMessage = "";
 
-        foreach (var file in e.GetMultipleFiles(_maxC64AllowedRomFiles))
+        foreach (var file in e.GetMultipleFiles(_requiredNumberOfRomFiles))
         {
             try
             {
diff --git a/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64Menu.razor b/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64Menu.razor
index b80450f7..c13718a5 100644
--- a/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64Menu.razor
+++ b/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64Menu.razor
@@ -12,69 +12,79 @@
 {
     <div class="system-command systemCommandsStyle@(SYSTEM_NAME)">
 
-        <label for="Joystick">Joystick</label>
-        <select value="@_c64HostConfig.InputConfig.CurrentJoystick" @onchange="OnSelectJoystickChanged">
-            @foreach (var joystick in _c64HostConfig.InputConfig.AvailableJoysticks.ToArray())
-            {
-                <option value="@joystick"> @joystick </option>
-            }
-        </select>
-        
+        <button @onclick="CopyBasicSourceCode" disabled=@OnCopySourceCodeDisabled>Copy</button>
+        <button @onclick="PasteText" disabled=@OnPasteTextDisabled>Paste</button>
         <p></p>
-        <label for="JoystickKeyboardEnabled">Joystick Keyboard</label>
-        <input id="JoystickKeyboardEnabled" type="checkbox" @bind="@JoystickKeyboardEnabled" />
-        <select value="@KeyboardJoystick" @onchange="OnSelectKeyboardJoystickChanged" disabled=@SelectKeyboardJoystickDisabled>
-            @foreach (var joystick in _c64HostConfig.InputConfig.AvailableJoysticks.ToArray())
-            {
-                <option value="@joystick"> @joystick </option>
-            }
-        </select>
-
-        <p>Load/save files</p>
-        <button @onclick="OnBasicFilePicker" disabled=@OnBasicFilePickerDisabled>Load Basic .prg</button>
-        <button @onclick="OnSaveBasicFile" disabled=@OnBasicFilePickerDisabled>Save Basic .prg</button>
-        <button @onclick="OnFilePicker" disabled=@OnFilePickerDisabled>Load & start binary .prg</button>
+        <label for="BasicCodingAssistant">AI Basic (F9)</label>
+        <input id="BasicCodingAssistant" type="checkbox" @bind="@BasicCodingAssistantEnabled" disabled="@BasicCodingAssistantDisabled"/>
 
-        <p>Assembly example files</p>
-        <div>
-            <select value="@SelectedAssemblyExample" @onchange="OnAssemblyExampleChanged" disabled=@OnFilePickerDisabled>
-                @foreach (var exampleFileKey in _assemblyExampleFiles.Keys)
+        <p>&nbsp;</p>
+        <details>
+            <summary>Load/Save</summary>
+            <p>Load/save files</p>
+            <button @onclick="OnBasicFilePicker" disabled=@OnBasicFilePickerDisabled>Load Basic .prg</button>
+            <button @onclick="OnSaveBasicFile" disabled=@OnBasicFilePickerDisabled>Save Basic .prg</button>
+            <button @onclick="OnFilePicker" disabled=@OnFilePickerDisabled>Load & start binary .prg</button>
+
+            <p>Assembly example files</p>
+            <div>
+                <select value="@SelectedAssemblyExample" @onchange="OnAssemblyExampleChanged" disabled=@OnFilePickerDisabled>
+                    @foreach (var exampleFileKey in _assemblyExampleFiles.Keys)
+                    {
+                        <option value="@_assemblyExampleFiles[exampleFileKey]"> @exampleFileKey </option>
+                    }
+                </select>
+                <button @onclick="OnLoadAssemblyExample" disabled=@OnFilePickerDisabled>Load & start</button>
+            </div>
+
+            <p>Basic example files</p>
+            <div>
+                <select value="@SelectedBasicExample" @onchange="OnBasicExampleChanged" disabled=@OnFilePickerDisabled>
+                    @foreach (var exampleFileKey in _basicExampleFiles.Keys)
+                    {
+                        <option value="@_basicExampleFiles[exampleFileKey]"> @exampleFileKey </option>
+                    }
+                </select>
+                <button @onclick="OnLoadBasicExample" disabled=@OnFilePickerDisabled>Load</button>
+            </div>
+
+            <div class="validation-message">
+                <span>@_latestFileError</span>
+            </div>
+        </details>
+
+        <p>&nbsp;</p>
+        <details id="conf_section">
+            <summary>Configuration</summary>
+
+            <label for="Joystick">Active joystick</label>
+            <select value="@_c64HostConfig.InputConfig.CurrentJoystick" @onchange="OnSelectJoystickChanged">
+                @foreach (var joystick in _c64HostConfig.InputConfig.AvailableJoysticks.ToArray())
                 {
-                    <option value="@_assemblyExampleFiles[exampleFileKey]"> @exampleFileKey </option>
+                    <option value="@joystick"> @joystick </option>
                 }
             </select>
-            <button @onclick="OnLoadAssemblyExample" disabled=@OnFilePickerDisabled>Load & start</button>
-        </div>
-
-        <p>Basic example files</p>
-        <div>
-            <select value="@SelectedBasicExample" @onchange="OnBasicExampleChanged" disabled=@OnFilePickerDisabled>
-                @foreach (var exampleFileKey in _basicExampleFiles.Keys)
+        
+            <label for="JoystickKeyboardEnabled">Joystick Keyboard</label>
+            <input id="JoystickKeyboardEnabled" type="checkbox" @bind="@JoystickKeyboardEnabled" />
+            <select value="@KeyboardJoystick" @onchange="OnSelectKeyboardJoystickChanged" disabled=@SelectKeyboardJoystickDisabled>
+                @foreach (var joystick in _c64HostConfig.InputConfig.AvailableJoysticks.ToArray())
                 {
-                    <option value="@_basicExampleFiles[exampleFileKey]"> @exampleFileKey </option>
+                    <option value="@joystick"> @joystick </option>
                 }
             </select>
-            <button @onclick="OnLoadBasicExample" disabled=@OnFilePickerDisabled>Load</button>
-        </div>
 
-        <p>Misc.</p>
-        <button @onclick="CopyBasicSourceCode" disabled=@OnCopySourceCodeDisabled>Copy</button>
-        <button @onclick="PasteText" disabled=@OnPasteTextDisabled>Paste</button>
-        <p></p>
-        <label for="BasicCodingAssistant">AI Basic (F9)</label>
-        <input id="BasicCodingAssistant" type="checkbox" @bind="@BasicCodingAssistantEnabled" disabled="@BasicCodingAssistantDisabled"/>
+            <div class="system-config systemConfigStyle@(SYSTEM_NAME)">
+                <button @onclick="ShowConfigUI" class="@(_c64HostConfig.IsValid(out _) ? "": "validation-message")" disabled=@ShowConfigDisabled>C64 Config</button>
+            </div>
 
-    </div>
+        </details>
 
-    <div class="validation-message">
-        <span>@_latestFileError</span>
-    </div>
 
-    <div class="system-help systemHelpStyle@(SYSTEM_NAME)">
     </div>
 
-    <div class="system-config systemConfigStyle@(SYSTEM_NAME)">
-        <button @onclick="ShowConfigUI" disabled=@ShowConfigDisabled>C64 Config</button>
+
+    <div class="system-help systemHelpStyle@(SYSTEM_NAME)">
     </div>
 
     <style>
@@ -116,10 +126,23 @@
     private string _latestFileError = "";
     private string SYSTEM_NAME = C64.SystemName;
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        // If config isn't valid, expand HTML details element for conf (setting property open to true)
+        if (firstRender)
+        {
+            if (!_c64HostConfig.IsValid(out _))
+            {
+                await Js.InvokeVoidAsync("setOpen", "conf_section", true);
+            }
+        }
+    }
+
     protected override void OnInitialized()
     {
         _logger = LoggerFactory.CreateLogger<C64Menu>();
         _logger.LogDebug("OnInitializedAsync() was called");
+
     }
 
     private void OnSelectJoystickChanged(ChangeEventArgs e)
diff --git a/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Index.razor b/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Index.razor
index 55a30d63..107d8c02 100644
--- a/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Index.razor
+++ b/src/apps/Highbyte.DotNet6502.App.WASM/Pages/Index.razor
@@ -13,9 +13,9 @@
 @if(Initialized)
 {
     <div class="grid-container">
-        <div class="header">
+        @* <div class="header">
             <a href="https://github.com/highbyte/dotnet-6502" target="_blank">DotNet 6502</a>
-        </div>
+        </div> *@
         <div class="menu">
             <div id="system-selector" class="command-panel">
                 <div>
@@ -47,26 +47,27 @@
                 <button @onclick="OnMonitorToggle" disabled=@OnStopDisabled>Monitor</button>
                 <button @onclick="OnStatsToggle" disabled=@OnStopDisabled>Stats</button>
 
-                <p></p>
-                <span>Screen scale: <InputNumber @bind-Value="Scale" step="0.5" style="width: 40px" disabled=@OnSelectSystemNameDisabled>Scale: </InputNumber></span>
+                <details>
+                    <summary>Video/audio</summary>
+                    <span>Screen scale: <InputNumber @bind-Value="Scale" step="0.5" style="width: 40px" disabled=@OnSelectSystemNameDisabled>Scale: </InputNumber></span>
 
-                <p></p>
-                <label for="audioEnabled">Audio enabled (experimental)</label>
-                @* <input id="audioEnabled" type="checkbox" @bind="@IsAudioEnabled()" disabled=@AudioEnabledToggleDisabled() /> *@
-                <input id="audioEnabled" type="checkbox" value="@IsAudioEnabled()"  onchange="@((bool e) => SetAudioEnabled(e))" disabled=@AudioEnabledToggleDisabled() />
+                    <label for="audioEnabled">Audio enabled (experimental)</label>
+                    @* <input id="audioEnabled" type="checkbox" @bind="@IsAudioEnabled()" disabled=@AudioEnabledToggleDisabled() /> *@
+                    <input id="audioEnabled" type="checkbox" value="@IsAudioEnabled()" onchange="@((bool e) => SetAudioEnabled(e))" disabled=@AudioEnabledToggleDisabled() />
 
-                <p></p>
-                <div class="audioVolumeStyle">
-                    Volume:
-                    <input @bind="@MasterVolumePercent" @bind:event="oninput" type="range" id="masterVolume" min="0" max="100" step="0.02" />
-                    @* <input @bind="@MasterVolumePercent" @bind:event="oninput" type="number" min="0" max="100" step="0.02" /> *@
-                </div>
+                    <div class="audioVolumeStyle">
+                        Volume:
+                        <input @bind="@MasterVolumePercent" @bind:event="oninput" type="range" id="masterVolume" min="0" max="100" step="0.02" />
+                        @* <input @bind="@MasterVolumePercent" @bind:event="oninput" type="number" min="0" max="100" step="0.02" /> *@
+                    </div>
+                </details>
             </div>
 
             <div class="command-panel">
                 <h4>@_wasmHost.SelectedSystemName</h4>
                 <C64Menu Parent=this />
                 <GenericMenu Parent=this />
+
                 <div class="validation-message">
                     <span>@_selectedSystemConfigValidationMessage</span>
                 </div>
@@ -109,13 +110,12 @@
                       @onkeyup="OnKeyUp"
                       @onfocus="OnFocus" />
 
-            <div id="canvasUninitialized"
-                 class="canvasUninitializedStyle">
+            <div id="canvasUninitialized" class="canvasUninitializedStyle">
 
-                    <h2>
-                        <img src="images/logo.png" align="middle" style="width:100px;height:100px;" title="DotNet 6502 logo" />
-                        The DotNet 6502 emulator!
-                    </h2>
+                <h2>
+                    <img src="images/logo.png" align="middle" style="width:100px;height:100px;" title="DotNet 6502 logo" />
+                    The <a href="https://github.com/highbyte/dotnet-6502" target="_blank">DotNet 6502</a> emulator!
+                </h2>
 
                 <p>
                     A <a href="https://en.wikipedia.org/wiki/MOS_Technology_6502" target="_blank">6502 CPU</a> emulator written in <a href="https://dotnet.microsoft.com/" target="_blank">.NET</a>, rendered with <a href="https://github.com/mono/SkiaSharp" target="_blank">SkiaSharp</a>, compiled to <a href="https://en.wikipedia.org/wiki/WebAssembly" target="_blank">WebAssembly</a> via <a href="https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor" target="_blank">Blazor</a>, running in a browser.
diff --git a/src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/css/app.css b/src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/css/app.css
index ceff2c97..37ddab62 100644
--- a/src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/css/app.css
+++ b/src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/css/app.css
@@ -129,7 +129,7 @@ h4 {
 .grid-container {
     display: inline-grid;
     grid-template-areas:
-        'header     main    right'
+        /*'header     main    right'*/
         'menu       main    right'
         'menu       footer  right'
         'menuFooter footer  right';
@@ -199,7 +199,7 @@ h4 {
     margin-bottom: 30px; 
     font-family: 'Cascadia Code', "Courier New", monospace;
 }
-#canvasUninitialized h2 {
+#canvasUninitialized h2 a {
     color: #f7c346;
 }
 #canvasUninitialized p {
diff --git a/src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/index.html b/src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/index.html
index e437fea8..f4d2f5d6 100644
--- a/src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/index.html
+++ b/src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/index.html
@@ -64,6 +64,12 @@
             anchorElement.remove();
             URL.revokeObjectURL(url);
         }
+
+        window.setOpen = (id, open) => {
+            var element = document.getElementById(id);
+            element.open = open;
+        }
+
     </script>
 
     <script>