Skip to content

Commit f027269

Browse files
xnkevinnguyenxnkevinnguyen
committed
Configure proper flow for keys shortcuts on debug
1 parent 1774465 commit f027269

5 files changed

Lines changed: 35 additions & 20 deletions

File tree

‎src/view/components/clue/ClueImage.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// Licensed under the MIT license.
33

44
import * as React from "react";
5-
import { VIEW_STATE } from "../../constants";
5+
import { VIEW_STATE, BUTTON_CLASSNAME } from "../../constants";
66
import CONSTANTS, { BUTTON_STYLING_CLASSES } from "../../constants";
77
import { ViewStateContext } from "../../context";
88
import { ClueSvg, IRefObject } from "./Clue_svg";
@@ -19,11 +19,6 @@ interface IProps {
1919
neopixel: number[];
2020
}
2121

22-
const BUTTON_CLASSNAME = {
23-
ACTIVE: "sim-button-outer",
24-
DEACTIVATED: "sim-button-deactivated",
25-
};
26-
2722
export enum BUTTONS_KEYS {
2823
BTN_A = "BTN_A",
2924
BTN_B = "BTN_B",
@@ -118,6 +113,7 @@ const setupButton = (
118113
eventTriggers: EventTriggers,
119114
key: string
120115
) => {
116+
buttonElement.setAttribute("class", BUTTON_CLASSNAME.ACTIVE);
121117
buttonElement.onmousedown = e => {
122118
buttonElement.focus();
123119
eventTriggers.onMouseDown(e, key);

‎src/view/components/clue/ClueSimulator.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import {
66
DEFAULT_IMG_CLUE,
77
DEVICE_LIST_KEY,
88
WEBVIEW_MESSAGES,
9+
VIEW_STATE,
910
} from "../../constants";
1011
import PlayLogo from "../../svgs/play_svg";
1112
import StopLogo from "../../svgs/stop_svg";
1213
import { sendMessage } from "../../utils/MessageUtils";
1314
import ActionBar from "../simulator/ActionBar";
1415
import { BUTTONS_KEYS, ClueImage } from "./ClueImage";
16+
import { ViewStateContext } from "../../context";
1517

1618
export const DEFAULT_CLUE_STATE: IClueState = {
1719
buttons: { button_a: false, button_b: false },
@@ -215,7 +217,10 @@ export class ClueSimulator extends React.Component<any, IState> {
215217
};
216218
protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) {
217219
event.stopPropagation();
218-
if ([event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) {
220+
if (
221+
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER) &&
222+
this.context === VIEW_STATE.RUNNING
223+
) {
219224
this.handleButtonClick(key, active);
220225
if (this.imageRef.current) {
221226
if (key === BUTTONS_KEYS.BTN_A) {
@@ -236,7 +241,8 @@ export class ClueSimulator extends React.Component<any, IState> {
236241
}
237242
}
238243
} else if (
239-
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A)
244+
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) &&
245+
this.context === VIEW_STATE.RUNNING
240246
) {
241247
this.handleButtonClick(BUTTONS_KEYS.BTN_A, active);
242248
if (this.imageRef.current) {
@@ -246,7 +252,8 @@ export class ClueSimulator extends React.Component<any, IState> {
246252
);
247253
}
248254
} else if (
249-
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B)
255+
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) &&
256+
this.context === VIEW_STATE.RUNNING
250257
) {
251258
this.handleButtonClick(BUTTONS_KEYS.BTN_B, active);
252259
if (this.imageRef.current) {
@@ -256,7 +263,8 @@ export class ClueSimulator extends React.Component<any, IState> {
256263
);
257264
}
258265
} else if (
259-
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C)
266+
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) &&
267+
this.context === VIEW_STATE.RUNNING
260268
) {
261269
this.handleButtonClick(BUTTONS_KEYS.BTN_AB, active);
262270
if (this.imageRef.current) {
@@ -272,3 +280,4 @@ export class ClueSimulator extends React.Component<any, IState> {
272280
}
273281
}
274282
}
283+
ClueSimulator.contextType = ViewStateContext;

‎src/view/components/microbit/MicrobitImage.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// Licensed under the MIT license.
33

44
import * as React from "react";
5-
import { VIEW_STATE } from "../../constants";
5+
import { VIEW_STATE, BUTTON_CLASSNAME } from "../../constants";
66
import CONSTANTS, { BUTTON_STYLING_CLASSES } from "../../constants";
77
import { ViewStateContext } from "../../context";
88
import { IRefObject, MicrobitSvg } from "./Microbit_svg";
@@ -18,11 +18,6 @@ interface IProps {
1818
leds: number[][];
1919
}
2020

21-
const BUTTON_CLASSNAME = {
22-
ACTIVE: "sim-button-outer",
23-
DEACTIVATED: "sim-button-deactivated",
24-
};
25-
2621
export enum BUTTONS_KEYS {
2722
BTN_A = "BTN_A",
2823
BTN_B = "BTN_B",
@@ -113,6 +108,8 @@ const setupButton = (
113108
eventTriggers: EventTriggers,
114109
key: string
115110
) => {
111+
buttonElement.setAttribute("class", BUTTON_CLASSNAME.ACTIVE);
112+
116113
buttonElement.onmousedown = e => {
117114
buttonElement.focus();
118115
eventTriggers.onMouseDown(e, key);

‎src/view/components/microbit/MicrobitSimulator.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import {
44
CONSTANTS,
55
DEVICE_LIST_KEY,
66
WEBVIEW_MESSAGES,
7+
VIEW_STATE,
78
} from "../../constants";
89
import PlayLogo from "../../svgs/play_svg";
910
import StopLogo from "../../svgs/stop_svg";
1011
import { sendMessage } from "../../utils/MessageUtils";
1112
import ActionBar from "../simulator/ActionBar";
1213
import { BUTTONS_KEYS, MicrobitImage } from "./MicrobitImage";
14+
import { ViewStateContext } from "../../context";
1315

1416
const DEFAULT_MICROBIT_STATE: IMicrobitState = {
1517
leds: [
@@ -198,7 +200,10 @@ export class MicrobitSimulator extends React.Component<any, IState> {
198200
};
199201
protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) {
200202
event.stopPropagation();
201-
if ([event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) {
203+
if (
204+
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER) &&
205+
this.context === VIEW_STATE.RUNNING
206+
) {
202207
this.handleButtonClick(key, active);
203208
if (this.imageRef.current) {
204209
if (key === BUTTONS_KEYS.BTN_A) {
@@ -219,7 +224,8 @@ export class MicrobitSimulator extends React.Component<any, IState> {
219224
}
220225
}
221226
} else if (
222-
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A)
227+
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) &&
228+
this.context === VIEW_STATE.RUNNING
223229
) {
224230
this.handleButtonClick(BUTTONS_KEYS.BTN_A, active);
225231
if (this.imageRef.current) {
@@ -229,7 +235,8 @@ export class MicrobitSimulator extends React.Component<any, IState> {
229235
);
230236
}
231237
} else if (
232-
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B)
238+
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) &&
239+
this.context === VIEW_STATE.RUNNING
233240
) {
234241
this.handleButtonClick(BUTTONS_KEYS.BTN_B, active);
235242
if (this.imageRef.current) {
@@ -239,7 +246,8 @@ export class MicrobitSimulator extends React.Component<any, IState> {
239246
);
240247
}
241248
} else if (
242-
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C)
249+
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) &&
250+
this.context === VIEW_STATE.RUNNING
243251
) {
244252
this.handleButtonClick(BUTTONS_KEYS.BTN_AB, active);
245253
if (this.imageRef.current) {
@@ -255,3 +263,4 @@ export class MicrobitSimulator extends React.Component<any, IState> {
255263
}
256264
}
257265
}
266+
MicrobitSimulator.contextType = ViewStateContext;

‎src/view/constants.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ export const AB_BUTTONS_KEYS = {
5353
BTN_B: "BTN_B",
5454
BTN_AB: "BTN_AB",
5555
};
56+
export const BUTTON_CLASSNAME = {
57+
ACTIVE: "sim-button-group",
58+
DEACTIVATED: "sim-button-group-deactivated",
59+
};
5660
export const BUTTON_STYLING_CLASSES = {
5761
DEFAULT: "sim-button-outer",
5862
KEYPRESSED: "sim-button-key-press",

0 commit comments

Comments
 (0)