diff --git a/frontends/web/gb.ts b/frontends/web/gb.ts
index bb2dca5d55c675a9875a397c6ce0cf8ca21b0f41..d3103b8ae2c5e0b9cc0ec37505e697fb20682352 100644
--- a/frontends/web/gb.ts
+++ b/frontends/web/gb.ts
@@ -460,6 +460,18 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
};
}
+ get palette(): string | undefined {
+ const paletteObj = PALETTES[this.paletteIndex];
+ return paletteObj.name;
+ }
+
+ set palette(value: string | undefined) {
+ if (value === undefined) return;
+ const paletteObj = PALETTES_MAP[value];
+ this.paletteIndex = PALETTES.indexOf(paletteObj);
+ this.updatePalette();
+ }
+
getTile(index: number): Uint8Array {
return this.gameBoy?.get_tile_buffer(index) ?? new Uint8Array();
}
@@ -501,12 +513,7 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
this.paletteIndex += 1;
this.paletteIndex %= PALETTES.length;
this.updatePalette();
- }
-
- setPalette(palette: string) {
- const paletteObj = PALETTES_MAP[palette];
- this.paletteIndex = PALETTES.indexOf(paletteObj);
- this.updatePalette();
+ return PALETTES[this.paletteIndex].name;
}
benchmark(count = 50000000) {
diff --git a/frontends/web/react/app.tsx b/frontends/web/react/app.tsx
index f8f08e9fcce8e2c1cde6e776569a676df2149828..b34f94827656306966415bc17a6be7b0eca52060 100644
--- a/frontends/web/react/app.tsx
+++ b/frontends/web/react/app.tsx
@@ -21,6 +21,7 @@ import {
Overlay,
Pair,
PanelSplit,
+ PanelTab,
Paragraph,
RegistersGB,
Section,
@@ -64,6 +65,7 @@ export const EmulatorApp: FC<EmulatorAppProps> = ({
const [backgroundIndex, setBackgroundIndex] = useState(0);
const [romInfo, setRomInfo] = useState<RomInfo>({});
const [framerate, setFramerate] = useState(0);
+ const [paletteName, setPaletteName] = useState(emulator.palette);
const [keyaction, setKeyaction] = useState<string>();
const [modalTitle, setModalTitle] = useState<string>();
const [modalText, setModalText] = useState<string>();
@@ -121,7 +123,7 @@ export const EmulatorApp: FC<EmulatorAppProps> = ({
}, [keyaction]);
useEffect(() => {
if (palette) {
- emulator.setPalette?.(palette);
+ emulator.palette = palette;
}
const onFullChange = (event: Event) => {
if (
@@ -327,7 +329,8 @@ export const EmulatorApp: FC<EmulatorAppProps> = ({
setBackgroundIndex((backgroundIndex + 1) % backgrounds.length);
};
const onPaletteClick = () => {
- emulator.changePalette?.();
+ const palette = emulator.changePalette?.();
+ setPaletteName(palette);
};
const onUploadFile = async (file: File) => {
const arrayBuffer = await file.arrayBuffer();
@@ -513,72 +516,88 @@ export const EmulatorApp: FC<EmulatorAppProps> = ({
)}
{infoVisible && (
<Section>
- <Info>
- <Pair
- key="button-engine"
- name={"Engine"}
- valueNode={
- <ButtonSwitch
- options={emulator.engines.map((e) =>
- e.toUpperCase()
- )}
- size={"large"}
- style={["simple"]}
- onChange={onEngineChange}
+ <PanelTab
+ tabs={[
+ <Info>
+ <Pair
+ key="button-engine"
+ name={"Engine"}
+ valueNode={
+ <ButtonSwitch
+ options={emulator.engines.map(
+ (e) => e.toUpperCase()
+ )}
+ size={"large"}
+ style={["simple"]}
+ onChange={onEngineChange}
+ />
+ }
/>
- }
- />
- <Pair
- key="rom"
- name={"ROM"}
- value={romInfo.name ?? "-"}
- />
- <Pair
- key="rom-size"
- name={"ROM Size"}
- value={
- romInfo.size
- ? `${new Intl.NumberFormat().format(
- romInfo.size
- )} bytes`
- : "-"
- }
- />
- <Pair
- key="button-frequency"
- name={"CPU Frequency"}
- valueNode={
- <ButtonIncrement
- value={emulator.frequency / 1000 / 1000}
- delta={
- (emulator.frequencyDelta ??
- FREQUENCY_DELTA) /
- 1000 /
- 1000
+ <Pair
+ key="rom"
+ name={"ROM"}
+ value={romInfo.name ?? "-"}
+ />
+ <Pair
+ key="rom-size"
+ name={"ROM Size"}
+ value={
+ romInfo.size
+ ? `${new Intl.NumberFormat().format(
+ romInfo.size
+ )} bytes`
+ : "-"
}
- min={0}
- suffix={"MHz"}
- decimalPlaces={2}
- onChange={onFrequencyChange}
- onReady={onFrequencyReady}
/>
- }
- />
- <Pair
- key="rom-type"
- name={"ROM Type"}
- value={
- romInfo.extra?.romType
- ? `${romInfo.extra?.romType}`
- : "-"
- }
- />
- <Pair
- key="framerate"
- name={"Framerate"}
- value={`${framerate} fps`}
- />
- </Info>
+ <Pair
+ key="button-frequency"
+ name={"CPU Frequency"}
+ valueNode={
+ <ButtonIncrement
+ value={
+ emulator.frequency /
+ 1000 /
+ 1000
+ }
+ delta={
+ (emulator.frequencyDelta ??
+ FREQUENCY_DELTA) /
+ 1000 /
+ 1000
+ }
+ min={0}
+ suffix={"MHz"}
+ decimalPlaces={2}
+ onChange={onFrequencyChange}
+ onReady={onFrequencyReady}
+ />
+ }
+ />
+ <Pair
+ key="rom-type"
+ name={"ROM Type"}
+ value={
+ romInfo.extra?.romType
+ ? `${romInfo.extra?.romType}`
+ : "-"
+ }
+ />
+ <Pair
+ key="framerate"
+ name={"Framerate"}
+ value={`${framerate} fps`}
+ />
+ </Info>,
+ <Info>
+ <Pair
+ key="palette"
+ name={"Palette"}
+ value={paletteName}
+ />
+ </Info>
+ ]}
+ tabNames={["General", "Detailed"]}
+ />
</Section>
)}
<Section>
diff --git a/frontends/web/react/components/help/help.css b/frontends/web/react/components/help/help.css
index 007e9bfda63aa12108c4defd26e93e6632bb734b..629ce3291cfbed89bab9d19d3ab64993a3ff7d44 100644
--- a/frontends/web/react/components/help/help.css
+++ b/frontends/web/react/components/help/help.css
@@ -1,3 +1,9 @@
+.help {
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+}
+
.keyboard-help {
font-size: 18px;
line-height: 22px;
@@ -27,9 +33,14 @@
-webkit-border-radius: 6px 6px 6px 6px;
display: inline-block;
font-size: 16px;
+ margin-right: 8px;
padding: 1px 8px 1px 8px;
}
+.keyboard-help .key:last-child {
+ margin-right: 0px;
+}
+
.faqs-help > h3 {
margin: 0px 0px 6px 0px;
}
diff --git a/frontends/web/react/components/help/help.tsx b/frontends/web/react/components/help/help.tsx
index 1473c4dd386e503ac479998e57d3d8bdba25ba23..214b9170ccbd812cb475031230b04e740dd2b250 100644
--- a/frontends/web/react/components/help/help.tsx
+++ b/frontends/web/react/components/help/help.tsx
@@ -46,6 +46,20 @@ const keyboardHelp = () => (
</span>
B button
</li>
+ <li>
+ <span className="key-container">
+ <span className="key">ðŸ¡</span>
+ <span className="key">🡒</span>
+ </span>
+ Horizontal control
+ </li>
+ <li>
+ <span className="key-container">
+ <span className="key">🡑</span>
+ <span className="key">🡓</span>
+ </span>
+ Vertical control
+ </li>
<li>
<span className="key-container">
<span className="key">Escape</span>
@@ -84,14 +98,16 @@ const faqsHelp = () => (
<p>It's under development, I'm hopping to have it before Christmas.</p>
<h3>Can I use my Xbox One game pad?</h3>
<p>
- Yes, just plug it in and press a button. BTW: This uses{" "}
+ Yes, just plug it in and press a button.
+ <br />
+ BTW: This uses the{" "}
<Link
href="https://developer.mozilla.org/docs/Web/API/Gamepad_API/Using_the_Gamepad_API"
target="_blank"
>
Web Gamepad API
- </Link>
- .
+ </Link>{" "}
+ 🕹ï¸.
</p>
<h3>Will it ever play Game Boy Color games?</h3>
<p>Eventually...</p>
diff --git a/frontends/web/react/components/info/info.css b/frontends/web/react/components/info/info.css
index cf1924233a9aa1055ff043584ced54dac9431830..936980dbc8e803e0a8ca13a8b97cd660e5f0b881 100644
--- a/frontends/web/react/components/info/info.css
+++ b/frontends/web/react/components/info/info.css
@@ -1,5 +1,6 @@
.info {
font-size: 24px;
+ margin: 0px 0px 0px 0px;
vertical-align: top;
}
diff --git a/frontends/web/react/components/modal/modal.css b/frontends/web/react/components/modal/modal.css
index c3f85bda3daef242e06ad9760444124dbc2aa1f7..a8b3c92ce0392a8de12dc13551dec4971d9e66da 100644
--- a/frontends/web/react/components/modal/modal.css
+++ b/frontends/web/react/components/modal/modal.css
@@ -115,6 +115,8 @@
}
.modal > .modal-window > .modal-contents {
+ display: flex;
+ flex-direction: column;
overflow: auto;
}
diff --git a/frontends/web/react/components/panel-tab/panel-tab.css b/frontends/web/react/components/panel-tab/panel-tab.css
index 60c0458b94a50a3e507ca446448179fd36770785..98460c1f66a66ab1e2b58d491d173b766af9bf26 100644
--- a/frontends/web/react/components/panel-tab/panel-tab.css
+++ b/frontends/web/react/components/panel-tab/panel-tab.css
@@ -1,3 +1,9 @@
+.panel-tab {
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+}
+
.panel-tab > .tab-selectors {
line-height: 30px;
margin-bottom: 26px;
@@ -51,3 +57,9 @@
-khtml-opacity: 1.0;
-webkit-opacity: 1.0;
}
+
+.panel-tab > .tab-container {
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+}
diff --git a/frontends/web/react/structs.ts b/frontends/web/react/structs.ts
index 0ea82022c017e2351ffe597ee2a586f5a15e9543..d2719b882d2c83c03f6da022b17030216c398240 100644
--- a/frontends/web/react/structs.ts
+++ b/frontends/web/react/structs.ts
@@ -154,6 +154,13 @@ export interface Emulator extends ObservableI {
*/
get registers(): Record<string, string | number>;
+ /**
+ * The palette as a string name that is currently
+ * set in the emulator for display.
+ */
+ get palette(): string | undefined;
+ set palette(value: string | undefined);
+
/**
* Obtains the pixel buffer for the VRAM tile at the given
* index.
@@ -196,16 +203,10 @@ export interface Emulator extends ObservableI {
* Changes the palette of the emulator to the "next" one,
* the order in which the palette is chosen is defined by
* the concrete emulator implementation.
- */
- changePalette?: { (): void };
-
- /**
- * Sets the palette with the given name/description
- * as the current palette to be used by the emulator.
*
- * @param palette The name of the palette to be set.
+ * @returns The name of the palette that has been selected.
*/
- setPalette?: { (palette: string): void };
+ changePalette?: { (): string };
/**
* Runs a benchmark operation in the emulator, effectively
@@ -265,4 +266,10 @@ export class EmulatorBase extends Observable {
get frequencyDelta(): number | null {
return FREQUENCY_DELTA;
}
+
+ get palette(): string | undefined {
+ return undefined;
+ }
+
+ set palette(value: string | undefined) {}
}