From 10c0ec24b65ec9d82d985abfb18f743764d4d3d1 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Tue, 29 Dec 2020 18:22:56 -0500
Subject: [PATCH] Eliminar estilos dinamicos de Vue que usaban <style vars>

---
 src/views/Ayuda/Ayuda.vue                                   | 5 +++--
 src/views/Juego/Juego.vue                                   | 6 ++++--
 src/views/Juego/components/contenedor-descartes.vue         | 2 +-
 src/views/Juego/components/contenedor-dora.vue              | 4 ++--
 src/views/Juego/components/opciones-mano/opcion-ignorar.vue | 4 ++--
 src/views/Juego/components/opciones-mano/opcion-seq.vue     | 6 ++++--
 src/views/Juego/components/opciones-mano/opcion-tri.vue     | 6 ++++--
 src/views/Juego/components/opciones-mano/opcion-win.vue     | 6 ++++--
 8 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/views/Ayuda/Ayuda.vue b/src/views/Ayuda/Ayuda.vue
index 07bb63d..b4053bb 100644
--- a/src/views/Ayuda/Ayuda.vue
+++ b/src/views/Ayuda/Ayuda.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-div
+div(:style="'--phx: ' + phx + '; --escala: ' + escala + ';'")
     h1 Sobre el juego
     p Ri Ma Jon es un juego inspirado en Mahjong, pero ejecutado con cartas.
 
@@ -244,13 +244,14 @@ export default defineComponent({
 
 </script>
 
-<style lang="sass" vars="{phx, escala}">
+<style lang="sass">
 
 .pad
     padding-left: 2rem
 
 .tabla-puntos
     padding-left: 2rem
+
     h3
         text-decoration: underline
         font-size: 1.45rem
diff --git a/src/views/Juego/Juego.vue b/src/views/Juego/Juego.vue
index 4c44ed6..6ca3abb 100644
--- a/src/views/Juego/Juego.vue
+++ b/src/views/Juego/Juego.vue
@@ -1,5 +1,7 @@
 <template lang="pug">
-div
+div(
+    :style="'--escala: ' + escala + '; --pH: ' + pH + '; --phx: ' + phx + '; --pW: ' + pW + '; --pwx:' + pwx + ';'"
+)
     pantalla-ganador(:datos="datosJuego")
     contenedor-dora(:turnosRestantes="turnosDora")
     div.con-int-juego
@@ -228,7 +230,7 @@ export default defineComponent({
 
 </script>
 
-<style lang="sass" vars="{pH, phx, pW, pwx, escala}">
+<style lang="sass">
 
 .con-int-juego
     position: absolute
diff --git a/src/views/Juego/components/contenedor-descartes.vue b/src/views/Juego/components/contenedor-descartes.vue
index b02225a..16bde1a 100644
--- a/src/views/Juego/components/contenedor-descartes.vue
+++ b/src/views/Juego/components/contenedor-descartes.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-div.cont-cuadrante-descarte(:class="claseTurnoActual")
+div.cont-cuadrante-descarte(:class="claseTurnoActual" :style="'--escala: ' + escala + ';'")
     div(v-for="cartas in grupoCartas")
         carta(v-for="(c, i) in cartas" :valor="c" :key="i")
 
diff --git a/src/views/Juego/components/contenedor-dora.vue b/src/views/Juego/components/contenedor-dora.vue
index f6e9890..3ac7c3f 100644
--- a/src/views/Juego/components/contenedor-dora.vue
+++ b/src/views/Juego/components/contenedor-dora.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-div.contenedor-dora
+div.contenedor-dora(:style="'--escala: ' + escala + ';'")
     carta(v-for="(c, i) in doraCerrado" :valor="c" :key="i")
     br
     carta(v-for="(c, i) in doraAbierto" :valor="c" :key="i")
@@ -47,7 +47,7 @@ export default defineComponent({
 
 </script>
 
-<style lang="sass" vars="{escala}">
+<style lang="sass">
 
 .contenedor-dora
     position: fixed
diff --git a/src/views/Juego/components/opciones-mano/opcion-ignorar.vue b/src/views/Juego/components/opciones-mano/opcion-ignorar.vue
index b173888..9edb7ff 100644
--- a/src/views/Juego/components/opciones-mano/opcion-ignorar.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-ignorar.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-div.opcion-mano(@click="enviarSolicitudIgnorarOportunidad" :style="{backgroundColor: '#9E9E9E'}")
+div.opcion-mano(@click="enviarSolicitudIgnorarOportunidad" :style="'background-color: #9E9E9E; --tamano: ' + tamano + ';'")
     | Ignorar
 
 //
@@ -51,7 +51,7 @@ export default defineComponent({
 
 </script>
 
-<style lang="sass" vars="{tamano}">
+<style lang="sass">
 
 .opcion-mano
     display: inline-block
diff --git a/src/views/Juego/components/opciones-mano/opcion-seq.vue b/src/views/Juego/components/opciones-mano/opcion-seq.vue
index e4f6e28..08d9746 100644
--- a/src/views/Juego/components/opciones-mano/opcion-seq.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-seq.vue
@@ -1,5 +1,7 @@
 <template lang="pug">
-div.opcion-mano(v-for="opcion in opciones" @click="enviarSolicitudSeq(opcion)" :style="{backgroundColor: '#009688'}")
+div.opcion-mano(v-for="opcion in opciones" @click="enviarSolicitudSeq(opcion)"
+    :style="'background-color: #009688; --tamano: ' + tamano + '; --escala: ' + escala + ';'"
+)
     div.contenedor-cartas-opcion-mano
         carta(v-for="(c, i) in obtCartasOrdenadas(opcion)"
             :valor="c"
@@ -76,7 +78,7 @@ export default defineComponent({
 
 </script>
 
-<style lang="sass" vars="{tamano, escala}">
+<style lang="sass">
 
 .contenedor-cartas-opcion-mano
     position: absolute
diff --git a/src/views/Juego/components/opciones-mano/opcion-tri.vue b/src/views/Juego/components/opciones-mano/opcion-tri.vue
index 1b1fea4..e8c70c5 100644
--- a/src/views/Juego/components/opciones-mano/opcion-tri.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-tri.vue
@@ -1,5 +1,7 @@
 <template lang="pug">
-div.opcion-mano(@click="enviarSolicitudSeq()" :style="{backgroundColor: '#3F51B5'}")
+div.opcion-mano(@click="enviarSolicitudSeq()"
+    :style="'background-color: #3F51B5; --tamano: ' + tamano + '; --escala: ' + escala + ';'"
+)
     div.contenedor-cartas-opcion-mano
         carta(v-for="(c, i) in obtCartas()"
             :valor="c"
@@ -81,7 +83,7 @@ export default defineComponent({
 
 </script>
 
-<style lang="sass" vars="{tamano, escala}">
+<style lang="sass">
 
 .contenedor-cartas-opcion-mano
     position: absolute
diff --git a/src/views/Juego/components/opciones-mano/opcion-win.vue b/src/views/Juego/components/opciones-mano/opcion-win.vue
index 42dd780..17de490 100644
--- a/src/views/Juego/components/opciones-mano/opcion-win.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-win.vue
@@ -1,5 +1,7 @@
 <template lang="pug">
-div.opcion-mano(@click="enviarSolicitudWin()" :style="{backgroundColor: '#f44336'}")
+div.opcion-mano(@click="enviarSolicitudWin()"
+    :style="'background-color: #f44336; --tamano: ' + tamano + ';'"
+)
     span Win
 
 //
@@ -54,7 +56,7 @@ export default defineComponent({
 
 </script>
 
-<style lang="sass" vars="{tamano}">
+<style lang="sass">
 
 .opcion-mano
     position: relative