Merge pull request #153 from microsoft/users/t-luslev/shake-the-cpx

Make the cpx shake

src/requirements.txt

@@ -4,4 +4,4 @@ pytest==5.0.1
 applicationinsights==0.11.9
 python-socketio==4.3.1
 requests==2.22.0
-pywin32==227; platform_system == "Windows"
+pywin32==227; platform_system == "Windows"

src/view/components/toolbar/MotionSensorBar.tsx

@@ -4,6 +4,7 @@
 import * as React from "react";
 import InputSlider from "./InputSlider";
 import SensorButton from "./SensorButton";
+import svg from "../cpx/Svg_utils";
 
 import { CONSTANTS } from "../../constants";
 import "../../styles/MotionSensorBar.css";
@@ -162,15 +163,21 @@ class MotionSensorBar extends React.Component {
         );
     }
 
-    private onMouseDown = () => this.handleOnclick(true, "shake");
+    private onMouseDown = (event: React.PointerEvent<HTMLButtonElement>) => {
+        this.updateShakePress(true, event.currentTarget.id);
+        this.handleOnclick(true, "shake");
+    };
 
     private onKeyUp = (event: React.KeyboardEvent<HTMLButtonElement>) =>
         this.onKeyEvent(event, false);
 
     private onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) =>
         this.onKeyEvent(event, true);
 
-    private onMouseUp = () => this.handleOnclick(false, "shake");
+    private onMouseUp = (event: React.PointerEvent<HTMLButtonElement>) => {
+        this.updateShakePress(false, event.currentTarget.id);
+        this.handleOnclick(false, "shake");
+    };
 
     private handleOnclick = (active: boolean, type: string) => {
         const messageState = { [type]: active };
@@ -187,6 +194,19 @@ class MotionSensorBar extends React.Component {
             this.handleOnclick(active, "shake");
         }
     }
+
+    private updateShakePress = (shakeState: boolean, id: string): void => {
+        const svgElement = window.document.getElementById("cpx_svg");
+        const buttonElement = window.document.getElementById(id);
+        const cpxSvg: SVGElement = (svgElement as unknown) as SVGElement;
+
+        if (svgElement && cpxSvg && buttonElement) {
+            buttonElement.setAttribute("aria-pressed", shakeState.toString());
+            shakeState
+                ? svg.addClass(cpxSvg, "shake-pressed")
+                : svg.removeClass(cpxSvg, "shake-pressed");
+        }
+    };
 }
 
 export default MotionSensorBar;

src/view/components/toolbar/SensorButton.tsx

@@ -8,6 +8,7 @@ import { ISensorButtonProps } from "../../viewUtils";
 const SensorButton: React.FC<ISensorButtonProps> = props => {
     return (
         <button
+            id={`${props.label}-button`}
             onMouseUp={props.onMouseUp}
             onMouseDown={props.onMouseDown}
             onKeyUp={props.onKeyUp}

src/view/styles/Simulator.css

@@ -18,3 +18,57 @@
 .file-selector {
     padding: 20px;
 }
+
+.shake-pressed {
+    /* Start the shake animation and make the animation last for 0.5 seconds */
+    animation: shake 0.5s;
+
+    /* When the animation is finished, start again */
+    animation-iteration-count: infinite;
+}
+
+@keyframes shake {
+    0% {
+        transform: translate(1px, 1px) rotate(0deg);
+    }
+    10% {
+        transform: translate(-1px, -2px) rotate(-1deg);
+    }
+    20% {
+        transform: translate(-3px, 0px) rotate(1deg);
+    }
+    30% {
+        transform: translate(3px, 2px) rotate(0deg);
+    }
+    40% {
+        transform: translate(1px, -1px) rotate(1deg);
+    }
+    50% {
+        transform: translate(-1px, 2px) rotate(-1deg);
+    }
+    60% {
+        transform: translate(-3px, 1px) rotate(0deg);
+    }
+    70% {
+        transform: translate(3px, 1px) rotate(-1deg);
+    }
+    80% {
+        transform: translate(-1px, -1px) rotate(1deg);
+    }
+    90% {
+        transform: translate(1px, 2px) rotate(0deg);
+    }
+    100% {
+        transform: translate(1px, -2px) rotate(-1deg);
+    }
+}
+
+.simulator {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 700px;
+    max-height: 700px;
+    margin-left: auto;
+    margin-right: auto;
+}

src/view/viewUtils.tsx

@@ -12,8 +12,8 @@ export interface ISliderProps {
 export interface ISensorButtonProps {
     label: string;
     type: string;
-    onMouseUp: () => void;
-    onMouseDown: () => void;
+    onMouseUp: (event: React.PointerEvent<HTMLButtonElement>) => void;
+    onMouseDown: (event: React.PointerEvent<HTMLButtonElement>) => void;
     onKeyUp: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
 }