feat: initial keyboard chip8 support

examples/web/index.css

@@ -197,58 +197,3 @@ p {
 .overlay .overlay-image > img {
     width: 64px;
 }
-
-.keyboard {
-    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 > .keyboard-line {
-    margin-bottom: 12px;
-}
-
-.keyboard > .keyboard-line:last-child {
-    margin-bottom: 0px;
-}
-
-.keyboard .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 .key:last-child {
-    margin-right: 0px;
-}
-
-.keyboard .key:hover {
-    background-color: #50cb93;
-}
-
-.keyboard .key:active {
-    background-color: #2a9d8f;
-}

examples/web/react/app.tsx

@@ -13,6 +13,7 @@ import {
     DrawHandler,
     Footer,
     Info,
+    KeyboardChip8,
     Link,
     Modal,
     Pair,
@@ -341,6 +342,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
                             onClearHandler={onClearHandler}
                             onMinimize={onMinimize}
                         />
+                        <KeyboardChip8 />
                     </div>
                 }
             >

examples/web/react/components/index.ts

@@ -5,6 +5,7 @@ export * from "./button-switch/button-switch";
 export * from "./display/display";
 export * from "./footer/footer";
 export * from "./info/info";
+export * from "./keyboard-chip8/keyboard-chip8";
 export * from "./link/link";
 export * from "./modal/modal";
 export * from "./pair/pair";

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

+
+.keyboard-chip8 {
+    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-chip8 > .keyboard-line {
+    margin-bottom: 12px;
+}
+
+.keyboard-chip8 > .keyboard-line:last-child {
+    margin-bottom: 0px;
+}
+
+.keyboard-chip8 .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-chip8 .key:last-child {
+    margin-right: 0px;
+}
+
+.keyboard-chip8 .key:hover {
+    background-color: #50cb93;
+}
+
+.keyboard-chip8-chip8 .key:active {
+    background-color: #2a9d8f;
+}

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

+import React, { FC } from "react";
+
+import "./keyboard-chip8.css";
+
+type KeyboardChip8Props = {
+    style?: string[];
+};
+
+export const KeyboardChip8: FC<KeyboardChip8Props> = ({ style = [] }) => {
+    const classes = () => ["keyboard", "keyboard-chip8", ...style].join(" ");
+    return (
+        <div className={classes()}>
+            <div className="keyboard-line">
+                <span className="key">1</span>
+                <span className="key">2</span>
+                <span className="key">3</span>
+                <span className="key">4</span>
+            </div>
+            <div className="keyboard-line">
+                <span className="key">Q</span>
+                <span className="key">W</span>
+                <span className="key">E</span>
+                <span className="key">R</span>
+            </div>
+            <div className="keyboard-line">
+                <span className="key">A</span>
+                <span className="key">S</span>
+                <span className="key">D</span>
+                <span className="key">F</span>
+            </div>
+            <div className="keyboard-line">
+                <span className="key">Z</span>
+                <span className="key">X</span>
+                <span className="key">C</span>
+                <span className="key">V</span>
+            </div>
+        </div>
+    );
+};
+
+export default KeyboardChip8;