From c7f322db1caf54061686f949a9b91cc3e62200ef 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 01:48:28 +0000
Subject: [PATCH] feat: initial keyboard chip8 support
---
examples/web/index.css | 55 -------------------
examples/web/react/app.tsx | 2 +
examples/web/react/components/index.ts | 1 +
.../keyboard-chip8/keyboard-chip8.css | 55 +++++++++++++++++++
.../keyboard-chip8/keyboard-chip8.tsx | 41 ++++++++++++++
5 files changed, 99 insertions(+), 55 deletions(-)
create mode 100644 examples/web/react/components/keyboard-chip8/keyboard-chip8.css
create mode 100644 examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
diff --git a/examples/web/index.css b/examples/web/index.css
index a71f9876..49d2a456 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 409f6820..0f2507a7 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 447bf850..0c9dac26 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 00000000..1c1d2f2b
--- /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 00000000..1025610a
--- /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;
--
GitLab