Тестовое задание · 29 Jan 2024

merak - заброшенный скелет Union-Find, переписанный в интерактивный визуализатор алгоритма

• Vue 3
• TypeScript
• Vite
• SVG
• SCSS
• OKLCH
• Responsive
• Accessible

Vue 3 + TypeScript + Vite репозиторий визуализатора union-find, брошенный на стадии скелета: единственный компонент рисовал десять белых точек на чёрном canvas, держал вшитый список рёбер, который ни разу не читался, и метод рисования линии, который ни разу не вызывался, и не реализовывал сам алгоритм непересекающихся множеств - ни массива родителей, ни find, ни union. Переписан с нуля в настоящий обучающий инструмент с сохранением стека Vue 3. Ядро - чистый, не зависящий от фреймворка движок DSU с переключаемыми на лету стратегиями union-by-size, union-by-rank и наивной, и полной, половинной или выключенной компрессией пути; каждая операция возвращает упорядоченный список шагов, каждый со снимком структуры, поэтому весь UI - чистая функция от позиции курсора, а шаг назад - это просто восстановление снимка, без обратной логики. Лес отрисован инлайн-SVG: узлы - отполированные 'чипы терраццо' (суперэллипсы), окрашенные по множеству, к которому принадлежат, указатели на родителя - изогнутые рёбра-'швы', представитель каждого множества носит врезанное бирюзовое кольцо, а requestAnimationFrame-твин двигает чипы и рёбра вместе, так что union, проходы find и уплощение при компрессии пути анимируются как единое целое. Вокруг - синхронная таблица массивов parent/size, строка метрик (число компонент, высота самого высокого дерева, счётчики операций и no-op, длина последнего find), подпись простым языком, поясняющая каждый шаг, обратно-хронологическая история с перемоткой во времени, и панель транспорта с play, шагом, скоростью и перематываемым таймлайном с метками на границах операций. Два режима делят один плеер: сценарное демо, которое выращивает длинную цепочку и затем уплощает её компрессией пути, и режим свободной игры по кликам на узлы или числовому вводу в режимах union, find и connected, где каждый крайний случай (union с самим собой, уже-связаны, find одиночки) показан как поясняемый учебный момент, а не как мёртвый клик. Дизайн - выдержанная OKLCH-система 'налитое терраццо / минеральный чип' с канонической тёплой светлой темой и отполированной тёмной, шрифты Fraunces, Inter и JetBrains Mono, анимации ease-out-expo и кастомный фавикон-множество (SVG, размеры PNG, веб-манифест). Доступность - реальная база (skip-ссылка, лендмарки, единственный h1, настоящая семантика button и table, фокусируемые SVG-узлы с доступными именами, подпись aria-live, фокус-кольца focus-visible и guard'ы reduced-motion), а вёрстка - честный адаптив от 390 до 1440. Vue 3 + TypeScript + Vite + SVG + SCSS, self-hosted на сервере Hetzner за Caddy.