Day 3

src/components/Led.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import './Led.css';
 
-const Led = ({ color, width, height }) => {
+const Led = ({ color, width, height, position }) => {
   return (
     <div style={{ width: width + 'px', height: height + 'px' }} className="led">
       <div
@@ -11,7 +11,9 @@ const Led = ({ color, width, height }) => {
           width: height / 2 + 'px',
         }}
         className="light"
-      ></div>
+      >
+        {position}
+      </div>
     </div>
   );
 };

src/components/Leds.js

@@ -2,13 +2,20 @@ import React from 'react';
 import Led from './Led';
 import './Leds.css';
 
-const Leds = () => {
+const Leds = ({ leds, width }) => {
   return (
     <div id="leds">
-      <Led color="#00AA00" height={50} width={70} />
-      <Led color="#AA0000" height={50} width={70} />
-      <Led color="#0000AA" height={50} width={70} />
-      <Led color="#AA00AA" height={50} width={70} />
+      {leds.map((led) => {
+        return (
+          <Led
+            position={led.position}
+            key={led.position}
+            color={led.color}
+            height={50}
+            width={width}
+          />
+        );
+      })}
     </div>
   );
 };

src/leds.js

@@ -0,0 +1,16 @@
+export const generateLeds = (numLeds) => {
+  let leds = [];
+
+  for (let i = 0; i < numLeds; i += 1) {
+    leds.push(generateLed('#AA00AA', i));
+  }
+
+  return leds;
+};
+
+export const generateLed = (color, position) => {
+  return {
+    color,
+    position,
+  };
+};

src/pages/Home.js

@@ -1,14 +1,26 @@
 import React, { useState } from 'react';
 import Leds from '../components/Leds';
 import Player from '../components/Player';
+import { generateLeds } from '../leds';
 const Home = () => {
-  const [currentFrame, setCurrentFrame] = useState(1);
+  const [currentFrameIndex, setCurrentFrameIndex] = useState(1);
+  const [numberLeds, setNumberLeds] = useState(30);
+  const [leds, setLeds] = useState(generateLeds(numberLeds));
+  const [width, setWidth] = useState(50);
+
+  function setNumberOfLeds(e) {
+    console.log(e.target);
+    setNumberLeds(e.target.value);
+    setLeds(generateLeds(+e.target.value));
+    setWidth((1200 - 2 * +e.target.value) / +e.target.value);
+    console.log((1200 - 2 * +e.target.value) / +e.target.value);
+  }
 
   return (
     <>
       <div className="row">
         <div className="col">
-          <h1>Home Page {currentFrame}</h1>
+          <h1>Home Page {numberLeds}</h1>
         </div>
       </div>
       <div className="row">
@@ -18,20 +30,37 @@ const Home = () => {
       </div>
       <div className="row">
         <div className="col">
-          <Leds />
+          <Leds leds={leds} width={width} />
         </div>
       </div>
       <div className="row">
         <div className="col">
           <Player
             frames={[1, 3, 4]}
-            currentFrame={currentFrame}
-            onMoveTo={setCurrentFrame}
+            currentFrame={currentFrameIndex}
+            onMoveTo={setCurrentFrameIndex}
             onPlay={() => console.log('onPlay')}
             onStop={() => console.log('onStop')}
           ></Player>
         </div>
       </div>
+      <div className="row">
+        <div className="col">
+          <div className="mb-3">
+            <label htmlFor="number-of-leds" className="form-label">
+              Number of Leds
+            </label>
+            <input
+              type="number"
+              className="form-control"
+              id="number-of-leds"
+              placeholder="Number of leds"
+              value={numberLeds}
+              onChange={setNumberOfLeds}
+            />
+          </div>
+        </div>
+      </div>
     </>
   );
 };