Binary Search Animation

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

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

<div class="binary-search-animation" data-binary-search-animation></div>

<div
  class="binary-search-animation"
  data-binary-search-animation
  data-binary-search-animation-mode="lower-bound"
  data-binary-search-animation-values="2 2 2 3 3 5 5"
  data-binary-search-animation-target="3"
></div>

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

Attribute	Mặc định	Tác dụng
-mode	binary-search	binary-search hoặc lower-bound
-values	ngẫu nhiên	Dãy số của bạn, cách nhau bằng dấu cách hoặc dấu phẩy (tự được sắp xếp)
-target	lấy từ mảng	Giá trị cần tìm
-size	15	Số phần tử của mảng ngẫu nhiên (1–40)
-seed	7	Chọn mảng ngẫu nhiên nào: cùng seed luôn ra cùng một mảng
-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 ở kết quả rồi chạy lại từ đầu
-code	true	false để ẩn khung code
-inputs	true	false để ẩn hàng nhập liệu (chọn hàm, giá trị cần tìm, kích thước, mảng mới)

Phần tử thêm vào sau khi trang đã tải: gọi BinarySearchAnimation.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 BinarySearchAnimation.createBinarySearchAnimation(element, options): nó trả về một handle có setTarget, setMode, setValues, shuffle, player (play, pause, seek…) và destroy.

Chép BinarySearchAnimation.tsx, binary-search-animation.css và thư mục core vào dự án:

import { BinarySearchAnimation } from "./BinarySearchAnimation";

<BinarySearchAnimation />
<BinarySearchAnimation mode="lower-bound" values={[2, 2, 2, 3, 3, 5, 5]} target={3} autoplay={false} />
<BinarySearchAnimation seed={42} size={31} loop inputs={false} onFrame={(frame) => console.log(frame.caption)} />

Props chính là các tuỳ chọn ở trên viết kiểu camelCase (mode, values, target, size, seed, speed, autoplay, loop, code, inputs), thêm onFrame(frame, index) được gọi mỗi khi vẽ một khung hình. Đổi một prop là tìm kiếm chạy lại từ đầu. Mọi prop khác được truyền xuống thẻ <div> gốc (className, id, aria-*…). Dùng được với 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 .binary-search-animation (hoặc class của riêng bạn):

Biến	Thay đổi gì
--bsearch-lo, --bsearch-mid, --bsearch-hi	Màu ba con trỏ (xanh ngọc, tím, hồng) và thanh vùng tìm kiếm nằm giữa chúng
--bsearch-found, --bsearch-insert	Ánh sáng của ô tìm thấy, và vệt chỉ chỗ chèn giá trị còn thiếu
--bsearch-bg, --bsearch-surface, --bsearch-surface-strong, --bsearch-blur	Nền và lớp kính mờ
--bsearch-edge, --bsearch-shadow, --bsearch-code-bg	Viền, bóng đổ, nền khung code
--bsearch-text, --bsearch-muted, --bsearch-on-accent, --bsearch-ring	Chữ, chữ phụ, chữ trên con trỏ và nút có màu, viền focus
--bsearch-font, --bsearch-mono	Font cho chữ và cho code, con số
--bsearch-radius, --bsearch-box-radius	Bo góc của trình phát và của các ô
--bsearch-duration, --bsearch-ease	Con trỏ lướt và nửa mảng mờ đi 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.