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

6
src/variables.ts
View File

@ -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}`;

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

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

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

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

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

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

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

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

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