Implementado Tri

src/variables.ts

@@ -1,4 +1,4 @@
-export const servidor = "0.0.0.0:8080"; // "rimajonb.araozu.dev"; // "0.0.0.0:8080"; //
-export const servidorF = `http://${servidor}`;
-export const wsServidor = `ws://${servidor}`;
+export const servidor = "rimajonb.araozu.dev"; // "0.0.0.0:8080"; //
+export const servidorF = `https://${servidor}`;
+export const wsServidor = `wss://${servidor}`;
 

src/views/Juego/components/mano.vue

@@ -2,8 +2,11 @@
 div.cont-cuadrante-2-mano
     contenedor-descartes(:cartas="mano.descartes" :esTurnoActual="esTurnoActual")
     div.cont-opciones-mano
-        div.opcion-mano(v-if="hayTri" :style="{backgroundColor: '#3F51B5'}")
-            | Tri
+        opcion-tri(v-if="hayTri"
+            :idUsuario="idUsuario"
+            :ws="ws"
+            :oportunidad="oportunidadTri"
+        )
         opcion-seq(v-if="haySeq"
             :idUsuario="idUsuario"
             :ws="ws"
@@ -29,10 +32,11 @@ div.cont-cuadrante-2-mano
 import { computed, defineComponent, ref, watch } from "vue";
 import { useDimensions } from "@/components/useDimensions";
 import carta from "@/components/carta.vue";
-import contenedorDescartes from "./contenedor-descartes.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 opcionIgnorar from "./opciones-mano/opcion-ignorar.vue";
+import opcionSeq from "./opciones-mano/opcion-seq.vue";
+import opcionTri from "./opciones-mano/opcion-tri.vue";
 import { Oportunidad } from "@/views/Juego/types/Oportunidad";
 
 const estaOrdenado = (nums: number[]) => {
@@ -50,7 +54,8 @@ export default defineComponent({
         carta,
         contenedorDescartes,
         opcionSeq,
-        opcionIgnorar
+        opcionIgnorar,
+        opcionTri
     },
     props: {
         idUsuario: String,
@@ -174,6 +179,10 @@ export default defineComponent({
             return props.mano!!.oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Seq")
         });
 
+        const oportunidadTri = computed(() => {
+            return props.mano!!.oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Tri")
+        });
+
         return {
             cartas,
             posiciones,
@@ -183,6 +192,7 @@ export default defineComponent({
             hayQuad,
             hayWin,
             oportunidadSeq,
+            oportunidadTri,
             phx,
             posicionW: computed(() => (90 * (5 - posicion!!)) + "deg")
         }

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

@@ -39,7 +39,6 @@ export default defineComponent({
         const op = computed(() => props.oportunidad as OportunidadSeq | undefined)
 
         const opciones = computed(() => {
-            console.log(props.oportunidad);
             return op.value?.combinaciones
         });
 
@@ -51,10 +50,7 @@ export default defineComponent({
                         idJuego,
                         idUsuario: props.idUsuario,
                         cartaDescartada: op.value.cartaDescartada,
-                        combinacion: {
-                            first: opcion.first,
-                            second: opcion.second
-                        }
+                        combinacion: opcion
                     })
                 }));
             }

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

@@ -0,0 +1,106 @@
+<template lang="pug">
+div.opcion-mano(@click="enviarSolicitudSeq()" :style="{backgroundColor: '#3F51B5'}")
+    div.contenedor-cartas-opcion-mano
+        carta(v-for="(c, i) in obtCartas()" :valor="c" :escala="0.5" :key="i")
+    span Tri
+
+//
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useRoute } from "vue-router";
+import { useDimensions } from "@/components/useDimensions";
+import { OportunidadTri } from "../../types/Oportunidad";
+import carta from "@/components/carta.vue";
+
+export default defineComponent({
+    name: "opcion-tri",
+    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 OportunidadTri | undefined)
+
+        const enviarSolicitudSeq = () => {
+            const opcion = op.value!!.cartas;
+            if (op.value !== undefined) {
+                props.ws.send(JSON.stringify({
+                    operacion: "llamar_tri",
+                    datos: JSON.stringify({
+                        idJuego,
+                        idUsuario: props.idUsuario,
+                        cartaDescartada: op.value.cartaDescartada,
+                        combinacion: opcion
+                    })
+                }));
+            }
+        };
+
+        const obtCartas = () => {
+            if (op.value !== undefined) {
+                const v: OportunidadTri = op.value;
+                return [
+                    v.cartas.first,
+                    v.cartas.second,
+                    v.cartaDescartada
+                ];
+            } else {
+                return [];
+            }
+        };
+
+        return {
+            enviarSolicitudSeq,
+            obtCartas,
+            tamano: computed(() => (pH.value * -0.75) + "px"),
+            phx
+        }
+    }
+});
+
+</script>
+
+<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>

src/views/Juego/types/Oportunidad.ts

@@ -6,10 +6,11 @@ export declare interface Oportunidad {
 export declare class OportunidadSeq implements Oportunidad {
     cartaDescartada: number;
     nombreOportunidad: string;
-    combinaciones: {first: number, second: number}[]
+    combinaciones: {first: number, second: number}[];
 }
 
 export declare class OportunidadTri implements Oportunidad {
     cartaDescartada: number;
     nombreOportunidad: string;
+    cartas: {first: number, second: number};
 }