piezo buzzer

src/components/ControlSection.tsx

@@ -1,22 +1,24 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 
 interface ControlSectionProps {
     title: string;
     description?: string;
     id?: string;
+    refto?: Ref<HTMLDivElement>
     stack: ReactNode;
     colSpan?: number;
-    stackType?: 'grid' | 'flex'
+    stackType?: 'grid' | 'flex';
 }
 
 export default function ControlSection ({
     title,
     description,
     id,
+    refto,
     stack
 }: ControlSectionProps) {
     return (
-        <div className="container py-16" id={id}>
+        <div className="container py-16" id={id} ref={refto}>
             <div className="container-grid items-center relative">
                 <div className={`col-span-6`}>
                     <h2 className="text-4xl font-poppins font-bold leading-normal mb-4">

src/components/forms/Button.tsx

@@ -1,18 +1,33 @@
 import { CSSProperties, MouseEventHandler, ReactNode } from "react";
 
-interface InButton {
+interface ButtonProps {
     className?: string;
     style?: CSSProperties,
     onClick?: MouseEventHandler
     children?: ReactNode
 }
 
-export default function Button ({
+function Primary ({
     className,
     style,
     onClick,
     children
-}: InButton) {
+}: ButtonProps) {
+    return (
+        <button
+            className={`px-5 py-4 transition font-roboto-mono bg-primary bg-opacity-100 hover:bg-opacity-80 rounded-lg ${className}`}
+            style={style}
+            onClick={onClick}
+        >{children}</button>
+    )
+}
+
+function Secondary ({
+    className,
+    style,
+    onClick,
+    children
+}: ButtonProps) {
     return (
         <button
             className={`px-5 py-4 transition font-roboto-mono bg-finn border hover:bg-secondary border-border rounded-lg ${className}`}
@@ -21,3 +36,23 @@ export default function Button ({
         >{children}</button>
     )
 }
+
+function Button ({
+    className,
+    style,
+    onClick,
+    children
+}: ButtonProps) {
+    return (
+        <button
+            className={`px-5 py-4 transition font-roboto-mono bg-finn border hover:bg-secondary border-border rounded-lg ${className}`}
+            style={style}
+            onClick={onClick}
+        >{children}</button>
+    )
+}
+
+Button.Primary = Primary;
+Button.Secondary = Secondary;
+
+export default Button;

src/components/forms/EvoInput.tsx

@@ -22,10 +22,10 @@ export default function EvoInput ({
     }
 
     return (
-        <label className={`flex cursor-pointer bg-finn border border-border rounded-lg ${className}`} onClick={handleClick}>
+        <label className={`flex items-center justify-between cursor-pointer bg-finn border border-border rounded-lg ${className}`} onClick={handleClick}>
-            <div className="flex-1 w-1/2 p-2">{name}</div>
+            <div className="w-fit p-2 text-sm ps-4">{name}</div>
             <input
-                className="flex-1 w-1/2 h-full p-2 text-center bg-transparent"
+                className="w-1/2 h-full p-2 text-center text-sm font-roboto-mono bg-transparent"
                 type={type}
                 name=""
                 id=""

src/components/forms/PinBox.tsx

@@ -4,38 +4,25 @@ import Switch from "./Switch";
 interface PinBoxProps {
     className?: string;
     value: number | string;
-    state: boolean;
     onValueChange?: ChangeEventHandler<HTMLInputElement | null>;
-    onStateChange?: FormEventHandler<HTMLButtonElement | null>;
     onDelete?: FormEventHandler<HTMLButtonElement | null>;
     minusBtn?: boolean;
 }
 
-function Add ({
+interface ToggleProps extends PinBoxProps {
-    className,
+    state: boolean;
-    onClick
+    onStateChange?: FormEventHandler<HTMLButtonElement | null>;
-}: {
-    className?: string,
-    onClick?: MouseEventHandler<HTMLButtonElement>
-}) {
-    return (
-        <button className={`bg-finn hover:bg-secondary transition border border-border rounded-lg flex items-center justify-center h-36 ${className}`} onClick={onClick}>
-            <i className="bi bi-plus text-border text-7xl"></i>
-        </button>
-    )
 }
 
 function PinBox ({
     className,
     value,
-    state,
     onValueChange,
-    onStateChange,
     onDelete,
     minusBtn
 }: PinBoxProps) {
     return (
-        <div className={`flex flex-col gap-3 animate-fade-in ${className}`}>
+        <div className={`flex flex-col gap-3 ${className}`}>
             {minusBtn && <button
                 className="border bg-transparent ms-auto hover:bg-secondary border-border rounded px-2"
                 onClick={onDelete}
@@ -56,6 +43,27 @@ function PinBox ({
                     onChange={onValueChange}
                 />
             </div>
+        </div>
+    )
+}
+
+function Toggle ({
+    className,
+    value,
+    minusBtn,
+    onDelete,
+    state,
+    onStateChange,
+    onValueChange
+}: ToggleProps) {
+    return (
+        <div className={`flex flex-col gap-6 ${className}`}>
+            <PinBox
+                value={value}
+                minusBtn={minusBtn}
+                onDelete={onDelete}
+                onValueChange={onValueChange}
+            />
             <Switch
                 state={state}
                 onChange={onStateChange}
@@ -64,6 +72,21 @@ function PinBox ({
     )
 }
 
+function Add ({
+    className,
+    onClick
+}: {
+    className?: string,
+    onClick?: MouseEventHandler<HTMLButtonElement>
+}) {
+    return (
+        <button className={`bg-finn hover:bg-secondary transition border border-border rounded-lg flex items-center justify-center h-36 ${className}`} onClick={onClick}>
+            <i className="bi bi-plus text-border text-7xl"></i>
+        </button>
+    )
+}
+
 PinBox.Add = Add;
+PinBox.Toggle = Toggle;
 
 export default PinBox;

src/components/landing/ControlLED.tsx

@@ -1,9 +1,10 @@
 import PinBox from "../forms/PinBox";
 import { useLed } from "../../hooks";
 import ControlSection from "../ControlSection";
+import { Ref } from "react";
 
 
-function ControlLED () {
+function ControlLED ({ refto }: { refto?: Ref<HTMLDivElement> }) {
     const { addLed, leds, removeLed, setLed, setLedPin } = useLed();
 
     const handleAdd = (): void => {
@@ -21,10 +22,11 @@ function ControlLED () {
         <ControlSection
             title="LED"
             id="led"
+            refto={refto}
             stack={(<>
                 {leds.map((led, i) => (
-                <PinBox
+                <PinBox.Toggle
-                    className="w-36"
+                    className="w-36 animate-fade-in"
                     key={i}
                     minusBtn={true}
                     value={led.pin}

src/components/landing/ControlPiezo.tsx

@@ -0,0 +1,77 @@
+import PinBox from "../forms/PinBox";
+import ControlSection from "../ControlSection";
+import { Ref } from "react";
+import { usePiezo } from "../../hooks";
+import { DynamicPinState } from "../../types/board";
+import EvoInput from "../forms/EvoInput";
+import Button from "../forms/Button";
+
+function PiezoItem ({ piezo, index }: { piezo: DynamicPinState, index: number }) {
+    const { setFrequency, setPiezoPin, removePiezo } = usePiezo();
+
+    return (
+        <div className="flex flex-col gap-3">
+            <PinBox
+                className="w-36 animate-fade-in"
+                minusBtn={true}
+                value={piezo.pin}
+                onValueChange={(e) => {
+                    const pin = e.target.value;
+                    setPiezoPin(index, pin);
+                }}
+                onDelete={() => {
+                    removePiezo(index);
+                }}
+            />
+            <EvoInput
+                className="w-36 h-11"
+                name="Frequency"
+                type="number"
+                value={piezo.state.toString()}
+                onChange={(e) => {
+                    const freq: number = Number.parseInt(e.target.value);
+                    if (!Number.isNaN(freq)) setFrequency(piezo.pin, freq);
+                }}
+            />
+            <Button.Primary className="text-sm py-0 h-11">Play</Button.Primary>
+        </div>
+    )
+}
+
+function ControlPiezo ({ refto }: { refto?: Ref<HTMLDivElement> }) {
+    const { piezo: piezos, addPiezo } = usePiezo();
+
+    const handleAdd = (): void => {
+        let anopin = 13;
+        for (let i = 0; i < piezos.length; i++) {
+            if (piezos.filter(piezo => piezo.pin == anopin).length > 0) {
+                anopin--;
+            }
+            else break;
+        }
+        addPiezo(anopin, 247);
+    }
+
+    return (
+        <ControlSection
+            title="Piezo Buzzer"
+            id="piezo"
+            refto={refto}
+            stack={(<>
+                {piezos.map((piezo, i) => (
+                    <PiezoItem
+                        index={i}
+                        piezo={piezo}
+                        key={i}
+                    />
+                ))}
+                {piezos.length < 14 && <PinBox.Add
+                    className="w-36 mt-10"
+                    onClick={handleAdd}
+                />}
+            </>)}
+        />
+    )
+}
+
+export default ControlPiezo;

src/components/landing/ControlRgbLed.tsx

@@ -2,7 +2,7 @@ import { useRgbLed } from "../../hooks";
 import { ChannelPinState, PinState } from "../../types/board";
 import EvoInput from "../forms/EvoInput";
 import Switch from "../forms/Switch";
-import { MouseEventHandler, useEffect, useState } from "react";
+import { MouseEventHandler, Ref, useEffect, useState } from "react";
 
 interface HorizontalBarProps {
     pinState: ChannelPinState;
@@ -31,15 +31,15 @@ function HorizontalBar ({ pinState, onUpdate, onDelete }: HorizontalBarProps) {
     }, [red, green, blue])
 
     return (
-        <div className="flex flex-col col-span-3 gap-2 animate-fade-in">
+        <div className="flex flex-col col-span-3 gap-2 animate-fade-in font-roboto-mono">
-            <button className="ms-auto bg-finn border border-border rounded-lg px-5" onClick={onDelete}>
+            <button className="ms-auto bg-finn hover:bg-secondary transition border border-border rounded-lg px-5" onClick={onDelete}>
                 <i className="bi bi-dash text-xl"></i>
             </button>
             <div className="bg-secondary animate-size-in rounded-lg border border-border p-4 flex gap-3">
                 <div className="flex-1 text-center flex flex-col gap-3">
                     <div className="text-[#FF4444]">Red</div>
                     <EvoInput
-                        name="pin"
+                        name="Pin"
                         value={red.pin.toString()}
                         type="number"
                         onChange={(e) => {
@@ -62,7 +62,7 @@ function HorizontalBar ({ pinState, onUpdate, onDelete }: HorizontalBarProps) {
                 <div className="flex-1 text-center flex flex-col gap-3">
                     <div className="text-[#48FF44]">Green</div>
                     <EvoInput
-                        name="pin"
+                        name="Pin"
                         value={green.pin.toString()}
                         type="number"
                         onChange={(e) => {
@@ -85,7 +85,7 @@ function HorizontalBar ({ pinState, onUpdate, onDelete }: HorizontalBarProps) {
                 <div className="flex-1 text-center flex flex-col gap-3">
                     <div className="text-[#4844FF]">Blue</div>
                     <EvoInput
-                        name="pin"
+                        name="Pin"
                         value={blue.pin.toString()}
                         type="number"
                         onChange={(e) => {
@@ -113,7 +113,7 @@ function HorizontalBar ({ pinState, onUpdate, onDelete }: HorizontalBarProps) {
 function HorizontalBarPlus ({ onClick }: { onClick?: MouseEventHandler<HTMLButtonElement> }) {
     return (
         <button
-            className="bg-finn hover:bg-secondary transition col-span-3 rounded-lg border border-border flex items-center justify-center mt-10"
+            className="bg-finn h-40 hover:bg-secondary transition col-span-3 rounded-lg border border-border flex items-center justify-center mt-10"
             onClick={onClick}
         >
             <i className="bi bi-plus text-6xl text-border"></i>
@@ -121,7 +121,7 @@ function HorizontalBarPlus ({ onClick }: { onClick?: MouseEventHandler<HTMLButto
     )
 }
 
-function ControlRgbLed () {
+function ControlRgbLed ({ refto }: { refto?: Ref<HTMLDivElement> }) {
     const { addLed, rgbLed, removeLed, setLed } = useRgbLed();
 
     const handleAdd = (): void => {
@@ -142,7 +142,7 @@ function ControlRgbLed () {
     }
 
     return (
-        <div className="container py-16" id="rgb-led">
+        <div className="container py-16" id="rgb-led" ref={refto}>
             <div className="container-grid items-center relative">
                 <div className={`col-span-8`}>
                     <h2 className="text-4xl font-poppins font-bold leading-normal mb-4">

src/components/landing/Hero.tsx

@@ -1,5 +1,6 @@
 import Button from "../forms/Button";
 import NolaImg from "../../assets/img/ocs/nola_3.png";
+import { RefObject } from "react";
 
 type ShortNav = {
     name: string,
@@ -8,10 +9,11 @@ type ShortNav = {
 
 interface InHero {
     img: string;
-    shortNav: ShortNav[]
+    shortNav: ShortNav[];
+    refs?: RefObject<HTMLElement>[]
 }
 
-function Hero ({ img, shortNav }: InHero) {
+function Hero ({ img, shortNav, refs }: InHero) {
     return (
         <div className="h-screen container flex items-center">
             <div className="container-grid items-center relative">
@@ -24,10 +26,14 @@ function Hero ({ img, shortNav }: InHero) {
                         <small className="text-xs"> i don't even know anything about electronics and some IoT stuff lol</small>
                     </p>
                     <div className="flex flex-wrap gap-3 mt-5">
-                        {shortNav.map(({ name, target }, i) => (
+                        {shortNav.map(({ name }, i) => (
-                            <a href={target} key={i}>
+                            <Button
-                                <Button>{name}</Button>
+                                key={i}
-                            </a>
+                                onClick={() => {
+                                    if (refs && refs.length >= i)
+                                        refs[i].current?.scrollIntoView({ behavior: "smooth" });
+                                }}
+                            >{name}</Button>
                         ))}
                     </div>
                     <div className="absolute left-0 -bottom-24">

src/contexts/BoardController.tsx

@@ -40,7 +40,12 @@ const INIT_VALUES: ControllerContextProps = {
             }
         }
     ],
-    piezo: [],
+    piezo: [
+        {
+            pin: 6,
+            state: 127
+        }
+    ],
     motoServo: [],
     photoresistor: [],
 }

src/hooks/index.tsx

@@ -10,8 +10,7 @@ export function useLed () {
     const { leds, setLeds } = useContext(BoardControllerContext);
 
     const getLed = (pin: number | string) => {
-        const led = leds.find(val => val.pin == pin);
+        return leds.find(val => val.pin == pin);
-        return led;
     }
 
     const addLed = (pin: number | string, state?: boolean) => {
@@ -80,3 +79,41 @@ export function useRgbLed () {
 
     return { rgbLed, getLed, setLed, addLed, removeLed };
 }
+
+
+
+export function usePiezo () {
+    const { piezo, setPiezo } = useContext(BoardControllerContext);
+
+    const getPiezo = (pin: number | string) => {
+        return piezo.find(val => val.pin == pin);
+    }
+
+    const addPiezo = (pin: number | string, state: number) => {
+        const newPiezo = [...piezo, { pin, state }];
+        setPiezo!(newPiezo);
+    }
+
+    const removePiezo = (index: number) => {
+        const newPiezo = piezo.filter((_piezo, i) => i != index);
+        setPiezo!(newPiezo);
+    }
+
+    const setFrequency = (pin: number | string, state: number) => {
+        const newPiezo = piezo.map(piezo => {
+            if (piezo.pin == pin) return { pin, state };
+            return piezo;
+        })
+        setPiezo!(newPiezo);
+    }
+
+    const setPiezoPin = (index: number | string, newPin: number | string) => {
+        const newPiezo = piezo.map((piezo, i) => {
+            if (i == index) return { pin: newPin, state: piezo.state };
+            return piezo;
+        })
+        setPiezo!(newPiezo);
+    }
+
+    return { piezo, getPiezo, addPiezo, removePiezo, setFrequency, setPiezoPin };
+}

src/pages/MainPage.tsx

@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import MainBody from "../components/MainBody";
 
 // Section components
@@ -8,16 +9,23 @@ import LunarImg from "../assets/img/ocs/lunar-oc.png";
 
 import ControlNav from "../data/control-navigation.json";
 import ControlRgbLed from "../components/landing/ControlRgbLed";
+import ControlPiezo from "../components/landing/ControlPiezo";
 
 function MainPage () {
+    const led = useRef<HTMLDivElement | null>(null);
+    const rgbLed = useRef<HTMLDivElement | null>(null);
+    const piezo = useRef<HTMLDivElement | null>(null);
+
     return (<>
         <MainBody>
             <Hero
                 img={LunarImg}
+                refs={[led, rgbLed, piezo]}
                 shortNav={ControlNav}
             />
-            <ControlLED />
+            <ControlLED refto={led} />
-            <ControlRgbLed />
+            <ControlRgbLed refto={rgbLed} />
+            <ControlPiezo refto={piezo} />
         </MainBody>
     </>)
 }