feat: more consistent keyboard implementation

examples/web/react/components/button/button.tsx

@@ -44,6 +44,14 @@ export const Button: FC<ButtonProps> = ({
         onFile && onFile(file);
         event.target.value = "";
     };
+    const onMouseDown = (event: React.MouseEvent) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    const onMouseUp = (event: React.MouseEvent) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
     const onKeyPress = (event: React.KeyboardEvent) => {
         if (event.key !== "Enter") return;
         onClick && onClick();
@@ -62,6 +70,8 @@ export const Button: FC<ButtonProps> = ({
         <span
             className={classes()}
             onClick={onClick}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
             onKeyPress={onKeyPress}
             tabIndex={focusable ? 0 : undefined}
         >

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

@@ -47,10 +47,6 @@
     margin-right: 0px;
 }
 
-.keyboard-chip8 .key:hover {
+.keyboard-chip8 .key.pressed {
     background-color: #50cb93;
 }
-
-.keyboard-chip8 .key:active {
-    background-color: #2a9d8f;
-}

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

-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 
 import "./keyboard-chip8.css";
 
 type KeyboardChip8Props = {
+    focusable?: boolean;
     style?: string[];
     onKeyDown?: (key: string) => void;
+    onKeyUp?: (key: string) => void;
 };
 
 export const KeyboardChip8: FC<KeyboardChip8Props> = ({
+    focusable = true,
     style = [],
-    onKeyDown
+    onKeyDown,
+    onKeyUp
 }) => {
     const classes = () => ["keyboard", "keyboard-chip8", ...style].join(" ");
-    const renderKey = (key: string) => {
+    const renderKey = (key: string, styles: string[] = []) => {
+        const [pressed, setPressed] = useState(false);
         return (
             <span
-                className="key"
+                className={["key", pressed ? "pressed" : "", ...styles].join(
+                    " "
+                )}
                 key={key}
-                tabIndex={0}
+                tabIndex={focusable ? 0 : undefined}
                 onKeyDown={(event) => {
                     if (event.key !== "Enter") return;
+                    setPressed(true);
                     onKeyDown && onKeyDown(key);
                     event.stopPropagation();
                     event.preventDefault();
                 }}
-                onClick={() => onKeyDown && onKeyDown(key)}
+                onKeyUp={(event) => {
+                    if (event.key !== "Enter") return;
+                    setPressed(false);
+                    onKeyUp && onKeyUp(key);
+                    event.stopPropagation();
+                    event.preventDefault();
+                }}
+                onBlur={(event) => {
+                    setPressed(false);
+                    onKeyUp && onKeyUp(key);
+                }}
+                onMouseDown={(event) => {
+                    setPressed(true);
+                    onKeyDown && onKeyDown(key);
+                    event.stopPropagation();
+                    event.preventDefault();
+                }}
+                onMouseUp={(event) => {
+                    setPressed(false);
+                    onKeyUp && onKeyUp(key);
+                    event.stopPropagation();
+                    event.preventDefault();
+                }}
+                onMouseLeave={(event) => {
+                    if (!pressed) return;
+                    setPressed(false);
+                    onKeyUp && onKeyUp(key);
+                    event.stopPropagation();
+                    event.preventDefault();
+                }}
+                onTouchStart={(event) => {
+                    setPressed(true);
+                    onKeyDown && onKeyDown(key);
+                    event.stopPropagation();
+                    event.preventDefault();
+                }}
+                onTouchEnd={(event) => {
+                    setPressed(false);
+                    onKeyUp && onKeyUp(key);
+                    event.stopPropagation();
+                    event.preventDefault();
+                }}
             >
                 {key}
             </span>

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

@@ -5,12 +5,14 @@ import "./keyboard-gb.css";
 declare const require: any;
 
 type KeyboardGBProps = {
+    focusable?: boolean;
     style?: string[];
     onKeyDown?: (key: string) => void;
     onKeyUp?: (key: string) => void;
 };
 
 export const KeyboardGB: FC<KeyboardGBProps> = ({
+    focusable = true,
     style = [],
     onKeyDown,
     onKeyUp
@@ -28,7 +30,7 @@ export const KeyboardGB: FC<KeyboardGBProps> = ({
                     " "
                 )}
                 key={keyName ?? key}
-                tabIndex={0}
+                tabIndex={focusable ? 0 : undefined}
                 onKeyDown={(event) => {
                     if (event.key !== "Enter") return;
                     setPressed(true);
@@ -43,6 +45,10 @@ export const KeyboardGB: FC<KeyboardGBProps> = ({
                     event.stopPropagation();
                     event.preventDefault();
                 }}
+                onBlur={(event) => {
+                    setPressed(false);
+                    onKeyUp && onKeyUp(key);
+                }}
                 onMouseDown={(event) => {
                     setPressed(true);
                     onKeyDown && onKeyDown(keyName ?? key);