Skip to content

Commit

Permalink
Tweak WASM UI layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@highbyte
highbyte committed Oct 1, 2024
1 parent 78d1915 commit 0db8436
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 83 deletions.
30 changes: 18 additions & 12 deletions src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64ConfigUI.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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)
Expand All @@ -43,7 +43,7 @@
}
else
{
<li>@romName - not loaded</li>
<li class="validation-message" style="font-weight: bold;">@romName - not loaded</li>
}
}
</ul>
Expand All @@ -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> *@
Expand All @@ -94,7 +94,7 @@

</details>

<details>
<details id="joystick_section">
<summary>Joystick settings</summary>
<div class="row">
<div class="column">
Expand Down Expand Up @@ -174,16 +174,15 @@

</details>


<details>
<details id="basic_ai_section">
<summary>Basic AI coding assistant</summary>

<div class="row">
<div class="column">
@* <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())
Expand Down Expand Up @@ -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!;

Expand All @@ -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>();
Expand All @@ -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()
{
Expand All @@ -313,7 +319,7 @@
_isLoadingC64Roms = true;
_validationMessage = "";

foreach (var file in e.GetMultipleFiles(_maxC64AllowedRomFiles))
foreach (var file in e.GetMultipleFiles(_requiredNumberOfRomFiles))
{
try
{
Expand Down
121 changes: 72 additions & 49 deletions src/apps/Highbyte.DotNet6502.App.WASM/Pages/Commodore64/C64Menu.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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)
Expand Down
40 changes: 20 additions & 20 deletions src/apps/Highbyte.DotNet6502.App.WASM/Pages/Index.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -199,7 +199,7 @@ h4 {
margin-bottom: 30px;
font-family: 'Cascadia Code', "Courier New", monospace;
}
#canvasUninitialized h2 {
#canvasUninitialized h2 a {
color: #f7c346;
}
#canvasUninitialized p {
Expand Down
6 changes: 6 additions & 0 deletions src/apps/Highbyte.DotNet6502.App.WASM/wwwroot/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,12 @@
anchorElement.remove();
URL.revokeObjectURL(url);
}

window.setOpen = (id, open) => {
var element = document.getElementById(id);
element.open = open;
}

</script>

<script>
Expand Down

0 comments on commit 0db8436

Please sign in to comment.