方角と高さの案内

"use client";

import * as React from "react";
import { Label, Slider } from "@gunjo/ui";

// 方角の差を -180〜180 に畳む（359° と 1° の差は 2°）
function turnDelta(target: number, heading: number) {
  return ((target - heading + 540) % 360) - 180;
}

const TARGET = { az: 247, el: 10 }; // 目標の方位と、地平線からの高さ
const HIT = 8; // 合ったとみなす差
const KEEP = 12; // 高さは、いったん合ったらこの差まで合ったまま

// 震えは順に出す。同時に出すと1回に感じる
let freeAt = 0;
function buzz(pattern: number[]) {
  const now = performance.now();
  const at = Math.max(now, freeAt);
  freeAt = at + pattern.reduce((a, b) => a + b, 0) + 350;
  setTimeout(() => navigator.vibrate?.(pattern), at - now);
}

export function DirectionGuide() {
  // 実機では DeviceOrientationEvent から入れる
  const [heading, setHeading] = React.useState(271);
  const [pitch, setPitch] = React.useState(2);

  const delta = turnDelta(TARGET.az, heading);
  const onAz = Math.abs(delta) < HIT;
  const dEl = TARGET.el - pitch;
  const [onEl, setOnEl] = React.useState(false);
  const nextOnEl = Math.abs(dEl) < (onEl ? KEEP : HIT);
  if (nextOnEl !== onEl) setOnEl(nextOnEl);

  const azRef = React.useRef<boolean | null>(null);
  const elRef = React.useRef(false);
  React.useEffect(() => {
    if (azRef.current !== null && onAz !== azRef.current) {
      buzz(onAz ? [30] : [10, 90, 10]); // 重く1回／軽く2回
    }
    azRef.current = onAz;
    if (!elRef.current && onEl) buzz([12, 33, 12, 33, 12]); // 小刻みに3回
    elRef.current = onEl;
  }, [onAz, onEl]);

  return (
    <div className="space-y-4">
      <p className="text-2xl font-bold">
        {onAz ? "そこです" : `${delta > 0 ? "右" : "左"}へ ${Math.round(Math.abs(delta))} 度`}
      </p>
      <p>
        {onEl ? "その高さです" : `いまの構えから${dEl > 0 ? "上" : "下"}へ ${Math.round(Math.abs(dEl))}度`}
      </p>
      <Label htmlFor="heading">端末の向き</Label>
      <Slider id="heading" min={0} max={359} value={heading} onValueChange={setHeading} />
      <Label htmlFor="pitch">端末の上端の角度</Label>
      <Slider id="pitch" min={-30} max={90} value={pitch} onValueChange={setPitch} />
    </div>
  );
}