#Build a real-time action game

// The game's rules, shared by the server and the client. The client predicts your moves with
// the same `move()` the server applies, so the two agree unless an input is lost.

/** The server applies inputs and sends snapshots this often: 20 times a second. */
export const TICK_MS = 50;
/** One input step. The client samples the keys 60 times a second. */
export const STEP_MS = 1000 / 60;
/** Steps one input may carry: 200 ms, enough for the lowest adaptive send rate (5 a second). */
export const MAX_STEPS = 12;
/**
 * Steps the server allows each player per tick: a little above real time (3), so a late burst of
 * inputs catches up, up to `BURST` steps at once. Nobody moves much faster than real time.
 */
export const STEPS_PER_TICK = 4;
export const BURST = 24;

export const ARENA = { width: 640, height: 400 };
export const RADIUS = 12;
const SPEED = 0.24; // px per ms

export interface Player {
  x: number;
  y: number;
  color: string;
  /** Where the player aims, in radians. */
  angle?: number;
  bot?: boolean;
}

/** A direction held for `steps` steps. */
export interface Move {
  dx: -1 | 0 | 1;
  dy: -1 | 0 | 1;
  steps: number;
}

/** What the timeline keeps: every player, and which one is you. */
export interface World {
  you: string;
  players: Record<string, Player>;
}

const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));

export function move(player: Player, input: Move): Player {
  // Diagonals aren't faster.
  const distance = (SPEED * STEP_MS * input.steps) / (Math.hypot(input.dx, input.dy) || 1);
  return {
    ...player,
    x: clamp(player.x + input.dx * distance, RADIUS, ARENA.width - RADIUS),
    y: clamp(player.y + input.dy * distance, RADIUS, ARENA.height - RADIUS)
  };
}

const lerp = (a: number, b: number, t: number) => a + (b - a) * t;

/** Blend two snapshots. A player who just joined appears where they are instead of sliding in. */
export function lerpWorld(from: World, to: World, t: number): World {
  const players: Record<string, Player> = {};
  for (const [id, end] of Object.entries(to.players)) {
    const start = from.players[id] ?? end;
    players[id] = { ...end, x: lerp(start.x, end.x, t), y: lerp(start.y, end.y, t) };
  }
  return { you: to.you, players };
}

// The messages, shared by the server and the client.
import type { Move, Player } from './sim.ts';

export type ServerMessage =
  // Sent to each player every tick. `time` is the server's clock, and `ack` the last input
  // `seq` it applied from this player.
  | { type: 'snapshot'; time: number; ack: number; you: string; players: Record<string, Player> }
  | { type: 'pong'; id: number; time: number };

export type ClientMessage =
  | ({ type: 'input'; seq: number } & Move)
  | { type: 'aim'; angle: number }
  | { type: 'ping'; id: number };

/** Sent as plain text both ways, outside JSON, to keep the connection alive. */
export const HEARTBEAT = 'heartbeat';

const port = Number(process.env.PORT ?? 8788);

// A clock that never goes backward, for snapshots and pongs alike, so the client's latency
// estimate and its timeline agree.
const now = () => performance.timeOrigin + performance.now();

interface Client {
  socket: WebSocket;
  player: Player;
  /** Inputs received but not applied yet, in `seq` order. */
  inputs: ({ seq: number } & Move)[];
  /** The last `seq` received, to ignore repeats. */
  received: number;
  /** The last `seq` applied, sent back as `ack`. */
  ack: number;
  /** Steps this player may still move: refilled every tick, up to `BURST`. */
  tokens: number;
}

const server = new WebSocketServer({ port, path: '/ws' });

server.on('connection', socket => {
  const id = `p${++joined}`;
  const client: Client = {
    socket,
    player: spawn(joined),
    inputs: [],
    received: 0,
    ack: 0,
    tokens: BURST
  };
  clients.set(id, client);

  socket.on('message', raw => {
    const data = String(raw);
    // Answer the client's heartbeat so it knows the connection is alive.
    if (data === HEARTBEAT) return socket.send(HEARTBEAT);
    const message = parse(data);
    if (message?.type === 'ping') send(socket, { type: 'pong', id: message.id, time: now() });
    else if (message?.type === 'aim') client.player = { ...client.player, angle: message.angle };
    // Sequence numbers only go up; don't assume they start at 1 on a new connection.
    else if (message?.type === 'input' && message.seq > client.received) {
      client.received = message.seq;
      client.inputs.push(message);
    }
  });
  socket.on('close', () => clients.delete(id));
});

setInterval(() => {
  const time = now();
  for (const client of clients.values()) {
    // Apply inputs in order, with the same `move()` the client predicts with. A burst bigger
    // than the player's tokens waits for the next ticks, so nobody moves faster than real time.
    client.tokens = Math.min(BURST, client.tokens + STEPS_PER_TICK);
    while (client.inputs.length && client.inputs[0]!.steps <= client.tokens) {
      const input = client.inputs.shift()!;
      client.tokens -= input.steps;
      client.player = move(client.player, input);
      client.ack = input.seq;
    }
  }

  const players: Record<string, Player> = {};
  for (let i = 0; i < BOTS; i++) players[`bot${i + 1}`] = botAt(i, time);
  for (const [id, client] of clients) players[id] = client.player;
  for (const [id, client] of clients) {
    send(client.socket, { type: 'snapshot', time, ack: client.ack, you: id, players });
  }
}, TICK_MS);

/**
 * The network panel's faults. They're all off until you pick them; a real app would only use
 * this class in development.
 */
export const Chaos = createChaosWebSocket({ logger: console.warn });

function url() {
  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
  return `${protocol}//${location.host}/ws`;
}

export const game = createWebSocket<ServerMessage, ClientMessage>(url, {
  json: true,
  WebSocket: Chaos,
  // Snapshots arrive 20 times a second, so three quiet seconds after a ping mean a dead link.
  heartbeat: { interval: 4000, timeout: 3000, message: HEARTBEAT, pong: HEARTBEAT }
});

export const latency = createWebSocketLatency(game, {
  ping: id => ({ type: 'ping', id }),
  pong: message => (message.type === 'pong' ? { id: message.id, time: message.time } : undefined),
  interval: 1000
});

/**
 * Aim, streamed every frame, goes out at up to 30 a second, fewer when the send buffer fills up
 * or the round trip rises. With `settings.adaptive`, inputs follow the same rate.
 */
export const stream = createWebSocketSendRate(game, { latency, maxRate: 30 });

// How unevenly snapshots arrive: arrival time minus server time, over the last two seconds.
const spread: number[] = [];
const jitter = () => (spread.length ? Math.max(...spread) - Math.min(...spread) : TICK_MS);

export const timeline = createWebSocketTimeline(game, {
  snapshot: message =>
    message.type === 'snapshot'
      ? {
          time: message.time,
          ack: message.ack,
          state: { you: message.you, players: message.players }
        }
      : undefined,
  interpolate: lerpWorld,
  latency,
  // Auto: one snapshot interval plus the jitter measured below.
  delay: () => (settings.autoDelay ? TICK_MS + jitter() : settings.delay),
  input: {
    send: (input: Move, seq) => ({ type: 'input', seq, ...input }),
    predict: (world, input): World => {
      const me = world.players[world.you];
      return me ? { ...world, players: { ...world.players, [world.you]: move(me, input) } } : world;
    },
    // On a congested link, skip inputs rather than queue them behind each other.
    maxBuffered: 4096
  }
});

timeline.subscribe(() => {
  const latest = timeline.latest();
  if (!latest) return;
  spread.push(performance.now() - latest.time);
  if (spread.length > 40) spread.shift();
});

/**
 * Who's playing, for the HUD. Snapshots arrive 20 times a second but the roster rarely changes:
 * the reducer keeps the same array while it doesn't, and `batch: 'frame'` caps renders anyway.
 */
export const roster = createWebSocketState(game, {
  initialState: [] as RosterEntry[],
  reduce: (state, message) => {
    if (message.type !== 'snapshot') return state;
    const ids = Object.keys(message.players);
    const same =
      ids.length === state.length &&
      ids.every((id, i) => state[i]!.id === id && state[i]!.you === (id === message.you));
    if (same) return state;
    return ids.map(id => ({
      id,
      color: message.players[id]!.color,
      bot: !!message.players[id]!.bot,
      you: id === message.you
    }));
  },
  batch: 'frame'
});