Linting and adding spaces for cleaner code

Author: xnkevinnguyen

src/view/components/Simulator.tsx

@@ -3,16 +3,14 @@
 
 import * as React from "react";
 import { CONSTANTS } from "../constants";
+import "../styles/Simulator.css";
 import PlayLogo from "../svgs/play_svg";
 import StopLogo from "../svgs/stop_svg";
 import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style";
 import CpxImage, { updatePinTouch, updateSwitch } from "./cpx/CpxImage";
 import Dropdown from "./Dropdown";
 import ActionBar from "./simulator/ActionBar"
 
-
-import "../styles/Simulator.css";
-
 interface ICpxState {
   pixels: number[][];
   brightness: number;

src/view/components/cpx/Cpx_svg_style.tsx

@@ -24,44 +24,43 @@ export const POWER_LED_OFF: string = "#FFFFFF";
 
 // Adapted from : https://github.com/microsoft/pxt/blob/master/pxtsim/simlib.ts
 export function rgbToHsl(
-  rgb: [number, number, number]
+    rgb: [number, number, number]
 ): [number, number, number] {
-  const [r, g, b] = rgb;
-  const [r$, g$, b$] = [r / 255, g / 255, b / 255];
-  const cMin = Math.min(r$, g$, b$);
-  const cMax = Math.max(r$, g$, b$);
-  const cDelta = cMax - cMin;
-  let h: number = 0,
-    s: number,
-    l: number;
-  const maxAndMin = cMax + cMin;
+    const [r, g, b] = rgb;
+    const [r$, g$, b$] = [r / 255, g / 255, b / 255];
+    const cMin = Math.min(r$, g$, b$);
+    const cMax = Math.max(r$, g$, b$);
+    const cDelta = cMax - cMin;
+    let h: number = 0,
+        s: number,
+        l: number;
+    const maxAndMin = cMax + cMin;
 
-  // Luminosity
-  l = (maxAndMin / 2) * 100;
+    // Luminosity
+    l = (maxAndMin / 2) * 100;
 
-  if (cDelta === 0) {
-    s = 0;
-    h = 0;
-  } else {
-    // Hue
-    switch (cMax) {
-      case r$:
-        h = 60 * (((g$ - b$) / cDelta) % 6);
-        break;
-      case g$:
-        h = 60 * ((b$ - r$) / cDelta + 2);
-        break;
-      case b$:
-        h = 60 * ((r$ - g$) / cDelta + 4);
-        break;
-    }
+    if (cDelta === 0) {
+        s = 0;
+        h = 0;
+    } else {
+        // Hue
+        switch (cMax) {
+            case r$:
+                h = 60 * (((g$ - b$) / cDelta) % 6);
+                break;
+            case g$:
+                h = 60 * ((b$ - r$) / cDelta + 2);
+                break;
+            case b$:
+                h = 60 * ((r$ - g$) / cDelta + 4);
+                break;
+        }
 
-    // Saturation
-    if (l > 50) { s = 100 * (cDelta / (2 - maxAndMin)); }
-    else { s = 100 * (cDelta / maxAndMin); }
-  }
+        // Saturation
+        l > 50 ? s = 100 * (cDelta / (2 - maxAndMin)) : s = 100 * (cDelta / maxAndMin);
+    }
 
-  return [Math.floor(h), Math.floor(s), Math.floor(l)];
+    return [Math.floor(h), Math.floor(s), Math.floor(l)];
 }
 
 export const SVG_STYLE = `

src/view/container/device/Device.tsx

@@ -12,37 +12,34 @@ import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
 const CPX_TOOLBAR_BUTTONS: Array<{ label: any, image: any }> = [{
     image: TOOLBAR_SVG.SLIDER_SWITCH_SVG,
     label: TOOLBAR_ICON_ID.SWITCH,
-}, {
+},{
     image: TOOLBAR_SVG.PUSH_BUTTON_SVG,
     label: TOOLBAR_ICON_ID.PUSH_BUTTON,
-},
-{
+},{
     image: TOOLBAR_SVG.RED_LED_SVG,
     label: TOOLBAR_ICON_ID.RED_LED,
-}, {
+},{
     image: TOOLBAR_SVG.SOUND_SVG,
     label: TOOLBAR_ICON_ID.SOUND,
-}
-    , {
-        image: TOOLBAR_SVG.TEMPERATURE_SVG,
+},{
+    image: TOOLBAR_SVG.TEMPERATURE_SVG,
     label: TOOLBAR_ICON_ID.TEMPERATURE,
-}, {
+},{
     image: TOOLBAR_SVG.LIGHT_SVG,
     label: TOOLBAR_ICON_ID.LIGHT,
-}
-    , {
-        image: TOOLBAR_SVG.NEO_PIXEL_SVG,
+},{
+    image: TOOLBAR_SVG.NEO_PIXEL_SVG,
     label: TOOLBAR_ICON_ID.NEO_PIXEL,
-}, {
+},{
     image: TOOLBAR_SVG.SPEAKER_SVG,
     label: TOOLBAR_ICON_ID.SPEAKER,
-}, {
+},{
     image: TOOLBAR_SVG.MOTION_SVG,
     label: TOOLBAR_ICON_ID.MOTION,
-}, {
+},{
     image: TOOLBAR_SVG.IR_SVG,
     label: TOOLBAR_ICON_ID.IR,
-}, {
+},{
     image: TOOLBAR_SVG.GPIO_SVG,
     label: TOOLBAR_ICON_ID.GPIO,
 }]

src/view/styles/ToolBar.css

@@ -15,6 +15,7 @@
   border-width: 1px;
   border-style: solid;
 }
+
 .toolbar-icon {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%);
   border-color: var(--vscode-highContrastButtonBorderOverride-color);