From 394924cfb80cdee59fa6799c92de7aa10d81f3c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Mon, 21 Nov 2022 11:45:36 +0000
Subject: [PATCH] feat: more generic help panels
---
CHANGELOG.md | 2 +-
frontends/web/package.json | 2 +-
frontends/web/react/components/help/help.css | 47 +++++++
frontends/web/react/components/help/help.tsx | 123 +++++++++++++++++++
frontends/web/react/components/index.ts | 1 +
frontends/web/react/index.ts | 1 +
frontends/web/ts/gb.ts | 16 +++
7 files changed, 190 insertions(+), 2 deletions(-)
create mode 100644 frontends/web/react/components/help/help.css
create mode 100644 frontends/web/react/components/help/help.tsx
create mode 100644 frontends/web/react/components/index.ts
create mode 100644 frontends/web/react/index.ts
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16be06f3..e6233d89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
-*
+* More generic help panels
### Fixed
diff --git a/frontends/web/package.json b/frontends/web/package.json
index d0c80056..b5a28486 100644
--- a/frontends/web/package.json
+++ b/frontends/web/package.json
@@ -20,7 +20,7 @@
"@parcel/transformer-typescript-tsc": "^2.8.0",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
- "emukit": "^0.2.2",
+ "emukit": "^0.3.0",
"nodemon": "^2.0.20",
"parcel": "^2.8.0",
"prettier": "^2.7.1",
diff --git a/frontends/web/react/components/help/help.css b/frontends/web/react/components/help/help.css
new file mode 100644
index 00000000..eaefa740
--- /dev/null
+++ b/frontends/web/react/components/help/help.css
@@ -0,0 +1,47 @@
+.keyboard-help {
+ font-size: 18px;
+ line-height: 22px;
+ list-style: none;
+ margin: 0px 0px 0px 0px;
+ padding-left: 0px;
+}
+
+.keyboard-help > li {
+ margin: 12px 0px 12px 0px;
+}
+
+.keyboard-help .key-container {
+ display: inline-block;
+ margin-right: 18px;
+ min-width: 86px;
+ text-align: right;
+}
+
+.keyboard-help .key {
+ border: 2px solid #ffffff;
+ border-radius: 6px 6px 6px 6px;
+ -o-border-radius: 6px 6px 6px 6px;
+ -ms-border-radius: 6px 6px 6px 6px;
+ -moz-border-radius: 6px 6px 6px 6px;
+ -khtml-border-radius: 6px 6px 6px 6px;
+ -webkit-border-radius: 6px 6px 6px 6px;
+ display: inline-block;
+ font-size: 16px;
+ margin-right: 8px;
+ min-width: 34px;
+ padding: 1px 8px 1px 8px;
+ text-align: center;
+}
+
+.keyboard-help .key:last-child {
+ margin-right: 0px;
+}
+
+.faqs-help > h3 {
+ margin: 0px 0px 6px 0px;
+}
+
+.faqs-help > p {
+ line-height: 20px;
+ margin: 0px 0px 22px 0px;
+}
diff --git a/frontends/web/react/components/help/help.tsx b/frontends/web/react/components/help/help.tsx
new file mode 100644
index 00000000..5b5f3e53
--- /dev/null
+++ b/frontends/web/react/components/help/help.tsx
@@ -0,0 +1,123 @@
+import { Link } from "emukit";
+import React, { FC } from "react";
+
+import "./help.css";
+
+export const HelpKeyboard: FC = () => (
+ <ul className="keyboard-help">
+ <li>
+ <span className="key-container">
+ <span className="key">Enter</span>
+ </span>
+ Start button
+ </li>
+ <li>
+ <span className="key-container">
+ <span className="key">Space</span>
+ </span>
+ Select button
+ </li>
+ <li>
+ <span className="key-container">
+ <span className="key">A</span>
+ </span>
+ A button
+ </li>
+ <li>
+ <span className="key-container">
+ <span className="key">S</span>
+ </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>
+ </span>
+ Exit fullscreen
+ </li>
+ <li>
+ <span className="key-container">
+ <span className="key">Ctrl + D</span>
+ </span>
+ Turbo speed
+ </li>
+ <li>
+ <span className="key-container">
+ <span className="key">Ctrl + F</span>
+ </span>
+ Toggle fullscreen
+ </li>
+ <li>
+ <span className="key-container">
+ <span className="key">Ctrl + K</span>
+ </span>
+ Toggle on-screen keyboard
+ </li>
+ </ul>
+);
+
+export const HelpFaqs: FC = () => (
+ <div className="faqs-help">
+ <h3>Does it play all Game Boy games?</h3>
+ <p>
+ Not really, but it plays the coolest ones. Now seriously it should
+ play around 90% of the Game Boy games.
+ </p>
+ <h3>Why there's no sound?</h3>
+ <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.
+ <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>{" "}
+ đšī¸.
+ </p>
+ <h3>Will it ever play Game Boy Color games?</h3>
+ <p>Eventually...</p>
+ <h3>I've found a bug, where can I report it?</h3>
+ <p>
+ Use the{" "}
+ <Link
+ href="https://github.com/joamag/boytacean/issues"
+ target="_blank"
+ >
+ GitHub issue tracker
+ </Link>
+ .
+ </p>
+ <h3>What's WebAssembly?</h3>
+ <p>
+ The coolest thing that happened to the Web in the latest years,
+ check the{" "}
+ <Link
+ href="https://en.wikipedia.org/wiki/WebAssembly"
+ target="_blank"
+ >
+ Wikipedia page
+ </Link>{" "}
+ for more info.
+ </p>
+ <h3>Why another Game Boy emulator?</h3>
+ <p>Because it's cool, and a challenging problem to solve.</p>
+ </div>
+);
diff --git a/frontends/web/react/components/index.ts b/frontends/web/react/components/index.ts
new file mode 100644
index 00000000..5e2bfe9f
--- /dev/null
+++ b/frontends/web/react/components/index.ts
@@ -0,0 +1 @@
+export * from "./help/help";
diff --git a/frontends/web/react/index.ts b/frontends/web/react/index.ts
new file mode 100644
index 00000000..f88ae83f
--- /dev/null
+++ b/frontends/web/react/index.ts
@@ -0,0 +1 @@
+export * from "./components";
diff --git a/frontends/web/ts/gb.ts b/frontends/web/ts/gb.ts
index d39468ac..8cb10bb2 100644
--- a/frontends/web/ts/gb.ts
+++ b/frontends/web/ts/gb.ts
@@ -4,12 +4,14 @@ import {
EmulatorBase,
Entry,
Feature,
+ HelpPanel,
PixelFormat,
RomInfo,
Size
} from "emukit";
import { PALETTES, PALETTES_MAP } from "./palettes";
import { base64ToBuffer, bufferToBase64 } from "./util";
+import { HelpFaqs, HelpKeyboard } from "../react";
import {
Cartridge,
@@ -381,6 +383,7 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
get features(): Feature[] {
return [
+ Feature.Help,
Feature.Debug,
Feature.Palettes,
Feature.Benchmark,
@@ -390,6 +393,19 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
];
}
+ get help(): HelpPanel[] {
+ return [
+ {
+ name: "Keyboard",
+ node: HelpKeyboard({})
+ },
+ {
+ name: "FAQs",
+ node: HelpFaqs({})
+ }
+ ];
+ }
+
get engines(): string[] {
return ["neo"];
}
--
GitLab