Usar assets para cuando perdes y ganas

src/assets.ts

@@ -6,6 +6,8 @@ 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 placaPerdiste from "./assets/Perdiste.png";
+import placaFelicitaciones from "./assets/Felicitaciones.png";
 import flecha from "./assets/flecha.png";
 import larreta from "./assets/Larreta.png";
 import millonarioMalo from "./assets/Millonario Malo.png";
@@ -43,6 +45,8 @@ export const assetUrls = {
   instrucciones1,
   instrucciones2,
   instrucciones3,
+  placaPerdiste,
+  placaFelicitaciones,
   flecha,
   larreta,
   millonarioMalo,

src/jugando.ts

@@ -1,4 +1,3 @@
-import { createState } from "./lose";
 import { Juego, State as AllState } from "./main";
 import { Sprite } from "./sprite";
 import {
@@ -24,6 +23,7 @@ type Citizen = { x: number; sprite: Sprite };
 
 export type State = {
   current: "jugando";
+  has: "lost" | "won" | null;
   pos: { x: number };
   view: { x: number };
   side: "left" | "right";
@@ -50,6 +50,7 @@ export function createJugandoState(juego: Juego<any>): State {
   }
   return {
     current: "jugando",
+    has: null,
     pos: { x: MAP_MIN + 100 },
     view: { x: 0 },
     side: "right",
@@ -91,9 +92,11 @@ function touchControls(juego: Juego<State>): {
 }
 
 export function update(juego: Juego<State>, dt: number) {
+  if (juego.state.has) return;
+
   juego.state.time -= dt;
   if (juego.state.time < 0) {
-    (juego as Juego<AllState>).state = createState(juego);
+    juego.state.has = "lost";
     return;
   }
 
@@ -167,7 +170,7 @@ export function update(juego: Juego<State>, dt: number) {
   }
 
   if (juego.state.signatures >= SIGNATURES_TO_WIN) {
-    (juego as Juego<any>).state = { current: "win" };
+    juego.state.has = "won";
     return;
   }
 
@@ -369,7 +372,7 @@ export function draw(juego: Juego<State>, timestamp: number) {
   drawJugadorx(juego);
   drawSeeds(juego);
 
-  if (isMobile(juego)) {
+  if (isMobile(juego) && !juego.state.has) {
     const { left, right } = touchControls(juego);
 
     juego.ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
@@ -424,4 +427,22 @@ export function draw(juego: Juego<State>, timestamp: number) {
       { align: "center", maxWidth: juego.canvas.width }
     );
   }
+
+  if (juego.state.has) {
+    if (juego.state.has === "lost") {
+      const width = juego.sprites.placaPerdiste.getWidth(juego);
+      juego.sprites.placaPerdiste.draw(
+        juego,
+        juego.canvas.width / 2 - width / 2,
+        juego.canvas.height * 0.1
+      );
+    } else if (juego.state.has === "won") {
+      const width = juego.sprites.placaFelicitaciones.getWidth(juego);
+      juego.sprites.placaFelicitaciones.draw(
+        juego,
+        juego.canvas.width / 2 - width / 2,
+        juego.canvas.height * 0.1
+      );
+    }
+  }
 }

src/lose.ts

@@ -1,44 +0,0 @@
-import { Juego, State as AllState } from "./main";
-import { drawText } from "./utils";
-import * as welcome from "./welcome";
-
-export type State = {
-  current: "lose";
-  timeout: number;
-};
-
-const TIMEOUT = 10 * 1000;
-
-export function createState(juego: Juego<any>): State {
-  return {
-    current: "lose",
-    timeout: TIMEOUT,
-  };
-}
-
-export function update(juego: Juego<State>, dt: number) {
-  juego.state.timeout -= dt;
-  if (juego.state.timeout < 0) {
-    (juego as Juego<AllState>).state = welcome.createState();
-    return;
-  }
-}
-
-export function draw(juego: Juego<State>, timestamp: number) {
-  drawText(
-    juego,
-    "¡Te convirtieron en baldosa!",
-    { x: juego.canvas.width / 2, y: 100 },
-    { bold: true, size: 3, align: "center" }
-  );
-
-  const width = juego.sprites.baldosa.getWidth(juego);
-  juego.sprites.baldosa.draw(juego, juego.canvas.width / 2 - width / 2, 100);
-
-  juego.ctx.fillRect(
-    0,
-    juego.canvas.height - 30,
-    juego.canvas.width * (juego.state.timeout / TIMEOUT),
-    30
-  );
-}

src/main.ts

@@ -3,18 +3,11 @@ 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 } from "./utils";
 
-export type State =
-  | logo.State
-  | welcome.State
-  | jugando.State
-  | win.State
-  | lose.State;
+export type State = logo.State | welcome.State | jugando.State;
 
 export type Juego<T extends State> = {
   canvas: HTMLCanvasElement;
@@ -30,6 +23,8 @@ export type Juego<T extends State> = {
       | "instrucciones1"
       | "instrucciones2"
       | "instrucciones3"
+      | "placaPerdiste"
+      | "placaFelicitaciones"
       | "flecha"
       | "jugadorx"
       | "jugadorxPresentando"
@@ -65,12 +60,6 @@ function update(juego: Juego<any>, dt: number) {
     case "jugando":
       jugando.update(juego, dt);
       break;
-    case "win":
-      win.update(juego, dt);
-      break;
-    case "lose":
-      lose.update(juego, dt);
-      break;
   }
 }
 
@@ -103,12 +92,6 @@ function draw(juego: Juego<any>, timestamp: number) {
     case "jugando":
       jugando.draw(juego, timestamp);
       break;
-    case "win":
-      win.draw(juego, timestamp);
-      break;
-    case "lose":
-      lose.draw(juego, timestamp);
-      break;
   }
 }
 
@@ -159,6 +142,12 @@ async function initJuego() {
     instrucciones3: loadSprite(assets.instrucciones3, {
       width: (juego) => juego.canvas.width * 0.6,
     }),
+    placaPerdiste: loadSprite(assets.placaPerdiste, {
+      height: (juego) => juego.canvas.height * 0.8,
+    }),
+    placaFelicitaciones: loadSprite(assets.placaFelicitaciones, {
+      height: (juego) => juego.canvas.height * 0.8,
+    }),
     flecha: loadSprite(assets.flecha, {
       height: (juego) => juego.canvas.height / 6,
     }),

src/win.ts

@@ -1,17 +0,0 @@
-import { Juego } from "./main";
-import { drawText } from "./utils";
-
-export type State = {
-  current: "win";
-};
-
-export function update(juego: Juego<State>, dt: number) {}
-
-export function draw(juego: Juego<State>, timestamp: number) {
-  drawText(
-    juego,
-    "¡Salvaste la costanera!",
-    { x: juego.canvas.width / 2, y: 100 },
-    { bold: true, size: 3, align: "center" }
-  );
-}