Day 8

src/components/LedStrip/FullStrip.js

@@ -23,19 +23,9 @@ const FullStrip = ({ leds }) => {
   return (
     <>
       <Strip leds={leftLeds} direction="left" />
-      <Strip
-        leds={rightDownLeds.map((l) => {
-          return { ...l, color: '#00AA00' };
-        })}
-        direction="right-down"
-      />
+      <Strip leds={rightDownLeds} direction="right-down" />
       <Strip leds={rightToLeft} direction="right" />
-      <Strip
-        leds={leftDown.map((l) => {
-          return { ...l, color: '#00AA00' };
-        })}
-        direction="left-down"
-      />
+      <Strip leds={leftDown} direction="left-down" />
     </>
   );
 };

src/components/LedStrip/Led.js

@@ -1,11 +1,21 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import LedsContext from '../../context/ledContext';
+
+const Led = ({ led }) => {
+  const { selectLed } = useContext(LedsContext);
+
+  function onSelectLed() {
+    selectLed(led);
+  }
 
-const Led = ({ color, position, connectionClass = '' }) => {
   return (
-    <div className={`led ${connectionClass}`}>
+    <div
+      onClick={onSelectLed}
+      className={`led ${led.selected ? 'selected' : ''} ${led.position}`}
+    >
       <div
         style={{
-          backgroundColor: color,
+          backgroundColor: led.color,
         }}
         className="light"
       ></div>

src/components/LedStrip/Leds.js

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import FullStrip from './FullStrip';
 import config from '../../config';
 import { chunk } from '../../helpers';
+import ledsContext from '../../context/ledContext';
+
+const Leds = () => {
+  const { leds } = useContext(ledsContext);
 
-const Leds = ({ leds }) => {
   const ledFullStips = chunk(leds, config.fullStripLength);
   return (
     <div id="leds">

src/components/LedStrip/Strip.js

@@ -5,13 +5,7 @@ const Strip = ({ leds, direction }) => {
   return (
     <div className={`strip ${direction}`}>
       {leds.map((led) => {
-        return (
-          <Led
-            position={led.position}
-            key={`led-${led.position}`}
-            color={led.color}
-          />
-        );
+        return <Led led={led} key={`led-${led.position}`} />;
       })}
     </div>
   );

src/context/ledContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ledsContext = createContext();
+
+export default ledsContext;

src/index.css

@@ -16,7 +16,13 @@
   border: solid black 1px;
   width: 20px;
   height: 20px;
+  cursor: pointer;
 }
+
+.led.selected {
+  background-color: #1a2201;
+}
+
 #leds {
   position: relative;
   width: 1000px;

src/leds.js

@@ -11,5 +11,6 @@ export const generateLed = (color, position) => {
   return {
     color,
     position,
+    selected: false,
   };
 };

src/pages/Home.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import Leds from '../components/LedStrip/Leds';
 import Player from '../components/Player';
 import { generateLeds } from '../leds';
+import LedsContext from '../context/ledContext';
 
 const Home = () => {
   const [currentFrameIndex, setCurrentFrameIndex] = useState(1);
@@ -13,21 +14,42 @@ const Home = () => {
     setLeds(generateLeds(+e.target.value));
   }
 
+  function onChangeColor(e) {
+    setLeds(
+      leds.map((l) => {
+        if (l.selected) {
+          return { ...l, color: e.target.value };
+        }
+        return l;
+      })
+    );
+  }
+
+  function selectLed(led) {
+    const newLeds = [
+      ...leds.filter((l) => l.position !== led.position),
+      { ...led, selected: !led.selected },
+    ];
+
+    newLeds.sort((a, b) => a.position - b.position);
+    setLeds(newLeds);
+  }
+
   return (
-    <>
+    <LedsContext.Provider value={{ leds, selectLed }}>
       <div className="row">
         <div className="col">
           <h1>Home Page {numberLeds}</h1>
         </div>
       </div>
       <div className="row">
         <div className="col">
-          <input type="color" name="" id="" />
+          <input type="color" onChange={onChangeColor} />
         </div>
       </div>
       <div className="row">
         <div className="col">
-          <Leds leds={leds} />
+          <Leds />
         </div>
       </div>
       <div className="row">
@@ -58,7 +80,7 @@ const Home = () => {
           </div>
         </div>
       </div>
-    </>
+    </LedsContext.Provider>
   );
 };