From a8bcfc72482d01d650eca546b47b4a8c82d52798 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Fri, 18 Nov 2022 20:39:44 +0000
Subject: [PATCH] feat: better help and tabs support
---
frontends/web/react/components/help/help.css | 17 +-
frontends/web/react/components/help/help.tsx | 148 ++++++++++++------
.../react/components/panel-tab/panel-tab.css | 20 +++
.../react/components/panel-tab/panel-tab.tsx | 26 ++-
4 files changed, 155 insertions(+), 56 deletions(-)
diff --git a/frontends/web/react/components/help/help.css b/frontends/web/react/components/help/help.css
index 5a834b6c..3d2ce52b 100644
--- a/frontends/web/react/components/help/help.css
+++ b/frontends/web/react/components/help/help.css
@@ -1,4 +1,4 @@
-.help > ul {
+.keyboard-help {
padding-left: 0px;
font-size: 18px;
line-height: 22px;
@@ -6,21 +6,30 @@
margin: 0px 0px 0px 0px;
}
-.help > ul > li {
+.keyboard-help > li {
margin: 12px 0px 12px 0px;
}
-.help > ul .key-container {
+.keyboard-help .key-container {
display: inline-block;
min-width: 86px;
margin-right: 18px;
text-align: right;
}
-.help > ul .key {
+.keyboard-help .key {
border: 2px solid #ffffff;
display: inline-block;
padding: 1px 8px 1px 8px;
border-radius: 6px;
font-size: 16px;
}
+
+.faqs-help > h3 {
+ margin: 0px 0px 6px 0px;
+}
+
+.faqs-help > p {
+ margin: 0px 0px 22px 0px;
+ line-height: 20px;
+}
\ No newline at end of file
diff --git a/frontends/web/react/components/help/help.tsx b/frontends/web/react/components/help/help.tsx
index 118e5692..f3a16125 100644
--- a/frontends/web/react/components/help/help.tsx
+++ b/frontends/web/react/components/help/help.tsx
@@ -1,4 +1,6 @@
import React, { FC } from "react";
+import Link from "../link/link";
+import PanelTab from "../panel-tab/panel-tab";
import "./help.css";
@@ -10,58 +12,104 @@ export const Help: FC<HelpProps> = ({ style = [] }) => {
const classes = () => ["help", ...style].join(" ");
return (
<div className={classes()}>
- <ul>
- <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">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>
+ <PanelTab
+ tabs={[keyboardHelp(), faqsHelp()]}
+ tabNames={["Keyboard", "FAQs"]}
+ />
</div>
);
};
+const keyboardHelp = () => (
+ <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">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>
+);
+
+const faqsHelp = () => (
+ <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 not sound?</h3>
+ <p>It's under development, I'm hopping to have it before Christmas.</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>
+);
+
export default Help;
diff --git a/frontends/web/react/components/panel-tab/panel-tab.css b/frontends/web/react/components/panel-tab/panel-tab.css
index e69de29b..9303eb81 100644
--- a/frontends/web/react/components/panel-tab/panel-tab.css
+++ b/frontends/web/react/components/panel-tab/panel-tab.css
@@ -0,0 +1,20 @@
+.panel-tab > .tab-selectors {
+ line-height: 30px;
+ margin-bottom: 26px;
+}
+
+.panel-tab > .tab-selectors > .tab-selector {
+ display: inline-block;
+ margin-right: 18px;
+ font-size: 22px;
+ border-bottom: 2px solid transparent;
+ cursor: pointer;
+}
+
+.panel-tab > .tab-selectors > .tab-selector:last-child {
+ margin-right: 0px;
+}
+
+.panel-tab > .tab-selectors > .tab-selector.selected {
+ border-bottom: 2px solid #ffffff;
+}
diff --git a/frontends/web/react/components/panel-tab/panel-tab.tsx b/frontends/web/react/components/panel-tab/panel-tab.tsx
index d94e6bcc..91837ca8 100644
--- a/frontends/web/react/components/panel-tab/panel-tab.tsx
+++ b/frontends/web/react/components/panel-tab/panel-tab.tsx
@@ -1,19 +1,41 @@
-import React, { FC, ReactNode } from "react";
+import React, { FC, ReactNode, useState } from "react";
import "./panel-tab.css";
type PanelTabProps = {
- tabs?: ReactNode[];
+ tabs: ReactNode[];
+ tabNames: string[];
+ tabIndex?: number;
style?: string[];
};
export const PanelTab: FC<PanelTabProps> = ({
tabs,
+ tabNames,
+ tabIndex = 0,
style = []
}) => {
const classes = () => ["panel-tab", ...style].join(" ");
+ const [tabIndexState, setTabIndexState] = useState(tabIndex);
return (
<div className={classes()}>
+ <div className="tab-selectors">
+ {tabNames.map((tabName, tabIndex) => {
+ const classes = [
+ "tab-selector",
+ tabIndex === tabIndexState ? "selected" : ""
+ ].join(" ");
+ return (
+ <span
+ className={classes}
+ onClick={() => setTabIndexState(tabIndex)}
+ >
+ {tabName}
+ </span>
+ );
+ })}
+ </div>
+ <div className="tab-container">{tabs[tabIndexState]}</div>
</div>
);
};
--
GitLab