Volver a la pantalla de inicio después de perder

src/jugando.ts

@@ -1,4 +1,5 @@
-import { Juego } from "./main";
+import { createState } from "./lose";
+import { Juego, State as AllState } from "./main";
 import { Sprite } from "./sprite";
 import {
   Box,
@@ -93,7 +94,7 @@ function touchControls(juego: Juego<State>): {
 export function update(juego: Juego<State>, dt: number) {
   juego.state.time -= dt;
   if (juego.state.time < 0) {
-    (juego as Juego<any>).state = { current: "lose" };
+    (juego as Juego<AllState>).state = createState(juego);
     return;
   }
 

src/lose.ts

@@ -1,11 +1,27 @@
-import { Juego } from "./main";
+import { Juego, State as AllState } from "./main";
 import { drawText } from "./utils";
 
 export type State = {
   current: "lose";
+  timeout: number;
 };
 
-export function update(juego: Juego<State>, dt: 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 = { current: "welcome" };
+    return;
+  }
+}
 
 export function draw(juego: Juego<State>, timestamp: number) {
   drawText(
@@ -17,4 +33,11 @@ export function draw(juego: Juego<State>, timestamp: number) {
 
   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
+  );
 }