diff --git a/examples/web/index.html b/examples/web/index.html
index a706b8e6a3be5e16b77ada1d8eb48b9595e0fbbf..e73574f4f94b2ecb7eecea4fc000023bbf1f5bb6 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -18,70 +18,13 @@
<div class="side-left">
</div>
<div class="side-right">
- <div class="separator"></div>
- <div id="section-narrative" class="section">
- <p>This is a <a href="https://en.wikipedia.org/wiki/Game_Boy" target="_blank">Game Boy</a> emulator built using
- the <a href="https://www.rust-lang.org" target="_blank">Rust Programming Language</a> and is running
- inside this browser with the help of <a href="https://webassembly.org/" target="_blank">WebAssembly</a>.
- </p>
- <p>You can check the source code of it at <a href="https://gitlab.stage.hive.pt/joamag/boytacean"
- target="_blank">GitLab</a>.</p>
- <p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p>
- </div>
- <div id="separator-narrative" class="separator"></div>
- <div id="section-keyboard" class="section" style="display: none;">
- <div id="keyboard" class="keyboard">
- <div class="keyboard-line">
- <span class="key">1</span>
- <span class="key">2</span>
- <span class="key">3</span>
- <span class="key">4</span>
- </div>
- <div class="keyboard-line">
- <span class="key">Q</span>
- <span class="key">W</span>
- <span class="key">E</span>
- <span class="key">R</span>
- </div>
- <div class="keyboard-line">
- <span class="key">A</span>
- <span class="key">S</span>
- <span class="key">D</span>
- <span class="key">F</span>
- </div>
- <div class="keyboard-line">
- <span class="key">Z</span>
- <span class="key">X</span>
- <span class="key">C</span>
- <span class="key">V</span>
- </div>
- </div>
- </div>
- <div id="separator-keyboard" class="separator" style="display: none;"></div>
+ <div id="separator-narrative" class="separator"></div>
<div id="section-debug" class="section" style="display: none;">
<div id="debug" class="debug">
<canvas id="canvas-tiles" class="canvas-tiles" width="128" height="192"></canvas>
</div>
</div>
<div id="separator-debug" class="separator" style="display: none;"></div>
- <div id="section-diag" class="section">
- <dl class="diag">
- <dt>Engine</dt>
- <dd id="engine" class="button simple">-</dd>
- <dt>ROM</dt>
- <dd id="rom-name">-</dd>
- <dt>ROM Size</dt>
- <dd><span id="rom-size">-</span> bytes</dd>
- <dt>CPU Frequency</dt>
- <dd>
- <span id="logic-frequency-minus" class="button simple">-</span>
- <span id="logic-frequency">-</span> Hz
- <span id="logic-frequency-plus" class="button simple">+</span></dd>
- <dt>Framerate</dt>
- <dd><span id="fps-count">-</span> fps</dd>
- </dl>
- </div>
- <div id="separator-diag" class="separator"></div>
<div class="section">
<div class="button-area">
<span id="button-pause" class="button simple border padded">
diff --git a/examples/web/index.ts b/examples/web/index.ts
index 2ded0d1fdb9ebc72b487ca55f226ca41cd6bbcf5..c1d3944cd59d43fae15fa0f19ff33727e04d1077 100644
--- a/examples/web/index.ts
+++ b/examples/web/index.ts
@@ -422,29 +422,6 @@ class GameboyEmulator extends Observable implements Emulator {
}
registerButtons() {
- const engine = document.getElementById("engine")!;
- engine.addEventListener("click", () => {
- const name = this.engine === "neo" ? "classic" : "neo";
- this.boot({ engine: name });
- this.trigger("message", {
- text: `Game Boy running in engine "${name.toUpperCase()}" from now on!`
- });
- });
-
- const logicFrequencyPlus = document.getElementById(
- "logic-frequency-plus"
- )!;
- logicFrequencyPlus.addEventListener("click", () => {
- this.logicFrequency = this.logicFrequency + FREQUENCY_DELTA;
- });
-
- const logicFrequencyMinus = document.getElementById(
- "logic-frequency-minus"
- )!;
- logicFrequencyMinus.addEventListener("click", () => {
- this.logicFrequency = this.logicFrequency - FREQUENCY_DELTA;
- });
-
const buttonPause = document.getElementById("button-pause")!;
buttonPause.addEventListener("click", () => {
this.toggleRunning();
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 07c59556fa1f795454bc9a0fd537cc90d453610e..95bdee3a7ebad0fdc46d63c68d25aba0a0ef97a4 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -146,6 +146,15 @@ export interface Emulator extends ObservableI {
* re-loads the ROM that is currently set in the emulator.
*/
reset(): void;
+
+ /**
+ * Boot (or reboots) the emulator according to the provided
+ * set of options.
+ *
+ * @param options The options that are going to be used for
+ * the booting operation of the emulator.
+ */
+ boot(options: any): void;
}
/**
@@ -299,6 +308,10 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
const onThemeClick = () => {
setBackgroundIndex((backgroundIndex + 1) % backgrounds.length);
};
+ const onEngineChange = (engine: string) => {
+ emulator.boot({ engine: engine.toLowerCase() });
+ showToast(`Game Boy running in engine "${engine}" from now on!`);
+ };
const onMinimize = () => {
setFullscreen(!fullscreen);
};
@@ -438,6 +451,30 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
/>
</ButtonContainer>
<Info>
+ <Pair
+ key="button-engine"
+ name={"Engine"}
+ valueNode={
+ <ButtonSwitch
+ options={["NEO", "CLASSIC"]}
+ size={"large"}
+ style={["simple"]}
+ onChange={onEngineChange}
+ />
+ }
+ />
+ <Pair
+ key="button-frequency"
+ name={"CPU Frequency"}
+ valueNode={
+ <ButtonIncrement
+ value={200}
+ delta={100}
+ min={0}
+ suffix={"Hz"}
+ />
+ }
+ />
<Pair
key="rom"
name={"ROM"}
@@ -462,30 +499,6 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
name={"Framerate"}
value={`${framerate} fps`}
/>
- <Pair
- key="button-tobias"
- name={"Button Increment"}
- valueNode={
- <ButtonIncrement
- value={200}
- delta={100}
- min={0}
- suffix={"Hz"}
- />
- }
- />
- <Pair
- key="button-cpu"
- name={"Button Switch"}
- valueNode={
- <ButtonSwitch
- options={["NEO", "CLASSIC"]}
- size={"large"}
- style={["simple"]}
- onChange={(v) => alert(v)}
- />
- }
- />
</Info>
</Section>
</PanelSplit>