feat: Phase 3 — Workshop (community patch sharing)
Server: - GET /api/v1/workshop — browse patches (search, tags, sort) - POST /api/v1/workshop — share a patch (auth required) - GET /api/v1/workshop/:id — single patch detail - DELETE /api/v1/workshop/:id — soft delete (owner/admin) - POST/DELETE /api/v1/workshop/:id/like — like/unlike - POST /api/v1/workshop/:id/report — flag for moderation Client: - Workshop page with nav bar (Sandbox/SynthQuest/Workshop tabs) - Search bar + tag filters (ambient, bass, drums, etc.) - Sort by recent/popular - Patch cards: title, author, tags, likes, module count - "Cargar" button loads patch into Sandbox - Share modal: title, description, tags, shares current canvas - User badge + login button in Workshop nav - Responsive: single column on mobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jose Luis
228
packages/client/src/components/Workshop.jsx
Normal file
228
packages/client/src/components/Workshop.jsx
Normal file
@@ -0,0 +1,228 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { workshop as workshopApi } from '../services/api.js';
|
||||
import { useAuth } from '../services/AuthContext.jsx';
|
||||
import { state, deserialize } from '../engine/state.js';
|
||||
import { serialize } from '../engine/state.js';
|
||||
import { rebuildGraph } from '../engine/audioEngine.js';
|
||||
|
||||
const TAGS = ['ambient', 'bass', 'drums', 'pad', 'lead', 'fx', 'chiptune', 'experimental'];
|
||||
|
||||
function ShareModal({ onClose, onShared }) {
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [selectedTags, setSelectedTags] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleShare = async () => {
|
||||
if (!title.trim()) { setError('Titulo requerido'); return; }
|
||||
if (state.modules.length === 0) { setError('No hay modulos en el canvas'); return; }
|
||||
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const patchData = serialize();
|
||||
await workshopApi.share({
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
tags: selectedTags,
|
||||
data: patchData,
|
||||
});
|
||||
onShared?.();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-overlay" onClick={onClose}>
|
||||
<div className="auth-card" onClick={e => e.stopPropagation()} style={{ gap: 14 }}>
|
||||
<h2 style={{ fontSize: 18, fontWeight: 700, color: 'var(--text)', margin: 0 }}>Compartir Patch</h2>
|
||||
|
||||
<div className="auth-form" style={{ gap: 10 }}>
|
||||
<label className="auth-label">TITULO</label>
|
||||
<input className="auth-input" placeholder="Nombre de tu patch"
|
||||
value={title} onChange={e => setTitle(e.target.value)} />
|
||||
|
||||
<label className="auth-label">DESCRIPCION</label>
|
||||
<textarea className="auth-input" placeholder="Describe tu creacion..."
|
||||
value={description} onChange={e => setDescription(e.target.value)}
|
||||
rows={3} style={{ resize: 'vertical', fontFamily: 'inherit' }} />
|
||||
|
||||
<label className="auth-label">TAGS</label>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||||
{TAGS.map(tag => (
|
||||
<button key={tag} type="button"
|
||||
className={`ws-tag ${selectedTags.includes(tag) ? 'active' : ''}`}
|
||||
onClick={() => setSelectedTags(prev =>
|
||||
prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]
|
||||
)}
|
||||
>{tag}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error && <div className="auth-error">{error}</div>}
|
||||
|
||||
<button className="auth-submit" onClick={handleShare} disabled={loading}>
|
||||
{loading ? 'Compartiendo...' : 'Compartir'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button className="auth-close" onClick={onClose}>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PatchCard({ patch, onLoad, onLike }) {
|
||||
const moduleCount = patch.data?.modules?.length || 0;
|
||||
const wireCount = patch.data?.connections?.length || 0;
|
||||
|
||||
return (
|
||||
<div className="ws-card">
|
||||
<div className="ws-card-preview">
|
||||
<span className="ws-card-wave">{moduleCount > 6 ? '~ ~ ~ ~' : '~ ~'}</span>
|
||||
</div>
|
||||
<div className="ws-card-body">
|
||||
<h3 className="ws-card-title">{patch.title}</h3>
|
||||
<p className="ws-card-author">por {patch.author?.username || 'Anonimo'}</p>
|
||||
{patch.tags?.length > 0 && (
|
||||
<div className="ws-card-tags">
|
||||
{patch.tags.map(t => <span key={t} className="ws-tag-pill">{t}</span>)}
|
||||
</div>
|
||||
)}
|
||||
<div className="ws-card-footer">
|
||||
<button className="ws-like-btn" onClick={() => onLike(patch.id)}>
|
||||
♥ {patch.likesCount || 0}
|
||||
</button>
|
||||
<span className="ws-card-meta">{moduleCount} modules · {wireCount} wires</span>
|
||||
<button className="ws-load-btn" onClick={() => onLoad(patch)}>Cargar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Workshop({ onSwitchToSandbox, onSwitchToGame }) {
|
||||
const { isLoggedIn, openAuth, logout, user } = useAuth();
|
||||
const [patches, setPatches] = useState([]);
|
||||
const [search, setSearch] = useState('');
|
||||
const [activeTag, setActiveTag] = useState('');
|
||||
const [sort, setSort] = useState('recent');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showShare, setShowShare] = useState(false);
|
||||
|
||||
const loadPatches = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set('q', search);
|
||||
if (activeTag) params.set('tags', activeTag);
|
||||
params.set('sort', sort);
|
||||
const data = await workshopApi.browse(params.toString());
|
||||
setPatches(data.patches || []);
|
||||
} catch (err) {
|
||||
console.warn('Workshop load failed:', err);
|
||||
}
|
||||
setLoading(false);
|
||||
}, [search, activeTag, sort]);
|
||||
|
||||
useEffect(() => { loadPatches(); }, [loadPatches]);
|
||||
|
||||
const handleLoad = (patch) => {
|
||||
if (patch.data) {
|
||||
deserialize(patch.data);
|
||||
if (state.isRunning) rebuildGraph();
|
||||
onSwitchToSandbox?.();
|
||||
}
|
||||
};
|
||||
|
||||
const handleLike = async (patchId) => {
|
||||
if (!isLoggedIn) { openAuth(); return; }
|
||||
try {
|
||||
await workshopApi.like(patchId);
|
||||
loadPatches();
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const handleShare = () => {
|
||||
if (!isLoggedIn) { openAuth(); return; }
|
||||
setShowShare(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ws-page">
|
||||
<nav className="ws-nav">
|
||||
<div className="ws-nav-logo">
|
||||
<div className="auth-logo-box" style={{ width: 32, height: 32, fontSize: 16 }}>~</div>
|
||||
<span style={{ fontSize: 16, fontWeight: 700, color: 'var(--text)' }}>Reaktor</span>
|
||||
</div>
|
||||
<div className="ws-nav-tabs">
|
||||
<button className="ws-nav-tab" onClick={onSwitchToSandbox}>Sandbox</button>
|
||||
<button className="ws-nav-tab" onClick={onSwitchToGame}>SynthQuest</button>
|
||||
<button className="ws-nav-tab active">Workshop</button>
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
{isLoggedIn ? (
|
||||
<div className="user-badge" onClick={logout} title="Cerrar sesion">
|
||||
<div className="user-avatar">{user?.username?.[0]?.toUpperCase()}</div>
|
||||
<span className="user-name">{user?.username}</span>
|
||||
</div>
|
||||
) : (
|
||||
<button className="login-btn" onClick={openAuth}>Entrar</button>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<div className="ws-header">
|
||||
<h1 className="ws-title">Workshop</h1>
|
||||
<p className="ws-subtitle">Explora, comparte y descubre sonidos de la comunidad</p>
|
||||
</div>
|
||||
|
||||
<div className="ws-toolbar">
|
||||
<div className="ws-search">
|
||||
<span>🔍</span>
|
||||
<input placeholder="Buscar patches..." value={search}
|
||||
onChange={e => setSearch(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="ws-tags">
|
||||
<button className={`ws-tag ${!activeTag ? 'active' : ''}`}
|
||||
onClick={() => setActiveTag('')}>Todos</button>
|
||||
{TAGS.slice(0, 5).map(tag => (
|
||||
<button key={tag} className={`ws-tag ${activeTag === tag ? 'active' : ''}`}
|
||||
onClick={() => setActiveTag(activeTag === tag ? '' : tag)}>{tag}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<select className="ws-sort" value={sort} onChange={e => setSort(e.target.value)}>
|
||||
<option value="recent">Recientes</option>
|
||||
<option value="popular">Popular</option>
|
||||
</select>
|
||||
|
||||
<button className="ws-share-btn" onClick={handleShare}>
|
||||
+ Compartir Patch
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="ws-grid">
|
||||
{loading ? (
|
||||
<p style={{ color: 'var(--text2)', gridColumn: '1/-1', textAlign: 'center', padding: 40 }}>
|
||||
Cargando...
|
||||
</p>
|
||||
) : patches.length === 0 ? (
|
||||
<p style={{ color: 'var(--text2)', gridColumn: '1/-1', textAlign: 'center', padding: 40 }}>
|
||||
No hay patches aun. Se el primero en compartir!
|
||||
</p>
|
||||
) : (
|
||||
patches.map(p => (
|
||||
<PatchCard key={p.id} patch={p} onLoad={handleLoad} onLike={handleLike} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showShare && <ShareModal onClose={() => setShowShare(false)} onShared={loadPatches} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user