Skip to content
Snippets Groups Projects
Verified Commit a8bcfc72 authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

feat: better help and tabs support

parent 62b9f629
No related branches found
No related tags found
No related merge requests found
Pipeline #1702 passed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
frontends/web/react/components/help/help.css
+ 13
− 4
View file @ a8bcfc72
.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
frontends/web/react/components/help/help.tsx
+ 98
− 50
View file @ a8bcfc72
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;
frontends/web/react/components/panel-tab/panel-tab.css
+ 20
− 0
View file @ a8bcfc72
.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;
}
frontends/web/react/components/panel-tab/panel-tab.tsx
+ 24
− 2
View file @ a8bcfc72
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>
);
};
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment