Union-Find Animation

Nhúng stylesheet và script một lần, rồi đặt một phần tử rỗng có data-union-find-animation ở bất cứ chỗ nào bạn muốn có trình phát:

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

<div class="union-find-animation" data-union-find-animation></div>

<div
  class="union-find-animation"
  data-union-find-animation
  data-union-find-animation-scenario="worst-case"
  data-union-find-animation-compression="false"
></div>

<div
  class="union-find-animation"
  data-union-find-animation
  data-union-find-animation-operations="union 0 1; union 2 3; union 1 3; find 3"
  data-union-find-animation-elements="6"
></div>

Tuỳ chọn qua data attribute, đều bắt đầu bằng data-union-find-animation-:

Attribute	Mặc định	Tác dụng
-scenario	friend-circles	friend-circles, network-links hoặc worst-case: danh sách thao tác sẽ chạy
-operations	của kịch bản	Danh sách của riêng bạn: union a b, find a và connected a b, cách nhau bằng ;, , hoặc xuống dòng (tối đa 24)
-elements	của kịch bản	Số phần tử ban đầu của khu rừng (2–16); tự tăng lên nếu danh sách của bạn nhắc đến nhiều hơn
-seed	7	Kịch bản dựng danh sách nào: cùng seed luôn ra cùng một danh sách
-compression	true	false để find chạy không có lượt nén đường đi thứ hai
-speed	1	Từ 0.25 đến 4
-autoplay	true	Tự chạy khi tải xong (không bao giờ tự chạy khi bật giảm chuyển động)
-loop	false	Dừng một chút ở phần tổng kết rồi chạy lại từ đầu
-code	true	false để ẩn khung code
-inputs	true	false để ẩn các hàng nhập liệu (kịch bản, thao tác, số phần tử, nén đường đi)

Phần tử thêm vào sau khi trang đã tải: gọi UnionFindAnimation.init(container), hàm này trả về một hàm để gỡ bỏ. Muốn điều khiển toàn bộ thì dùng UnionFindAnimation.createUnionFindAnimation(element, options): nó trả về một handle có setScenario, setOperations(text) (trả về false và báo lý do ngay trên trang khi không đọc được danh sách), setElements, setCompression, shuffle, player (play, pause, seek…), trace() và destroy.

Chép UnionFindAnimation.tsx, union-find-animation.css và thư mục core vào dự án của bạn:

import { UnionFindAnimation } from "./UnionFindAnimation";

<UnionFindAnimation />
<UnionFindAnimation scenario="worst-case" compression={false} autoplay={false} />
<UnionFindAnimation operations="union 0 1; union 2 3; find 3" elements={6} loop inputs={false} onFrame={(frame) => console.log(frame.caption)} />

Các prop chính là những tuỳ chọn ở trên (scenario, operations, elements, seed, compression, speed, autoplay, loop, code, inputs), thêm onFrame(frame, index) được gọi với mỗi khung hình được vẽ. Đổi một prop thì danh sách chạy lại từ đầu. Mọi prop khác được chuyển cho <div> gốc (className, id, aria-*…). React 18 hoặc 19.

File 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 thì không cần làm gì thêm. Với Pages Router, chuyển dòng import CSS vào pages/_app.

Đặt các biến này trên .union-find-animation (hoặc class của riêng bạn):

Biến	Thay đổi gì
--ufind-tone-0 … --ufind-tone-7	Tám màu của các nhóm (xanh ngọc, tím, hồng, hổ phách, bạc hà, xanh trời, cam, xanh chanh); mỗi nhóm lấy màu theo số của gốc, nên màu đi theo gốc khi nhóm lớn lên
--ufind-lit, --ufind-hop	Đường đi mà find đang bước, và nút vừa được trỏ lại
--ufind-orb	Màu nền mà mỗi quả cầu được pha vào
--ufind-bg, --ufind-surface, --ufind-surface-strong, --ufind-blur	Nền và lớp kính mờ
--ufind-edge, --ufind-shadow, --ufind-code-bg	Viền, bóng đổ, nền khung code
--ufind-text, --ufind-muted, --ufind-on-accent, --ufind-error, --ufind-ring	Chữ, chữ phụ, chữ trên nhãn và nút có màu, thông báo lỗi, viền focus
--ufind-font, --ufind-mono	Font cho chữ và cho code, con số
--ufind-radius	Bo góc của trình phát
--ufind-duration, --ufind-ease	Quả cầu lướt và bay nhanh hay chậm, mượt đến đâu

Màu dùng light-dark() nên tự theo color-scheme của trang. Khi bật prefers-reduced-motion, không có gì tự chạy và khung hình đổi ngay lập tức; mọi nút điều khiển vẫn dùng được.