nomi-nonsz/lunar-vein-arduino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

That's it for piezo music editor

Browse Source
This commit is contained in:
Nomi Nonsense (Nonszy) 2024-03-15 20:22:15 +07:00
parent 2b84b73792
commit 7ff1b1f81d
4 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/forms/EvoDropDown.tsx
View File

@ -1,4 +1,4 @@
import { useState } from "react";
import { FocusEvent, useState } from "react";
type EvoDropDownItem = {
name: string,
@ -11,17 +11,18 @@ interface EvoDropDownProps {
items: EvoDropDownItem[];
initItem?: EvoDropDownItem;
onValueChange?: (item: EvoDropDownItem) => void;
onBlur?: (e: FocusEvent) => void
}
interface MenuProps extends EvoDropDownProps {
appear: boolean;
}
function Menu ({ className, items, initItem, appear, onValueChange }: MenuProps) {
function Menu ({ className, items, initItem, appear, onValueChange, onBlur }: MenuProps) {
const [currentItem, setItem] = useState<EvoDropDownItem>(initItem || items[0]);
return (
<div className={`absolute p-2 flex flex-col w-full bg-black border mt-3 border-border rounded-lg ${appear ? "block" : "hidden"} ${className}`}>
<div className={`absolute p-2 flex flex-col w-full bg-black border mt-3 border-border rounded-lg ${appear ? "block" : "hidden"} ${className}`} onBlur={onBlur}>
{items.map((item) => (
<button
className="py-2 px-3 flex justify-between items-center bg-transparent bg-opacity-100 hover:bg-indigo-300 hover:bg-opacity-20 rounded-md"

4
src/components/landing/ControlPhotoresistor.tsx
View File

@ -77,9 +77,9 @@ function Card ({ index, resistor }: { index: number, resistor: DynamicPinState }
onChange={(handleChange)}
/>
{!isListen ? (
<Button.Primary onClick={toggleListen} className="text-sm !p-0 h-11">Start Listening</Button.Primary>
<Button.Primary onClick={toggleListen} className="text-sm !p-0 h-11">Start</Button.Primary>
) : (
<Button.Danger onClick={toggleListen} className="text-sm !p-0 h-11">Stop Listening</Button.Danger>
<Button.Danger onClick={toggleListen} className="text-sm !p-0 h-11">Stop</Button.Danger>
)}
</div>
</div>

34
src/components/landing/ControlPiezoMusicEditor.tsx
View File

@ -1,4 +1,4 @@
import { ChangeEvent, MouseEventHandler, useState } from "react";
import { ChangeEvent, MouseEventHandler, useEffect, useState } from "react";
import { usePiezoMusic } from "../../hooks";
import { PiezoMusic } from "../../types/board";
import EvoInput from "../forms/EvoInput";
@ -28,23 +28,45 @@ function getNoteItems () {
}
function NoteItem ({note, index, parentIndex}: { note: string, index: number, parentIndex: number }) {
const { changeNote } = usePiezoMusic();
const { changeNote, removeNote } = usePiezoMusic();
const [dropAppear, setApper] = useState<boolean>(false);
const noteItems = getNoteItems();
const toggleDropdown = () => { setApper(!dropAppear) };
const handleChange = (item: { name: string, value: any }) => {
toggleDropdown();
changeNote(parentIndex, index, item.value);
}
const handleRemove = () => {
removeNote(parentIndex, index);
}
return (
<button className="min-w-40 h-40 transition border border-border rounded-lg hover:bg-finn animate-size-fade-in" onClick={toggleDropdown}>
<button
className="min-w-40 h-40 transition border group border-border rounded-lg animate-size-fade-in relative"
>
<div className="absolute right-2 top-2 flex gap-1">
<button
className="border w-8 h-8 border-border transition hover:bg-finn rounded-md opacity-0 group-hover:opacity-100 flex items-center justify-center"
onClick={toggleDropdown}
>
<i className="bi bi-pencil text-xs"></i>
</button>
<button
className="border w-8 h-8 border-border transition hover:bg-finn rounded-md opacity-0 group-hover:opacity-100 flex items-center justify-center"
onClick={handleRemove}
>
<i className="bi bi-dash"></i>
</button>
</div>
<div className="text-xl">
{note}
</div>
<EvoDropDown.Menu
className="!w-32 top-1 h-56 z-30 overflow-y-scroll v-scrollbar"
className="!w-44 top-0 h-40 z-30 overflow-y-scroll v-scrollbar left-2"
appear={dropAppear}
items={noteItems}
onValueChange={handleChange}
@ -68,7 +90,7 @@ function NotePlus ({ parentIndex }: { parentIndex: number }) {
<button className="border border-border bg-secondary-solid rounded-lg min-w-40 h-40" onClick={toggleDropdown}>
<i className="bi bi-plus text-2xl"></i>
<EvoDropDown.Menu
className="!w-32 top-1 h-56 z-30 overflow-y-scroll v-scrollbar"
className="!w-32 top-0 h-56 z-30 overflow-y-scroll v-scrollbar"
appear={dropAppear}
items={noteItems}
onValueChange={handleAddNote}
@ -162,7 +184,7 @@ function PiezoEditor ({ piezo, index }: { piezo: PiezoMusic, index: number }) {
</div>
</div>
<div className="relative">
<div className="v-scrollbar flex flex-row flex-nowrap gap-4 overflow-x-scroll overflow-y-hidden relative">
<div className="v-scrollbar pb-4 flex flex-row flex-nowrap gap-4 overflow-x-scroll overflow-y-hidden relative">
{piezo.notes.map((note, i) => (
<NoteItem
note={note}

4
src/components/landing/ControlServo.tsx
View File

@ -53,9 +53,9 @@ function Bar ({ index, servo }: { index: number, servo: DynamicPinState }) {
type="text"
/>
{!isListen ? (
<Button.Primary onClick={toggleListen} className="text-sm !py-0 h-11">Start Listening</Button.Primary>
<Button.Primary onClick={toggleListen} className="text-sm !py-0 h-11">Start</Button.Primary>
) : (
<Button.Danger onClick={toggleListen} className="text-sm !py-0 h-11">Stop Listening</Button.Danger>
<Button.Danger onClick={toggleListen} className="text-sm !py-0 h-11">Stop</Button.Danger>
)}
</div>
<div className="">{servo.state+"°"}</div>