Compass

React 游戏罗盘条组件：刻度与八个方位从中央缺口处滑过，任务目标的标记显示在各自的方位角上。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/compass

示例

转向与标记

NWNNEE

030

compass-heading.tsx

import { useState } from "react";import { Compass } from "@/components/zero/compass";import { Slider } from "@/components/zero/slider";const markers = [  { bearing: 80, label: "Drop zone" },  { bearing: 350, label: "North gate", tone: "legendary" as const },  { bearing: 200, label: "Patrol", tone: "danger" as const },];export default function CompassHeading() {  const [heading, setHeading] = useState(30);  return (    <div className="grid w-full max-w-xl gap-6">      <Compass heading={heading} markers={markers} />      <Slider        value={heading}        onValueChange={(value) => setHeading(value as number)}        min={0}        max={359}        aria-label="Turn"      />    </div>  );}

行为

罗盘条是一块斜切块，每 15° 一道刻度，八个方位以字母标注（北为强调色）；中央的缺口指示当前朝向，下方显示方位角。标记按各自的方位角显示在罗盘条上；超出视野的标记停靠在较近一侧的边缘，并以箭头指向其所在方向。

每一帧都从游戏中传入 heading：罗盘条只负责绘制，不做动画。读屏软件会以文字读出朝向与每个标记的方向（「Drop zone: 50 degrees right」）。

属性

Compass

属性	类型	默认值	说明
heading	number	—	朝向，单位为度；0 为北，90 为东。
markers	{ bearing: number; label: string; tone?: "accent" \| "danger" \| "rare" \| "legendary" }[]	[]	要指示的目标。
fov	number	180	罗盘条覆盖的角度。
labels	Partial<CompassLabels>	compassLabels	换成其他语言的文字：方位条上的八个方位字母、方位名称，以及播报的整句。