salva-la-costanera/src/welcome.ts

import { Box, isTouching, posInBox } from "./utils";
import { createJugandoState, drawBackground } from "./jugando";
import { Juego, State as AllState } from "./main";
import { Sprite } from "./sprite";

export type State = {
  current: "welcome";
  step: 0 | 1 | 2;
  // Hack because we can't detect when it is a mousedown/mouseup
  buttonCooldown: number;
};

export function createState(): State {
  return {
    current: "welcome",
    step: 0,
    buttonCooldown: 0,
  };
}

function button(juego: Juego<State>): { box: Box; sprite: Sprite } {
  const sprite =
    juego.state.step === 2
      ? juego.sprites.botonComenzar
      : juego.sprites.botonSiguiente;
  const width = sprite.getWidth(juego);
  const height = sprite.getHeight(juego);
  return {
    box: {
      x: juego.canvas.width - width - 30,
      y: juego.canvas.height - height - 30,
      width,
      height,
    },
    sprite,
  };
}

export function update(juego: Juego<State>, dt: number) {
  const { box } = button(juego);
  juego.state.buttonCooldown -= dt;
  if (
    ((juego.mouse.down && posInBox(box, juego.mouse)) ||
      isTouching(juego, box)) &&
    juego.state.buttonCooldown < 0
  ) {
    juego.state.buttonCooldown = 1000;
    if (juego.state.step === 2) {
      (juego as Juego<AllState>).state = createJugandoState(juego);
      return;
    } else {
      juego.state.step++;
      return;
    }
  }
}

export function draw(juego: Juego<State>, timestamp: number) {
  drawBackground(juego, 0, juego.canvas.height, juego.assets.cielo);
  drawBackground(juego, 0, juego.canvas.height, juego.assets.parquePublicoRio);

  juego.sprites.logoFPGFDTBlanco.draw(
    juego,
    30,
    juego.canvas.height - 30 - juego.sprites.logoFPGFDTBlanco.getHeight(juego)
  );

  juego.sprites.logoSalvaLaCostaneraCostado.draw(juego, 30, 30);

  const instruccionSprite =
    juego.state.step === 0
      ? juego.sprites.instrucciones1
      : juego.state.step === 1
      ? juego.sprites.instrucciones2
      : juego.state.step === 2
      ? juego.sprites.instrucciones3
      : null;
  if (!instruccionSprite) throw new Error("AAAAAAAAAAAAAAAAAAAAA");
  instruccionSprite.draw(
    juego,
    juego.canvas.width - instruccionSprite.getWidth(juego) - 30,
    juego.canvas.height * 0.1
  );

  juego.sprites.jugadorxPresentando.draw(
    juego,
    juego.canvas.width * 0.5 -
      juego.sprites.jugadorxPresentando.getWidth(juego),
    juego.canvas.height * 0.1
  );

  const { box, sprite } = button(juego);
  sprite.draw(juego, box.x, box.y);
}