Watch

import {
  AdviceState,
  AdviceType,
  InstrumentState,
  OUTER_RING_RADIUS,
  Priority,
  RotPosition,
  RotType,
  TickmarkStyle,
  TickmarkType,
  VesselImage,
  VesselImageSize,
  Watch,
  WatchCircleType,
  type AngleAdviceRaw,
  type Tickmark,
  type WatchArea,
  type WatchBarArea,
  type WatchNeedle,
  type WatchVessel,
} from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Three sailing instruments built on the bare face, on one live feed beating to windward: an apparent wind dial " +
  "with no-go and target zones, a heading-up compass rose turning under the bow, and a close-hauled arc zoomed onto " +
  "the upwind sector, beside a repeater that is switched off.";

/** The apparent wind angle the helmsman steers to when close-hauled. */
const TARGET_ANGLE: number = 38;

const PANEL: CSSProperties = {
  display: "grid",
  gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))",
  gap: 20,
  alignItems: "end",
  justifyItems: "center",
  width: "100%",
  maxWidth: 660,
};

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

/** Relative bearings every 30 degrees, labeled port and starboard as a sailor reads them. */
const WIND_TICKMARKS: Tickmark[] = Array.from({ length: 12 }, (_: unknown, index: number): Tickmark => {
  const angle: number = index * 30;
  const relative: number = angle > 180 ? 360 - angle : angle;
  return {
    angle,
    type: angle % 90 === 0 ? TickmarkType.primary : TickmarkType.secondary,
    text: String(relative),
  };
});

/** Every 10 degrees across the close-hauled arc, with its two ends labeled. */
const ARC_TICKMARKS: Tickmark[] = Array.from({ length: 13 }, (_: unknown, index: number): Tickmark => {
  const angle: number = -60 + index * 10;
  return {
    angle,
    type: angle === 0 ? TickmarkType.zeroLine : TickmarkType.secondary,
    text: Math.abs(angle) === 60 ? "60" : undefined,
  };
});

const CLOSE_HAULED_ARC: WatchArea[] = [{ startAngle: -60, endAngle: 60, roundOutsideCut: true, roundInsideCut: true }];

/** The no-go zone either side of the bow, and the target bands either side of it. */
function adviceFor(windAngle: number): AngleAdviceRaw[] {
  const inNoGo: boolean = Math.abs(windAngle) < 30;
  const onTarget: boolean = Math.abs(Math.abs(windAngle) - TARGET_ANGLE) <= 5;
  return [
    {
      minAngle: -30,
      maxAngle: 30,
      type: AdviceType.caution,
      state: inNoGo ? AdviceState.triggered : AdviceState.hinted,
    },
    {
      minAngle: 33,
      maxAngle: 43,
      type: AdviceType.advice,
      state: onTarget ? AdviceState.triggered : AdviceState.regular,
    },
    { minAngle: -43, maxAngle: -33, type: AdviceType.advice, state: AdviceState.hinted },
  ];
}

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);
    };
  }, []);

  // On starboard tack the wind comes over the starboard bow; the helmsman pinches and bears away around the target.
  const windAngle: number = TARGET_ANGLE + 7 * Math.sin(second / 4) + 2 * Math.sin(second * 1.3);
  const trueWindAngle: number = windAngle + 14;
  const heading: number = 318 + 5 * Math.sin(second / 4);
  const rateOfTurn: number = (5 / 4) * Math.cos(second / 4) * 60;
  const windKnots: number = 17 + 4 * Math.sin(second / 7);
  const adjusting: boolean = second % 12 >= 10;

  const windNeedle: WatchNeedle[] = [
    {
      angle: windAngle,
      fillColor: "var(--instrument-enhanced-secondary-color)",
      strokeColor: "var(--border-outline-color)",
    },
  ];
  const sailBand: WatchBarArea[] = [
    {
      startAngle: TARGET_ANGLE - 5,
      endAngle: TARGET_ANGLE + 5,
      fillColor: "var(--instrument-enhanced-tertiary-color)",
    },
  ];
  const vessel: WatchVessel[] = [
    { size: VesselImageSize.medium, vesselImage: VesselImage.genericTop, transform: "rotate(0deg)" },
  ];

  return (
    <div style={PANEL}>
      <figure style={FIGURE}>
        <div style={{ width: 230, height: 230 }}>
          <Watch
            watchCircleType={WatchCircleType.triple}
            priority={Priority.enhanced}
            starboardPortIndicator
            tickmarks={WIND_TICKMARKS}
            tickmarkStyle={TickmarkStyle.enhanced}
            advices={adviceFor(windAngle)}
            needles={windNeedle}
            barAreas={sailBand}
            angleSetpoint={TARGET_ANGLE}
            atAngleSetpoint={Math.abs(windAngle - TARGET_ANGLE) <= 2}
            angleSetpointAtZeroDeadband={0.5}
            vessels={vessel}
            windKnots={windKnots}
            windFromDirectionDeg={trueWindAngle}
            windColor="var(--instrument-enhanced-primary-color)"
            scaleWindIcon={0.9}
            current={2}
            currentFromDirectionDeg={200}
            currentColor="var(--instrument-regular-secondary-color)"
            crosshairEnabled
            rotType={RotType.dots}
            rotPosition={RotPosition.innerCircle}
            rateOfTurnDegreesPerMinute={rateOfTurn}
            rotDotAnimationFactor={12}
            padding={60}
          />
        </div>
        <figcaption style={CAPTION}>Apparent wind: needle, target band and setpoint, no-go zone, true wind</figcaption>
      </figure>

      <figure style={FIGURE}>
        <div style={{ width: 190, height: 190 }}>
          <Watch
            watchCircleType={WatchCircleType.double}
            rotation={-heading}
            northArrow
            northMarker
            showLabels
            tickmarksInside
            insideLabelsFlush
            crosshairEnabled
            crosshairCenterCutout
            angleSetpoint={315}
            newAngleSetpoint={adjusting ? 320 : undefined}
            touching={adjusting}
            animateSetpoint
            windKnots={windKnots}
            windFromDirectionDeg={(heading + trueWindAngle) % 360}
            windSymbolRadius={OUTER_RING_RADIUS + 30}
            current={2}
            currentFromDirectionDeg={(heading + 200) % 360}
            currentSymbolRadius={OUTER_RING_RADIUS + 8}
            rotType={RotType.bar}
            rotPosition={RotPosition.scale}
            rotStartAngle={0}
            rotEndAngle={rateOfTurn / 2}
            rotPortStarboard
            rotAtZeroDeadband={1}
            rotPriority={Priority.enhanced}
            rateOfTurnDegreesPerMinute={rateOfTurn}
          />
        </div>
        <figcaption style={CAPTION}>Compass rose, heading up, with the course being adjusted</figcaption>
      </figure>

      <figure style={FIGURE}>
        <div style={{ width: 220, height: 130 }}>
          <Watch
            watchCircleType={WatchCircleType.doubleThin}
            areas={CLOSE_HAULED_ARC}
            zoomToFitArc
            tickFadeAngle={10}
            tickmarks={ARC_TICKMARKS}
            endLabelsMaxMin
            advices={adviceFor(windAngle)}
            needles={windNeedle}
            barAreas={[
              {
                startAngle: 0,
                endAngle: windAngle,
                fillColor: "var(--instrument-regular-tertiary-color)",
              },
            ]}
            angleSetpoint={TARGET_ANGLE}
            setpointOverride
          />
        </div>
        <figcaption style={CAPTION}>Close-hauled arc, zoomed, ticks fading at the ends</figcaption>
      </figure>

      <figure style={FIGURE}>
        <div style={{ width: 150, height: 90 }}>
          <Watch
            state={InstrumentState.off}
            northArrow
            northArrowInside
            clipBottom={45}
            clipTop={0}
            clipLeft={0}
            clipRight={0}
            angleSetpoint={TARGET_ANGLE}
            setpointOverride
          />
        </div>
        <figcaption style={CAPTION}>Saloon repeater, off, the top half only</figcaption>
      </figure>
    </div>
  );
}

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

export const description: string = "The face with its single ring and nothing drawn on it.";

export default function SingleCircle(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Watch />
    </div>
  );
}

import { Watch, WatchCircleType } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "The face with all three rings.";

export default function TripleCircle(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Watch watchCircleType={WatchCircleType.triple} />
    </div>
  );
}