feat: visualizzatore di algoritmi (Algorithm) — ordinamento e ricerca animati - #8
Merged
Conversation
…ec-algo-viz-fase1.md) Componente <AlgoViz> con player passo-passo (study) e autoplay (lab): - scena array DOM+CSS transitions: barre per identità, bilancia di confronto, badge puntatori, graffa range, chip target, esiti ricerca - generatori: bubble/selection/insertion sort, quicksort (Lomuto), ricerca lineare e binaria, con note didattiche in italiano - dati deterministici via mulberry32 (SSR/hydration safe), shuffle con «Rigenera», dark mode e prefers-reduced-motion - pagina demo unlisted /docs/algoviz-test Implementazione delegata (Opus) + review: rimosso «Indietro» dai controlli lab e allineate le virgolette del box d'errore alla spec. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ai runner Rename del componente e riprogettazione visiva sulla scorta del feedback. Rename - AlgoViz → Algorithm (cartella, tipi, CSS vars --av- → --alg-, registrazione in MDXComponents). Prop `algo` → `name`. - Pagina di test: docs/algoviz-test.mdx → docs/algorithm-test.mdx. Stile (coerenza con PyRunner / SQLRunner) - Tipografia tutta Monaspace: Argon (UI), Neon tabellare (numeri), Radon (didascalie/note). - Icone: nuovo Icon.tsx con SVG duotone inline (da FA 7.1.0), al posto di react-fontawesome — due-toni veri, ~2 KB, prendono l'accent. - Pallini macOS nell'header + pulsanti pill come .iconBtn dei runner. - Dimensioni testi riportate alla scala dei runner. - Progress bar minimale (2px) sulla linea di separazione body/footer. - Scritte degli step centrate sotto le barre. - Confronto: anello a 4 colori ciclico (stile «AI border» Google) al posto del box-shadow pieno e della bilancia (rimossa). - Barre: gradiente verticale + ombra moderni; --alg-item-0 da grigio a indigo (niente più collisione col grigio «ordinato»). Build, typecheck e lint verdi. La visualizzazione del confronto (connettore tra le barre) resta da rifinire sugli screenshot di riferimento. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…b, indicatore di posizione - CodePanel: pseudocodice con evidenziazione Python (highlightPy), colori allineati ai runner (--py-*), bottone copia con crossfade copia↔spunta; colonna statistiche (confronti/scambi) attivabile. - Preset Studio/Lab che configurano i toggle (codice, spiegazione). Il toggle codice governa anche i controlli avanzati (shuffle, esegui, velocità): Studio = passo-passo guidato, Lab = tutto visibile. Toccare un toggle sgancia il preset, ripremerlo lo riapplica; default per blocco via prop `mode`. - Toggle colore globale e persistito (gradiente/arcobaleno) via useAlgoPref; modalità e toggle codice/spiegazione restano locali al blocco. - Indicatore di posizione corrente sotto le barre (campo `cursor` generico), con etichetta della variabile quando il codice è attivo; applicato al bubble sort. - Icone duotone inline FA 7.1.0 (code, palette, copy, check, comment-lines). - Selettore velocità con indicatore scorrevole; legenda dinamica (solo stati usati); colori stato scambio=verde / ordinato=bianco; corsia dimensionata sull'intera trace; note del bubble sort riscritte (ragionamento, non cronaca). - Controls.tsx ed Explanation.tsx assorbiti in Player. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…orto - Estrae pickSearchTarget in generators/pickTarget.ts: linearSearch e binarySearch ne condividevano una copia identica. - Rimuove ALGO_IDS da generators/index.ts: esportato ma mai importato (era previsto per una pagina galleria non realizzata). Nessun cambiamento di comportamento: stessa funzione, stesso ordine di consumo del PRNG seeded (determinismo SSR invariato). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sotto i ~430px la toolbar (.header, flex senza wrap) accavallava le 3 icone toggle sopra lo switch Studio/Lab, rendendolo incliccabile; il pannello codice teneva la colonna statistiche fissa a 172px schiacciando lo pseudocodice in overflow. - @media (max-width: 480px): .header wrappa, headerRight scende su una seconda riga a tutta larghezza allineata a destra. - @media (max-width: 560px): .codeGrid a una colonna, .stats in riga sotto il codice (soglia più alta: la colonna fissa soffoca già <480px). Rif. pm/spec-algo-viz-mobile.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
BAR_W/GAP erano costanti (58px a elemento): a 360px un array da 8 usciva dal viewport e andava trascinato. Ora ArrayScene misura .sceneWrap con un ResizeObserver e ricava un passo adattivo (clamp tra MIN_UNIT 36 e MAX_UNIT 58), così l'intero array entra senza scroll quando c'è spazio; oltre, lo scroll orizzontale resta come fallback. Il font del valore scala verso il basso nelle barre strette. x()/slotCenter() sono ora closure sul passo misurato; nessun'altra parte conosce le coordinate. Rif. pm/spec-algo-viz-mobile.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@media (max-width: 480px): padding orizzontale del .body da 24px a 12px (più spazio per la scena) e tap target più comodi (.toggleBtn 30→36px, .segBtn alto 24→34px). Applicato dopo il reflow della toolbar (P1) così gli ingrandimenti non riaprono l'accavallamento. Rif. pm/spec-algo-viz-mobile.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- ArrayScene: margine interno orizzontale (EDGE) così l'anello di selezione di prima/ultima barra non viene clippato dall'overflow. - spiegazione ad altezza fissa: i pulsanti del footer non «saltano» tra uno step e l'altro. Su mobile nascondo la riga «fase» ripetuta e riduco l'altezza (il testo a capo arrivava a ~180px). - Lab su mobile: pannello codice con max-height + scroll interno; la riga attiva si porta in vista da sola (auto-scroll che tocca solo lo scrollTop del pannello, mai la pagina). Così scena, codice e controlli stanno insieme senza scrollare. - Studio: il pulsante avanti diventa «Step» esteso e primario. - toolbar mobile: via pallini e nome file, switch Studio/Lab solo-icona, statistiche col numero accanto alla label, interlinea codice più stretta. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…e la j - Colori di stato (anelli + pallini legenda) ora per-tema: in chiaro ambra/smeraldo/ardesia/viola più scuri e saturi, così «Ordinato» (prima bianco su bianco), «Confronto» e «Scambio» risaltano sia sullo sfondo chiaro sia sulle barre. Il tema scuro mantiene bianco e pastelli. - Icone Studio/Lab rialzate di 1px: il centro ottico dell'icona coincide con quello del testo, prima cadeva più in basso. - Selection sort: «min» non è più un badge stretto ma viaggia col cursore caret + etichetta, lo stesso linguaggio visivo della «j» del bubble sort. - Stacco visivo tra parte ordinata e parte da ordinare: a ogni confine si apre un varco (vale per tutti gli ordinamenti, si adatta al lato giusto). - Rimossa la logica minSlots ormai morta in ArrayScene. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
marcofarina
added a commit
that referenced
this pull request
Jun 15, 2026
Bump 0.4.0 → 0.5.0. La novità di rilievo è <Algorithm>, il visualizzatore di algoritmi animati (ordinamento e ricerca) con player Studio/Lab e pseudocodice sincronizzato (PR #8). README: badge versione, SQLRunner e Algorithm nello stack. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
In breve
Introduce
<Algorithm>, il visualizzatore di algoritmi animati per il libro: barre interattive con player passo-passo, pannello pseudocodice sincronizzato e due preset d'autore (Studio e Lab). Coerente con lo stile dei runner esistenti (PyRunner/SQLRunner) e con i token Atmospheric.Questa PR raccoglie l'intero filone
feat/algo-viz-*: fase 1 (motore + generatori), il redesign con pannello codice, l'adattamento mobile e il polish finale di contrasto/usabilità.Cosa contiene
Motore e architettura (
src/components/Algorithm/)Player.tsx) con scrubber, transport, velocità, autoplay (Lab), avanzamento passo-passo (Studio).ArrayScene.tsx: scena a barre con larghezza adattiva allo spazio disponibile (ResizeObserver), anelli semantici di stato, cursore di scansione, badge puntatori, graffe di range.applyStep.ts,types.ts) con trace pre-generata: SSR-safe, niente jitter di hydration.generators/index.ts.6 algoritmi: bubble sort, selection sort, insertion sort, quicksort, ricerca lineare, ricerca binaria — ciascuno con pseudocodice Python, note passo-passo, complessità e blurb.
Due preset: Studio (spiegazioni passo-passo) e Lab (sperimentazione con autoplay e dati casuali), con toggle per pannello codice, spiegazioni e modalità colore (gradiente per valore / arcobaleno per identità).
Mobile: toolbar e pannello codice riflowano, barre e tap target adattivi, niente overflow di pagina.
Polish finale (ultimo commit)
Uso in MDX
<Algorithm>è registrato globalmente (nessun import). Esempio:Verifica
npm run typecheck✅ ·npm run lint✅ (solo warning preesistenti su altri file)/docs/algorithm-test(paginaunlisted): tutti e 6 gli algoritmi, Studio + Lab, tema chiaro e scuro, casi limite (dati non ordinati, target assente, overflow a 12 elementi, algoritmo inesistente → box d'errore).🤖 Generated with Claude Code