Pantalla de victoria

src/jugando.ts

@@ -81,6 +81,11 @@ export function update(juego: Juego<State>, dt: number) {
             juego.state.seeds = juego.state.seeds.filter(s => s.velocity.x !== seed.velocity.x)
     }
 
+    if (juego.state.trees.length >= TREES_TO_WIN) {
+        (juego as Juego<any>).state = { current: "win" }
+        return
+    }
+
     while (juego.state.enemies.length < ENEMIES_NUM) {
         const x = Math.random() * MAP_SIZE + MAP_MIN
         // Don't spawn enemies too close

src/main.ts

@@ -2,9 +2,22 @@ import './style.css'
 
 import * as welcome from "./welcome"
 import * as jugando from "./jugando"
+import * as win from "./win"
 import { Assets, loadAssets } from './assets'
 import { loadSprite, Sprite } from './sprite'
 
+export type State = welcome.State | jugando.State | win.State
+
+export type Juego<T extends State> = {
+    canvas: HTMLCanvasElement
+    ctx: CanvasRenderingContext2D
+    assets: Assets
+    sprites: { [key in "jugadorx" | "larreta" | "semilla" | "arbol"]: Sprite }
+    mouse: { x: number; y: number, down: boolean }
+    keyboard: { keys: { [key: string]: boolean } }
+    state: T
+}
+
 function update(juego: Juego<any>, dt: number) {
     switch (juego.state.current) {
         case "welcome":
@@ -13,6 +26,9 @@ function update(juego: Juego<any>, dt: number) {
         case "jugando":
             jugando.update(juego, dt)
             break
+        case "win":
+            win.update(juego, dt)
+            break
     }
 }
 
@@ -27,6 +43,9 @@ function draw(juego: Juego<any>, timestamp: number) {
         case "jugando":
             jugando.draw(juego, timestamp)
             break
+        case "win":
+            win.draw(juego, timestamp)
+            break
     }
 }
 
@@ -35,18 +54,6 @@ function resizeCanvas(canvas: HTMLCanvasElement) {
     canvas.height = canvas.clientHeight
 }
 
-export type State = welcome.State | jugando.State
-
-export type Juego<T extends State> = {
-    canvas: HTMLCanvasElement
-    ctx: CanvasRenderingContext2D
-    assets: Assets
-    sprites: { [key in "jugadorx" | "larreta" | "semilla" | "arbol"]: Sprite }
-    mouse: { x: number; y: number, down: boolean }
-    keyboard: { keys: { [key: string]: boolean } }
-    state: T
-}
-
 async function initJuego() {
     const canvas = document.querySelector<HTMLCanvasElement>("#juego")!
     const ctx = canvas.getContext("2d")!

src/win.ts

@@ -0,0 +1,15 @@
+import { Juego } from './main'
+
+export type State = {
+	current: "win"
+}
+
+export function update(juego: Juego<State>, dt: number) {
+}
+
+export function draw(juego: Juego<State>, timestamp: number) {
+	juego.ctx.font = `bold 3rem sans-serif`
+	const winText = '¡Salvaste la costanera!'
+	const winTextMeasure = juego.ctx.measureText(winText)
+	juego.ctx.fillText(winText, juego.canvas.width / 2 - winTextMeasure.width / 2, 100)
+}