Skip to content

Commit df63c2d

Browse files
xnkevinnguyenxnkevinnguyen
committed
Refactor code to use latest typescript syntax
1 parent 9ddfcc6 commit df63c2d

8 files changed

Lines changed: 167 additions & 193 deletions

File tree

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

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { ClueSvg, IRefObject } from "./Clue_svg";
1010
interface EventTriggers {
1111
onMouseUp: (event: Event, buttonKey: string) => void;
1212
onMouseDown: (event: Event, buttonKey: string) => void;
13-
onMouseLeave: (event: Event, buttonKey: string) => void;
1413
onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void;
1514
}
1615
interface IProps {
@@ -42,16 +41,15 @@ export class ClueImage extends React.Component<IProps, {}> {
4241
}
4342
}
4443
componentDidUpdate() {
45-
if (this.svgRef.current) {
46-
if (this.context === VIEW_STATE.PAUSE) {
47-
disableAllButtons(this.svgRef.current.getButtons());
48-
} else if (this.context === VIEW_STATE.RUNNING) {
49-
setupAllButtons(
50-
this.props.eventTriggers,
51-
this.svgRef.current.getButtons()
52-
);
53-
}
44+
if (this.context === VIEW_STATE.PAUSE && this.svgRef.current) {
45+
disableAllButtons(this.svgRef.current.getButtons());
46+
} else if (this.context === VIEW_STATE.RUNNING && this.svgRef.current) {
47+
setupAllButtons(
48+
this.props.eventTriggers,
49+
this.svgRef.current.getButtons()
50+
);
5451
}
52+
5553
}
5654
componentWillUnmount() {
5755
window.document.removeEventListener("keydown", this.handleKeyDown);
@@ -89,25 +87,25 @@ export class ClueImage extends React.Component<IProps, {}> {
8987
);
9088
}
9189
public updateButtonAttributes(key: BUTTONS_KEYS, isActive: boolean) {
92-
if (this.svgRef.current) {
93-
const button = this.svgRef.current.getButtons()[key].current;
94-
if (button) {
95-
button.focus();
96-
if (isActive) {
97-
button.children[0].setAttribute(
98-
"class",
99-
BUTTON_STYLING_CLASSES.KEYPRESSED
100-
);
101-
} else {
102-
button.children[0].setAttribute(
103-
"class",
104-
BUTTON_STYLING_CLASSES.DEFAULT
105-
);
106-
}
107-
button.setAttribute("pressed", `${isActive}`);
108-
button.setAttribute("aria-pressed", `${isActive}`);
90+
91+
const button = this.svgRef.current?.getButtons()[key].current;
92+
if (button) {
93+
button.focus();
94+
if (isActive) {
95+
button.children[0].setAttribute(
96+
"class",
97+
BUTTON_STYLING_CLASSES.KEYPRESSED
98+
);
99+
} else {
100+
button.children[0].setAttribute(
101+
"class",
102+
BUTTON_STYLING_CLASSES.DEFAULT
103+
);
109104
}
105+
button.setAttribute("pressed", `${isActive}`);
106+
button.setAttribute("aria-pressed", `${isActive}`);
110107
}
108+
111109
}
112110
}
113111

@@ -125,9 +123,7 @@ const setupButton = (
125123
buttonElement.onmouseup = e => {
126124
eventTriggers.onMouseUp(e, key);
127125
};
128-
buttonElement.onmouseleave = e => {
129-
eventTriggers.onMouseLeave(e, key);
130-
};
126+
131127
buttonElement.onkeydown = e => {
132128
// ensure that the keydown is enter,
133129
// or else it may register shortcuts twice
@@ -155,7 +151,6 @@ const disableAllButtons = (buttonRefs: IRefObject) => {
155151
// to implement
156152
ref.current.onmousedown = null;
157153
ref.current.onmouseup = null;
158-
ref.current.onmouseleave = null;
159154
ref.current.onkeydown = null;
160155
ref.current.onkeyup = null;
161156
ref.current.setAttribute("class", BUTTON_CLASSNAME.DEACTIVATED);

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

Lines changed: 30 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,6 @@ export class ClueSimulator extends React.Component<any, IState> {
128128
eventTriggers={{
129129
onMouseDown: this.onMouseDown,
130130
onMouseUp: this.onMouseUp,
131-
onMouseLeave: this.onMouseLeave,
132131
onKeyEvent: this.onKeyEvent,
133132
}}
134133
displayMessage={this.state.clue.displayMessage}
@@ -194,76 +193,67 @@ export class ClueSimulator extends React.Component<any, IState> {
194193
},
195194
});
196195
};
196+
197197
protected onMouseUp = (event: Event, key: string) => {
198198
event.preventDefault();
199199
this.handleButtonClick(key, false);
200200
};
201+
201202
protected onMouseDown = (event: Event, key: string) => {
202203
event.preventDefault();
203204
this.handleButtonClick(key, true);
204205
};
205-
protected onMouseLeave = (event: Event, key: string) => {
206-
event.preventDefault();
207-
console.log(`To implement onMouseLeave ${key}`);
208-
};
206+
209207
protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) {
210208
event.stopPropagation();
211209
if (
212210
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER) &&
213211
this.context === VIEW_STATE.RUNNING
214212
) {
215213
this.handleButtonClick(key, active);
216-
if (this.imageRef.current) {
217-
if (key === BUTTONS_KEYS.BTN_A) {
218-
this.imageRef.current.updateButtonAttributes(
219-
BUTTONS_KEYS.BTN_A,
220-
active
221-
);
222-
} else if (key === BUTTONS_KEYS.BTN_B) {
223-
this.imageRef.current.updateButtonAttributes(
224-
BUTTONS_KEYS.BTN_B,
225-
active
226-
);
227-
} else if (key === BUTTONS_KEYS.BTN_AB) {
228-
this.imageRef.current.updateButtonAttributes(
229-
BUTTONS_KEYS.BTN_AB,
230-
active
231-
);
232-
}
214+
if (key === BUTTONS_KEYS.BTN_A) {
215+
this.imageRef.current?.updateButtonAttributes(
216+
BUTTONS_KEYS.BTN_A,
217+
active
218+
);
219+
} else if (key === BUTTONS_KEYS.BTN_B) {
220+
this.imageRef.current?.updateButtonAttributes(
221+
BUTTONS_KEYS.BTN_B,
222+
active
223+
);
224+
} else if (key === BUTTONS_KEYS.BTN_AB) {
225+
this.imageRef.current?.updateButtonAttributes(
226+
BUTTONS_KEYS.BTN_AB,
227+
active
228+
);
233229
}
234230
} else if (
235231
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) &&
236232
this.context === VIEW_STATE.RUNNING
237233
) {
238234
this.handleButtonClick(BUTTONS_KEYS.BTN_A, active);
239-
if (this.imageRef.current) {
240-
this.imageRef.current.updateButtonAttributes(
241-
BUTTONS_KEYS.BTN_A,
242-
active
243-
);
244-
}
235+
this.imageRef.current?.updateButtonAttributes(
236+
BUTTONS_KEYS.BTN_A,
237+
active
238+
);
245239
} else if (
246240
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) &&
247241
this.context === VIEW_STATE.RUNNING
248242
) {
249243
this.handleButtonClick(BUTTONS_KEYS.BTN_B, active);
250-
if (this.imageRef.current) {
251-
this.imageRef.current.updateButtonAttributes(
252-
BUTTONS_KEYS.BTN_B,
253-
active
254-
);
255-
}
244+
this.imageRef.current?.updateButtonAttributes(
245+
BUTTONS_KEYS.BTN_B,
246+
active
247+
);
256248
} else if (
257249
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) &&
258250
this.context === VIEW_STATE.RUNNING
259251
) {
260252
this.handleButtonClick(BUTTONS_KEYS.BTN_AB, active);
261-
if (this.imageRef.current) {
262-
this.imageRef.current.updateButtonAttributes(
263-
BUTTONS_KEYS.BTN_AB,
264-
active
265-
);
266-
}
253+
this.imageRef.current?.updateButtonAttributes(
254+
BUTTONS_KEYS.BTN_AB,
255+
active
256+
);
267257
} else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) {
268258
this.togglePlayClick();
269259
} else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) {

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

Lines changed: 34 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1124,8 +1124,8 @@ export class ClueSvg extends React.Component<IProps, {}> {
11241124
}
11251125

11261126
private updateDisplay() {
1127-
if (this.displayRef.current && this.props.displayImage) {
1128-
this.displayRef.current.setAttribute(
1127+
if (this.props.displayImage) {
1128+
this.displayRef.current?.setAttribute(
11291129
"href",
11301130
`data:image/png;base64,${this.props.displayImage}`
11311131
);
@@ -1140,52 +1140,48 @@ export class ClueSvg extends React.Component<IProps, {}> {
11401140
(255 - neopixel[1]) * CONSTANTS.LED_TINT_FACTOR},${neopixel[2] +
11411141
(255 - neopixel[2]) * CONSTANTS.LED_TINT_FACTOR})`;
11421142

1143-
if (this.ledsRefs.neopixel.current) {
1144-
this.ledsRefs.neopixel.current.setAttribute("fill", rgbColor);
1145-
}
1146-
if (this.gradientRefs.neopixel.current) {
1147-
if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) {
1148-
this.gradientRefs.neopixel.current.setAttribute(
1149-
"stop-opacity",
1150-
"0"
1151-
);
1152-
} else {
1153-
this.gradientRefs.neopixel.current.setAttribute(
1154-
"stop-opacity",
1155-
"1"
1156-
);
1157-
}
1158-
this.gradientRefs.neopixel.current.setAttribute(
1159-
"stop-color",
1160-
rgbColor
1143+
this.ledsRefs.neopixel.current?.setAttribute("fill", rgbColor);
1144+
1145+
if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) {
1146+
this.gradientRefs.neopixel.current?.setAttribute(
1147+
"stop-opacity",
1148+
"0"
1149+
);
1150+
} else {
1151+
this.gradientRefs.neopixel.current?.setAttribute(
1152+
"stop-opacity",
1153+
"1"
11611154
);
11621155
}
1156+
this.gradientRefs.neopixel.current?.setAttribute(
1157+
"stop-color",
1158+
rgbColor
1159+
);
1160+
11631161
}
11641162
private updateLeds() {
11651163
// update white led
11661164
const { isWhiteLedOn, isRedLedOn } = this.props.leds;
11671165

11681166
this.ledsRefs.whiteLeds.map(
11691167
(ledRef: React.RefObject<SVGRectElement>) => {
1170-
if (ledRef.current && this.gradientRefs.whiteLed.current) {
1171-
svg.setLed(
1172-
isWhiteLedOn,
1173-
CLUE_LEDS_COLORS.WHITE_LEDS_OFF,
1174-
CLUE_LEDS_COLORS.WHITE_LEDS_ON,
1175-
ledRef.current,
1176-
this.gradientRefs.whiteLed.current
1177-
);
1178-
}
1168+
svg.setLed(
1169+
isWhiteLedOn,
1170+
CLUE_LEDS_COLORS.WHITE_LEDS_OFF,
1171+
CLUE_LEDS_COLORS.WHITE_LEDS_ON,
1172+
ledRef.current,
1173+
this.gradientRefs.whiteLed.current
1174+
);
1175+
11791176
}
11801177
);
1181-
if (this.ledsRefs.redLed.current && this.gradientRefs.redLed.current) {
1182-
svg.setLed(
1183-
isRedLedOn,
1184-
CLUE_LEDS_COLORS.RED_LED_OFF,
1185-
CLUE_LEDS_COLORS.RED_LED_ON,
1186-
this.ledsRefs.redLed.current,
1187-
this.gradientRefs.redLed.current
1188-
);
1189-
}
1178+
svg.setLed(
1179+
isRedLedOn,
1180+
CLUE_LEDS_COLORS.RED_LED_OFF,
1181+
CLUE_LEDS_COLORS.RED_LED_ON,
1182+
this.ledsRefs.redLed.current,
1183+
this.gradientRefs.redLed.current
1184+
);
1185+
11901186
}
11911187
}

‎src/view/components/cpx/Svg_utils.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,15 @@ namespace svg {
8282
ledStatus: boolean,
8383
offColor: string,
8484
onColor: string,
85-
ledElement: SVGElement,
86-
gradientStopElement: SVGStopElement
85+
ledElement: SVGElement | null,
86+
gradientStopElement: SVGStopElement | null
8787
) {
8888
if (ledStatus) {
89-
ledElement.setAttribute("fill", onColor);
90-
gradientStopElement.setAttribute("stop-opacity", "1");
89+
ledElement?.setAttribute("fill", onColor);
90+
gradientStopElement?.setAttribute("stop-opacity", "1");
9191
} else {
92-
ledElement.setAttribute("fill", offColor);
93-
gradientStopElement.setAttribute("stop-opacity", "0");
92+
ledElement?.setAttribute("fill", offColor);
93+
gradientStopElement?.setAttribute("stop-opacity", "0");
9494
}
9595
}
9696
}

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

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -80,25 +80,24 @@ export class MicrobitImage extends React.Component<IProps, {}> {
8080
return <MicrobitSvg ref={this.svgRef} />;
8181
}
8282
public updateButtonAttributes(key: BUTTONS_KEYS, isActive: boolean) {
83-
if (this.svgRef.current) {
84-
const button = this.svgRef.current.getButtons()[key].current;
85-
if (button) {
86-
button.focus();
87-
if (isActive) {
88-
button.children[0].setAttribute(
89-
"class",
90-
BUTTON_STYLING_CLASSES.KEYPRESSED
91-
);
92-
} else {
93-
button.children[0].setAttribute(
94-
"class",
95-
BUTTON_STYLING_CLASSES.DEFAULT
96-
);
97-
}
98-
button.setAttribute("pressed", `${isActive}`);
99-
button.setAttribute("aria-pressed", `${isActive}`);
83+
const button = this.svgRef.current?.getButtons()[key].current;
84+
if (button) {
85+
button.focus();
86+
if (isActive) {
87+
button.children[0].setAttribute(
88+
"class",
89+
BUTTON_STYLING_CLASSES.KEYPRESSED
90+
);
91+
} else {
92+
button.children[0].setAttribute(
93+
"class",
94+
BUTTON_STYLING_CLASSES.DEFAULT
95+
);
10096
}
97+
button.setAttribute("pressed", `${isActive}`);
98+
button.setAttribute("aria-pressed", `${isActive}`);
10199
}
100+
102101
}
103102
}
104103

@@ -117,9 +116,7 @@ const setupButton = (
117116
buttonElement.onmouseup = e => {
118117
eventTriggers.onMouseUp(e, key);
119118
};
120-
buttonElement.onmouseleave = e => {
121-
eventTriggers.onMouseLeave(e, key);
122-
};
119+
123120
buttonElement.onkeydown = e => {
124121
// ensure that the keydown is enter,
125122
// or else it may register shortcuts twice
@@ -147,7 +144,6 @@ const disableAllButtons = (buttonRefs: IRefObject) => {
147144
// to implement
148145
ref.current.onmousedown = null;
149146
ref.current.onmouseup = null;
150-
ref.current.onmouseleave = null;
151147
ref.current.onkeydown = null;
152148
ref.current.onkeyup = null;
153149
ref.current.setAttribute("class", BUTTON_CLASSNAME.DEACTIVATED);

0 commit comments

Comments
 (0)