From d0f9fa0144693a4c11512152a3c0371bd2d0d3bb Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Mon, 26 Oct 2020 10:39:37 -0500
Subject: [PATCH] Reducida la cantidad de variables in-line

---
 src/components/carta.vue                      | 25 ++++-----
 src/variables.ts                              |  6 +--
 src/views/Juego/Juego.vue                     | 34 ++++++------
 .../Juego/components/contenedor-cartas.vue    | 53 +++++++++++++++++++
 .../Juego/components/contenedor-descartes.vue |  9 ++--
 .../Juego/components/contenedor-dora.vue      | 22 ++++----
 src/views/Juego/components/mano.vue           |  8 ++-
 src/views/Juego/types/Mano.ts                 |  3 ++
 8 files changed, 102 insertions(+), 58 deletions(-)
 create mode 100644 src/views/Juego/components/contenedor-cartas.vue

diff --git a/src/components/carta.vue b/src/components/carta.vue
index 78bb158..5ba5348 100644
--- a/src/components/carta.vue
+++ b/src/components/carta.vue
@@ -42,19 +42,13 @@ export default defineComponent({
             type: Function,
             required: false
         },
-        escala: {
-            type: Number,
-            default: 1
-        },
         resaltarCarta: {
             type: Boolean,
             default: true
         }
     },
     setup(props) {
-        const {pH} = useDimensions();
         const store = useStore();
-        const pxesc = computed(() => pH.value + "px");
         const valorR = computed(() => props.valor);
 
         const {esOscuro} = getEsOscuro(store);
@@ -168,30 +162,29 @@ export default defineComponent({
             claseResaltado,
             fnDescartar,
             aplicarResaltadoCarta,
-            quitarResaltadoCarta,
-            pxesc
+            quitarResaltadoCarta
         }
     }
 });
 
 </script>
 
-<style lang="sass" vars="{pxesc, escala}">
+<style lang="sass">
 
 .c-carta-resaltada
-    transform: translateY(calc(var(--pxesc) * -1))
+    transform: translateY(calc(var(--phx) * -1))
 
 .c-carta
     position: relative
     font:
-        size: calc(var(--pxesc) * 4 * var(--escala))
+        size: calc(var(--phx) * 4 * var(--escala))
         weight: normal
         family: "Secular One", "Pt Serif", serif
     display: table-cell
-    border: solid calc(var(--pxesc) * 0.2 * var(--escala)) var(--color-borde)
-    width: calc(var(--pxesc) * 5 * var(--escala))
-    height: calc(var(--pxesc) * 8.5 * var(--escala))
-    min-width: calc(var(--pxesc) * 5 * var(--escala))
+    border: solid calc(var(--phx) * 0.2 * var(--escala)) var(--color-borde)
+    width: calc(var(--phx) * 5 * var(--escala))
+    height: calc(var(--phx) * 8.5 * var(--escala))
+    min-width: calc(var(--phx) * 5 * var(--escala))
     text-align: center
     vertical-align: middle
     cursor: pointer
@@ -232,7 +225,7 @@ export default defineComponent({
     display: inline-block
     width: 60%
     height: 80%
-    border: solid calc(var(--pxesc) * 0.4 * var(--escala)) var(--color-texto)
+    border: solid calc(var(--phx) * 0.4 * var(--escala)) var(--color-texto)
     border-radius: 0.1rem
     opacity: 0.75
 
diff --git a/src/variables.ts b/src/variables.ts
index 6ed4812..e159aa9 100644
--- a/src/variables.ts
+++ b/src/variables.ts
@@ -1,4 +1,4 @@
-export const servidor = "rimajonb.araozu.dev"; // "0.0.0.0:8080"; //
-export const servidorF = `https://${servidor}`;
-export const wsServidor = `wss://${servidor}`;
+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}`;
 
diff --git a/src/views/Juego/Juego.vue b/src/views/Juego/Juego.vue
index 65a0e08..9b4881c 100644
--- a/src/views/Juego/Juego.vue
+++ b/src/views/Juego/Juego.vue
@@ -3,10 +3,7 @@ div
     contenedor-dora(:turnosRestantes="turnosDora")
     div.con-int-juego
         div.cont-2-juego
-            div.cont-cuadrante-cartas-juego
-                span(:style="{fontSize: `${pH * 10}px`}") {{ cartasRestantes }}
-                br
-                span(:style="{fontSize: `${pH * 2.5}px`}") Cartas restantes
+            contenedorCartas(:cartasRestantes="cartasRestantes" :dragonPartida="dragonPartida")
             mano(:mano="mano2" :posicion="2" :esTurnoActual="turnoActual === obtClaveMap('2')")
             mano(:mano="mano3" :posicion="3" :esTurnoActual="turnoActual === obtClaveMap('3')")
             mano(:mano="mano4" :posicion="4" :esTurnoActual="turnoActual === obtClaveMap('4')")
@@ -23,13 +20,14 @@ div
 </template>
 
 <script lang="ts">
-import {defineComponent, ref, computed, onMounted, onUnmounted} from "vue";
+import {defineComponent, ref, onMounted, onUnmounted} from "vue";
 import { useRoute } from "vue-router";
 import { useDimensions } from "@/components/useDimensions";
 import { useStore } from "vuex";
 import { wsServidor } from "@/variables";
 import contenedorDora from "./components/contenedor-dora.vue"
 import mano from "@/views/Juego/components/mano.vue";
+import contenedorCartas from "./components/contenedor-cartas.vue"
 
 const manoInicial = {
     cartas: [],
@@ -49,13 +47,11 @@ const obtClave = (obj: any, valor: string): string | undefined => {
 
 export default defineComponent({
     name: "Juego",
-    components: {contenedorDora, mano},
+    components: {contenedorDora, mano, contenedorCartas},
     setup() {
         const route = useRoute();
         const store = useStore();
-        const {pH, pW} = useDimensions();
-        const ph = computed(() => pH.value + "px");
-        const pw = computed(() => pW.value + "px");
+        const {pH, phx, pW, pwx} = useDimensions();
 
         const esPantallaCompleta = ref(false);
         const dora = ref([0, 0, 0, 0, 0]);
@@ -65,6 +61,8 @@ export default defineComponent({
         const cartaDescartada = ref(false);
         const turnosDora = ref(32);
 
+        const dragonPartida = ref("");
+
         const mano1 = ref(manoInicial);
         const mano2 = ref(manoInicial);
         const mano3 = ref(manoInicial);
@@ -115,6 +113,7 @@ export default defineComponent({
                         store.commit("setDora", [info.datos.dora, info.datos.doraOculto]);
 
                         turnosDora.value = info.datos.turnosHastaDora;
+                        dragonPartida.value = d.dragonPartida;
 
                         // Mapear IDS a posiciones
                         const turnoJugador = d.ordenJugadores.findIndex((id: string) => id === idUsuario);
@@ -206,6 +205,7 @@ export default defineComponent({
             doraOculto,
             turnosDora,
             cartasRestantes,
+            dragonPartida,
             idUsuario,
             socket,
             mano1,
@@ -216,23 +216,25 @@ export default defineComponent({
             obtClaveMap,
             descartarCarta,
             pH,
-            ph,
-            pw,
+            phx,
+            pW,
+            pwx,
+            escala: 1
         }
     }
 });
 
 </script>
 
-<style lang="sass" vars="{ph, pw}">
+<style lang="sass" vars="{pH, phx, pW, pwx, escala}">
 
 .con-int-juego
     position: absolute
     top: 0
-    left: calc((var(--pw) * 100 - var(--ph) * 100) / 2)
-    width: calc(var(--ph) * 100)
-    height: calc(var(--ph) * 100)
-    perspective: calc(var(--pw) * 10)
+    left: calc((var(--pwx) * 100 - var(--phx) * 100) / 2)
+    width: calc(var(--phx) * 100)
+    height: calc(var(--phx) * 100)
+    perspective: calc(var(--pwx) * 10)
     transform-style: preserve-3d
 
 
diff --git a/src/views/Juego/components/contenedor-cartas.vue b/src/views/Juego/components/contenedor-cartas.vue
new file mode 100644
index 0000000..3b70bfa
--- /dev/null
+++ b/src/views/Juego/components/contenedor-cartas.vue
@@ -0,0 +1,53 @@
+<template lang="pug">
+div.cont-cuadrante-cartas-juego
+    span.num-cartas(:style="{fontSize: `${pH * 10}px`}") {{ cartasRestantes }}
+    br
+    span.txt-cartas(:style="{fontSize: `${pH * 2.5}px`}") Cartas restantes {{ dragonPartida }}
+
+//
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    name: "contenedor-cartas",
+    props: {
+        cartasRestantes: {
+            type: Number,
+            required: true
+        },
+        dragonPartida: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props) {
+        return {
+
+        };
+    }
+});
+
+</script>
+
+<style scoped lang="sass">
+
+.cont-cuadrante-cartas-juego
+    position: absolute
+    display: inline-block
+    width: 18%
+    height: 18%
+    bottom: 41%
+    right: 41%
+    text-align: center
+
+    .num-cartas
+        font-size: calc(var(--pH) * 10px)
+
+    .txt-cartas
+        font-size: calc(var(--pH) * 2.5px)
+
+
+//
+</style>
diff --git a/src/views/Juego/components/contenedor-descartes.vue b/src/views/Juego/components/contenedor-descartes.vue
index 36829cb..6ac4ab7 100644
--- a/src/views/Juego/components/contenedor-descartes.vue
+++ b/src/views/Juego/components/contenedor-descartes.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 div.cont-cuadrante-descarte(:class="claseTurnoActual")
     div(v-for="cartas in grupoCartas")
-        carta(v-for="(c, i) in cartas" :valor="c" :escala="escala" :key="i")
+        carta(v-for="(c, i) in cartas" :valor="c" :key="i")
 
 //
 </template>
@@ -44,22 +44,19 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const {phx} = useDimensions();
-
         const grupoCartas = computed(() => splitArray(props.cartas as number[], 6));
         const claseTurnoActual = computed(() => props.esTurnoActual? "cont-cuadrante-descarte-turno-actual": "");
 
         return {
             grupoCartas,
-            claseTurnoActual,
-            phx
+            claseTurnoActual
         }
     }
 });
 
 </script>
 
-<style scoped lang="sass" vars="{phx, escala}">
+<style lang="sass" vars="{escala}">
 
 .cont-cuadrante-descarte
     position: absolute
diff --git a/src/views/Juego/components/contenedor-dora.vue b/src/views/Juego/components/contenedor-dora.vue
index f117f45..6e76a10 100644
--- a/src/views/Juego/components/contenedor-dora.vue
+++ b/src/views/Juego/components/contenedor-dora.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
 div.contenedor-dora
-    carta(v-for="(c, i) in doraCerrado" :valor="c" :escala="0.75" :key="i")
+    carta(v-for="(c, i) in doraCerrado" :valor="c" :key="i")
     br
-    carta(v-for="(c, i) in doraAbierto" :valor="c" :escala="0.75" :key="i")
+    carta(v-for="(c, i) in doraAbierto" :valor="c" :key="i")
     br
     span(v-if="turnosRestantes === 1") Bonus en {{turnosRestantes}} turno
     span(v-else-if="turnosRestantes > 1") Bonus en {{turnosRestantes}} turnos
@@ -27,8 +27,6 @@ export default defineComponent({
     },
     setup() {
         const store = useStore();
-        const {pH} = useDimensions();
-        const pHc = computed(() => pH.value + "px");
 
         const doraCerrado = computed(() => {
             const narr = [...store.state.dora[0]];
@@ -48,23 +46,23 @@ export default defineComponent({
         return {
             doraCerrado,
             doraAbierto,
-            pHc
+            escala: 0.75
         }
     }
 });
 
 </script>
 
-<style lang="sass" vars="{pHc}">
+<style lang="sass" vars="{escala}">
 
 .contenedor-dora
     position: fixed
-    top: calc(var(--pHc) * 2)
-    left: calc(var(--pHc) * 2)
-    padding: var(--pHc)
-    border-radius: calc(var(--pHc) / 2)
-    font-size: calc(var(--pHc) * 2.5)
-    box-shadow: 0 0 calc(var(--pHc) * 0.75) calc(var(--pHc) * 0.75) #dedede
+    top: calc(var(--phx) * 2)
+    left: calc(var(--phx) * 2)
+    padding: var(--phx)
+    border-radius: calc(var(--phx) / 2)
+    font-size: calc(var(--phx) * 2.5)
+    box-shadow: 0 0 calc(var(--phx) * 0.75) calc(var(--phx) * 0.75) #dedede
     background-color: var(--color-fondo)
 
 //
diff --git a/src/views/Juego/components/mano.vue b/src/views/Juego/components/mano.vue
index cf242b2..353e53a 100644
--- a/src/views/Juego/components/mano.vue
+++ b/src/views/Juego/components/mano.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-div.cont-cuadrante-2-mano
+div.cont-cuadrante-2-mano(:style="'transform: rotate(' + posicionW + ')'")
     contenedor-descartes(:cartas="mano.descartes" :esTurnoActual="esTurnoActual")
     div.cont-opciones-mano
         opcion-tri(v-if="oportunidadTri"
@@ -77,7 +77,7 @@ export default defineComponent({
         fnDescartarCarta: Function
     },
     setup(props) {
-        const {pH, phx} = useDimensions();
+        const {pH} = useDimensions();
         const anchoCarta = computed(() => pH.value * 5 + 2 * (pH.value * 0.225))
         const cartas = ref<number[]>((props.mano as Mano).cartas);
         const posicion = props.posicion;
@@ -180,7 +180,6 @@ export default defineComponent({
             oportunidadTri,
             oportunidadQuad,
             oportunidadWin,
-            phx,
             posicionW: computed(() => (90 * (5 - posicion!!)) + "deg")
         }
     }
@@ -188,7 +187,7 @@ export default defineComponent({
 
 </script>
 
-<style scoped lang="sass" vars="{phx, posicionW}">
+<style lang="sass">
 
 .cont-opciones-mano
     position: absolute
@@ -218,7 +217,6 @@ export default defineComponent({
     position: absolute
     width: 100%
     height: 100%
-    transform: rotate(var(--posicionW))
 
 
 .cuadrante-mano
diff --git a/src/views/Juego/types/Mano.ts b/src/views/Juego/types/Mano.ts
index d97bae7..6ff422c 100644
--- a/src/views/Juego/types/Mano.ts
+++ b/src/views/Juego/types/Mano.ts
@@ -1,10 +1,13 @@
 import { Oportunidad } from "@/views/Juego/types/Oportunidad";
 
+export type Dragon = "Negro" | "Rojo" | "Verde" | "Azul";
+
 export declare class Mano {
     cartas: number[]
     cartasReveladas: number[][]
     descartes: number[]
     sigCarta: number
     oportunidades: Oportunidad[]
+    dragon: Dragon
 }