Quick Sort Animation

Nhúng stylesheet và script một lần, rồi đánh dấu một phần tử trống bằng data-quick-sort-animation. Toàn bộ trình phát được dựng bên trong nó:

<link rel="stylesheet" href="quick-sort-animation.css" />
<script src="quick-sort-animation.js" defer></script>

<div data-quick-sort-animation data-quick-sort-size="16" data-quick-sort-loop></div>

<!-- số của bạn, bỏ các bảng phụ: hợp để đưa lên slide -->
<div
  data-quick-sort-animation
  data-quick-sort-values="7, 2, 9, 4, 3, 8, 1"
  data-quick-sort-inputs="false"
  data-quick-sort-panels="false"
></div>

Tuỳ chọn qua data attribute (tuỳ chọn bật/tắt: có mặt là bật, ghi "false" là tắt):

Attribute	Mặc định	Tác dụng
data-quick-sort-values	—	Dãy số của bạn, cách nhau bằng dấu phẩy hoặc khoảng trắng (tối đa 48); thay cho mảng sinh tự động
data-quick-sort-size	16	Số cột của mảng sinh tự động, từ 2 đến 48
data-quick-sort-scenario	random	random, sorted, reversed hoặc duplicates
data-quick-sort-seed	7	Chọn mảng sinh ra: cùng seed thì luôn ra cùng một mảng
data-quick-sort-speed	1	Từ 0.25 đến 4
data-quick-sort-autoplay	bật	Tự phát khi tải trang (không bao giờ tự phát khi bật prefers-reduced-motion)
data-quick-sort-loop	tắt	Chạy lại từ đầu sau bước cuối
data-quick-sort-inputs	bật	Ô chọn số cột, kiểu đầu vào và nút "New input"
data-quick-sort-panels	bật	Bảng code và bảng ngăn xếp gọi hàm

Trình phát thêm vào sau khi trang đã tải: QuickSortAnimation.init(container) — hàm này trả về một hàm để gỡ lại. Muốn điều khiển từ code của bạn (ví dụ nút bấm chuyển slide), tự dựng nó:

const player = QuickSortAnimation.create(element, { values: [5, 1, 4, 2, 3], autoplay: false });
player.stepForward();
player.seek(20);
player.setValues([9, 8, 7]);
player.destroy(); // trả phần tử về như cũ

Handle còn có play, pause, stepBack, reset và frameCount.

Khi focus nằm ở bất kỳ đâu trong trình phát: Space phát hoặc dừng, ← / → đi từng bước, Home quay về đầu.

Chép QuickSortAnimation.tsx, quick-sort-animation.css và thư mục core vào dự án:

import { QuickSortAnimation } from "./QuickSortAnimation";

<QuickSortAnimation size={24} scenario="reversed" loop />
<QuickSortAnimation values={[7, 2, 9, 4, 3, 8, 1]} inputs={false} panels={false} />

Props chính là các tuỳ chọn ở trên: values, size, scenario, seed, speed, autoplay, loop, inputs, panels, cộng thêm mọi prop của <div> (className, id, aria-label…). Truyền một mảng mới nhưng cùng các số thì trình phát không bị chạy lại từ đầu. React 18 hoặc 19.

Component bắt đầu bằng "use client", nên dùng được từ bất kỳ page hay server component nào. Với App Router không cần làm gì thêm. Với Pages Router, chuyển dòng import CSS sang pages/_app.

Đặt các biến sau trên .quick-sort-animation (hoặc một class của bạn):

Biến	Thay đổi gì
--quicksort-surface, --quicksort-panel, --quicksort-stage, --quicksort-border	Lớp kính, các bảng, khung cột và viền của chúng
--quicksort-aurora-1, --quicksort-aurora-2, --quicksort-aurora-3	Các quầng màu phía sau
--quicksort-text, --quicksort-muted	Chữ chính và chữ phụ
--quicksort-bar, --quicksort-bar-2	Dải màu của một cột, từ trên xuống
--quicksort-pivot, --quicksort-i, --quicksort-j, --quicksort-swap	Phần tử chốt (và trung vị của ba), hai con trỏ, lần đổi chỗ
--quicksort-settled, --quicksort-settled-2	Cột đã nằm đúng chỗ
--quicksort-range, --quicksort-on-mark	Ngoặc khoảng đang xét, và chữ trên các nhãn màu
--quicksort-accent, --quicksort-accent-2, --quicksort-ring	Nút phát, thanh thời gian, dòng code đang chạy, viền focus
--quicksort-radius, --quicksort-bar-radius	Bo góc
--quicksort-font, --quicksort-mono	Font chữ và font code
--quicksort-stage-height	Chiều cao tối đa các cột
--quicksort-duration, --quicksort-ease	Thời gian một cột trượt ở 1× (tự co giãn theo tốc độ)

Màu dùng light-dark(): tự theo color-scheme của trang.