Main engine

import { AdviceType, InstrumentState, MainEngine, Priority, Readout } from "@bosunkit/instruments";
import type { LinearAdvice } from "@bosunkit/instruments";
import { useEffect, useState } from "react";
import type { CSSProperties, Dispatch, ReactElement, SetStateAction } from "react";

export const description: string =
  "Althea's Yanmar backing into a berth in Port de Sóller on a one-second feed: the lever goes ahead, through neutral to astern and a kick ahead into the caution range, with the thrust following its setpoint and the governor reporting when the speed is reached, beside the tender outboard off and starting.";

/** Feed steps for one maneuver. */
const CYCLE: number = 30;
/** Full engine speed of the Yanmar 4JH110, for the percent-to-rpm readout. */
const MAX_RPM: number = 3200;
/** How far the thrust moves toward its setpoint each second, in percentage points. */
const THRUST_RATE: number = 12;

const THRUST_ADVICE: LinearAdvice[] = [
  { min: 85, max: 100, type: AdviceType.caution, hinted: false },
  { min: -100, max: -70, type: AdviceType.caution, hinted: true },
  { min: 30, max: 60, type: AdviceType.advice, hinted: true },
];

const NAME_STYLE: CSSProperties = { fontSize: 12, color: "var(--element-neutral-color)" };

interface Lever {
  thrust: number;
  speed: number;
  touching: boolean;
  note: string;
}

/** The skipper's lever through the maneuver: the thrust and engine speed it asks for, and what is happening. */
function leverAt(step: number): Lever {
  if (step < 5) {
    return { thrust: 40, speed: 55, touching: false, note: "Slow ahead past the breakwater." };
  }
  if (step < 8) {
    return { thrust: 0, speed: 25, touching: true, note: "Lever to neutral." };
  }
  if (step < 12) {
    return { thrust: 0, speed: 25, touching: false, note: "Neutral, gliding toward the berth." };
  }
  if (step < 15) {
    return { thrust: -45, speed: 50, touching: true, note: "Lever to half astern." };
  }
  if (step < 22) {
    return { thrust: -45, speed: 50, touching: false, note: "Half astern, stern walking to port." };
  }
  if (step < 25) {
    return {
      thrust: 90,
      speed: 85,
      touching: false,
      note: "Kick ahead at 90 % to stop the stern: keep it short.",
    };
  }
  return { thrust: 0, speed: 25, touching: false, note: "Neutral, stern lines ashore." };
}

interface Engine {
  step: number;
  thrust: number;
  speed: number;
}

function towards(current: number, target: number): number {
  return current + Math.max(-THRUST_RATE, Math.min(THRUST_RATE, target - current));
}

export default function Showcase(): ReactElement {
  const [engine, setEngine]: [Engine, Dispatch<SetStateAction<Engine>>] = useState<Engine>({
    step: 0,
    thrust: 40,
    speed: 55,
  });

  useEffect((): (() => void) => {
    const timer: number = window.setInterval((): void => {
      setEngine((previous: Engine): Engine => {
        const step: number = (previous.step + 1) % CYCLE;
        const lever: Lever = leverAt(step);
        return {
          step,
          thrust: lever.touching ? previous.thrust : towards(previous.thrust, lever.thrust),
          speed: towards(previous.speed, lever.speed),
        };
      });
    }, 1000);
    return (): void => {
      window.clearInterval(timer);
    };
  }, []);

  const lever: Lever = leverAt(engine.step);
  const governorSettled: boolean = Math.abs(engine.speed - lever.speed) < 4;
  const direction: string = engine.thrust > 0 ? "ahead" : engine.thrust < 0 ? "astern" : "neutral";

  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 24, alignItems: "flex-start", justifyContent: "center" }}>
      <div style={{ display: "grid", gap: 8, justifyItems: "center", width: 280 }}>
        <span style={NAME_STYLE}>Main engine, Yanmar 4JH110</span>
        <div style={{ width: 260, height: 260 }}>
          <MainEngine
            thrust={engine.thrust}
            thrustSetpoint={lever.thrust}
            thrustTouching={lever.touching}
            autoAtThrustSetpointDeadband={3}
            thrustSetpointAtZeroDeadband={2}
            speed={engine.speed}
            speedSetpoint={lever.speed}
            speedTouching={lever.touching}
            autoAtSpeedSetpoint={false}
            atSpeedSetpoint={governorSettled}
            speedSetpointAtZeroDeadband={2}
            thrustAdvices={THRUST_ADVICE}
            priority={Priority.enhanced}
          />
        </div>
        <div style={{ display: "flex", gap: 20 }}>
          <Readout label={`Thrust, ${direction}`} value={Math.abs(engine.thrust)} unit="%" maxDigits={3} />
          <Readout label="Engine speed" value={(engine.speed / 100) * MAX_RPM} unit="rpm" maxDigits={4} />
        </div>
        <p style={{ ...NAME_STYLE, margin: 0, textAlign: "center" }}>{lever.note}</p>
      </div>
      <div style={{ display: "grid", gap: 16 }}>
        <div style={{ display: "grid", gap: 4, justifyItems: "center" }}>
          <span style={NAME_STYLE}>Tender outboard, off</span>
          <div style={{ width: 130, height: 130 }}>
            <MainEngine state={InstrumentState.off} thrust={0} speed={0} />
          </div>
        </div>
        <div style={{ display: "grid", gap: 4, justifyItems: "center" }}>
          <span style={NAME_STYLE}>Tender outboard, engine unit starting</span>
          <div style={{ width: 130, height: 130 }}>
            <MainEngine state={InstrumentState.loading} thrust={0} speed={0} />
          </div>
        </div>
      </div>
    </div>
  );
}

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

export const description: string = "Thrust at 65 percent ahead with a setpoint at 70, beside a speed column at zero.";

export default function Engine(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <MainEngine thrust={65} thrustSetpoint={70} />
    </div>
  );
}