Change color settings levels

Author: cxspxr

src/components/ColorSettingsLevel/ColorSettingsLevel.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect } from "react";
-import { ChromePicker } from "react-color";
+import { CirclePicker } from "react-color";
 import { Box } from "@material-ui/core";
+import { VisibilityOff } from "@material-ui/icons";
 import Typist from "react-typist";
 import styles from "../Levels.module.scss";
 import { RGBColor } from "../../contexts/SettingsContext";
-import useColorInverter from "../../hooks/useColorInverter/useColorInverter";
 import "../TypistCursor.scss";
 import useGlobalColors from "../../hooks/useGlobalColors/useGlobalColors";
 // eslint-disable-next-line import/no-cycle
 import useNavigation from "../../hooks/useNavigation/useNavigation";
+import COLORS from "./colors";
 
 /**
  * Lense color settings level props
@@ -26,26 +27,16 @@ export type ColorSettingsLevelProps = {
  * @param hint - to be provided for a user
  */
 const ColorSettingsLevel: React.FC<ColorSettingsLevelProps> = ({ color, changeColor, hint }) => {
-  const [invertColor] = useColorInverter();
   const [, , , , , currentLevelCounter] = useNavigation();
-
   const [
     [, setGlobalBackground, resetGlobalBackground],
     [, setGlobalColor, resetGlobalColor],
   ] = useGlobalColors();
 
-  const hintRGBColor: RGBColor = invertColor(color);
-  const bgRGBColor: RGBColor = color;
-  const hintStyleColor = `rgb(${hintRGBColor.r}, ${hintRGBColor.g}, ${hintRGBColor.b})`;
-  const bgStyleColor = `rgb(${bgRGBColor.r}, ${bgRGBColor.g}, ${bgRGBColor.b})`;
-
   useEffect(() => {
-    setGlobalBackground(bgRGBColor);
-    setGlobalColor(hintRGBColor);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setGlobalColor, setGlobalBackground, hintStyleColor, bgStyleColor]);
+    setGlobalColor({ r: 255, g: 255, b: 255 });
+    setGlobalBackground({ r: 0, g: 0, b: 0 });
 
-  useEffect(() => {
     return () => {
       resetGlobalBackground();
       resetGlobalColor();
@@ -55,18 +46,19 @@ const ColorSettingsLevel: React.FC<ColorSettingsLevelProps> = ({ color, changeCo
 
   return (
     <Box className={styles.level__container}>
+      <VisibilityOff fontSize="large" htmlColor={`rgb(${color.r}, ${color.g}, ${color.b})`} />
       <h1
         style={{
-          color: hintStyleColor,
+          color: "white",
         }}
         className={styles.level__hint_top}
         data-testid="color-settings-level-hint"
       >
         <Typist key={currentLevelCounter}>{hint}</Typist>
       </h1>
       <Box data-testid="color-settings-level-picker" className={styles.level__picker}>
-        <ChromePicker
-          disableAlpha
+        <CirclePicker
+          colors={COLORS}
           color={color}
           onChange={(newColor) => {
             changeColor(newColor.rgb);

src/components/ColorSettingsLevel/__tests__/ColorSettingsLevel.test.tsx

@@ -2,13 +2,11 @@ import React from "react";
 import { ReactWrapper, mount } from "enzyme";
 import { render, waitFor } from "@testing-library/react";
 import Typist from "react-typist";
-import { ChromePicker } from "react-color";
+import { CirclePicker } from "react-color";
 import ColorSettingsLevel, { ColorSettingsLevelProps } from "../ColorSettingsLevel";
-import useColorInverter from "../../../hooks/useColorInverter/useColorInverter";
 import useNavigation from "../../../hooks/useNavigation/useNavigation";
 import useGlobalColors from "../../../hooks/useGlobalColors/useGlobalColors";
 
-jest.mock("../../../hooks/useColorInverter/useColorInverter");
 jest.mock("../../../hooks/useNavigation/useNavigation");
 jest.mock("../../../hooks/useGlobalColors/useGlobalColors");
 
@@ -36,10 +34,6 @@ describe("ColorSettingsLevel component", () => {
       jest.clearAllMocks();
     });
 
-    it("uses color inverter", () => {
-      expect(useColorInverter).toBeCalledTimes(1);
-    });
-
     it("uses navigation", () => {
       expect(useNavigation).toBeCalledTimes(1);
     });
@@ -56,8 +50,8 @@ describe("ColorSettingsLevel component", () => {
       expect(wrapper.find(Typist).length).toEqual(1);
     });
 
-    it("renders ChromePicker", () => {
-      expect(wrapper.find(ChromePicker).length).toEqual(1);
+    it("renders CirclePicker", () => {
+      expect(wrapper.find(CirclePicker).length).toEqual(1);
     });
   });
 

src/components/ColorSettingsLevel/__tests__/colors.test.ts

@@ -0,0 +1,36 @@
+import COLORS from "../colors";
+
+describe("Color settings colorpicker colors", () => {
+  it("should be set to specific list of colors", () => {
+    expect(COLORS).toEqual([
+      "#00FFFF",
+      "#3FE0D0",
+      "#0080FF",
+      "#0F52BA",
+      "#000080",
+      "#111E6C",
+      "#1D2951",
+      "#003152",
+      "#152238",
+      "#1C2E4A",
+      "#03002E",
+      "#010048",
+      "#FF0000",
+      "#FF0800",
+      "#FF2400",
+      "#FF2800",
+      "#C21807",
+      "#B80F0A",
+      "#960018",
+      "#7C0A02",
+      "#800000",
+      "#420D09",
+      "#1C0000",
+      "#0E0000",
+    ]);
+  });
+
+  it("should has length divisible by 6 to create a full lines for circle picker", () => {
+    expect(COLORS.length % 6).toEqual(0);
+  });
+});

src/components/ColorSettingsLevel/colors.ts

@@ -0,0 +1,31 @@
+/**
+ * Available colors to choose on color picker
+ */
+const COLORS = [
+  "#00FFFF",
+  "#3FE0D0",
+  "#0080FF",
+  "#0F52BA",
+  "#000080",
+  "#111E6C",
+  "#1D2951",
+  "#003152",
+  "#152238",
+  "#1C2E4A",
+  "#03002E",
+  "#010048",
+  "#FF0000",
+  "#FF0800",
+  "#FF2400",
+  "#FF2800",
+  "#C21807",
+  "#B80F0A",
+  "#960018",
+  "#7C0A02",
+  "#800000",
+  "#420D09",
+  "#1C0000",
+  "#0E0000",
+];
+
+export default COLORS;

src/components/ColorSettingsLevel/package.json

@@ -1,3 +1,3 @@
 {
-  "main": ""
+  "main": "ColorSettingsLevel.tsx"
 }

src/components/IntroLevel/__tests__/introLevels.test.tsx

@@ -8,6 +8,36 @@ describe("list of intro levels", () => {
       {
         hint: "this application serves as a try to restore binocular vision",
       },
+      {
+        hint: "please, be aware that this is not an official medical treatment",
+      },
+      {
+        hint: (
+          <span>
+            be aware that it is <b>strongly recommended to treat strabismus or amblyopia</b> if you
+            have it
+          </span>
+        ),
+      },
+      {
+        hint: "because it might be not possible for you to see the right picture",
+      },
+      {
+        hint: (
+          <span>
+            and yet again, <b>if you have strabismus or amblyopia</b>, please <b>at least</b> do as
+            many{" "}
+            <a
+              href="https://www.webmd.com/eye-health/eye-exercises-strabismus"
+              rel="noreferrer"
+              target="_blank"
+            >
+              eye muscle exercises
+            </a>{" "}
+            as you can every day
+          </span>
+        ),
+      },
       {
         hint: "in order to start it you need so called anaglyph red-cyan (red-blue) 3D glasses",
       },
@@ -20,12 +50,12 @@ describe("list of intro levels", () => {
         ),
       },
       {
-        hint: (
+        hint:
+          /* prettier-ignore */
           <span>
-            you can also try to add this application to the <b>home screen</b>{" "}
+        you can also try to add this application to the <b>home screen</b>{" "}
             <Typist.Delay ms={700} /> and use it on your phone
-          </span>
-        ),
+      </span>,
       },
       {
         hint: "yet it is still recommended to exercise on bigger screens",

src/components/IntroLevel/introLevels.tsx

@@ -9,6 +9,35 @@ const introLevels: IntroLevel[] = [
   {
     hint: "this application serves as a try to restore binocular vision",
   },
+  {
+    hint: "please, be aware that this is not an official medical treatment",
+  },
+  {
+    hint: (
+      <span>
+        be aware that it is <b>strongly recommended to treat strabismus or amblyopia</b> if you have
+        it
+      </span>
+    ),
+  },
+  {
+    hint: "because it might be not possible for you to see the right picture",
+  },
+  {
+    hint: (
+      <span>
+        and yet again, <b>if you have strabismus or amblyopia</b>, please <b>at least</b> do as many{" "}
+        <a
+          href="https://www.webmd.com/eye-health/eye-exercises-strabismus"
+          rel="noreferrer"
+          target="_blank"
+        >
+          eye muscle exercises
+        </a>{" "}
+        as you can every day
+      </span>
+    ),
+  },
   {
     hint: "in order to start it you need so called anaglyph red-cyan (red-blue) 3D glasses",
   },

src/components/Navigation/Navigation.tsx

@@ -4,11 +4,19 @@ import { ArrowBack, ArrowForward, Cached, Settings } from "@material-ui/icons";
 import styles from "./Navigation.module.scss";
 import useNavigation from "../../hooks/useNavigation/useNavigation";
 
+/**
+ * Navigation component props type
+ */
 export type NavigationProps = {
   bgColor: string;
   color: string;
 };
 
+/**
+ * Navigation component
+ * @param bgColor - to be set to navigation
+ * @param color - to be set to navigation buttons
+ */
 const Navigation: React.FC<NavigationProps> = ({ bgColor, color }) => {
   const [, nextLevel, previousLevel, resetLevels, goToSettings] = useNavigation();