diff --git a/examples/web/index.css b/examples/web/index.css
index a71f9876d9b5f5c9d88985e9f492d2cec47d78e3..49d2a456164ea816842d9dc33c91cc5bac449a49 100644
--- a/examples/web/index.css
+++ b/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;
-}
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 409f68206116181059d54d95880d810df241e24f..0f2507a7d0aa241565c5b04ba20386801dfae06a 100644
--- a/examples/web/react/app.tsx
+++ b/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>
}
>
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index 447bf8507fa98c09ca9c56998c0d9421e9cc48af..0c9dac26034b2d937a95e12e79f02faa5a9f7902 100644
--- a/examples/web/react/components/index.ts
+++ b/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";
diff --git a/examples/web/react/components/keyboard-chip8/keyboard-chip8.css b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
new file mode 100644
index 0000000000000000000000000000000000000000..1c1d2f2bf3b254300287104577ec48a3ad807c5b
--- /dev/null
+++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
@@ -0,0 +1,55 @@
+
+.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;
+}
diff --git a/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx b/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1025610ae06b4e9a25b9921ac39a6a54d07a39d6
--- /dev/null
+++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
@@ -0,0 +1,41 @@
+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;