Rate of turn

import { Priority, RateOfTurn, RotPosition, RotType, WatchCircleType } from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Tacking up the channel on a live feed: the turn rate swings to starboard, settles, and swings to port, shown as " +
  "a track bar colored by side with a readout, as a bar arc on the scale in the enhanced palette, and as circling " +
  "dots.";

const PANEL: CSSProperties = {
  display: "flex",
  flexWrap: "wrap",
  alignItems: "flex-end",
  justifyContent: "center",
  gap: 28,
  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 };

/** Bar arc, in degrees, that a full 60 degrees per minute fills on the scale view. */
const BAR_ARC_AT_FULL_RATE: number = 45;

/**
 * Rate of turn in degrees per minute at a time in seconds: a tack to starboard, a steady leg, a tack to port and a
 * steady leg, every forty seconds.
 */
function rateAt(time: number): number {
  const phase: number = time % 40;
  if (phase < 8) {
    return 48 * Math.sin((Math.PI * phase) / 8);
  }
  if (phase >= 20 && phase < 28) {
    return -42 * Math.sin((Math.PI * (phase - 20)) / 8);
  }
  return 1.5 * Math.sin(time * 1.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 rate: number = rateAt(second);

  return (
    <div style={PANEL}>
      <figure style={FIGURE}>
        <div style={{ width: 240, height: 240 }}>
          <RateOfTurn
            rateOfTurnDegreesPerMinute={rate}
            hasTrackBar
            rotMaxValue={60}
            rotArcExtent={60}
            rotPortStarboard
            rotType={RotType.dots}
            rotPosition={RotPosition.innerCircle}
            watchCircleType={WatchCircleType.triple}
            hasReadout
            label="ROT"
            unit="°/min"
            fractionDigits={1}
          />
        </div>
        <figcaption style={CAPTION}>Track bar by side, inner dots and the readout</figcaption>
      </figure>

      <figure style={FIGURE}>
        <div style={{ width: 170, height: 170 }}>
          <RateOfTurn
            rateOfTurnDegreesPerMinute={rate}
            rotType={RotType.bar}
            rotPosition={RotPosition.scale}
            barStartAngle={0}
            barEndAngle={(rate / 60) * BAR_ARC_AT_FULL_RATE}
            rotAtZeroDeadband={1}
            priority={Priority.enhanced}
            watchCircleType={WatchCircleType.double}
          />
        </div>
        <figcaption style={CAPTION}>Bar arc on the scale, enhanced, zero below 1 degree</figcaption>
      </figure>

      <figure style={FIGURE}>
        <div style={{ width: 130, height: 130 }}>
          <RateOfTurn rateOfTurnDegreesPerMinute={rate} rotDotAnimationFactor={30} rotPortStarboard />
        </div>
        <figcaption style={CAPTION}>Dots by side, spun faster</figcaption>
      </figure>
    </div>
  );
}

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

export const description: string = "Dots that circle starboard at a speed set by a turn of 15 degrees per minute.";

export default function RateOfTurnExample(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <RateOfTurn rateOfTurnDegreesPerMinute={15} />
    </div>
  );
}

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

export const description: string = "A turn of 24 degrees per minute to port as a track bar in the port color.";

export default function PortBar(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <RateOfTurn
        rateOfTurnDegreesPerMinute={-24}
        hasTrackBar
        rotPortStarboard
        watchCircleType={WatchCircleType.double}
      />
    </div>
  );
}

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

export const description: string =
  "A turn of 36 degrees per minute to starboard as a track bar in the enhanced palette.";

export default function EnhancedBar(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <RateOfTurn
        rateOfTurnDegreesPerMinute={36}
        hasTrackBar
        priority={Priority.enhanced}
        watchCircleType={WatchCircleType.double}
      />
    </div>
  );
}

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

export const description: string = "The turn as a number in the center, labeled ROT, beside the circling dots.";

export default function WithReadout(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <RateOfTurn rateOfTurnDegreesPerMinute={15} hasReadout />
    </div>
  );
}