Merge branch 'users/t-anmah/clue-frontend-backend-integration' of htt…

…ps://github.com/microsoft/vscode-python-devicesimulator into users/t-anmah/clue-frontend-backend-integration

src/view/components/clue/Clue.tsx

@@ -7,7 +7,7 @@ import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants";
 import "../../styles/Simulator.css";
 import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
 import ToolBar from "../toolbar/ToolBar";
-import { MicrobitSimulator } from "./ClueSimulator";
+import { ClueSimulator } from "./ClueSimulator";
 
 // Component grouping the functionality for micro:bit functionalities
 interface IState {
@@ -46,7 +46,7 @@ export class Clue extends React.Component<{}, IState> {
     render() {
         return (
             <React.Fragment>
-                <MicrobitSimulator />
+                <ClueSimulator />
                 <ToolBar
                     buttonList={MICROBIT_TOOLBAR_BUTTONS}
                     onUpdateSensor={this.updateSensor}

src/view/components/clue/ClueImage.tsx

@@ -3,10 +3,10 @@
 
 import * as React from "react";
 import { VIEW_STATE } from "../../constants";
-import CONSTANTS, { MICROBIT_BUTTON_STYLING_CLASSES } from "../../constants";
+import CONSTANTS, { BUTTON_STYLING_CLASSES } from "../../constants";
 import { ViewStateContext } from "../../context";
 import "../../styles/Microbit.css";
-import { IRefObject, MicrobitSvg } from "./Clue_svg";
+import { IRefObject, ClueSvg } from "./Clue_svg";
 
 interface EventTriggers {
     onMouseUp: (event: Event, buttonKey: string) => void;
@@ -16,7 +16,6 @@ interface EventTriggers {
 }
 interface IProps {
     eventTriggers: EventTriggers;
-    leds: number[][];
     displayMessage: string;
 }
 
@@ -32,21 +31,19 @@ export enum BUTTONS_KEYS {
 }
 // Displays the SVG and call necessary svg modification.
 export class ClueImage extends React.Component<IProps, {}> {
-    private svgRef: React.RefObject<MicrobitSvg> = React.createRef();
+    private svgRef: React.RefObject<ClueSvg> = React.createRef();
     constructor(props: IProps) {
         super(props);
     }
     componentDidMount() {
         const svgElement = this.svgRef.current;
         if (svgElement) {
-            // updateAllLeds(this.props.leds, svgElement.getLeds());
             setupAllButtons(this.props.eventTriggers, svgElement.getButtons());
             this.setupKeyPresses(this.props.eventTriggers.onKeyEvent);
         }
     }
     componentDidUpdate() {
         if (this.svgRef.current) {
-            // updateAllLeds(this.props.leds, this.svgRef.current.getLeds());
             if (this.context === VIEW_STATE.PAUSE) {
                 disableAllButtons(this.svgRef.current.getButtons());
             } else if (this.context === VIEW_STATE.RUNNING) {
@@ -85,7 +82,7 @@ export class ClueImage extends React.Component<IProps, {}> {
     };
     render() {
         return (
-            <MicrobitSvg
+            <ClueSvg
                 ref={this.svgRef}
                 displayImage={this.props.displayMessage}
             />
@@ -99,12 +96,12 @@ export class ClueImage extends React.Component<IProps, {}> {
                 if (isActive) {
                     button.children[0].setAttribute(
                         "class",
-                        MICROBIT_BUTTON_STYLING_CLASSES.KEYPRESSED
+                        BUTTON_STYLING_CLASSES.KEYPRESSED
                     );
                 } else {
                     button.children[0].setAttribute(
                         "class",
-                        MICROBIT_BUTTON_STYLING_CLASSES.DEFAULT
+                        BUTTON_STYLING_CLASSES.DEFAULT
                     );
                 }
                 button.setAttribute("pressed", `${isActive}`);

src/view/components/clue/ClueSimulator.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {
     CONSTANTS,
     // DEVICE_LIST_KEY,
-    MICROBIT_BUTTONS_KEYS,
+    AB_BUTTONS_KEYS,
     WEBVIEW_MESSAGES,
 } from "../../constants";
 import PlayLogo from "../../svgs/play_svg";
@@ -14,14 +14,7 @@ import { BUTTONS_KEYS, ClueImage } from "./ClueImage";
 
 // import * as fs from "fs";
 
-const DEFAULT_CLUE_STATE: IMicrobitState = {
-    leds: [
-        [0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0],
-    ],
+const DEFAULT_CLUE_STATE: IClueState = {
     buttons: { button_a: false, button_b: false },
     displayMessage: "",
 };
@@ -31,15 +24,15 @@ interface IState {
     running_file: string;
     play_button: boolean;
     selected_file: string;
-    clue: IMicrobitState;
+    clue: IClueState;
+    currently_selected_file: string;
 }
 
-interface IMicrobitState {
-    leds: number[][];
+interface IClueState {
     buttons: { button_a: boolean; button_b: boolean };
     displayMessage: string;
 }
-export class MicrobitSimulator extends React.Component<any, IState> {
+export class ClueSimulator extends React.Component<any, IState> {
     private imageRef: React.RefObject<ClueImage> = React.createRef();
     constructor() {
         super({});
@@ -48,7 +41,8 @@ export class MicrobitSimulator extends React.Component<any, IState> {
             play_button: false,
             selected_file: "",
             active_editors: [],
-            running_file: "",
+            running_file: undefined,
+            currently_selected_file: "",
         };
         this.onKeyEvent = this.onKeyEvent.bind(this);
     }
@@ -71,8 +65,10 @@ export class MicrobitSimulator extends React.Component<any, IState> {
                 });
                 break;
             case "activate-play":
+                const newRunningFile = this.state.currently_selected_file;
                 this.setState({
                     play_button: !this.state.play_button,
+                    running_file: newRunningFile,
                 });
                 break;
             case "visible-editors":
@@ -81,9 +77,17 @@ export class MicrobitSimulator extends React.Component<any, IState> {
                 });
                 break;
             case "current-file":
-                this.setState({
-                    running_file: message.state.running_file,
-                });
+                if (this.state.play_button) {
+                    this.setState({
+                        currently_selected_file: message.state.running_file,
+                    });
+                } else {
+                    this.setState({
+                        running_file: message.state.running_file,
+                        currently_selected_file: message.state.running_file,
+                    });
+                }
+
                 break;
         }
     };
@@ -100,15 +104,11 @@ export class MicrobitSimulator extends React.Component<any, IState> {
         return (
             <div className="simulator">
                 <div className="file-selector">
-                    <Dropdown
-                        label={"file-dropdown"}
-                        styleLabel={"dropdown"}
-                        lastChosen={this.state.running_file}
-                        width={300}
-                        textOptions={this.state.active_editors}
-                        onBlur={this.onSelectFile}
-                    />
+                    {this.state.running_file && this.state.play_button
+                        ? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
+                        : CONSTANTS.FILES_PLACEHOLDER}
                 </div>
+
                 <div className="microbit-container">
                     <ClueImage
                         ref={this.imageRef}
@@ -118,7 +118,6 @@ export class MicrobitSimulator extends React.Component<any, IState> {
                             onMouseLeave: this.onMouseLeave,
                             onKeyEvent: this.onKeyEvent,
                         }}
-                        leds={this.state.clue.leds}
                         displayMessage={this.state.clue.displayMessage}
                     />
                 </div>
@@ -160,13 +159,13 @@ export class MicrobitSimulator extends React.Component<any, IState> {
     protected handleButtonClick = (key: string, isActive: boolean) => {
         let newButtonState = this.state.clue.buttons;
         switch (key) {
-            case MICROBIT_BUTTONS_KEYS.BTN_A:
+            case AB_BUTTONS_KEYS.BTN_A:
                 newButtonState.button_a = isActive;
                 break;
-            case MICROBIT_BUTTONS_KEYS.BTN_B:
+            case AB_BUTTONS_KEYS.BTN_B:
                 newButtonState.button_b = isActive;
                 break;
-            case MICROBIT_BUTTONS_KEYS.BTN_AB:
+            case AB_BUTTONS_KEYS.BTN_AB:
                 newButtonState = {
                     button_a: isActive,
                     button_b: isActive,

src/view/components/clue/Clue_svg.tsx

@@ -11,7 +11,7 @@ interface IProps {
     displayImage: string;
 }
 
-export class MicrobitSvg extends React.Component<IProps, {}> {
+export class ClueSvg extends React.Component<IProps, {}> {
     private svgRef: React.RefObject<SVGSVGElement> = React.createRef();
 
     private buttonRefs: IRefObject = {
@@ -716,10 +716,10 @@ export class MicrobitSvg extends React.Component<IProps, {}> {
 
                         <image
                             ref={this.displayRef}
-                            x={152}
-                            y={80}
-                            width={198}
-                            height={200}
+                            x={122}
+                            y={50}
+                            width={268}
+                            height={260}
                             style={{
                                 fill: "rgb(30,30,30)",
                             }}

src/view/components/microbit/MicrobitImage.tsx

@@ -3,7 +3,7 @@
 
 import * as React from "react";
 import { VIEW_STATE } from "../../constants";
-import CONSTANTS, { MICROBIT_BUTTON_STYLING_CLASSES } from "../../constants";
+import CONSTANTS, { BUTTON_STYLING_CLASSES } from "../../constants";
 import { ViewStateContext } from "../../context";
 import "../../styles/Microbit.css";
 import { IRefObject, MicrobitSvg } from "./Microbit_svg";
@@ -93,12 +93,12 @@ export class MicrobitImage extends React.Component<IProps, {}> {
                 if (isActive) {
                     button.children[0].setAttribute(
                         "class",
-                        MICROBIT_BUTTON_STYLING_CLASSES.KEYPRESSED
+                        BUTTON_STYLING_CLASSES.KEYPRESSED
                     );
                 } else {
                     button.children[0].setAttribute(
                         "class",
-                        MICROBIT_BUTTON_STYLING_CLASSES.DEFAULT
+                        BUTTON_STYLING_CLASSES.DEFAULT
                     );
                 }
                 button.setAttribute("pressed", `${isActive}`);

src/view/components/microbit/MicrobitSimulator.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {
     CONSTANTS,
     DEVICE_LIST_KEY,
-    MICROBIT_BUTTONS_KEYS,
+    AB_BUTTONS_KEYS,
     WEBVIEW_MESSAGES,
 } from "../../constants";
 import PlayLogo from "../../svgs/play_svg";
@@ -162,13 +162,13 @@ export class MicrobitSimulator extends React.Component<any, IState> {
     protected handleButtonClick = (key: string, isActive: boolean) => {
         let newButtonState = this.state.microbit.buttons;
         switch (key) {
-            case MICROBIT_BUTTONS_KEYS.BTN_A:
+            case AB_BUTTONS_KEYS.BTN_A:
                 newButtonState.button_a = isActive;
                 break;
-            case MICROBIT_BUTTONS_KEYS.BTN_B:
+            case AB_BUTTONS_KEYS.BTN_B:
                 newButtonState.button_b = isActive;
                 break;
-            case MICROBIT_BUTTONS_KEYS.BTN_AB:
+            case AB_BUTTONS_KEYS.BTN_AB:
                 newButtonState = {
                     button_a: isActive,
                     button_b: isActive,

src/view/constants.ts

@@ -47,12 +47,12 @@ export const CONSTANTS = {
     SIMULATOR_BUTTON_WIDTH: 60,
     TOOLBAR_INFO: `Explore what's on the board:`,
 };
-export const MICROBIT_BUTTONS_KEYS = {
+export const AB_BUTTONS_KEYS = {
     BTN_A: "BTN_A",
     BTN_B: "BTN_B",
     BTN_AB: "BTN_AB",
 };
-export const MICROBIT_BUTTON_STYLING_CLASSES = {
+export const BUTTON_STYLING_CLASSES = {
     DEFAULT: "sim-button-outer",
     KEYPRESSED: "sim-button-key-press",
 };