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

Agregado indicador de dragon del jugador y indicador de mano abierta/cerrada.

Browse Source
This commit is contained in:
Araozu 2020-10-26 11:58:32 -05:00
parent 1f2590fb8d
commit 6169725f7d
7 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/variables.ts
View File

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

3
src/views/Juego/components/contenedor-cartas.vue
View File

@ -1,6 +1,6 @@
<template lang="pug">
div.cont-cuadrante-cartas-juego
img.img-dragon-partida(:src="rutaImgDragon")
img.img-dragon-partida(:src="rutaImgDragon" title="Dragon de la partida")
br
span.txt-cartas {{ cartasRestantes }} cartas
@ -49,6 +49,7 @@ export default defineComponent({
text-align: center
border: solid calc(var(--phx) / 2) #212121
border-radius: calc(var(--phx))
z-index: 10
.txt-cartas

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

@ -12,16 +12,18 @@ div.cont-cuadrante-2-mano(:style="'transform: rotate(' + posicionW + ')'")
:ws="ws"
:oportunidad="oportunidadSeq"
)
div.opcion-mano(v-if="oportunidadQuad" :style="{backgroundColor: '#9C27B0'}")
| Quad
opcion-win(v-if="oportunidadWin"
:idUsuario="idUsuario"
:ws="ws"
:oportunidad="oportunidadWin"
)
opcion-ignorar(v-if="oportunidadTri || oportunidadSeq || oportunidadQuad || oportunidadWin"
opcion-ignorar(v-if="oportunidadTri || oportunidadSeq || oportunidadWin"
:idUsuario="idUsuario" :ws="ws"
)
div.contenedor-dragon-jugador
img.imagen-dragon-jugador(:src="rutaDragonJugador" title="Dragon del jugador")
i.ph-lock.img-lock-jugador(v-if="idUsuario && mano.cartasReveladas.length === 0" title="Mano cerrada")
i.ph-lock-open.img-lock-jugador(v-else-if="idUsuario && mano.cartasReveladas.length !== 0" title="Mano abierta")
div.cuadrante-mano
carta(v-for="(c, i) in cartas" :valor="c" :movimiento="posiciones[i]" :fnDescartar="descartarCarta" :key="i")
carta(:valor="-1")
@ -164,22 +166,23 @@ export default defineComponent({
return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Tri")
});
const oportunidadQuad = computed<Oportunidad | undefined>(() => {
return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Quad")
});
const oportunidadWin = computed<Oportunidad | undefined>(() => {
return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Win")
});
const rutaDragonJugador = computed(() => {
const nombreDragonMin = props.mano?.dragon?.toLowerCase();
return `/img/Dragon_${nombreDragonMin}.webp`;
});
return {
cartas,
posiciones,
descartarCarta,
oportunidadSeq,
oportunidadTri,
oportunidadQuad,
oportunidadWin,
rutaDragonJugador,
posicionW: computed(() => (90 * (5 - posicion!!)) + "deg")
}
}
@ -228,5 +231,20 @@ export default defineComponent({
text-align: left
.contenedor-dragon-jugador
position: absolute
bottom: 10%
left: 13%
.imagen-dragon-jugador
width: calc(var(--phx) * 5)
.img-lock-jugador
font-size: calc(var(--phx) * 3)
display: inline-block
padding-left: calc(var(--phx))
//
</style>

7
src/views/Juego/components/opciones-mano/opcion-ignorar.vue
View File

@ -24,7 +24,7 @@ export default defineComponent({
},
setup(props) {
const route = useRoute();
const {pH, phx} = useDimensions();
const {pH} = useDimensions();
const idJuego = route.params.id;
@ -40,15 +40,14 @@ export default defineComponent({
return {
enviarSolicitudIgnorarOportunidad,
tamano: computed(() => (pH.value * -0.75) + "px"),
phx
tamano: computed(() => (pH.value * -0.75) + "px")
}
}
});
</script>
<style scoped lang="sass" vars="{tamano, phx}">
<style lang="sass" vars="{tamano}">
.opcion-mano
display: inline-block

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

@ -3,7 +3,6 @@ div.opcion-mano(v-for="opcion in opciones" @click="enviarSolicitudSeq(opcion)" :
div.contenedor-cartas-opcion-mano
carta(v-for="(c, i) in obtCartasOrdenadas(opcion)"
:valor="c"
:escala="0.5"
:key="i"
:resaltarCarta="false"
)
@ -37,7 +36,7 @@ export default defineComponent({
},
setup(props) {
const route = useRoute();
const {pH, phx} = useDimensions();
const {pH} = useDimensions();
const idJuego = route.params.id;
@ -70,14 +69,14 @@ export default defineComponent({
enviarSolicitudSeq,
obtCartasOrdenadas,
tamano: computed(() => (pH.value * -0.75) + "px"),
phx
escala: 0.5
}
}
});
</script>
<style scoped lang="sass" vars="{tamano, phx}">
<style lang="sass" vars="{tamano, escala}">
.contenedor-cartas-opcion-mano
position: absolute

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

@ -3,7 +3,6 @@ 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"
:resaltarCarta="false"
)
@ -37,7 +36,7 @@ export default defineComponent({
},
setup(props) {
const route = useRoute();
const {pH, phx} = useDimensions();
const {pH} = useDimensions();
const idJuego = route.params.id;
@ -75,14 +74,14 @@ export default defineComponent({
enviarSolicitudSeq,
obtCartas,
tamano: computed(() => (pH.value * -0.75) + "px"),
phx
escala: 0.5
}
}
});
</script>
<style scoped lang="sass" vars="{tamano, phx}">
<style lang="sass" vars="{tamano, escala}">
.contenedor-cartas-opcion-mano
position: absolute

7
src/views/Juego/components/opciones-mano/opcion-win.vue
View File

@ -28,7 +28,7 @@ export default defineComponent({
},
setup(props) {
const route = useRoute();
const {pH, phx} = useDimensions();
const {pH} = useDimensions();
const idJuego = route.params.id;
@ -48,15 +48,14 @@ export default defineComponent({
return {
enviarSolicitudWin,
tamano: computed(() => (pH.value * -0.75) + "px"),
phx
tamano: computed(() => (pH.value * -0.75) + "px")
}
}
});
</script>
<style scoped lang="sass" vars="{tamano, phx}">
<style lang="sass" vars="{tamano}">
.opcion-mano
position: relative