Mostrar dialogo de firma

src/assets.ts

@@ -11,6 +11,7 @@ import instrucciones3 from "./assets/Instrucciones 3.png";
 import placaPerdiste from "./assets/Perdiste_2.png";
 import placaFelicitaciones from "./assets/Felicitaciones_2.png";
 import flecha from "./assets/flecha.png";
+import dialogoFirma from "./assets/Firmá_2.png";
 import larreta from "./assets/Larreta.png";
 import millonarioMalo from "./assets/Millonario Malo.png";
 import cieloRioCalle from "./assets/CieloRioCalle.png";
@@ -52,6 +53,7 @@ export const assetUrls = {
   placaPerdiste,
   placaFelicitaciones,
   flecha,
+  dialogoFirma,
   larreta,
   millonarioMalo,
   cieloRioCalle,

src/jugando.ts

@@ -35,6 +35,7 @@ export type State = {
   trees: { x: number; sprite: Sprite }[];
   citizens: Citizen[];
   signatures: number;
+  justSigned: number;
   time: number;
   seedCooldown: number;
 };
@@ -62,6 +63,7 @@ export function createJugandoState(juego: Juego<any>): State {
     trees: [],
     signatures: 0,
     citizens,
+    justSigned: 0,
     time: TIME,
     seedCooldown: 0,
   };
@@ -159,6 +161,7 @@ export function update(juego: Juego<State>, dt: number) {
   if (juego.state.pos.x > MAP_MAX) juego.state.pos.x = MAP_MAX;
 
   juego.state.seedCooldown -= dt;
+  juego.state.justSigned -= dt;
 
   const citizen = detectCitizen(juego);
 
@@ -166,6 +169,7 @@ export function update(juego: Juego<State>, dt: number) {
     if (citizen) {
       juego.state.signatures += 1000;
       juego.state.citizens = juego.state.citizens.filter((c) => c != citizen);
+      juego.state.justSigned = 2000;
     } else {
       if (juego.state.seedCooldown < 0) {
         const seedSpeed = juego.canvas.width * 0.7;
@@ -270,13 +274,22 @@ function detectCitizen(juego: Juego<State>): Citizen | undefined {
 
 function drawJugadorx(juego: Juego<State>) {
   const floorY = getFloorY(juego);
+  const width = juego.sprites.jugadorx.getWidth(juego);
+  const height = juego.sprites.jugadorx.getHeight(juego);
   juego.sprites.jugadorx.draw(
     juego,
     juego.state.pos.x + juego.state.view.x,
-    floorY - juego.sprites.jugadorx.getHeight(juego),
+    floorY - height,
     0,
     juego.state.side === "left"
   );
+  if (juego.state.justSigned > 0) {
+    juego.sprites.dialogoFirma.draw(
+      juego,
+      juego.state.pos.x + juego.state.view.x + width,
+      floorY - height - juego.sprites.dialogoFirma.getHeight(juego)
+    );
+  }
 }
 
 function drawTrees(juego: Juego<State>) {

src/main.ts

@@ -27,6 +27,7 @@ export type Juego<T extends State> = {
       | "instrucciones3"
       | "placaPerdiste"
       | "placaFelicitaciones"
+      | "dialogoFirma"
       | "flecha"
       | "jugadorx"
       | "jugadorxPresentando"
@@ -159,6 +160,9 @@ async function initJuego() {
     placaFelicitaciones: loadSprite(assets.placaFelicitaciones, {
       height: (juego) => juego.canvas.height * 0.6,
     }),
+    dialogoFirma: loadSprite(assets.dialogoFirma, {
+      height: (juego) => juego.canvas.height / 8,
+    }),
     flecha: loadSprite(assets.flecha, {
       height: (juego) => juego.canvas.height / 6,
     }),
@@ -166,7 +170,7 @@ async function initJuego() {
       assets.jugadorx,
       { height: (juego) => juego.canvas.height / 4 },
       {
-        width: 65,
+        width: 56,
         height: 94,
       }
     ),