Usar assets en la parte del inicio

src/assets.ts

@@ -1,21 +1,29 @@
-import botonJugarImg from "./assets/boton_jugar.png";
-import flechaImg from "./assets/flecha.png";
-import larretaImg from "./assets/Larreta.png";
-import millonarioMaloPng from "./assets/Millonario Malo.png";
-import cieloRioCalleImg from "./assets/CieloRioCalle.png";
-import cieloImg from "./assets/Cielo.png";
-import rioImg from "./assets/Rio.png";
-import parquePublicoRioImg from "./assets/Parque publico con rio.png";
-import parquePublicoImg from "./assets/Parque publico.png";
-import edificiosImg from "./assets/Edificios.png";
-import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png";
-import baldosaImg from "./assets/Baldosa.png";
-import semillaImg from "./assets/Semilla.png";
-import arbol1Img from "./assets/Árbol 1.png";
-import arbol2Img from "./assets/Árbol 2.png";
-import ciudadanx1Img from "./assets/Firma 1.png";
-import ciudadanx2Img from "./assets/Firma 2.png";
-import ciudadanx3Img from "./assets/Firma 3.png";
+import botonComenzar from "./assets/Comenzar.png";
+import botonSiguiente from "./assets/Siguiente.png";
+import logoFPGFDTBlanco from "./assets/LogoFPG-FDT-blanco-07.png";
+import logoSalvaLaCostanera from "./assets/SalvaCostanera.png";
+import logoSalvaLaCostaneraCostado from "./assets/Salva2.png";
+import instrucciones1 from "./assets/Instrucciones 1.png";
+import instrucciones2 from "./assets/Instrucciones 2.png";
+import instrucciones3 from "./assets/Instrucciones 3.png";
+import flecha from "./assets/flecha.png";
+import larreta from "./assets/Larreta.png";
+import millonarioMalo from "./assets/Millonario Malo.png";
+import cieloRioCalle from "./assets/CieloRioCalle.png";
+import cielo from "./assets/Cielo.png";
+import rio from "./assets/Rio.png";
+import parquePublicoRio from "./assets/Parque publico con rio.png";
+import parquePublico from "./assets/Parque publico.png";
+import edificios from "./assets/Edificios.png";
+import jugadorx from "./assets/ProtagonistaCorriendo_1.png";
+import jugadorxPresentando from "./assets/Personaje 1.png";
+import baldosa from "./assets/Baldosa.png";
+import semilla from "./assets/Semilla.png";
+import arbol1 from "./assets/Árbol 1.png";
+import arbol2 from "./assets/Árbol 2.png";
+import ciudadanx1 from "./assets/Firma 1.png";
+import ciudadanx2 from "./assets/Firma 2.png";
+import ciudadanx3 from "./assets/Firma 3.png";
 
 function loadImage(url: string): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
@@ -27,24 +35,32 @@ function loadImage(url: string): Promise<HTMLImageElement> {
 }
 
 export const assetUrls = {
-  botonJugar: botonJugarImg,
-  flecha: flechaImg,
-  larreta: larretaImg,
-  millonarioMalo: millonarioMaloPng,
-  cieloRioCalle: cieloRioCalleImg,
-  cielo: cieloImg,
-  rio: rioImg,
-  parquePublicoRio: parquePublicoRioImg,
-  parquePublico: parquePublicoImg,
-  edificios: edificiosImg,
-  jugadorx: jugadorxImg,
-  baldosa: baldosaImg,
-  semilla: semillaImg,
-  arbol1: arbol1Img,
-  arbol2: arbol2Img,
-  ciudadanx1: ciudadanx1Img,
-  ciudadanx2: ciudadanx2Img,
-  ciudadanx3: ciudadanx3Img,
+  botonComenzar,
+  botonSiguiente,
+  logoFPGFDTBlanco,
+  logoSalvaLaCostanera,
+  logoSalvaLaCostaneraCostado,
+  instrucciones1,
+  instrucciones2,
+  instrucciones3,
+  flecha,
+  larreta,
+  millonarioMalo,
+  cieloRioCalle,
+  cielo,
+  rio,
+  parquePublicoRio,
+  parquePublico,
+  edificios,
+  jugadorx,
+  jugadorxPresentando,
+  baldosa,
+  semilla,
+  arbol1,
+  arbol2,
+  ciudadanx1,
+  ciudadanx2,
+  ciudadanx3,
 };
 export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement };
 

src/jugando.ts

@@ -280,11 +280,12 @@ function getFloorY(juego: Juego<State>): number {
   return (juego.canvas.height * 65) / 96;
 }
 
-function drawBackground(
-  juego: Juego<State>,
+export function drawBackground(
+  juego: Juego<AllState>,
   y: number,
   height: number,
   img: HTMLImageElement,
+  offset: number = 0,
   sourceBox?: Box,
   opacity?: number
 ) {
@@ -301,7 +302,7 @@ function drawBackground(
         sourceBox.y,
         sourceBox.width,
         sourceBox.height,
-        i * (width - (opacity === undefined ? 1 : 0)) + juego.state.view.x,
+        i * (width - (opacity === undefined ? 1 : 0)) + offset,
         y,
         width,
         height
@@ -309,7 +310,7 @@ function drawBackground(
     } else {
       juego.ctx.drawImage(
         img,
-        i * (width - (opacity === undefined ? 1 : 0)) + juego.state.view.x,
+        i * (width - (opacity === undefined ? 1 : 0)) + offset,
         y,
         width,
         height
@@ -322,19 +323,33 @@ function drawBackground(
 }
 
 export function draw(juego: Juego<State>, timestamp: number) {
-  drawBackground(juego, 0, juego.canvas.height, juego.assets.cieloRioCalle);
-  drawBackground(juego, 0, getFloorY(juego), juego.assets.edificios, {
+  drawBackground(
+    juego,
+    0,
+    juego.canvas.height,
+    juego.assets.cieloRioCalle,
+    -juego.state.pos.x
+  );
+  drawBackground(
+    juego,
+    0,
+    getFloorY(juego),
+    juego.assets.edificios,
+    -juego.state.pos.x,
+    {
       x: 0,
       y: 0,
       width: 89,
       height: 48,
-  });
+    }
+  );
 
   drawBackground(
     juego,
     0,
     juego.canvas.height,
     juego.assets.cielo,
+    -juego.state.pos.x,
     undefined,
     juego.state.signatures / SIGNATURES_TO_WIN
   );
@@ -343,6 +358,7 @@ export function draw(juego: Juego<State>, timestamp: number) {
     0,
     juego.canvas.height,
     juego.assets.parquePublicoRio,
+    -juego.state.pos.x,
     undefined,
     juego.state.signatures / SIGNATURES_TO_WIN
   );

src/logo.ts

@@ -0,0 +1,40 @@
+import { drawBackground } from "./jugando";
+import { Juego, State as AllState } from "./main";
+import * as welcome from "./welcome";
+
+export type State = {
+  current: "logo";
+  timeout: number;
+};
+
+export function createState(): State {
+  return {
+    current: "logo",
+    timeout: 5 * 1000,
+  };
+}
+
+export function update(juego: Juego<State>, dt: number) {
+  juego.state.timeout -= dt;
+  if (juego.state.timeout < 0) {
+    (juego as Juego<AllState>).state = welcome.createState();
+  }
+}
+
+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.logoSalvaLaCostaneraGrande.draw(
+    juego,
+    juego.canvas.width / 2 -
+      juego.sprites.logoSalvaLaCostaneraGrande.getWidth(juego) / 2,
+    juego.canvas.height * 0.1
+  );
+
+  juego.sprites.logoFPGFDTBlanco.draw(
+    juego,
+    juego.canvas.width / 2 - juego.sprites.logoFPGFDTBlanco.getWidth(juego) / 2,
+    juego.canvas.height - 30 - juego.sprites.logoFPGFDTBlanco.getHeight(juego)
+  );
+}

src/lose.ts

@@ -1,5 +1,6 @@
 import { Juego, State as AllState } from "./main";
 import { drawText } from "./utils";
+import * as welcome from "./welcome";
 
 export type State = {
   current: "lose";
@@ -18,7 +19,7 @@ export function createState(juego: Juego<any>): State {
 export function update(juego: Juego<State>, dt: number) {
   juego.state.timeout -= dt;
   if (juego.state.timeout < 0) {
-    (juego as Juego<AllState>).state = { current: "welcome" };
+    (juego as Juego<AllState>).state = welcome.createState();
     return;
   }
 }

src/main.ts

@@ -1,14 +1,20 @@
 import "./style.css";
 
+import * as logo from "./logo";
 import * as welcome from "./welcome";
 import * as jugando from "./jugando";
 import * as win from "./win";
 import * as lose from "./lose";
 import { Assets, loadAssets } from "./assets";
 import { loadSprite, Sprite } from "./sprite";
-import { drawText, isMobile } from "./utils";
+import { drawText } from "./utils";
 
-export type State = welcome.State | jugando.State | win.State | lose.State;
+export type State =
+  | logo.State
+  | welcome.State
+  | jugando.State
+  | win.State
+  | lose.State;
 
 export type Juego<T extends State> = {
   canvas: HTMLCanvasElement;
@@ -16,8 +22,17 @@ export type Juego<T extends State> = {
   assets: Assets;
   sprites: {
     [key in
+      | "botonSiguiente"
+      | "botonComenzar"
+      | "logoFPGFDTBlanco"
+      | "logoSalvaLaCostaneraGrande"
+      | "logoSalvaLaCostaneraCostado"
+      | "instrucciones1"
+      | "instrucciones2"
+      | "instrucciones3"
       | "flecha"
       | "jugadorx"
+      | "jugadorxPresentando"
       | "baldosa"
       | "larreta"
       | "millonarioMalo"
@@ -41,6 +56,9 @@ function needsRotation(juego: Juego<any>): boolean {
 function update(juego: Juego<any>, dt: number) {
   if (needsRotation(juego)) return;
   switch (juego.state.current) {
+    case "logo":
+      logo.update(juego, dt);
+      break;
     case "welcome":
       welcome.update(juego, dt);
       break;
@@ -76,6 +94,9 @@ function draw(juego: Juego<any>, timestamp: number) {
   }
 
   switch (juego.state.current) {
+    case "logo":
+      logo.draw(juego, timestamp);
+      break;
     case "welcome":
       welcome.draw(juego, timestamp);
       break;
@@ -113,75 +134,104 @@ async function initJuego() {
   const assets = await loadAssets();
 
   const sprites = {
-    flecha: loadSprite(
-      assets.flecha,
-      11,
-      9,
-      (juego) => juego.canvas.height / 6
+    botonComenzar: loadSprite(assets.botonComenzar, {
+      height: (juego) => juego.canvas.height / 8,
+    }),
+    botonSiguiente: loadSprite(assets.botonSiguiente, {
+      height: (juego) => juego.canvas.height / 8,
+    }),
+    logoFPGFDTBlanco: loadSprite(assets.logoFPGFDTBlanco, {
+      height: (juego) => juego.canvas.height / 6,
+    }),
+    logoSalvaLaCostaneraGrande: loadSprite(assets.logoSalvaLaCostanera, {
+      height: (juego) => juego.canvas.height * 0.45,
+    }),
+    logoSalvaLaCostaneraCostado: loadSprite(
+      assets.logoSalvaLaCostaneraCostado,
+      { height: (juego) => juego.canvas.height / 4 }
     ),
+    instrucciones1: loadSprite(assets.instrucciones1, {
+      width: (juego) => juego.canvas.width * 0.6,
+    }),
+    instrucciones2: loadSprite(assets.instrucciones2, {
+      width: (juego) => juego.canvas.width * 0.6,
+    }),
+    instrucciones3: loadSprite(assets.instrucciones3, {
+      width: (juego) => juego.canvas.width * 0.6,
+    }),
+    flecha: loadSprite(assets.flecha, {
+      height: (juego) => juego.canvas.height / 6,
+    }),
     jugadorx: loadSprite(
       assets.jugadorx,
-      65,
-      94,
-      (juego) => juego.canvas.height / 4
-    ),
-    baldosa: loadSprite(
-      assets.baldosa,
-      72,
-      72,
-      (juego) => juego.canvas.height * 0.8
+      { height: (juego) => juego.canvas.height / 4 },
+      {
+        width: 65,
+        height: 94,
+      }
     ),
+    jugadorxPresentando: loadSprite(assets.jugadorxPresentando, {
+      height: (juego) => juego.canvas.height * 0.8,
+    }),
+    baldosa: loadSprite(assets.baldosa, {
+      height: (juego) => juego.canvas.height * 0.8,
+    }),
     larreta: loadSprite(
       assets.larreta,
-      83,
-      131,
-      (juego) => juego.canvas.height / 4
+      { height: (juego) => juego.canvas.height / 4 },
+      {
+        width: 83,
+        height: 131,
+      }
     ),
     millonarioMalo: loadSprite(
       assets.millonarioMalo,
-      50,
-      71,
-      (juego) => juego.canvas.height / 4
-    ),
-    semilla: loadSprite(
-      assets.semilla,
-      72,
-      73,
-      (juego) => juego.canvas.height / 8
+      { height: (juego) => juego.canvas.height / 4 },
+      { width: 50, height: 71 }
     ),
+    semilla: loadSprite(assets.semilla, {
+      height: (juego) => juego.canvas.height / 8,
+    }),
     arbol1: loadSprite(
       assets.arbol1,
-      72,
-      68,
-      (juego) => juego.canvas.height / 3
+      { height: (juego) => juego.canvas.height / 3 },
+      {
+        width: 72,
+        height: 68,
+      }
     ),
     arbol2: loadSprite(
       assets.arbol2,
-      72,
-      56,
-      (juego) => juego.canvas.height / 4
+      { height: (juego) => juego.canvas.height / 4 },
+      {
+        width: 72,
+        height: 56,
+      }
     ),
     ciudadanx1: loadSprite(
       assets.ciudadanx1,
-      45,
-      88,
-      (juego) => juego.canvas.height / 4
+      {
+        height: (juego) => juego.canvas.height / 4,
+      },
+      { width: 45, height: 88 }
     ),
     ciudadanx2: loadSprite(
       assets.ciudadanx2,
-      45,
-      88,
-      (juego) => juego.canvas.height / 4
+      {
+        height: (juego) => juego.canvas.height / 4,
+      },
+      { width: 45, height: 88 }
     ),
     ciudadanx3: loadSprite(
       assets.ciudadanx3,
-      45,
-      88,
-      (juego) => juego.canvas.height / 4
+      {
+        height: (juego) => juego.canvas.height / 4,
+      },
+      { width: 45, height: 86 }
     ),
   };
 
-  let juego: Juego<welcome.State> = {
+  let juego: Juego<logo.State> = {
     canvas,
     ctx,
     assets,
@@ -189,9 +239,7 @@ async function initJuego() {
     mouse: { x: 0, y: 0, down: false },
     touches: null,
     keyboard: { keys: {} },
-    state: {
-      current: "welcome",
-    },
+    state: logo.createState(),
   };
   (window as any).juego = juego;
   juego.ctx.imageSmoothingEnabled = false;

src/sprite.ts

@@ -17,13 +17,15 @@ export type Sprite = {
 // Sprites are image assets that have a grid of tiles to animate
 export function loadSprite(
   img: HTMLImageElement,
-  // The size of each tile
-  width: number,
-  height: number,
   // Calculates the size of the sprite when rendering
-  getHeight: (juego: Juego<any>) => number
+  size:
+    | { width: (juego: Juego<any>) => number }
+    | { height: (juego: Juego<any>) => number },
+  tileSize?: { width: number; height: number }
 ): Sprite {
-  const aspect = width / height;
+  const width = tileSize ? tileSize.width : img.width;
+  const height = tileSize ? tileSize.height : img.height;
+
   const rowSize = Math.floor(img.width / width);
   if (img.width / width !== rowSize) {
     console.warn(
@@ -32,7 +34,15 @@ export function loadSprite(
   }
 
   function getWidth(juego: Juego<any>) {
-    return getHeight(juego) * aspect;
+    return "width" in size
+      ? size.width(juego)
+      : (size.height(juego) * width) / height;
+  }
+
+  function getHeight(juego: Juego<any>) {
+    return "height" in size
+      ? size.height(juego)
+      : (size.width(juego) * height) / width;
   }
 
   function draw(

src/welcome.ts

@@ -1,41 +1,94 @@
-import { isTouching, posInBox } from "./utils";
-import { createJugandoState } from "./jugando";
-import { Juego } from "./main";
+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;
 };
 
-function startButton(juego: Juego<State>) {
-  const [width, height] = [
-    juego.assets.botonJugar.width / 4,
-    juego.assets.botonJugar.height / 4,
-  ];
+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 btn = startButton(juego);
+  const { box } = button(juego);
+  juego.state.buttonCooldown -= dt;
   if (
-    (juego.mouse.down && posInBox(btn, juego.mouse)) ||
-    isTouching(juego, btn)
+    ((juego.mouse.down && posInBox(box, juego.mouse)) ||
+      isTouching(juego, box)) &&
+    juego.state.buttonCooldown < 0
   ) {
-    (juego as Juego<any>).state = createJugandoState(juego);
+    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) {
-  const btn = startButton(juego);
-  juego.ctx.drawImage(
-    juego.assets.botonJugar,
-    btn.x,
-    btn.y,
-    btn.width,
-    btn.height
+  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 * 0.4,
+    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);
 }