Merge pull request #280 from microsoft/users/t-xunguy/default-clue

Swap broken picture when there is no images

Author: xnkevinnguyen

src/view/components/clue/ClueSimulator.tsx

@@ -4,6 +4,7 @@ import {
     // DEVICE_LIST_KEY,
     CONSTANTS,
     WEBVIEW_MESSAGES,
+    DEFAULT_IMG_CLUE,
 } from "../../constants";
 import PlayLogo from "../../svgs/play_svg";
 import StopLogo from "../../svgs/stop_svg";
@@ -13,7 +14,7 @@ import { BUTTONS_KEYS, ClueImage } from "./ClueImage";
 
 const DEFAULT_CLUE_STATE: IClueState = {
     buttons: { button_a: false, button_b: false },
-    displayMessage: "",
+    displayMessage: DEFAULT_IMG_CLUE,
 };
 
 interface IState {
@@ -66,6 +67,10 @@ export class ClueSimulator extends React.Component<any, IState> {
                 this.setState({
                     play_button: !this.state.play_button,
                     running_file: newRunningFile,
+                    clue: {
+                        ...this.state.clue,
+                        displayMessage: DEFAULT_IMG_CLUE,
+                    },
                 });
                 break;
             case "visible-editors":

src/view/components/clue/Clue_svg.tsx

@@ -2,7 +2,6 @@
 // Licensed under the MIT license.
 
 import * as React from "react";
-import { DEFAULT_IMG_CLUE } from "../../constants";
 import "../../styles/Clue.css";
 export interface IRefObject {
     [key: string]: React.RefObject<SVGRectElement>;
@@ -33,7 +32,6 @@ export class ClueSvg extends React.Component<IProps, {}> {
     }
     componentDidMount() {
         this.updateDisplay();
-        this.setDefaultDisplay();
     }
     componentDidUpdate() {
         this.updateDisplay();
@@ -944,16 +942,11 @@ export class ClueSvg extends React.Component<IProps, {}> {
         );
     }
     private updateDisplay() {
-        if (this.displayRef.current) {
+        if (this.displayRef.current && this.props.displayImage) {
             this.displayRef.current.setAttribute(
                 "href",
                 `data:image/png;base64,${this.props.displayImage}`
             );
         }
     }
-    private setDefaultDisplay() {
-        if (this.displayRef.current) {
-            this.displayRef.current.setAttribute("href", DEFAULT_IMG_CLUE);
-        }
-    }
 }

src/view/constants.ts

@@ -123,7 +123,7 @@ export enum WEBVIEW_TYPES {
     SIMULATOR = "simulator",
     GETTING_STARTED = "getting_started",
 }
-export const DEFAULT_IMG_CLUE = `data:image/png;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAEBAQEBAQEBA
+export const DEFAULT_IMG_CLUE = `/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAEBAQEBAQEBA
 QEBAQEBAQICAQEBAQMCAgICAwMEBAMDAwMEBAYFBAQFBAMDBQcFBQYGBgYGBAUHBwcGBwYGBgb/2wBDAQEBAQEBAQMCAgMGBAMEB
 gYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgb/wAARCAJYAlgDASIAAhEBAxEB/8QAHwAAA
 QUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0Kxw