Heading

import {
  AdviceType,
  CogArrowStyle,
  CompassReadoutSource,
  HdgArrowStyle,
  Heading,
  HeadingPriorityElement,
  Priority,
  VesselImage,
  type AngleAdvice,
  type CompassCenterReadout,
} from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Hand steering up a buoyed channel on a live feed: the heading swings around the setpoint and into the caution " +
  "sector over the bank, and the setpoint is adjusted and confirmed every eight seconds, on three cards with " +
  "different arrows, centers and palettes.";

const CENTER_READOUTS: CompassCenterReadout[] = [
  { source: CompassReadoutSource.hdg },
  { source: CompassReadoutSource.cog },
];

/** The leading line through the channel, and the bank on its starboard side. */
const ADVICES: AngleAdvice[] = [
  { minAngle: 20, maxAngle: 34, type: AdviceType.advice, hinted: true },
  { minAngle: 40, maxAngle: 62, type: AdviceType.caution, hinted: true },
];

const PANEL: CSSProperties = {
  display: "flex",
  flexWrap: "wrap",
  alignItems: "flex-end",
  justifyContent: "center",
  gap: 28,
  width: "100%",
  maxWidth: 680,
};

const FIGURE: CSSProperties = { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, margin: 0 };
const CAPTION: CSSProperties = { fontSize: 13, color: "var(--text-dim)", textAlign: "center", maxWidth: 220 };

/** The heading the feed reports at a given second: a slow swing with a faster yaw on top. */
function headingAt(second: number): number {
  return 30 + 10 * Math.sin(second / 18) + 2 * Math.sin(second / 3);
}

export default function Showcase(): ReactElement {
  const [second, setSecond]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);

  useEffect((): (() => void) => {
    const interval: number = window.setInterval((): void => {
      setSecond((previous: number): number => previous + 1);
    }, 1000);
    return (): void => {
      window.clearInterval(interval);
    };
  }, []);

  const heading: number = (headingAt(second) + 360) % 360;
  // The flood sets the vessel to port of her heading.
  const courseOverGround: number = (heading - 6 + 360) % 360;

  // The setpoint alternates between 27 and 33 degrees. In the two seconds before each change the helmsman is turning
  // the knob, so the new value shows as a second marker; on release the marker slides across.
  const phase: number = second % 8;
  const confirmed: number = Math.floor(second / 8) % 2 === 0 ? 27 : 33;
  const next: number = confirmed === 27 ? 33 : 27;
  const adjusting: boolean = phase >= 6;

  return (
    <div style={PANEL}>
      <figure style={FIGURE}>
        <Heading
          heading={heading}
          courseOverGround={courseOverGround}
          headingSetpoint={confirmed}
          newHeadingSetpoint={adjusting ? next : undefined}
          touching={adjusting}
          autoAtHeadingSetpoint
          autoAtHeadingSetpointDeadband={3}
          animateSetpoint
          headingAdvices={ADVICES}
          centerReadouts={CENTER_READOUTS}
          hdgArrowStyle={HdgArrowStyle.arrowHead}
          cogArrowStyle={CogArrowStyle.vector}
          priority={Priority.enhanced}
          priorityElements={[HeadingPriorityElement.hdg, HeadingPriorityElement.cog]}
          showLabels
          faceDiameter={250}
        />
        <figcaption style={CAPTION}>Helm: readouts, the enhanced palette, advice and caution sectors</figcaption>
      </figure>

      <figure style={FIGURE}>
        <Heading
          heading={heading}
          courseOverGround={courseOverGround}
          headingSetpoint={confirmed}
          newHeadingSetpoint={adjusting ? next : undefined}
          touching={adjusting}
          autoAtHeadingSetpoint
          animateSetpoint
          headingAdvices={ADVICES}
          vesselImage={VesselImage.genericTop}
          hdgArrowStyle={HdgArrowStyle.needle}
          cogArrowStyle={CogArrowStyle.needle}
          showLabels
          tickmarksInside
          faceDiameter={170}
        />
        <figcaption style={CAPTION}>Cockpit repeater: the vessel, needles and inside tickmarks</figcaption>
      </figure>

      <figure style={FIGURE}>
        <Heading
          heading={heading}
          courseOverGround={courseOverGround}
          headingSetpoint={0.3}
          headingSetpointAtZeroDeadband={0.5}
          headingSetpointOverride
          atHeadingSetpoint={false}
          hdgArrowStyle={HdgArrowStyle.beamLine}
          cogArrowStyle={CogArrowStyle.velocityVector}
          faceDiameter={110}
        />
        <figcaption style={CAPTION}>Chart table: beam line, velocity vector, setpoint snapped to north</figcaption>
      </figure>
    </div>
  );
}

import { Heading } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "The heading and course over ground arrows on the double-band card, with the heading setpoint marker.";

export default function HeadingExample(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Heading heading={47} courseOverGround={52} headingSetpoint={60} />
    </div>
  );
}

import { Heading, VesselImage } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "The vessel silhouette in the center, turning with the heading, and the N, E, S and W letters.";

export default function WithVessel(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Heading heading={47} courseOverGround={52} vesselImage={VesselImage.genericTop} showLabels />
    </div>
  );
}

import { Heading, CompassReadoutSource, type CompassCenterReadout } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "Heading, course over ground and rate of turn as readouts in the center, on a face pinned to 240 pixels.";

const CENTER_READOUTS: CompassCenterReadout[] = [
  { source: CompassReadoutSource.hdg },
  { source: CompassReadoutSource.cog },
  { source: CompassReadoutSource.rot },
];

export default function WithReadouts(): ReactElement {
  return <Heading heading={47} courseOverGround={52} centerReadouts={CENTER_READOUTS} showLabels faceDiameter={240} />;
}

import { Heading } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "A heading card on a face pinned to 180 pixels, with the heading setpoint marker.";

export default function SmallFace(): ReactElement {
  return <Heading heading={47} courseOverGround={52} headingSetpoint={60} showLabels faceDiameter={180} />;
}