Solving bug with input and capacitive touch

src/view/components/Simulator.tsx

@@ -191,34 +191,36 @@ class Simulator extends React.Component<any, IState> {
     } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) {
       this.refreshSimulatorClick();
     } else {
-      switch (event.key) {
-        case CONSTANTS.KEYBOARD_KEYS.NUMERIC_ONE:
-          element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A1);
-          break;
-
-        case CONSTANTS.KEYBOARD_KEYS.NUMERIC_TWO:
-          element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A2);
-          break;
-
-        case CONSTANTS.KEYBOARD_KEYS.NUMERIC_THREE:
-          element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A3);
-          break;
-
-        case CONSTANTS.KEYBOARD_KEYS.NUMERIC_FOUR:
-          element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A4);
-          break;
-
-        case CONSTANTS.KEYBOARD_KEYS.NUMERIC_FIVE:
-          element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A5);
-          break;
-
-        case CONSTANTS.KEYBOARD_KEYS.NUMERIC_SIX:
-          element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A6);
-          break;
-
-        case CONSTANTS.KEYBOARD_KEYS.NUMERIC_SEVEN:
-          element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A7);
-          break;
+      if (event.shiftKey) {
+        switch (event.code) {
+          case CONSTANTS.KEYBOARD_KEYS.NUMERIC_ONE:
+            element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A1);
+            break;
+
+          case CONSTANTS.KEYBOARD_KEYS.NUMERIC_TWO:
+            element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A2);
+            break;
+
+          case CONSTANTS.KEYBOARD_KEYS.NUMERIC_THREE:
+            element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A3);
+            break;
+
+          case CONSTANTS.KEYBOARD_KEYS.NUMERIC_FOUR:
+            element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A4);
+            break;
+
+          case CONSTANTS.KEYBOARD_KEYS.NUMERIC_FIVE:
+            element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A5);
+            break;
+
+          case CONSTANTS.KEYBOARD_KEYS.NUMERIC_SIX:
+            element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A6);
+            break;
+
+          case CONSTANTS.KEYBOARD_KEYS.NUMERIC_SEVEN:
+            element = window.document.getElementById(CONSTANTS.ID_NAME.PIN_A7);
+            break;
+        }
       }
     }
     if (element) {

src/view/components/cpx/Cpx.tsx

@@ -376,8 +376,13 @@ export const updateSwitch = (switchState: boolean): void => {
 export const updatePinTouch = (pinState: boolean, id: string): void => {
   console.log(`updating ${id} with ${pinState}`);
   const pinElement = window.document.getElementById(id);
-  if (pinElement) {
+  const pinSvg: SVGElement = (pinElement as unknown) as SVGElement;
+
+  if (pinElement && pinSvg) {
     pinElement.setAttribute("aria-pressed", pinState.toString());
+    pinState
+      ? svg.addClass(pinSvg, "pin-pressed")
+      : svg.removeClass(pinSvg, "pin-pressed");
   }
 };
 

src/view/components/cpx/Cpx_svg_style.tsx

@@ -273,7 +273,8 @@ export const SVG_STYLE = `
     .sim-PIN_A3-touch:hover,
     .sim-PIN_A4-touch:hover,
     .sim-PIN_A5-touch:hover,
-    .sim-PIN_A6-touch:hover{
+    .sim-PIN_A6-touch:hover,
+    .sim-PIN_A7-touch:hover{
         stroke:orange !important;
         stroke-width:1px;
     }
@@ -288,4 +289,9 @@ export const SVG_STYLE = `
         stroke:#4D90FE;
         stroke-width:2px;
     }
+
+    .pin-pressed{
+        stroke:orange !important;
+        stroke-width:1px;
+    }
 `;

src/view/constants.ts

@@ -26,17 +26,17 @@ export const CONSTANTS = {
     CAPITAL_F: "F",
     ENTER: "Enter",
     S: "KeyS",
-    NUMERIC_ONE: "1",
-    NUMERIC_TWO: "2",
-    NUMERIC_THREE: "3",
-    NUMERIC_FOUR: "4",
-    NUMERIC_FIVE: "5",
-    NUMERIC_SIX: "6",
-    NUMERIC_SEVEN: "7"
+    NUMERIC_ONE: "Digit1",
+    NUMERIC_TWO: "Digit2",
+    NUMERIC_THREE: "Digit3",
+    NUMERIC_FOUR: "Digit4",
+    NUMERIC_FIVE: "Digit5",
+    NUMERIC_SIX: "Digit6",
+    NUMERIC_SEVEN: "Digit7"
   },
   REDIRECT: {
     DESCRIPTION:
-      "By clicking \"Agree and Proceed\" you will be redirected to adafruit.com, a third party website not managed by Microsoft. Please note that your activity on adafruit.com is subject to Adafruit's privacy policy",
+      'By clicking "Agree and Proceed" you will be redirected to adafruit.com, a third party website not managed by Microsoft. Please note that your activity on adafruit.com is subject to Adafruit\'s privacy policy',
     LINK:
       "https://learn.adafruit.com/adafruit-circuit-playground-express/circuitpython-quickstart",
     PRIVACY: "https://www.adafruit.com/privacy"