fernando/rimajon-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reducida la cantidad de variables in-line

Browse Source
This commit is contained in:
Araozu 2020-10-26 10:39:37 -05:00
parent 734c373055
commit d0f9fa0144
8 changed files with 102 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/carta.vue
View File

@ -42,19 +42,13 @@ export default defineComponent({
type: Function, type: Function,
required: false required: false
}, },
escala: {
type: Number,
default: 1
},
resaltarCarta: { resaltarCarta: {
type: Boolean, type: Boolean,
default: true default: true
} }
}, },
setup(props) { setup(props) {
const {pH} = useDimensions();
const store = useStore(); const store = useStore();
const pxesc = computed(() => pH.value + "px");
const valorR = computed(() => props.valor); const valorR = computed(() => props.valor);
const {esOscuro} = getEsOscuro(store); const {esOscuro} = getEsOscuro(store);
@ -168,30 +162,29 @@ export default defineComponent({
claseResaltado, claseResaltado,
fnDescartar, fnDescartar,
aplicarResaltadoCarta, aplicarResaltadoCarta,
quitarResaltadoCarta, quitarResaltadoCarta
pxesc
} }
} }
}); });
</script> </script>
<style lang="sass" vars="{pxesc, escala}"> <style lang="sass">
.c-carta-resaltada .c-carta-resaltada
transform: translateY(calc(var(--pxesc) * -1)) transform: translateY(calc(var(--phx) * -1))
.c-carta .c-carta
position: relative position: relative
font: font:
size: calc(var(--pxesc) * 4 * var(--escala)) size: calc(var(--phx) * 4 * var(--escala))
weight: normal weight: normal
family: "Secular One", "Pt Serif", serif family: "Secular One", "Pt Serif", serif
display: table-cell display: table-cell
border: solid calc(var(--pxesc) * 0.2 * var(--escala)) var(--color-borde) border: solid calc(var(--phx) * 0.2 * var(--escala)) var(--color-borde)
width: calc(var(--pxesc) * 5 * var(--escala)) width: calc(var(--phx) * 5 * var(--escala))
height: calc(var(--pxesc) * 8.5 * var(--escala)) height: calc(var(--phx) * 8.5 * var(--escala))
min-width: calc(var(--pxesc) * 5 * var(--escala)) min-width: calc(var(--phx) * 5 * var(--escala))
text-align: center text-align: center
vertical-align: middle vertical-align: middle
cursor: pointer cursor: pointer
@ -232,7 +225,7 @@ export default defineComponent({
display: inline-block display: inline-block
width: 60% width: 60%
height: 80% 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 border-radius: 0.1rem
opacity: 0.75 opacity: 0.75

6
src/variables.ts
View File

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

34
src/views/Juego/Juego.vue
View File

@ -3,10 +3,7 @@ div
contenedor-dora(:turnosRestantes="turnosDora") contenedor-dora(:turnosRestantes="turnosDora")
div.con-int-juego div.con-int-juego
div.cont-2-juego div.cont-2-juego
div.cont-cuadrante-cartas-juego contenedorCartas(:cartasRestantes="cartasRestantes" :dragonPartida="dragonPartida")
span(:style="{fontSize: `${pH * 10}px`}") {{ cartasRestantes }}
br
span(:style="{fontSize: `${pH * 2.5}px`}") Cartas restantes
mano(:mano="mano2" :posicion="2" :esTurnoActual="turnoActual === obtClaveMap('2')") mano(:mano="mano2" :posicion="2" :esTurnoActual="turnoActual === obtClaveMap('2')")
mano(:mano="mano3" :posicion="3" :esTurnoActual="turnoActual === obtClaveMap('3')") mano(:mano="mano3" :posicion="3" :esTurnoActual="turnoActual === obtClaveMap('3')")
mano(:mano="mano4" :posicion="4" :esTurnoActual="turnoActual === obtClaveMap('4')") mano(:mano="mano4" :posicion="4" :esTurnoActual="turnoActual === obtClaveMap('4')")
@ -23,13 +20,14 @@ div
</template> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent, ref, computed, onMounted, onUnmounted} from "vue"; import {defineComponent, ref, onMounted, onUnmounted} from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useDimensions } from "@/components/useDimensions"; import { useDimensions } from "@/components/useDimensions";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { wsServidor } from "@/variables"; import { wsServidor } from "@/variables";
import contenedorDora from "./components/contenedor-dora.vue" import contenedorDora from "./components/contenedor-dora.vue"
import mano from "@/views/Juego/components/mano.vue"; import mano from "@/views/Juego/components/mano.vue";
import contenedorCartas from "./components/contenedor-cartas.vue"
const manoInicial = { const manoInicial = {
cartas: [], cartas: [],
@ -49,13 +47,11 @@ const obtClave = (obj: any, valor: string): string | undefined => {
export default defineComponent({ export default defineComponent({
name: "Juego", name: "Juego",
components: {contenedorDora, mano}, components: {contenedorDora, mano, contenedorCartas},
setup() { setup() {
const route = useRoute(); const route = useRoute();
const store = useStore(); const store = useStore();
const {pH, pW} = useDimensions(); const {pH, phx, pW, pwx} = useDimensions();
const ph = computed(() => pH.value + "px");
const pw = computed(() => pW.value + "px");
const esPantallaCompleta = ref(false); const esPantallaCompleta = ref(false);
const dora = ref([0, 0, 0, 0, 0]); const dora = ref([0, 0, 0, 0, 0]);
@ -65,6 +61,8 @@ export default defineComponent({
const cartaDescartada = ref(false); const cartaDescartada = ref(false);
const turnosDora = ref(32); const turnosDora = ref(32);
const dragonPartida = ref("");
const mano1 = ref(manoInicial); const mano1 = ref(manoInicial);
const mano2 = ref(manoInicial); const mano2 = ref(manoInicial);
const mano3 = ref(manoInicial); const mano3 = ref(manoInicial);
@ -115,6 +113,7 @@ export default defineComponent({
store.commit("setDora", [info.datos.dora, info.datos.doraOculto]); store.commit("setDora", [info.datos.dora, info.datos.doraOculto]);
turnosDora.value = info.datos.turnosHastaDora; turnosDora.value = info.datos.turnosHastaDora;
dragonPartida.value = d.dragonPartida;
// Mapear IDS a posiciones // Mapear IDS a posiciones
const turnoJugador = d.ordenJugadores.findIndex((id: string) => id === idUsuario); const turnoJugador = d.ordenJugadores.findIndex((id: string) => id === idUsuario);
@ -206,6 +205,7 @@ export default defineComponent({
doraOculto, doraOculto,
turnosDora, turnosDora,
cartasRestantes, cartasRestantes,
dragonPartida,
idUsuario, idUsuario,
socket, socket,
mano1, mano1,
@ -216,23 +216,25 @@ export default defineComponent({
obtClaveMap, obtClaveMap,
descartarCarta, descartarCarta,
pH, pH,
ph, phx,
pw, pW,
pwx,
escala: 1
} }
} }
}); });
</script> </script>
<style lang="sass" vars="{ph, pw}"> <style lang="sass" vars="{pH, phx, pW, pwx, escala}">
.con-int-juego .con-int-juego
position: absolute position: absolute
top: 0 top: 0
left: calc((var(--pw) * 100 - var(--ph) * 100) / 2) left: calc((var(--pwx) * 100 - var(--phx) * 100) / 2)
width: calc(var(--ph) * 100) width: calc(var(--phx) * 100)
height: calc(var(--ph) * 100) height: calc(var(--phx) * 100)
perspective: calc(var(--pw) * 10) perspective: calc(var(--pwx) * 10)
transform-style: preserve-3d transform-style: preserve-3d

53
src/views/Juego/components/contenedor-cartas.vue Normal file
View File

@ -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>

9
src/views/Juego/components/contenedor-descartes.vue
View File

@ -1,7 +1,7 @@
<template lang="pug"> <template lang="pug">
div.cont-cuadrante-descarte(:class="claseTurnoActual") div.cont-cuadrante-descarte(:class="claseTurnoActual")
div(v-for="cartas in grupoCartas") 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> </template>
@ -44,22 +44,19 @@ export default defineComponent({
} }
}, },
setup(props) { setup(props) {
const {phx} = useDimensions();
const grupoCartas = computed(() => splitArray(props.cartas as number[], 6)); const grupoCartas = computed(() => splitArray(props.cartas as number[], 6));
const claseTurnoActual = computed(() => props.esTurnoActual? "cont-cuadrante-descarte-turno-actual": ""); const claseTurnoActual = computed(() => props.esTurnoActual? "cont-cuadrante-descarte-turno-actual": "");
return { return {
grupoCartas, grupoCartas,
claseTurnoActual, claseTurnoActual
phx
} }
} }
}); });
</script> </script>
<style scoped lang="sass" vars="{phx, escala}"> <style lang="sass" vars="{escala}">
.cont-cuadrante-descarte .cont-cuadrante-descarte
position: absolute position: absolute

22
src/views/Juego/components/contenedor-dora.vue
View File

@ -1,8 +1,8 @@
<template lang="pug"> <template lang="pug">
div.contenedor-dora 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 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 br
span(v-if="turnosRestantes === 1") Bonus en {{turnosRestantes}} turno span(v-if="turnosRestantes === 1") Bonus en {{turnosRestantes}} turno
span(v-else-if="turnosRestantes > 1") Bonus en {{turnosRestantes}} turnos span(v-else-if="turnosRestantes > 1") Bonus en {{turnosRestantes}} turnos
@ -27,8 +27,6 @@ export default defineComponent({
}, },
setup() { setup() {
const store = useStore(); const store = useStore();
const {pH} = useDimensions();
const pHc = computed(() => pH.value + "px");
const doraCerrado = computed(() => { const doraCerrado = computed(() => {
const narr = [...store.state.dora[0]]; const narr = [...store.state.dora[0]];
@ -48,23 +46,23 @@ export default defineComponent({
return { return {
doraCerrado, doraCerrado,
doraAbierto, doraAbierto,
pHc escala: 0.75
} }
} }
}); });
</script> </script>
<style lang="sass" vars="{pHc}"> <style lang="sass" vars="{escala}">
.contenedor-dora .contenedor-dora
position: fixed position: fixed
top: calc(var(--pHc) * 2) top: calc(var(--phx) * 2)
left: calc(var(--pHc) * 2) left: calc(var(--phx) * 2)
padding: var(--pHc) padding: var(--phx)
border-radius: calc(var(--pHc) / 2) border-radius: calc(var(--phx) / 2)
font-size: calc(var(--pHc) * 2.5) font-size: calc(var(--phx) * 2.5)
box-shadow: 0 0 calc(var(--pHc) * 0.75) calc(var(--pHc) * 0.75) #dedede box-shadow: 0 0 calc(var(--phx) * 0.75) calc(var(--phx) * 0.75) #dedede
background-color: var(--color-fondo) background-color: var(--color-fondo)
// //

8
src/views/Juego/components/mano.vue
View File

@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
div.cont-cuadrante-2-mano div.cont-cuadrante-2-mano(:style="'transform: rotate(' + posicionW + ')'")
contenedor-descartes(:cartas="mano.descartes" :esTurnoActual="esTurnoActual") contenedor-descartes(:cartas="mano.descartes" :esTurnoActual="esTurnoActual")
div.cont-opciones-mano div.cont-opciones-mano
opcion-tri(v-if="oportunidadTri" opcion-tri(v-if="oportunidadTri"
@ -77,7 +77,7 @@ export default defineComponent({
fnDescartarCarta: Function fnDescartarCarta: Function
}, },
setup(props) { setup(props) {
const {pH, phx} = useDimensions(); const {pH} = useDimensions();
const anchoCarta = computed(() => pH.value * 5 + 2 * (pH.value * 0.225)) const anchoCarta = computed(() => pH.value * 5 + 2 * (pH.value * 0.225))
const cartas = ref<number[]>((props.mano as Mano).cartas); const cartas = ref<number[]>((props.mano as Mano).cartas);
const posicion = props.posicion; const posicion = props.posicion;
@ -180,7 +180,6 @@ export default defineComponent({
oportunidadTri, oportunidadTri,
oportunidadQuad, oportunidadQuad,
oportunidadWin, oportunidadWin,
phx,
posicionW: computed(() => (90 * (5 - posicion!!)) + "deg") posicionW: computed(() => (90 * (5 - posicion!!)) + "deg")
} }
} }
@ -188,7 +187,7 @@ export default defineComponent({
</script> </script>
<style scoped lang="sass" vars="{phx, posicionW}"> <style lang="sass">
.cont-opciones-mano .cont-opciones-mano
position: absolute position: absolute
@ -218,7 +217,6 @@ export default defineComponent({
position: absolute position: absolute
width: 100% width: 100%
height: 100% height: 100%
transform: rotate(var(--posicionW))
.cuadrante-mano .cuadrante-mano

3
src/views/Juego/types/Mano.ts
View File

@ -1,10 +1,13 @@
import { Oportunidad } from "@/views/Juego/types/Oportunidad"; import { Oportunidad } from "@/views/Juego/types/Oportunidad";
export type Dragon = "Negro" | "Rojo" | "Verde" | "Azul";
export declare class Mano { export declare class Mano {
cartas: number[] cartas: number[]
cartasReveladas: number[][] cartasReveladas: number[][]
descartes: number[] descartes: number[]
sigCarta: number sigCarta: number
oportunidades: Oportunidad[] oportunidades: Oportunidad[]
dragon: Dragon
} }