Botones de redes

src/assets.ts

@@ -4,6 +4,9 @@ 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 instagram from "./assets/240px-Instagram_simple_icon.svg.png";
+import facebook from "./assets/Font_Awesome_5_brands_facebook-square.png";
+import twitter from "./assets/240px-Font_Awesome_5_brands_Twitter.svg.png";
 import logoFPGFDTBlanco from "./assets/Logo Blanco.png";
 import logoSalvaLaCostanera from "./assets/SalvaCostanera.png";
 import logoSalvaLaCostaneraCostado from "./assets/Salva2.png";
@@ -59,6 +62,9 @@ export const imageAssetUrls = {
   botonSiguiente,
   botonCompartirPerdiste,
   botonCompartirFelicitaciones,
+  facebook,
+  instagram,
+  twitter,
   logoFPGFDTBlanco,
   logoSalvaLaCostanera,
   logoSalvaLaCostaneraCostado,

src/jugando.ts

@@ -120,6 +120,37 @@ function shareButton(juego: Juego<State>): {
   };
 }
 
+const socialUrls = {
+  facebook: "https://www.facebook.com/Fpg.caba",
+  instagram: "https://www.instagram.com/fpg.caba/",
+  twitter: "https://twitter.com/FtePatriaGrande",
+};
+function socialButtons(juego: Juego<State>): {
+  [key in "facebook" | "instagram" | "twitter"]: {
+    box: Box;
+    sprite: Sprite;
+  };
+} {
+  let x = juego.canvas.width - 5;
+  let s: any = {};
+  for (const network of ["facebook", "instagram", "twitter"]) {
+    const sprite = (juego.sprites as any)[network];
+    const width = sprite.getWidth(juego);
+    const height = sprite.getHeight(juego);
+    x -= width + 20;
+    s[network] = {
+      box: {
+        x,
+        y: juego.canvas.height * 0.95 - height,
+        width,
+        height,
+      },
+      sprite,
+    };
+  }
+  return s;
+}
+
 export function update(juego: Juego<State>, dt: number) {
   if (juego.state.has) {
     const button = shareButton(juego);
@@ -130,6 +161,14 @@ export function update(juego: Juego<State>, dt: number) {
       share();
       (juego as Juego<AllState>).state = welcome.createState();
     }
+    for (const [network, { box }] of Object.entries(socialButtons(juego))) {
+      if (
+        isTouching(juego, box) ||
+        (juego.mouse.down && posInBox(box, juego.mouse))
+      ) {
+        location.href = (socialUrls as any)[network];
+      }
+    }
     return;
   }
 
@@ -506,5 +545,9 @@ export function draw(juego: Juego<State>, timestamp: number) {
     }
     const button = shareButton(juego);
     button.sprite.draw(juego, button.box.x, button.box.y);
+    const socials = socialButtons(juego);
+    for (const { sprite, box } of Object.values(socials)) {
+      sprite.draw(juego, box.x, box.y);
+    }
   }
 }

src/main.ts

@@ -19,6 +19,9 @@ export type Juego<T extends State> = {
       | "botonComenzar"
       | "botonCompartirPerdiste"
       | "botonCompartirFelicitaciones"
+      | "instagram"
+      | "twitter"
+      | "facebook"
       | "logoFPGFDTBlanco"
       | "logoSalvaLaCostaneraGrande"
       | "logoSalvaLaCostaneraCostado"
@@ -135,6 +138,15 @@ async function initJuego() {
         height: (juego) => juego.canvas.height / 8,
       }
     ),
+    instagram: loadSprite(assets.instagram, {
+      height: (juego) => juego.canvas.height * 0.1,
+    }),
+    facebook: loadSprite(assets.facebook, {
+      height: (juego) => juego.canvas.height * 0.1,
+    }),
+    twitter: loadSprite(assets.twitter, {
+      height: (juego) => juego.canvas.height * 0.1,
+    }),
     logoFPGFDTBlanco: loadSprite(assets.logoFPGFDTBlanco, {
       height: (juego) => juego.canvas.height / 6,
     }),