From 9ddfcc62cbe316034f6bb16f323b20d6d1c8661d Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 12 Apr 2020 09:49:13 -0700 Subject: [PATCH 1/5] Update Package.json for latest typescript version --- package-lock.json | 6 +++--- package.json | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index e2b169c9b..777c7b6d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30807,9 +30807,9 @@ } }, "typescript": { - "version": "3.4.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.4.5.tgz", - "integrity": "sha512-YycBxUb49UUhdNMU5aJ7z5Ej2XGmaIBL0x34vZ82fn3hGvD+bgrMrVDpatgz2f7YxUMJxMkbWxJZeAvDxVe7Vw==", + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz", + "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==", "dev": true }, "typescript-react-intl": { diff --git a/package.json b/package.json index cc1b237bd..9d3b633ec 100644 --- a/package.json +++ b/package.json @@ -149,7 +149,7 @@ "type": "boolean", "default": false, "description": "%deviceSimulatorExpressExtension.configuration.properties.previewMode%", - "scope": "resource" + "scope": "resource" } } }, @@ -286,7 +286,7 @@ "tslint-microsoft-contrib": "^6.1.0", "tslint-react": "^3.6.0", "tslint-react-hooks": "^2.0.0", - "typescript": "^3.3.1", + "typescript": "^3.8.3", "typescript-react-intl": "^0.4.0", "version-from-git": "^1.1.1", "vsce": "^1.47.0", From df63c2db7ddb2bce467d1eaa4e7dd7e86dfb7398 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 12 Apr 2020 09:49:43 -0700 Subject: [PATCH 2/5] Refactor code to use latest typescript syntax --- src/view/components/clue/ClueImage.tsx | 57 +++++++------- src/view/components/clue/ClueSimulator.tsx | 70 ++++++++--------- src/view/components/clue/Clue_svg.tsx | 72 +++++++++--------- src/view/components/cpx/Svg_utils.tsx | 12 +-- .../components/microbit/MicrobitImage.tsx | 38 +++++----- .../components/microbit/MicrobitSimulator.tsx | 76 +++++++++---------- src/view/components/toolbar/SensorButton.tsx | 4 +- src/view/pages/gettingStarted.tsx | 31 ++++---- 8 files changed, 167 insertions(+), 193 deletions(-) diff --git a/src/view/components/clue/ClueImage.tsx b/src/view/components/clue/ClueImage.tsx index 0ad426c96..fadc59440 100644 --- a/src/view/components/clue/ClueImage.tsx +++ b/src/view/components/clue/ClueImage.tsx @@ -10,7 +10,6 @@ import { ClueSvg, IRefObject } from "./Clue_svg"; interface EventTriggers { onMouseUp: (event: Event, buttonKey: string) => void; onMouseDown: (event: Event, buttonKey: string) => void; - onMouseLeave: (event: Event, buttonKey: string) => void; onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void; } interface IProps { @@ -42,16 +41,15 @@ export class ClueImage extends React.Component { } } componentDidUpdate() { - if (this.svgRef.current) { - if (this.context === VIEW_STATE.PAUSE) { - disableAllButtons(this.svgRef.current.getButtons()); - } else if (this.context === VIEW_STATE.RUNNING) { - setupAllButtons( - this.props.eventTriggers, - this.svgRef.current.getButtons() - ); - } + if (this.context === VIEW_STATE.PAUSE && this.svgRef.current) { + disableAllButtons(this.svgRef.current.getButtons()); + } else if (this.context === VIEW_STATE.RUNNING && this.svgRef.current) { + setupAllButtons( + this.props.eventTriggers, + this.svgRef.current.getButtons() + ); } + } componentWillUnmount() { window.document.removeEventListener("keydown", this.handleKeyDown); @@ -89,25 +87,25 @@ export class ClueImage extends React.Component { ); } public updateButtonAttributes(key: BUTTONS_KEYS, isActive: boolean) { - if (this.svgRef.current) { - const button = this.svgRef.current.getButtons()[key].current; - if (button) { - button.focus(); - if (isActive) { - button.children[0].setAttribute( - "class", - BUTTON_STYLING_CLASSES.KEYPRESSED - ); - } else { - button.children[0].setAttribute( - "class", - BUTTON_STYLING_CLASSES.DEFAULT - ); - } - button.setAttribute("pressed", `${isActive}`); - button.setAttribute("aria-pressed", `${isActive}`); + + const button = this.svgRef.current?.getButtons()[key].current; + if (button) { + button.focus(); + if (isActive) { + button.children[0].setAttribute( + "class", + BUTTON_STYLING_CLASSES.KEYPRESSED + ); + } else { + button.children[0].setAttribute( + "class", + BUTTON_STYLING_CLASSES.DEFAULT + ); } + button.setAttribute("pressed", `${isActive}`); + button.setAttribute("aria-pressed", `${isActive}`); } + } } @@ -125,9 +123,7 @@ const setupButton = ( buttonElement.onmouseup = e => { eventTriggers.onMouseUp(e, key); }; - buttonElement.onmouseleave = e => { - eventTriggers.onMouseLeave(e, key); - }; + buttonElement.onkeydown = e => { // ensure that the keydown is enter, // or else it may register shortcuts twice @@ -155,7 +151,6 @@ const disableAllButtons = (buttonRefs: IRefObject) => { // to implement ref.current.onmousedown = null; ref.current.onmouseup = null; - ref.current.onmouseleave = null; ref.current.onkeydown = null; ref.current.onkeyup = null; ref.current.setAttribute("class", BUTTON_CLASSNAME.DEACTIVATED); diff --git a/src/view/components/clue/ClueSimulator.tsx b/src/view/components/clue/ClueSimulator.tsx index f0225d2e9..4a3ed68ba 100644 --- a/src/view/components/clue/ClueSimulator.tsx +++ b/src/view/components/clue/ClueSimulator.tsx @@ -128,7 +128,6 @@ export class ClueSimulator extends React.Component { eventTriggers={{ onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, - onMouseLeave: this.onMouseLeave, onKeyEvent: this.onKeyEvent, }} displayMessage={this.state.clue.displayMessage} @@ -194,18 +193,17 @@ export class ClueSimulator extends React.Component { }, }); }; + protected onMouseUp = (event: Event, key: string) => { event.preventDefault(); this.handleButtonClick(key, false); }; + protected onMouseDown = (event: Event, key: string) => { event.preventDefault(); this.handleButtonClick(key, true); }; - protected onMouseLeave = (event: Event, key: string) => { - event.preventDefault(); - console.log(`To implement onMouseLeave ${key}`); - }; + protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) { event.stopPropagation(); if ( @@ -213,57 +211,49 @@ export class ClueSimulator extends React.Component { this.context === VIEW_STATE.RUNNING ) { this.handleButtonClick(key, active); - if (this.imageRef.current) { - if (key === BUTTONS_KEYS.BTN_A) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_A, - active - ); - } else if (key === BUTTONS_KEYS.BTN_B) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_B, - active - ); - } else if (key === BUTTONS_KEYS.BTN_AB) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_AB, - active - ); - } + if (key === BUTTONS_KEYS.BTN_A) { + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_A, + active + ); + } else if (key === BUTTONS_KEYS.BTN_B) { + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_B, + active + ); + } else if (key === BUTTONS_KEYS.BTN_AB) { + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_AB, + active + ); } } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) && this.context === VIEW_STATE.RUNNING ) { this.handleButtonClick(BUTTONS_KEYS.BTN_A, active); - if (this.imageRef.current) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_A, - active - ); - } + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_A, + active + ); } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) && this.context === VIEW_STATE.RUNNING ) { this.handleButtonClick(BUTTONS_KEYS.BTN_B, active); - if (this.imageRef.current) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_B, - active - ); - } + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_B, + active + ); } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) && this.context === VIEW_STATE.RUNNING ) { this.handleButtonClick(BUTTONS_KEYS.BTN_AB, active); - if (this.imageRef.current) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_AB, - active - ); - } + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_AB, + active + ); } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) { this.togglePlayClick(); } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) { diff --git a/src/view/components/clue/Clue_svg.tsx b/src/view/components/clue/Clue_svg.tsx index f5bfe5b92..dea98bb7f 100644 --- a/src/view/components/clue/Clue_svg.tsx +++ b/src/view/components/clue/Clue_svg.tsx @@ -1124,8 +1124,8 @@ export class ClueSvg extends React.Component { } private updateDisplay() { - if (this.displayRef.current && this.props.displayImage) { - this.displayRef.current.setAttribute( + if (this.props.displayImage) { + this.displayRef.current?.setAttribute( "href", `data:image/png;base64,${this.props.displayImage}` ); @@ -1140,26 +1140,24 @@ export class ClueSvg extends React.Component { (255 - neopixel[1]) * CONSTANTS.LED_TINT_FACTOR},${neopixel[2] + (255 - neopixel[2]) * CONSTANTS.LED_TINT_FACTOR})`; - if (this.ledsRefs.neopixel.current) { - this.ledsRefs.neopixel.current.setAttribute("fill", rgbColor); - } - if (this.gradientRefs.neopixel.current) { - if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) { - this.gradientRefs.neopixel.current.setAttribute( - "stop-opacity", - "0" - ); - } else { - this.gradientRefs.neopixel.current.setAttribute( - "stop-opacity", - "1" - ); - } - this.gradientRefs.neopixel.current.setAttribute( - "stop-color", - rgbColor + this.ledsRefs.neopixel.current?.setAttribute("fill", rgbColor); + + if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) { + this.gradientRefs.neopixel.current?.setAttribute( + "stop-opacity", + "0" + ); + } else { + this.gradientRefs.neopixel.current?.setAttribute( + "stop-opacity", + "1" ); } + this.gradientRefs.neopixel.current?.setAttribute( + "stop-color", + rgbColor + ); + } private updateLeds() { // update white led @@ -1167,25 +1165,23 @@ export class ClueSvg extends React.Component { this.ledsRefs.whiteLeds.map( (ledRef: React.RefObject) => { - if (ledRef.current && this.gradientRefs.whiteLed.current) { - svg.setLed( - isWhiteLedOn, - CLUE_LEDS_COLORS.WHITE_LEDS_OFF, - CLUE_LEDS_COLORS.WHITE_LEDS_ON, - ledRef.current, - this.gradientRefs.whiteLed.current - ); - } + svg.setLed( + isWhiteLedOn, + CLUE_LEDS_COLORS.WHITE_LEDS_OFF, + CLUE_LEDS_COLORS.WHITE_LEDS_ON, + ledRef.current, + this.gradientRefs.whiteLed.current + ); + } ); - if (this.ledsRefs.redLed.current && this.gradientRefs.redLed.current) { - svg.setLed( - isRedLedOn, - CLUE_LEDS_COLORS.RED_LED_OFF, - CLUE_LEDS_COLORS.RED_LED_ON, - this.ledsRefs.redLed.current, - this.gradientRefs.redLed.current - ); - } + svg.setLed( + isRedLedOn, + CLUE_LEDS_COLORS.RED_LED_OFF, + CLUE_LEDS_COLORS.RED_LED_ON, + this.ledsRefs.redLed.current, + this.gradientRefs.redLed.current + ); + } } diff --git a/src/view/components/cpx/Svg_utils.tsx b/src/view/components/cpx/Svg_utils.tsx index 29dab77de..92836b923 100644 --- a/src/view/components/cpx/Svg_utils.tsx +++ b/src/view/components/cpx/Svg_utils.tsx @@ -82,15 +82,15 @@ namespace svg { ledStatus: boolean, offColor: string, onColor: string, - ledElement: SVGElement, - gradientStopElement: SVGStopElement + ledElement: SVGElement | null, + gradientStopElement: SVGStopElement | null ) { if (ledStatus) { - ledElement.setAttribute("fill", onColor); - gradientStopElement.setAttribute("stop-opacity", "1"); + ledElement?.setAttribute("fill", onColor); + gradientStopElement?.setAttribute("stop-opacity", "1"); } else { - ledElement.setAttribute("fill", offColor); - gradientStopElement.setAttribute("stop-opacity", "0"); + ledElement?.setAttribute("fill", offColor); + gradientStopElement?.setAttribute("stop-opacity", "0"); } } } diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index c471ecb56..8d53135dc 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -80,25 +80,24 @@ export class MicrobitImage extends React.Component { return ; } public updateButtonAttributes(key: BUTTONS_KEYS, isActive: boolean) { - if (this.svgRef.current) { - const button = this.svgRef.current.getButtons()[key].current; - if (button) { - button.focus(); - if (isActive) { - button.children[0].setAttribute( - "class", - BUTTON_STYLING_CLASSES.KEYPRESSED - ); - } else { - button.children[0].setAttribute( - "class", - BUTTON_STYLING_CLASSES.DEFAULT - ); - } - button.setAttribute("pressed", `${isActive}`); - button.setAttribute("aria-pressed", `${isActive}`); + const button = this.svgRef.current?.getButtons()[key].current; + if (button) { + button.focus(); + if (isActive) { + button.children[0].setAttribute( + "class", + BUTTON_STYLING_CLASSES.KEYPRESSED + ); + } else { + button.children[0].setAttribute( + "class", + BUTTON_STYLING_CLASSES.DEFAULT + ); } + button.setAttribute("pressed", `${isActive}`); + button.setAttribute("aria-pressed", `${isActive}`); } + } } @@ -117,9 +116,7 @@ const setupButton = ( buttonElement.onmouseup = e => { eventTriggers.onMouseUp(e, key); }; - buttonElement.onmouseleave = e => { - eventTriggers.onMouseLeave(e, key); - }; + buttonElement.onkeydown = e => { // ensure that the keydown is enter, // or else it may register shortcuts twice @@ -147,7 +144,6 @@ const disableAllButtons = (buttonRefs: IRefObject) => { // to implement ref.current.onmousedown = null; ref.current.onmouseup = null; - ref.current.onmouseleave = null; ref.current.onkeydown = null; ref.current.onkeyup = null; ref.current.setAttribute("class", BUTTON_CLASSNAME.DEACTIVATED); diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index ff44ac7b2..617de36d8 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -186,18 +186,17 @@ export class MicrobitSimulator extends React.Component { }, }); }; + protected onMouseUp = (event: Event, key: string) => { event.preventDefault(); this.handleButtonClick(key, false); }; + protected onMouseDown = (event: Event, key: string) => { event.preventDefault(); this.handleButtonClick(key, true); }; - protected onMouseLeave = (event: Event, key: string) => { - event.preventDefault(); - console.log(`To implement onMouseLeave ${key}`); - }; + protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) { event.stopPropagation(); if ( @@ -205,57 +204,56 @@ export class MicrobitSimulator extends React.Component { this.context === VIEW_STATE.RUNNING ) { this.handleButtonClick(key, active); - if (this.imageRef.current) { - if (key === BUTTONS_KEYS.BTN_A) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_A, - active - ); - } else if (key === BUTTONS_KEYS.BTN_B) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_B, - active - ); - } else if (key === BUTTONS_KEYS.BTN_AB) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_AB, - active - ); - } + if (key === BUTTONS_KEYS.BTN_A) { + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_A, + active + ); + } else if (key === BUTTONS_KEYS.BTN_B) { + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_B, + active + ); + } else if (key === BUTTONS_KEYS.BTN_AB) { + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_AB, + active + ); + } } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) && this.context === VIEW_STATE.RUNNING ) { this.handleButtonClick(BUTTONS_KEYS.BTN_A, active); - if (this.imageRef.current) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_A, - active - ); - } + + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_A, + active + ); + } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) && this.context === VIEW_STATE.RUNNING ) { this.handleButtonClick(BUTTONS_KEYS.BTN_B, active); - if (this.imageRef.current) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_B, - active - ); - } + + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_B, + active + ); + } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) && this.context === VIEW_STATE.RUNNING ) { this.handleButtonClick(BUTTONS_KEYS.BTN_AB, active); - if (this.imageRef.current) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_AB, - active - ); - } + + this.imageRef.current?.updateButtonAttributes( + BUTTONS_KEYS.BTN_AB, + active + ); + } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) { this.togglePlayClick(); } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) { diff --git a/src/view/components/toolbar/SensorButton.tsx b/src/view/components/toolbar/SensorButton.tsx index 601bb80c1..b50759bd4 100644 --- a/src/view/components/toolbar/SensorButton.tsx +++ b/src/view/components/toolbar/SensorButton.tsx @@ -13,8 +13,8 @@ class SensorButton extends React.Component { public setButtonClass = (isActive: boolean) => { const isInputDisabled = this.context === VIEW_STATE.PAUSE; - if (isActive && !isInputDisabled && this.buttonRef.current) { - this.buttonRef.current.setAttribute( + if (isActive && !isInputDisabled) { + this.buttonRef.current?.setAttribute( "class", "sensor-button active-button" ); diff --git a/src/view/pages/gettingStarted.tsx b/src/view/pages/gettingStarted.tsx index 1d00df250..d79107471 100644 --- a/src/view/pages/gettingStarted.tsx +++ b/src/view/pages/gettingStarted.tsx @@ -5,20 +5,19 @@ export class GettingStartedPage extends React.Component { private selectRef: React.RefObject = React.createRef(); componentDidMount() { - if (this.selectRef.current) { - this.selectRef.current.addEventListener("change", (event: any) => { - const visibleElement = document.querySelector( - ".visibleElement" - ); - const target = document.getElementById(event!.target!.value); - if (visibleElement !== null) { - visibleElement.className = "inv"; - } - if (target !== null) { - target.className = "visibleElement"; - } - }); - } + this.selectRef.current?.addEventListener("change", (event: any) => { + const visibleElement = document.querySelector( + ".visibleElement" + ); + const target = document.getElementById(event!.target!.value); + if (visibleElement !== null) { + visibleElement.className = "inv"; + } + if (target !== null) { + target.className = "visibleElement"; + } + }); + } render() { @@ -138,13 +137,13 @@ export class GettingStartedPage extends React.Component {

Tutorial for CLUE

0. Enable Preview Mode to use the CLUE (This is required)

a. Access your settings:

- Open settings + Open settings
  • Windows or Linux: press Ctrl + , or go to File -> Preferences -> Settings
  • Mac: press Cmd + , or go to Code -> Preferences -> Settings.

b. Check the "Device Simulator Express: Preview Mode" setting.

- Enable preview mode + Enable preview mode

1. Import the the main CLUE library (This is required) From b5b5d49218740b17a520d6f2aacc02fd898b9857 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 12 Apr 2020 10:40:05 -0700 Subject: [PATCH 3/5] Remove onMouseLeave from simulator --- src/view/components/microbit/MicrobitImage.tsx | 1 - src/view/components/microbit/MicrobitSimulator.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index 8d53135dc..164fbe49b 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -10,7 +10,6 @@ import { IRefObject, MicrobitSvg } from "./Microbit_svg"; interface EventTriggers { onMouseUp: (event: Event, buttonKey: string) => void; onMouseDown: (event: Event, buttonKey: string) => void; - onMouseLeave: (event: Event, buttonKey: string) => void; onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void; } interface IProps { diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index 617de36d8..87b6e9845 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -124,7 +124,6 @@ export class MicrobitSimulator extends React.Component { eventTriggers={{ onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, - onMouseLeave: this.onMouseLeave, onKeyEvent: this.onKeyEvent, }} leds={this.state.microbit.leds} From 3b2b052dc3c2a79d602d1d6f0d13168b528fa069 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 13 Apr 2020 08:33:24 -0700 Subject: [PATCH 4/5] Format --- src/view/components/clue/ClueImage.tsx | 3 --- src/view/components/clue/Clue_svg.tsx | 3 --- src/view/components/microbit/MicrobitImage.tsx | 1 - src/view/components/microbit/MicrobitSimulator.tsx | 4 ---- src/view/pages/gettingStarted.tsx | 5 +---- 5 files changed, 1 insertion(+), 15 deletions(-) diff --git a/src/view/components/clue/ClueImage.tsx b/src/view/components/clue/ClueImage.tsx index fadc59440..85694d4e0 100644 --- a/src/view/components/clue/ClueImage.tsx +++ b/src/view/components/clue/ClueImage.tsx @@ -49,7 +49,6 @@ export class ClueImage extends React.Component { this.svgRef.current.getButtons() ); } - } componentWillUnmount() { window.document.removeEventListener("keydown", this.handleKeyDown); @@ -87,7 +86,6 @@ export class ClueImage extends React.Component { ); } public updateButtonAttributes(key: BUTTONS_KEYS, isActive: boolean) { - const button = this.svgRef.current?.getButtons()[key].current; if (button) { button.focus(); @@ -105,7 +103,6 @@ export class ClueImage extends React.Component { button.setAttribute("pressed", `${isActive}`); button.setAttribute("aria-pressed", `${isActive}`); } - } } diff --git a/src/view/components/clue/Clue_svg.tsx b/src/view/components/clue/Clue_svg.tsx index dea98bb7f..49f40d707 100644 --- a/src/view/components/clue/Clue_svg.tsx +++ b/src/view/components/clue/Clue_svg.tsx @@ -1157,7 +1157,6 @@ export class ClueSvg extends React.Component { "stop-color", rgbColor ); - } private updateLeds() { // update white led @@ -1172,7 +1171,6 @@ export class ClueSvg extends React.Component { ledRef.current, this.gradientRefs.whiteLed.current ); - } ); svg.setLed( @@ -1182,6 +1180,5 @@ export class ClueSvg extends React.Component { this.ledsRefs.redLed.current, this.gradientRefs.redLed.current ); - } } diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index 164fbe49b..a216dceef 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -96,7 +96,6 @@ export class MicrobitImage extends React.Component { button.setAttribute("pressed", `${isActive}`); button.setAttribute("aria-pressed", `${isActive}`); } - } } diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index 87b6e9845..d3507710c 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -218,7 +218,6 @@ export class MicrobitSimulator extends React.Component { BUTTONS_KEYS.BTN_AB, active ); - } } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) && @@ -230,7 +229,6 @@ export class MicrobitSimulator extends React.Component { BUTTONS_KEYS.BTN_A, active ); - } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) && this.context === VIEW_STATE.RUNNING @@ -241,7 +239,6 @@ export class MicrobitSimulator extends React.Component { BUTTONS_KEYS.BTN_B, active ); - } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) && this.context === VIEW_STATE.RUNNING @@ -252,7 +249,6 @@ export class MicrobitSimulator extends React.Component { BUTTONS_KEYS.BTN_AB, active ); - } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) { this.togglePlayClick(); } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) { diff --git a/src/view/pages/gettingStarted.tsx b/src/view/pages/gettingStarted.tsx index d79107471..04f3d2c8a 100644 --- a/src/view/pages/gettingStarted.tsx +++ b/src/view/pages/gettingStarted.tsx @@ -6,9 +6,7 @@ export class GettingStartedPage extends React.Component { componentDidMount() { this.selectRef.current?.addEventListener("change", (event: any) => { - const visibleElement = document.querySelector( - ".visibleElement" - ); + const visibleElement = document.querySelector(".visibleElement"); const target = document.getElementById(event!.target!.value); if (visibleElement !== null) { visibleElement.className = "inv"; @@ -17,7 +15,6 @@ export class GettingStartedPage extends React.Component { target.className = "visibleElement"; } }); - } render() { From 416c63c49525870ed9431b8f5a4a0d005672b6d8 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 13 Apr 2020 08:34:18 -0700 Subject: [PATCH 5/5] Lint code --- src/extension.ts | 2 +- src/view/components/clue/ClueSimulator.tsx | 4 ++-- src/view/components/clue/Clue_svg.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/extension.ts b/src/extension.ts index cae41100f..d3b56ddc3 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -595,7 +595,7 @@ export async function activate(context: vscode.ExtensionContext) { // base_64 strings on UNIX systems. // added any incomplete data to beginning - let processedData = pythonProcessDataBuffer + const processedData = pythonProcessDataBuffer .join("") .concat(dataFromTheProcess); pythonProcessDataBuffer = []; diff --git a/src/view/components/clue/ClueSimulator.tsx b/src/view/components/clue/ClueSimulator.tsx index 4a3ed68ba..a15f101f8 100644 --- a/src/view/components/clue/ClueSimulator.tsx +++ b/src/view/components/clue/ClueSimulator.tsx @@ -7,14 +7,14 @@ import { VIEW_STATE, WEBVIEW_MESSAGES, } from "../../constants"; +import { ViewStateContext } from "../../context"; +import "../../styles/Simulator.css"; import "../../styles/Simulator.css"; import PlayLogo from "../../svgs/play_svg"; import StopLogo from "../../svgs/stop_svg"; import { sendMessage } from "../../utils/MessageUtils"; import ActionBar from "../simulator/ActionBar"; import { BUTTONS_KEYS, ClueImage } from "./ClueImage"; -import "../../styles/Simulator.css"; -import { ViewStateContext } from "../../context"; export const DEFAULT_CLUE_STATE: IClueState = { buttons: { button_a: false, button_b: false }, diff --git a/src/view/components/clue/Clue_svg.tsx b/src/view/components/clue/Clue_svg.tsx index 49f40d707..bcbf4e6d2 100644 --- a/src/view/components/clue/Clue_svg.tsx +++ b/src/view/components/clue/Clue_svg.tsx @@ -2,10 +2,10 @@ // Licensed under the MIT license. import * as React from "react"; +import { CLUE_LEDS_COLORS, CONSTANTS } from "../../constants"; import "../../styles/SimulatorSvg.css"; -import { DEFAULT_CLUE_STATE } from "./ClueSimulator"; -import { CONSTANTS, CLUE_LEDS_COLORS } from "../../constants"; import svg from "../cpx/Svg_utils"; +import { DEFAULT_CLUE_STATE } from "./ClueSimulator"; export interface IRefObject { [key: string]: React.RefObject; }