diff --git a/src/views/Juego/Juego.vue b/src/views/Juego/Juego.vue index 359aabd..fe4b4cb 100644 --- a/src/views/Juego/Juego.vue +++ b/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(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, diff --git a/src/views/Juego/components/contenedor-dora.vue b/src/views/Juego/components/contenedor-dora.vue index dfd9fcd..cbb7940 100644 --- a/src/views/Juego/components/contenedor-dora.vue +++ b/src/views/Juego/components/contenedor-dora.vue @@ -1,8 +1,8 @@ @@ -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 } } diff --git a/src/views/Juego/components/mano.vue b/src/views/Juego/components/mano.vue index ae8e81d..2059795 100644 --- a/src/views/Juego/components/mano.vue +++ b/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; }); diff --git a/src/views/Juego/components/opciones-mano/opcion-ignorar.vue b/src/views/Juego/components/opciones-mano/opcion-ignorar.vue new file mode 100644 index 0000000..3b84a1a --- /dev/null +++ b/src/views/Juego/components/opciones-mano/opcion-ignorar.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/src/views/Juego/components/opciones-mano/opcion-seq.vue b/src/views/Juego/components/opciones-mano/opcion-seq.vue new file mode 100644 index 0000000..cda34e1 --- /dev/null +++ b/src/views/Juego/components/opciones-mano/opcion-seq.vue @@ -0,0 +1,22 @@ + + + + +