Habilitada funcionalidad llamar seq

src/views/Juego/components/mano.vue

@@ -4,8 +4,11 @@ div.cont-cuadrante-2-mano
     div.cont-opciones-mano
         div.opcion-mano(v-if="hayTri" :style="{backgroundColor: '#3F51B5'}")
             | Tri
-        div.opcion-mano(v-if="haySeq" :style="{backgroundColor: '#009688'}")
-            | Seq
+        opcion-seq(v-if="haySeq"
+            :idUsuario="idUsuario"
+            :ws="ws"
+            :oportunidad="oportunidadSeq"
+        )
         div.opcion-mano(v-if="hayQuad" :style="{backgroundColor: '#9C27B0'}")
             | Quad
         div.opcion-mano(v-if="hayWin" :style="{backgroundColor: '#f44336'}")
@@ -16,7 +19,8 @@ div.cont-cuadrante-2-mano
         carta(:valor="-1")
         carta(:valor="mano.sigCarta" :fnDescartar="descartarCarta")
         carta(:valor="-1")
-        carta(v-for="(c, i) in mano.cartasReveladas" :valor="c" :key="i")
+        div(v-for="g in mano.cartasReveladas" :style="{display: 'inline-block'}")
+            carta(v-for="(c, i) in g" :valor="c" :key="i")
 
 //
 </template>
@@ -28,6 +32,8 @@ import carta from "@/components/carta.vue";
 import contenedorDescartes from "./contenedor-descartes.vue"
 import { Mano } from "@/views/Juego/types/Mano";
 import opcionIgnorar from "./opciones-mano/opcion-ignorar.vue"
+import opcionSeq from "./opciones-mano/opcion-seq.vue"
+import { Oportunidad } from "@/views/Juego/types/Oportunidad";
 
 const estaOrdenado = (nums: number[]) => {
     for (let i = 0, j = 1; j < nums.length ; i++, j++) {
@@ -40,7 +46,12 @@ const esperar = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)
 
 export default defineComponent({
     name: "mano",
-    components: {carta, contenedorDescartes, opcionIgnorar},
+    components: {
+        carta,
+        contenedorDescartes,
+        opcionSeq,
+        opcionIgnorar
+    },
     props: {
         idUsuario: String,
         ws: WebSocket,
@@ -159,6 +170,10 @@ export default defineComponent({
             return false;
         });
 
+        const oportunidadSeq = computed(() => {
+            return props.mano!!.oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Seq")
+        });
+
         return {
             cartas,
             posiciones,
@@ -167,6 +182,7 @@ export default defineComponent({
             haySeq,
             hayQuad,
             hayWin,
+            oportunidadSeq,
             phx,
             posicionW: computed(() => (90 * (5 - posicion!!)) + "deg")
         }

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

@@ -29,7 +29,6 @@ export default defineComponent({
         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({

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

@@ -1,22 +1,105 @@
 <template lang="pug">
-div.opcion-mano(v-if="haySeq" :style="{backgroundColor: '#009688'}")
-    | Seq
+div.opcion-mano(v-for="opcion in opciones" @click="enviarSolicitudSeq(opcion)" :style="{backgroundColor: '#009688'}")
+    div.contenedor-cartas-opcion-mano
+        carta(v-for="(c, i) in obtCartasOrdenadas(opcion)" :valor="c" :escala="0.5" :key="i")
+    span Seq
 
 //
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import { computed, defineComponent } from "vue";
+import { useRoute } from "vue-router";
+import { useDimensions } from "@/components/useDimensions";
+import { OportunidadSeq } from "@/views/Juego/types/Oportunidad";
+import carta from "@/components/carta.vue";
 
 export default defineComponent({
-    name: "opcion-seq"
+    name: "opcion-seq",
+    components: {carta},
+    props: {
+        idUsuario: {
+            type: String,
+            required: true
+        },
+        ws: {
+            type: WebSocket,
+            required: true
+        },
+        oportunidad: {
+            type: Object
+        }
+    },
+    setup(props) {
+        const route = useRoute();
+        const {pH, phx} = useDimensions();
+
+        const idJuego = route.params.id;
+
+        const op = computed(() => props.oportunidad as OportunidadSeq | undefined)
+
+        const opciones = computed(() => {
+            console.log(props.oportunidad);
+            return op.value?.combinaciones
+        });
+
+        const enviarSolicitudSeq = (opcion: {first: number, second: number}) => {
+            if (op.value !== undefined) {
+                props.ws.send(JSON.stringify({
+                    operacion: "llamar_seq",
+                    datos: JSON.stringify({
+                        idJuego,
+                        idUsuario: props.idUsuario,
+                        cartaDescartada: op.value.cartaDescartada,
+                        combinacion: {
+                            first: opcion.first,
+                            second: opcion.second
+                        }
+                    })
+                }));
+            }
+        };
+
+        const obtCartasOrdenadas = (opcion: {first: number, second: number}) => {
+            return [op.value!!.cartaDescartada, opcion.first, opcion.second].sort((x, y) => (x < y)? -1: 1)
+        };
+
+        return {
+            opciones,
+            enviarSolicitudSeq,
+            obtCartasOrdenadas,
+            tamano: computed(() => (pH.value * -0.75) + "px"),
+            phx
+        }
+    }
 });
 
 </script>
 
-<style scoped lang="sass">
+<style scoped lang="sass" vars="{tamano, phx}">
+
+.contenedor-cartas-opcion-mano
+    position: absolute
+    top: calc(var(--phx) * -3)
+    left: calc(var(--phx) * 1.25)
 
 
+.opcion-mano
+    position: relative
+    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>