Agregada funcionalidad ignorar oportunidad

src/views/Juego/Juego.vue

@@ -15,6 +15,8 @@ div
                 :posicion="1"
                 :esTurnoActual="turnoActual === obtClaveMap('1')"
                 :fnDescartarCarta="descartarCarta"
+                :idUsuario="idUsuario"
+                :ws="socket"
             )
 
 //
@@ -36,6 +38,7 @@ const manoInicial = {
     cartasReveladas: [],
     descartes: [],
     sigCarta: -1,
+    oportunidades: []
 };
 
 const obtClave = (obj: any, valor: string): string | undefined => {
@@ -83,15 +86,15 @@ export default defineComponent({
             esPantallaCompleta.value = false;
         };
 
-        let socket: WebSocket;
+        let socket = ref<WebSocket | undefined>(undefined);
         const map: any = {};
         onMounted(() => {
             if (!idJuego || !idUsuario) return;
 
-            socket = new WebSocket(`${wsServidor}/juego`);
+            const socketInner = new WebSocket(`${wsServidor}/juego`);
 
-            socket.addEventListener("open", () => {
-                socket.send(JSON.stringify({
+            socketInner.addEventListener("open", () => {
+                socketInner.send(JSON.stringify({
                     operacion: "conectar",
                     datos: JSON.stringify({
                         idJuego,
@@ -100,10 +103,11 @@ export default defineComponent({
                 }));
             });
 
-            socket.addEventListener("message", (ev) => {
+            socketInner.addEventListener("message", (ev) => {
                 const info = JSON.parse(ev.data);
                 switch (info.operacion) {
                     case "actualizar_datos": {
+                        cartaDescartada.value = false;
                         const d = info.datos;
                         console.log(info.datos);
                         dora.value = info.datos.dora;
@@ -173,15 +177,17 @@ export default defineComponent({
                     }
                 }
             });
+
+            socket.value = socketInner;
         });
         onUnmounted(() => {
-            if (socket) socket.close();
+            if (socket) socket.value!!.close();
         });
 
         const descartarCarta = (valorCarta: number) => {
             if (turnoActual.value === obtClave(map, "1") && !cartaDescartada.value) {
                 cartaDescartada.value = true;
-                socket.send(JSON.stringify({
+                socket.value!!.send(JSON.stringify({
                     operacion: "descarte",
                     datos: JSON.stringify({
                         idJuego,
@@ -198,6 +204,8 @@ export default defineComponent({
             doraOculto,
             turnosDora,
             cartasRestantes,
+            idUsuario,
+            socket,
             mano1,
             mano2,
             mano3,

src/views/Juego/components/contenedor-dora.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
 div.contenedor-dora
-    carta(v-for="(c, i) in dora" :valor="c" :escala="0.75" :key="i")
+    carta(v-for="(c, i) in doraCerrado" :valor="c" :escala="0.75" :key="i")
     br
-    carta(v-for="(c, i) in doraOculto" :valor="c" :escala="0.75" :key="i")
+    carta(v-for="(c, i) in doraAbierto" :valor="c" :escala="0.75" :key="i")
 
 //
 </template>
@@ -29,11 +29,28 @@ export default defineComponent({
             default: 32
         }
     },
-    setup() {
+    setup(props) {
         const {pH} = useDimensions();
         const pHc = computed(() => pH.value + "px");
 
+        const doraCerrado = computed(() => {
+            const narr = [...props.dora];
+            for (let i = narr.length; i < 5; i++) {
+                narr.push(0);
+            }
+            return narr;
+        });
+        const doraAbierto = computed(() => {
+            const narr = [...props.doraOculto];
+            for (let i = narr.length; i < 5; i++) {
+                narr.push(0);
+            }
+            return narr;
+        });
+
         return {
+            doraCerrado,
+            doraAbierto,
             pHc
         }
     }

src/views/Juego/components/mano.vue

@@ -10,8 +10,7 @@ div.cont-cuadrante-2-mano
             | Quad
         div.opcion-mano(v-if="hayWin" :style="{backgroundColor: '#f44336'}")
             | Win
-        div.opcion-mano(:style="{backgroundColor: '#9E9E9E'}")
-            | Ignorar
+        opcion-ignorar(v-if="hayTri || haySeq || hayQuad || hayWin" :idUsuario="idUsuario" :ws="ws")
     div.cuadrante-mano
         carta(v-for="(c, i) in cartas" :valor="c" :movimiento="posiciones[i]" :fnDescartar="descartarCarta" :key="i")
         carta(:valor="-1")
@@ -28,7 +27,7 @@ import { useDimensions } from "@/components/useDimensions";
 import carta from "@/components/carta.vue";
 import contenedorDescartes from "./contenedor-descartes.vue"
 import { Mano } from "@/views/Juego/types/Mano";
-import { Oportunidad } from "@/views/Juego/types/Oportunidad";
+import opcionIgnorar from "./opciones-mano/opcion-ignorar.vue"
 
 const estaOrdenado = (nums: number[]) => {
     for (let i = 0, j = 1; j < nums.length ; i++, j++) {
@@ -41,8 +40,10 @@ const esperar = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)
 
 export default defineComponent({
     name: "mano",
-    components: {carta, contenedorDescartes},
+    components: {carta, contenedorDescartes, opcionIgnorar},
     props: {
+        idUsuario: String,
+        ws: WebSocket,
         mano: Object,
         posicion: Number,
         esTurnoActual: Boolean,
@@ -130,29 +131,30 @@ export default defineComponent({
         });
 
         const hayTri = computed(() => {
+            console.log(props.mano);
             for (const o of (props.mano!! as Mano).oportunidades) {
-                if (o.nombreOportunidad === "Tri") return true;
+                if (o?.nombreOportunidad === "Tri") return true;
             }
             return false;
         });
 
         const haySeq = computed(() => {
             for (const o of props.mano!!.oportunidades) {
-                if ((o as unknown as Oportunidad).nombreOportunidad === "Seq") return true;
+                if (o?.nombreOportunidad === "Seq") return true;
             }
             return false;
         });
 
         const hayQuad = computed(() => {
             for (const o of props.mano!!.oportunidades) {
-                if ((o as unknown as Oportunidad).nombreOportunidad === "Quad") return true;
+                if (o?.nombreOportunidad === "Quad") return true;
             }
             return false;
         });
 
         const hayWin = computed(() => {
             for (const o of props.mano!!.oportunidades) {
-                if ((o as unknown as Oportunidad).nombreOportunidad === "Win") return true;
+                if (o?.nombreOportunidad === "Win") return true;
             }
             return false;
         });

src/views/Juego/components/opciones-mano/opcion-ignorar.vue

@@ -0,0 +1,71 @@
+<template lang="pug">
+div.opcion-mano(@click="enviarSolicitudIgnorarOportunidad" :style="{backgroundColor: '#9E9E9E'}")
+    | Ignorar
+
+//
+</template>
+
+<script lang="ts">
+import {defineComponent, computed} from "vue";
+import { useRoute } from "vue-router";
+import { useDimensions } from "@/components/useDimensions";
+
+export default defineComponent({
+    name: "opcion-ignorar",
+    props: {
+        idUsuario: {
+            type: String,
+            required: true
+        },
+        ws: {
+            type: WebSocket,
+            required: true
+        }
+    },
+    setup(props) {
+        const route = useRoute();
+        const {pH, phx} = useDimensions();
+
+        const idJuego = route.params.id;
+
+        const enviarSolicitudIgnorarOportunidad = () => {
+            console.log("Pidiendo que se ignore la oportunidad :c");
+            props.ws.send(JSON.stringify({
+                operacion: "ignorar_oportunidad",
+                datos: JSON.stringify({
+                    idJuego,
+                    idUsuario: props.idUsuario
+                })
+            }));
+        };
+
+        return {
+            enviarSolicitudIgnorarOportunidad,
+            tamano: computed(() => (pH.value * -0.75) + "px"),
+            phx
+        }
+    }
+});
+
+</script>
+
+<style scoped lang="sass" vars="{tamano, phx}">
+
+.opcion-mano
+    display: inline-block
+    min-width: 17%
+    font-size: calc(var(--phx) * 3)
+    text-align: center
+    cursor: pointer
+    margin-left: var(--phx)
+    padding: var(--phx) 0
+    color: white
+    font-weight: bold
+    border-radius: calc(var(--phx) * 0.5)
+    box-shadow: 0 0 10px 1px rgba(100, 100, 100, 0.5)
+    transition: transform 100ms
+    &:hover
+        transform: translateY(var(--tamano))
+
+//
+</style>

src/views/Juego/components/opciones-mano/opcion-seq.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+div.opcion-mano(v-if="haySeq" :style="{backgroundColor: '#009688'}")
+    | Seq
+
+//
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    name: "opcion-seq"
+});
+
+</script>
+
+<style scoped lang="sass">
+
+
+
+//
+</style>