fix: remove usage of deprecated KeyboardEvent.keyCode (#45)

* Remove usage of depracated KeyboardEvent.keyCode

- pushbutton-element
- membrane-keypad-element
- move `SPACE_KEYS` to common file

Author: takuma-watanabe

src/membrane-keypad-element.ts

@@ -1,8 +1,7 @@
 import { customElement, html, LitElement, property, svg } from 'lit-element';
 import { pinsFemalePattern } from './patterns/pins-female';
 import { ElementPin } from './pin';
-
-const SPACE_KEY = 32;
+import { SPACE_KEYS } from './utils/keys';
 
 const rowPositions = [10.7, 25, 39.3, 53.6];
 const columnPositions = [7, 22, 37, 52];
@@ -81,9 +80,9 @@ export class MembraneKeypadElement extends LitElement {
       @touchstart=${() => this.down(text)}
       @touchend=${() => this.up(text)}
       @keydown=${(e: KeyboardEvent) =>
-        e.keyCode === SPACE_KEY && this.down(text, e.currentTarget as SVGElement)}
+        SPACE_KEYS.includes(e.key) && this.down(text, e.currentTarget as SVGElement)}
       @keyup=${(e: KeyboardEvent) =>
-        e.keyCode === SPACE_KEY && this.up(text, e.currentTarget as SVGElement)}
+        SPACE_KEYS.includes(e.key) && this.up(text, e.currentTarget as SVGElement)}
     >
       <use xlink:href="#key" />
       <text x="5.6" y="8.1">${text}</text>

src/pushbutton-element.ts

@@ -1,7 +1,6 @@
 import { css, customElement, html, LitElement, property } from 'lit-element';
 import { ElementPin } from './pin';
-
-const SPACE_KEY = 32;
+import { SPACE_KEYS } from './utils/keys';
 
 @customElement('wokwi-pushbutton')
 export class PushbuttonElement extends LitElement {
@@ -46,8 +45,8 @@ export class PushbuttonElement extends LitElement {
         @mouseup=${this.up}
         @touchstart=${this.down}
         @touchend=${this.up}
-        @keydown=${(e: KeyboardEvent) => e.keyCode === SPACE_KEY && this.down()}
-        @keyup=${(e: KeyboardEvent) => e.keyCode === SPACE_KEY && this.up()}
+        @keydown=${(e: KeyboardEvent) => SPACE_KEYS.includes(e.key) && this.down()}
+        @keyup=${(e: KeyboardEvent) => SPACE_KEYS.includes(e.key) && this.up()}
       >
         <svg
           width="18mm"

src/utils/keys.ts

@@ -0,0 +1 @@
+export const SPACE_KEYS = [' ', 'Spacebar'];