Skip to content

Commit 248ccc2

Browse files
xnkevinnguyenxnkevinnguyen
committed
Clean up branch with feedback
1 parent 46d8dbc commit 248ccc2

8 files changed

Lines changed: 58 additions & 44 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
},
66
"search.exclude": {
77
"out": true // set this to false to include "out" folder in search results
8-
},
8+
}
99
// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
10-
"typescript.tsc.autoDetect": "off",
11-
"python.linting.pylintArgs": [
12-
"--init-hook",
13-
"import sys; sys.path.append(\"\"/Users/kevin/.vscode/extensions/ms-python.devicesimulatorexpress-2020.0.35773/out\"\")"
14-
],
15-
"python.pythonPath": "venv/bin/python3"
1610
}

‎src/base_circuitpython/neopixel_write.py‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ def neopixel_write(gpio, buf):
3030

3131
def send_clue(buf):
3232
sendable_json = {CONSTANTS.PIXELS: tuple(buf)}
33-
34-
# for now, just print pixels
35-
print(sendable_json)
36-
3733
utils.send_to_simulator(sendable_json, CONSTANTS.CLUE)
3834

3935

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ interface EventTriggers {
1717
interface IProps {
1818
eventTriggers: EventTriggers;
1919
displayMessage: string;
20-
neopixel:number[]
20+
neopixel: number[];
2121
}
2222

2323
const BUTTON_CLASSNAME = {

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { BUTTONS_KEYS, ClueImage } from "./ClueImage";
1515
export const DEFAULT_CLUE_STATE: IClueState = {
1616
buttons: { button_a: false, button_b: false },
1717
displayMessage: DEFAULT_IMG_CLUE,
18-
neopixel: [0, 0, 0]
18+
neopixel: [0, 0, 0],
1919
};
2020

2121
interface IState {
@@ -30,7 +30,7 @@ interface IState {
3030
interface IClueState {
3131
buttons: { button_a: boolean; button_b: boolean };
3232
displayMessage: string;
33-
neopixel: number[]
33+
neopixel: number[];
3434
}
3535
export class ClueSimulator extends React.Component<any, IState> {
3636
private imageRef: React.RefObject<ClueImage> = React.createRef();
@@ -57,22 +57,24 @@ export class ClueSimulator extends React.Component<any, IState> {
5757
});
5858
break;
5959
case "set-state":
60-
console.log(`message received ${JSON.stringify(message.state)}`)
60+
console.log(
61+
`message received ${JSON.stringify(message.state)}`
62+
);
6163
if (message.state.display_base64) {
6264
this.setState({
6365
clue: {
6466
...this.state.clue,
6567
displayMessage: message.state.display_base64,
6668
},
67-
})
69+
});
6870
} else if (message.state.pixels) {
6971
this.setState({
7072
clue: {
7173
...this.state.clue,
7274
neopixel: message.state.pixels,
7375
},
74-
})
75-
};
76+
});
77+
}
7678

7779
break;
7880
case "activate-play":

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

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,20 @@
44
import * as React from "react";
55
import "../../styles/Clue.css";
66
import { DEFAULT_CLUE_STATE } from "./ClueSimulator";
7+
import CONSTANTS from "../../constants";
78
export interface IRefObject {
89
[key: string]: React.RefObject<SVGRectElement>;
910
}
1011
interface IProps {
1112
displayImage: string;
12-
neopixel: number[]
13+
neopixel: number[];
1314
}
14-
const LED_TINT_FACTOR = 0.5
1515
export class ClueSvg extends React.Component<IProps, {}> {
1616
private svgRef: React.RefObject<SVGSVGElement> = React.createRef();
17-
private neopixel: React.RefObject<SVGCircleElement> = React.createRef()
18-
private pixelStopGradient: React.RefObject<SVGStopElement> = React.createRef()
17+
private neopixel: React.RefObject<SVGCircleElement> = React.createRef();
18+
private pixelStopGradient: React.RefObject<
19+
SVGStopElement
20+
> = React.createRef();
1921

2022
private buttonRefs: IRefObject = {
2123
BTN_A: React.createRef(),
@@ -36,12 +38,11 @@ export class ClueSvg extends React.Component<IProps, {}> {
3638
}
3739
componentDidMount() {
3840
this.updateDisplay();
39-
this.updateNeopixel()
40-
41+
this.updateNeopixel();
4142
}
4243
componentDidUpdate() {
4344
this.updateDisplay();
44-
this.updateNeopixel()
45+
this.updateNeopixel();
4546
}
4647

4748
render() {
@@ -56,11 +57,24 @@ export class ClueSvg extends React.Component<IProps, {}> {
5657
width="100%"
5758
height="100%"
5859
>
59-
<defs >
60-
<radialGradient id="grad1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%" >
61-
<stop offset="0%" stopColor="rgb(0,0,0)" stopOpacity="1" ref={this.pixelStopGradient} />
60+
<defs>
61+
<radialGradient
62+
id="grad1"
63+
cx="50%"
64+
cy="50%"
65+
r="70%"
66+
fx="50%"
67+
fy="50%"
68+
>
69+
<stop
70+
offset="0%"
71+
stopColor="rgb(0,0,0)"
72+
stopOpacity="1"
73+
ref={this.pixelStopGradient}
74+
/>
6275
<stop offset="100%" stopOpacity="0" />
63-
</radialGradient></defs>
76+
</radialGradient>
77+
</defs>
6478
<g id="Green">
6579
<rect
6680
className="cls-1"
@@ -949,13 +963,14 @@ export class ClueSvg extends React.Component<IProps, {}> {
949963
</g>
950964
<text x={318} y={85} className="sim-text-outside">
951965
Neopixel
952-
</text>
966+
</text>
953967
<circle cx={345} cy={115} r="30" fill="url(#grad1)" />
954968
<circle cx={345} cy={115} r="12" ref={this.neopixel} />
955969
</svg>
956970
</div>
957971
);
958972
}
973+
959974
private updateDisplay() {
960975
if (this.displayRef.current && this.props.displayImage) {
961976
this.displayRef.current.setAttribute(
@@ -964,25 +979,31 @@ export class ClueSvg extends React.Component<IProps, {}> {
964979
);
965980
}
966981
}
982+
967983
private updateNeopixel() {
968-
const { neopixel } = this.props
969-
const rgbColor = `rgb(${neopixel[0] + (255 - neopixel[0]) * LED_TINT_FACTOR},
970-
${neopixel[1] + (255 - neopixel[1]) * LED_TINT_FACTOR},${neopixel[2] + (255 - neopixel[2]) * LED_TINT_FACTOR})`
984+
const { neopixel } = this.props;
985+
const rgbColor = `rgb(${neopixel[0] +
986+
(255 - neopixel[0]) * CONSTANTS.LED_TINT_FACTOR},
987+
${neopixel[1] +
988+
(255 - neopixel[1]) * CONSTANTS.LED_TINT_FACTOR},${neopixel[2] +
989+
(255 - neopixel[2]) * CONSTANTS.LED_TINT_FACTOR})`;
971990

972991
if (this.neopixel.current) {
973-
this.neopixel.current.setAttribute('fill', rgbColor)
992+
this.neopixel.current.setAttribute("fill", rgbColor);
974993
}
975994
if (this.pixelStopGradient.current) {
976995
if (neopixel === DEFAULT_CLUE_STATE.neopixel) {
977-
console.log("remove opacity")
978-
979-
this.pixelStopGradient.current.setAttribute('stop-opacity', '0')
996+
this.pixelStopGradient.current.setAttribute(
997+
"stop-opacity",
998+
"0"
999+
);
9801000
} else {
981-
this.pixelStopGradient.current.setAttribute('stop-opacity', '1')
982-
1001+
this.pixelStopGradient.current.setAttribute(
1002+
"stop-opacity",
1003+
"1"
1004+
);
9831005
}
984-
this.pixelStopGradient.current.setAttribute('stop-color', rgbColor)
1006+
this.pixelStopGradient.current.setAttribute("stop-color", rgbColor);
9851007
}
986-
9871008
}
9881009
}

‎src/view/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const CONSTANTS = {
4646
"The simulator will run the .py file you have focused on.",
4747
SIMULATOR_BUTTON_WIDTH: 60,
4848
TOOLBAR_INFO: `Explore what's on the board:`,
49+
LED_TINT_FACTOR: 0.5,
4950
};
5051
export const AB_BUTTONS_KEYS = {
5152
BTN_A: "BTN_A",

‎src/view/styles/Clue.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,5 +131,5 @@
131131
}
132132
.sim-text-outside {
133133
font-size: 14px;
134-
fill: var(--vscode-descriptionForeground);
135-
}
134+
fill: var(--vscode-foreground);
135+
}

‎src/view/styles/Microbit.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ svg.sim.grayscale {
2424
}
2525
.sim-text-outside {
2626
font-size: 25px;
27-
fill: var(--vscode-descriptionForeground);
27+
fill: var(--vscode-foreground);
2828
}
2929
.sim-board,
3030
.sim-display,

0 commit comments

Comments
 (0)