import $ from "jquery";
import {
  EventPublisher,
  EventQueue,
  WebsocketEventPublisher,
  WebSocketEventQueue,
} from "./engine/events";
import { Game } from "./engine/game";
import { NetworkSystem } from "./engine/network";
import { RenderSystem } from "./engine/render";
import { InputSystem } from "./engine/input";
import { TrailingPositionSystem } from "./engine/trailing_position";
import { drainPoints, setDelay } from "laser-pen";

$(async () => {
  const client_id = await fetch("/assign", {
    credentials: "include",
  })
    .then((res) => res.json())
    .then(({ session }) => session);

  const ws = new WebSocket("/ws");
  await new Promise<void>((resolve) => {
    ws.onopen = () => resolve();
  });

  const queue: EventQueue = new WebSocketEventQueue(ws);
  const publisher: EventPublisher = new WebsocketEventPublisher(ws);
  const network_system = new NetworkSystem(queue, publisher);

  const gamecanvas = $("#gamecanvas").get(0)! as HTMLCanvasElement;
  const input_system = new InputSystem(publisher, gamecanvas);

  setDelay(500);
  const render_system = new RenderSystem(gamecanvas);

  const trailing_position = new TrailingPositionSystem(drainPoints);

  const systems = [
    network_system,
    trailing_position,
    input_system,
    render_system,
  ];

  const game = new Game(client_id, systems);
  ws.onclose = () => game.stop();

  game.start();
});