Botones de compartir

src/assets.ts

@@ -1,5 +1,7 @@
 import botonComenzar from "./assets/Comenzar.png";
 import botonSiguiente from "./assets/Siguiente.png";
+import botonCompartirPerdiste from "./assets/Comparti_2.png";
+import botonCompartirFelicitaciones from "./assets/Comparti_1.png";
 import logoFPGFDTBlanco from "./assets/Logo Blanco.png";
 import logoSalvaLaCostanera from "./assets/SalvaCostanera.png";
 import logoSalvaLaCostaneraCostado from "./assets/Salva2.png";
@@ -39,6 +41,8 @@ function loadImage(url: string): Promise<HTMLImageElement> {
 export const assetUrls = {
   botonComenzar,
   botonSiguiente,
+  botonCompartirPerdiste,
+  botonCompartirFelicitaciones,
   logoFPGFDTBlanco,
   logoSalvaLaCostanera,
   logoSalvaLaCostaneraCostado,

src/jugando.ts

@@ -6,8 +6,11 @@ import {
   drawText,
   isMobile,
   isTouching,
+  posInBox,
   randomFromArray,
+  share,
 } from "./utils";
+import * as welcome from "./welcome";
 
 const ENEMIES_NUM = 12;
 const SEED_COOLDOWN = 300;
@@ -91,8 +94,40 @@ function touchControls(juego: Juego<State>): {
   };
 }
 
+function shareButton(juego: Juego<State>): {
+  box: Box;
+  sprite: Sprite;
+} {
+  const sprite =
+    juego.state.has === "won"
+      ? juego.sprites.botonCompartirFelicitaciones
+      : juego.sprites.botonCompartirPerdiste;
+
+  const width = sprite.getWidth(juego);
+  const height = sprite.getHeight(juego);
+  return {
+    box: {
+      x: juego.canvas.width / 2 - width / 2,
+      y: juego.canvas.height * 0.9 - height,
+      width,
+      height,
+    },
+    sprite,
+  };
+}
+
 export function update(juego: Juego<State>, dt: number) {
-  if (juego.state.has) return;
+  if (juego.state.has) {
+    const button = shareButton(juego);
+    if (
+      isTouching(juego, button.box) ||
+      (juego.mouse.down && posInBox(button.box, juego.mouse))
+    ) {
+      share();
+      (juego as Juego<AllState>).state = welcome.createState();
+    }
+    return;
+  }
 
   juego.state.time -= dt;
   if (juego.state.time < 0) {
@@ -444,5 +479,7 @@ export function draw(juego: Juego<State>, timestamp: number) {
         juego.canvas.height * 0.1
       );
     }
+    const button = shareButton(juego);
+    button.sprite.draw(juego, button.box.x, button.box.y);
   }
 }

src/main.ts

@@ -17,6 +17,8 @@ export type Juego<T extends State> = {
     [key in
       | "botonSiguiente"
       | "botonComenzar"
+      | "botonCompartirPerdiste"
+      | "botonCompartirFelicitaciones"
       | "logoFPGFDTBlanco"
       | "logoSalvaLaCostaneraGrande"
       | "logoSalvaLaCostaneraCostado"
@@ -123,6 +125,15 @@ async function initJuego() {
     botonSiguiente: loadSprite(assets.botonSiguiente, {
       height: (juego) => juego.canvas.height / 8,
     }),
+    botonCompartirPerdiste: loadSprite(assets.botonCompartirPerdiste, {
+      height: (juego) => juego.canvas.height / 8,
+    }),
+    botonCompartirFelicitaciones: loadSprite(
+      assets.botonCompartirFelicitaciones,
+      {
+        height: (juego) => juego.canvas.height / 8,
+      }
+    ),
     logoFPGFDTBlanco: loadSprite(assets.logoFPGFDTBlanco, {
       height: (juego) => juego.canvas.height / 6,
     }),

src/utils.ts

@@ -75,3 +75,19 @@ export function isTouching(juego: Juego<any>, box: Box): boolean {
     )
   );
 }
+
+export async function share() {
+  const text =
+    "¿Sabías que Larreta quiere vender la Costanera para construir un mega emprendimiento inmobiliario de lujo? Estamos juntando firmas para frenarlo, ya vamos 20 mil y nos faltan 20 mil más. ¿Te animas a jugar a este videojuego para salvar la costanera?";
+  try {
+    await navigator.share({
+      title: "Salvá la Costanera",
+      url: location.href,
+      text,
+    });
+  } catch (error) {
+    location.href = `https://api.whatsapp.com/send?text=${encodeURIComponent(
+      text + " " + location.href
+    )}`;
+  }
+}