Test project 29 Jan 2024
merak - an abandoned Union-Find skeleton rebuilt into an interactive algorithm visualizer
- Vue 3
- TypeScript
- Vite
- SVG
- SCSS
- OKLCH
- Responsive
- Accessible
A Vue 3 + TypeScript + Vite repository for a union-find visualizer abandoned at the skeleton stage: a single component drew ten white dots on a black canvas, kept a hardcoded list of edges that was never read and a draw-line helper that was never called, and implemented none of the disjoint-set algorithm itself - no parent array, no find, no union. Rebuilt from scratch into a genuine teaching tool while keeping the Vue 3 stack. The core is a pure, framework-free DSU engine with live-switchable union-by-size, union-by-rank and naive linking and full, halving or no path compression; every operation returns an ordered list of steps, each carrying a snapshot of the structure, so the whole UI is a pure function of the timeline cursor and stepping back is just snapshot restoration rather than inverse logic. The forest is inline SVG: nodes are polished 'terrazzo chip' superellipses colored by the set they belong to, parent pointers are curved grout-vein edges, the representative of each set wears an inlaid teal ring, and a requestAnimationFrame tween moves chips and edges together so unions, find walks and path-compression flattening all animate as one. Around it sit a synchronized parent/size array table, a metrics strip (component count, tallest tree, operation and no-op counts, last find length), a plain-language caption that narrates each step, a reverse-chronological history you can time-travel through, and a transport bar with play, step, speed and a scrubbable timeline marked at operation boundaries. Two modes share one player: a scripted guided demo that grows a tall chain and then flattens it under path compression, and a free-play mode driven by clicking nodes or numeric input across union, find and connected modes, with every edge case (self-union, already-connected, singleton find) surfaced as a captioned teaching moment instead of a dead click. The design is a committed OKLCH 'poured terrazzo / mineral-chip' system with a canonical warm-light theme and a polished dark variant, Fraunces, Inter and JetBrains Mono, ease-out-expo motion and a custom disjoint-set favicon (SVG, PNG sizes, web manifest). Accessibility is a real floor (a skip link, landmarks, a single h1, real button and table semantics, focusable SVG nodes with accessible names, an aria-live caption, focus-visible rings and reduced-motion guards) and the layout is a genuine 390-to-1440 responsive pass. Vue 3 + TypeScript + Vite + SVG + SCSS, self-hosted on a Hetzner box behind Caddy.