The project work implements a visualizer of algorithms. This project work is sharpened on animation and step-by-step display of algorithms work. The code is covered by unit and e2e tests using Jest and Cypress.
В проектной работе реализован визуализатор алгоритмов. Эта проектная работа заточена на анимацию и поэтапное отображение работы алгоритмов.
На этом экране разворачивается строка.
Компоненты
Начальное состояние страницы
Визуализация
Сначала на экране должно появиться слово, буквы которого записаны в синие кружки.
Строка в исходном виде
Двух кандидатов на сортировку подсветите цветом #D252E1. Уже отсортированные элементы выделите #7FE051.
На скриншоте показана строка, в которой поменяли местами крайние символы:
Промежуточный этап разворота строки
Повторяются выделения, пока полностью не развернётся строка.
Анимация выполняется плавно.
На этом экране генерируется n чисел последовательности Фибоначчи.
Компоненты
Начальное состояние страницы
Например, введено 4, тогда на экране должен появиться ряд 1, 1, 2, 3, 5. Установлена аксимальная граница ввода 1 ≤ n≤ 19.
Визуализация
Элементы отображаются постепенно и плавно. Сначала появляется один, потом второй, третий и так до n.
Сгенерированная последовательность
На этом экране реализуются алгоритмы сортировки выбором и пузырьком
Компоненты
Начальное состояние страницы
Чтобы задать массив случайных чисел, написана функция randomArr. При написании учтено, что:
- массив должен состоять из целых чисел
$[0; 100]$ , - минимальное количество элементов массива
minLen = 3, максимальноеmaxLen = 17.
Визуализация
При нажатии «По убыванию» или «По возрастанию», запускается процесс сортировки в зависимости от выбранного способа: выбором или пузырьком.
Для анимации использованы два цвета:
#D252E1— элементы, которые сортируются;#7FE051— отсортированные элементы массива.
На этом экране реализовано удаление и добавление элементов в структуру данных стек
Компоненты
Начальное состояние страницы
Визуализация добавления
При вводе в инпут значения и нажатии «Добавить», в стеке появляется первый элемент, который необходимо отрисовать на странице.
Для отображения элементов стека используется компонент Circle. Внутри компонента записано введённое значение, сверху — указатель на вершину стека top, а снизу — номер индекса элемента (для первого элемента — 0 и так далее).
При добавлении ещё одного элемента справа от предыдущего появляется Circle с новым значением и индексом 1. И теперь уже над ним должна оказаться подпись top.
Визуализация удаления
При нажатии «Удалить», из стека извдекается только верхний элемент. Удаляемый элемент выделяется цветом, надпись top перемещается на его левого соседа.
Если в стеке всего один элемент, то после нажатия «Удалить» на странице не отображаются никакие элементы стека.
По клику на кнопку «Очистить» из стека удаляются все элементы сразу.
На этом экране вам предстоит визуализировать удаление и добавление элементов в структуру данных «очередь».
Компоненты
Начальное состояние страницы
Визуализация
Если ввести в инпут значение 2 и нажать «Добавить», элемент должен отобразиться под индексом 0. Также добавьте на элемент указатели head и tail. Инпут при этом очищается.
Очередь с одним элементом
При добавлении элементов в очередь позиция tail должна смещаться, на долю секунды выделяйте новый элемент цветом #D252E1.
Очередь из трёх элементов в момент добавления
Потом уберите выделение и очистите инпут.
Теперь если нажать «Удалить», из очереди должен извлечься элемент под индексом 0 (на долю секунды подсветите элемент #D252E1), a head будет перемещён на элемент с индексом 1.
Очередь после dequeue();
На этом экране реализовано удаление и добавлениеэлементов в связный список.
Компоненты
Кроме элементов управления, на странице должен отображаться небольшой связный список, например 0 → 34 → 8 → 1.
Начальное состояние страницы
При добавлении в head элемент должен появиться над первым элементом вместо надписи head.
Добавление в head
Затем он занимает первое место в списке и на долю секунды выделяется зелёным цветом. Теперь над новым элементом написано head, и он указывает на предыдущий head-элемент.
Отображение нового элемента в head
При добавлении в tail элемент должен появиться в хвосте над элементом с надписью tail. Затем он занимает последнее место в списке и на долю секунды выделяется зелёным цветом. Теперь под новым элементом написано tail.
При добавлении элемента по индексу должны быть заполнены два поля: «Введите значение» и «Введите индекс». Помните, что вся анимация выполняется поэтапно:
- По клику на «Добавить по индексу» новый элемент должен отобразиться над первым элементом.
- Пока ищем нужный индекс, поочерёдно подсвечиваем элементы. Добавляемый элемент перепрыгивает по списку до искомого индекса.
- Когда индекс найден, отображаем новый элемент над ним и добавляем.
В этом примере число 10 должно занимать индекс 2.
Добавление по индексу. Поиск индекса
После успешного добавления 10 стоит под порядковым номером 2 и указывает на 34. Новый добавленный элемент выделите цветом. Через долю секунды уберите все цветовые выделения и лоадер на кнопке — вставка завершена.
Добавление по индексу. Новый элемент в списке
При удалении элемента по индексу сначала необходимо выделять цветом элементы, пока не достигнем нужного индекса. Затем очистить значение в элементе и снизу отобразить маленький кружок с удаляемым значением.
Например, вы ввели индекс 2 и нажали «Удалить по индексу». Сначала цветом выделяется элемент с индексом 0, потом с индексом 1, и когда мы дошли до нужного индекса, то удаляем элемент из связного списка:
Удаление элемента под индексом 2
При удалении элемента из tail кружок замещает надпись tail.
Удаление элемента из tail