Additional refactoring

Author: xnkevinnguyen

src/view/components/clue/ClueImage.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, ClueSvg } from "./Clue_svg";
@@ -96,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

@@ -25,6 +25,7 @@ interface IState {
     play_button: boolean;
     selected_file: string;
     clue: IClueState;
+    currently_selected_file: string;
 }
 
 interface IClueState {
@@ -40,7 +41,8 @@ export class ClueSimulator 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);
     }
@@ -63,8 +65,10 @@ export class ClueSimulator 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":
@@ -73,9 +77,17 @@ export class ClueSimulator 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;
         }
     };
@@ -92,15 +104,11 @@ export class ClueSimulator 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}

src/view/components/clue/Clue_svg.tsx

@@ -716,10 +716,10 @@ export class ClueSvg 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/constants.ts

@@ -52,7 +52,7 @@ export const AB_BUTTONS_KEYS = {
     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",
 };