From fc3495ae8a405bb23c163ca6f4a44fba21082cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Mon, 31 Oct 2022 10:24:40 +0000
Subject: [PATCH] feat: initial game boy keyboard support
---
examples/web/react/app.tsx | 3 +-
examples/web/react/components/index.ts | 1 +
.../components/keyboard-gb/keyboard-gb.css | 55 +++++++++++++++++++
.../components/keyboard-gb/keyboard-gb.tsx | 41 ++++++++++++++
4 files changed, 99 insertions(+), 1 deletion(-)
create mode 100644 examples/web/react/components/keyboard-gb/keyboard-gb.css
create mode 100644 examples/web/react/components/keyboard-gb/keyboard-gb.tsx
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index d6fbe52d..07c59556 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -13,7 +13,7 @@ import {
DrawHandler,
Footer,
Info,
- KeyboardChip8,
+ KeyboardGB,
Link,
Modal,
Pair,
@@ -348,6 +348,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
onClearHandler={onClearHandler}
onMinimize={onMinimize}
/>
+ <KeyboardGB />
</div>
}
>
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index 0c9dac26..992acf82 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -6,6 +6,7 @@ export * from "./display/display";
export * from "./footer/footer";
export * from "./info/info";
export * from "./keyboard-chip8/keyboard-chip8";
+export * from "./keyboard-gb/keyboard-gb";
export * from "./link/link";
export * from "./modal/modal";
export * from "./pair/pair";
diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.css b/examples/web/react/components/keyboard-gb/keyboard-gb.css
new file mode 100644
index 00000000..a17545f6
--- /dev/null
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.css
@@ -0,0 +1,55 @@
+
+.keyboard-gb {
+ font-size: 0px;
+ text-align: center;
+ touch-callout: none;
+ -o-touch-callout: none;
+ -ms-touch-callout: none;
+ -moz-touch-callout: none;
+ -khtml-touch-callout: none;
+ -webkit-touch-callout: none;
+ user-select: none;
+ -o-user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+}
+
+.keyboard-gb > .keyboard-line {
+ margin-bottom: 12px;
+}
+
+.keyboard-gb > .keyboard-line:last-child {
+ margin-bottom: 0px;
+}
+
+.keyboard-gb .key {
+ border: 2px solid #ffffff;
+ border-radius: 5px 5px 5px 5px;
+ -o-border-radius: 5px 5px 5px 5px;
+ -ms-border-radius: 5px 5px 5px 5px;
+ -moz-border-radius: 5px 5px 5px 5px;
+ -khtml-border-radius: 5px 5px 5px 5px;
+ -webkit-border-radius: 5px 5px 5px 5px;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 38px;
+ height: 48px;
+ line-height: 46px;
+ margin-right: 14px;
+ text-align: center;
+ width: 48px;
+}
+
+.keyboard-gb .key:last-child {
+ margin-right: 0px;
+}
+
+.keyboard-gb .key:hover {
+ background-color: #50cb93;
+}
+
+.keyboard-gb .key:active {
+ background-color: #2a9d8f;
+}
diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
new file mode 100644
index 00000000..e63f1018
--- /dev/null
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+
+import "./keyboard-gb.css";
+
+type KeyboardGBProps = {
+ style?: string[];
+ onKeyDown?: (key: string) => void;
+};
+
+export const KeyboardGB: FC<KeyboardGBProps> = ({ style = [], onKeyDown }) => {
+ const classes = () => ["keyboard", "keyboard-gb", ...style].join(" ");
+ const renderKey = (key: string) => {
+ return (
+ <span
+ className="key"
+ key={key}
+ onKeyDown={() => onKeyDown && onKeyDown(key)}
+ >
+ {key}
+ </span>
+ );
+ };
+ return (
+ <div className={classes()}>
+ <div className="keyboard-line">
+ {["1", "2", "3", "4"].map((k) => renderKey(k))}
+ </div>
+ <div className="keyboard-line">
+ {["Q", "W", "E", "R"].map((k) => renderKey(k))}
+ </div>
+ <div className="keyboard-line">
+ {["A", "S", "D", "F"].map((k) => renderKey(k))}
+ </div>
+ <div className="keyboard-line">
+ {["Z", "X", "C", "V"].map((k) => renderKey(k))}
+ </div>
+ </div>
+ );
+};
+
+export default KeyboardGB;
--
GitLab