feat: initial game boy keyboard support

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>
                 }
             >

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";

examples/web/react/components/keyboard-gb/keyboard-gb.css

+
+.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;
+}

examples/web/react/components/keyboard-gb/keyboard-gb.tsx

+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;