From f6f6b2ef441e918195feda49312e1bc84582ea48 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 09:54:24 +0000
Subject: [PATCH] fix: chip8 keyboard
---
.../keyboard-chip8/keyboard-chip8.css | 2 +-
.../keyboard-chip8/keyboard-chip8.tsx | 33 +++++++++----------
2 files changed, 17 insertions(+), 18 deletions(-)
diff --git a/examples/web/react/components/keyboard-chip8/keyboard-chip8.css b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
index 1c1d2f2b..002e1321 100644
--- a/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
+++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
@@ -50,6 +50,6 @@
background-color: #50cb93;
}
-.keyboard-chip8-chip8 .key:active {
+.keyboard-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
index 1025610a..09823ed6 100644
--- a/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
+++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.tsx
@@ -4,35 +4,34 @@ import "./keyboard-chip8.css";
type KeyboardChip8Props = {
style?: string[];
+ onKeyDown?: (key: string) => void;
};
-export const KeyboardChip8: FC<KeyboardChip8Props> = ({ style = [] }) => {
+export const KeyboardChip8: FC<KeyboardChip8Props> = ({
+ style = [],
+ onKeyDown
+}) => {
const classes = () => ["keyboard", "keyboard-chip8", ...style].join(" ");
+ const renderKey = (key: string) => {
+ return (
+ <span className="key" onKeyDown={() => onKeyDown && onKeyDown(key)}>
+ {key}
+ </span>
+ );
+ };
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>
+ {["1", "2", "3", "4"].map((k) => renderKey(k))}
</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>
+ {["Q", "W", "E", "R"].map((k) => renderKey(k))}
</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>
+ {["A", "S", "D", "F"].map((k) => renderKey(k))}
</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>
+ {["Z", "X", "C", "V"].map((k) => renderKey(k))}
</div>
</div>
);
--
GitLab