bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CODEX - Further changes performed

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-22 21:10:12 +02:00
parent e11b89a1b7
commit dd25f66c16
2 changed files with 398 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
frontend/src/melodies/MelodyComposer.jsx
View File

@@ -355,88 +355,91 @@ export default function MelodyComposer() {
className="rounded-lg border p-4"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
>
<div className="grid grid-cols-1 xl:grid-cols-12 gap-4 items-end">
<div className="xl:col-span-3">
<div className="flex items-center gap-2">
<label className="inline-flex items-center gap-2 text-sm" style={{ color: "var(--text-secondary)" }}>
<input
type="checkbox"
checked={loopEnabled}
onChange={(e) => setLoopEnabled(e.target.checked)}
/>
Loop
</label>
{!isPlaying ? (
<button
type="button"
onClick={handlePlay}
className="px-4 py-2 rounded-md text-sm"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
Play
</button>
) : (
<button
type="button"
onClick={stopPlayback}
className="px-4 py-2 rounded-md text-sm"
style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
>
Stop
</button>
)}
<span className="mx-1 text-sm" style={{ color: "var(--border-primary)" }}>|</span>
<div className="flex flex-wrap items-end gap-4">
<div className="flex items-center gap-2">
{!isPlaying ? (
<button
type="button"
onClick={openDeployModal}
onClick={handlePlay}
className="px-4 py-2 rounded-md text-sm"
style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
Deploy as Archetype
Play
</button>
) : (
<button
type="button"
onClick={stopPlayback}
className="px-4 py-2 rounded-md text-sm"
style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
>
Stop
</button>
)}
<label className="inline-flex items-center gap-2 text-sm" style={{ color: "var(--text-secondary)" }}>
<input
type="checkbox"
checked={loopEnabled}
onChange={(e) => setLoopEnabled(e.target.checked)}
/>
Loop
</label>
<span className="mx-1 text-sm" style={{ color: "var(--border-primary)" }}>|</span>
</div>
<div className="flex flex-wrap items-end gap-5">
<div className="w-full sm:w-72">
<div className="flex items-center justify-between">
<label className="text-sm font-medium" style={{ color: "var(--text-secondary)" }}>
Step Delay
</label>
<span className="text-sm font-semibold" style={{ color: "var(--accent)" }}>
{stepDelayMs} ms
</span>
</div>
<input
type="range"
min="40"
max="2000"
step="10"
value={stepDelayMs}
onChange={(e) => setStepDelayMs(Number(e.target.value))}
className="w-full mt-2"
/>
</div>
<div className="w-full sm:w-72">
<div className="flex items-center justify-between">
<label className="text-sm font-medium" style={{ color: "var(--text-secondary)" }}>
Note Duration
</label>
<span className="text-sm font-semibold" style={{ color: "var(--accent)" }}>
{noteDurationMs} ms
</span>
</div>
<input
type="range"
min="20"
max="500"
step="10"
value={noteDurationMs}
onChange={(e) => setNoteDurationMs(Number(e.target.value))}
className="w-full mt-2"
/>
</div>
</div>
<div className="xl:col-span-5">
<div className="flex items-center justify-between">
<label className="text-sm font-medium" style={{ color: "var(--text-secondary)" }}>
Step Delay
</label>
<span className="text-sm font-semibold" style={{ color: "var(--accent)" }}>
{stepDelayMs} ms
</span>
</div>
<input
type="range"
min="40"
max="2000"
step="10"
value={stepDelayMs}
onChange={(e) => setStepDelayMs(Number(e.target.value))}
className="w-full mt-2"
/>
<span className="mx-1 text-sm" style={{ color: "var(--border-primary)" }}>|</span>
<div className="ml-1">
<button
type="button"
onClick={openDeployModal}
className="px-4 py-2 rounded-md text-sm whitespace-nowrap"
style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
>
Deploy Archetype
</button>
</div>
<div className="xl:col-span-4">
<div className="flex items-center justify-between">
<label className="text-sm font-medium" style={{ color: "var(--text-secondary)" }}>
Note Duration
</label>
<span className="text-sm font-semibold" style={{ color: "var(--accent)" }}>
{noteDurationMs} ms
</span>
</div>
<input
type="range"
min="20"
max="500"
step="10"
value={noteDurationMs}
onChange={(e) => setNoteDurationMs(Number(e.target.value))}
className="w-full mt-2"
/>
</div>
</div>
{currentStep >= 0 && (
@@ -522,13 +525,13 @@ export default function MelodyComposer() {
<span
aria-hidden="true"
style={{
width: "64%",
height: "64%",
width: "54%",
height: "54%",
borderRadius: "9999px",
backgroundColor: "var(--btn-primary)",
opacity: enabled ? 1 : 0,
transform: enabled ? "scale(1)" : "scale(0.4)",
boxShadow: enabled ? "0 0 12px 4px rgba(116, 184, 22, 0.55)" : "none",
boxShadow: enabled ? "0 0 10px 3px rgba(116, 184, 22, 0.5)" : "none",
transition: "opacity 140ms ease, transform 140ms ease, box-shadow 180ms ease",
}}
/>
@@ -588,7 +591,7 @@ export default function MelodyComposer() {
>
<div>
<h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>
Deploy as Archetype
Deploy Archetype
</h2>
<p className="text-xs mt-0.5" style={{ color: "var(--text-muted)" }}>
Create a new archetype from this composer pattern.