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 = { type EvoDropDownItem = {
name: string, name: string,
@ -11,17 +11,18 @@ interface EvoDropDownProps {
items: EvoDropDownItem[]; items: EvoDropDownItem[];
initItem?: EvoDropDownItem; initItem?: EvoDropDownItem;
onValueChange?: (item: EvoDropDownItem) => void; onValueChange?: (item: EvoDropDownItem) => void;
onBlur?: (e: FocusEvent) => void
} }
interface MenuProps extends EvoDropDownProps { interface MenuProps extends EvoDropDownProps {
appear: boolean; 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]); const [currentItem, setItem] = useState<EvoDropDownItem>(initItem || items[0]);
return ( 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) => ( {items.map((item) => (
<button <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" 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)} onChange={(handleChange)}
/> />
{!isListen ? ( {!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>
</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 { usePiezoMusic } from "../../hooks";
import { PiezoMusic } from "../../types/board"; import { PiezoMusic } from "../../types/board";
import EvoInput from "../forms/EvoInput"; import EvoInput from "../forms/EvoInput";
@ -28,23 +28,45 @@ function getNoteItems () {
} }
function NoteItem ({note, index, parentIndex}: { note: string, index: number, parentIndex: number }) { 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 [dropAppear, setApper] = useState<boolean>(false);
const noteItems = getNoteItems(); const noteItems = getNoteItems();
const toggleDropdown = () => { setApper(!dropAppear) }; const toggleDropdown = () => { setApper(!dropAppear) };
const handleChange = (item: { name: string, value: any }) => { const handleChange = (item: { name: string, value: any }) => {
toggleDropdown();
changeNote(parentIndex, index, item.value); changeNote(parentIndex, index, item.value);
} }
const handleRemove = () => {
removeNote(parentIndex, index);
}
return ( 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"> <div className="text-xl">
{note} {note}
</div> </div>
<EvoDropDown.Menu <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} appear={dropAppear}
items={noteItems} items={noteItems}
onValueChange={handleChange} 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}> <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> <i className="bi bi-plus text-2xl"></i>
<EvoDropDown.Menu <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} appear={dropAppear}
items={noteItems} items={noteItems}
onValueChange={handleAddNote} onValueChange={handleAddNote}
@ -162,7 +184,7 @@ function PiezoEditor ({ piezo, index }: { piezo: PiezoMusic, index: number }) {
</div> </div>
</div> </div>
<div className="relative"> <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) => ( {piezo.notes.map((note, i) => (
<NoteItem <NoteItem
note={note} note={note}

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

@ -53,9 +53,9 @@ function Bar ({ index, servo }: { index: number, servo: DynamicPinState }) {
type="text" type="text"
/> />
{!isListen ? ( {!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>
<div className="">{servo.state+"°"}</div> <div className="">{servo.state+"°"}</div>