From bae83223348c87672fe3fade36f5e0153c74b715 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Fri, 11 Nov 2022 12:05:44 +0000
Subject: [PATCH] feat: support for selected keys
---
.../components/keyboard-gb/keyboard-gb.tsx | 51 +++++++++++++++----
1 file changed, 42 insertions(+), 9 deletions(-)
diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
index c9778c26..0291cf8a 100644
--- a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
@@ -7,6 +7,7 @@ declare const require: any;
type KeyboardGBProps = {
focusable?: boolean;
fullscreen?: boolean;
+ selectedKeys?: string[];
style?: string[];
onKeyDown?: (key: string) => void;
onKeyUp?: (key: string) => void;
@@ -15,6 +16,7 @@ type KeyboardGBProps = {
export const KeyboardGB: FC<KeyboardGBProps> = ({
focusable = true,
fullscreen = false,
+ selectedKeys = [],
style = [],
onKeyDown,
onKeyUp
@@ -31,9 +33,10 @@ export const KeyboardGB: FC<KeyboardGBProps> = ({
const renderKey = (
key: string,
keyName?: string,
+ selected = false,
styles: string[] = []
) => {
- const [pressed, setPressed] = useState(false);
+ const [pressed, setPressed] = useState(selected);
const classes = ["key", pressed ? "pressed" : "", ...styles].join(" ");
return (
<span
@@ -103,24 +106,54 @@ export const KeyboardGB: FC<KeyboardGBProps> = ({
>
<div className="dpad">
<div className="dpad-top">
- {renderKey("â–²", "ArrowUp", ["up"])}
+ {renderKey(
+ "â–²",
+ "ArrowUp",
+ selectedKeys.includes("ArrowUp"),
+ ["up"]
+ )}
</div>
<div>
- {renderKey("â—„", "ArrowLeft", ["left"])}
- {renderKey("â–º", "ArrowRight", ["right"])}
+ {renderKey(
+ "â—„",
+ "ArrowLeft",
+ selectedKeys.includes("ArrowLeft"),
+ ["left"]
+ )}
+ {renderKey(
+ "â–º",
+ "ArrowRight",
+ selectedKeys.includes("ArrowRight"),
+ ["right"]
+ )}
</div>
<div className="dpad-bottom">
- {renderKey("â–¼", "ArrowDown", ["down"])}
+ {renderKey(
+ "â–¼",
+ "ArrowDown",
+ selectedKeys.includes("ArrowDown"),
+ ["down"]
+ )}
</div>
</div>
<div className="action">
- {renderKey("B", "B", ["b"])}
- {renderKey("A", "A", ["a"])}
+ {renderKey("B", "B", selectedKeys.includes("B"), ["b"])}
+ {renderKey("A", "A", selectedKeys.includes("A"), ["a"])}
</div>
<div className="break"></div>
<div className="options">
- {renderKey("START", "Start", ["start"])}
- {renderKey("SELECT", "Select", ["select"])}
+ {renderKey(
+ "START",
+ "Start",
+ selectedKeys.includes("Start"),
+ ["start"]
+ )}
+ {renderKey(
+ "SELECT",
+ "Select",
+ selectedKeys.includes("Select"),
+ ["select"]
+ )}
</div>
</div>
</div>
--
GitLab