Agregados simbolos a las cartas

src/components/carta.vue

@@ -2,6 +2,10 @@
 div(@click="fnDescartar" style="display: inline-block")
     div.c-carta(v-if="valor === 0")
         div.c-carta-oculta(v-html="' '")
+    div.c-carta(v-else-if="tipo === 0 || tipo === 1" :class="'carta-' + tipoCarta")
+        span.c-carta-numero {{ valorC }}
+        div.c-carta-img
+            v-img-simbolo(:tipo="nombreSimbolo")
     div.c-carta(v-else-if="tipo === 2 || tipo === 3 || tipo === 4 || tipo === 5" :class="'carta-' + tipoCarta")
         img.img-dragon(:src="'/img/Dragon_' + colorDragon + '.webp'" :alt="'Dragon ' + colorDragon")
     div.c-carta(v-else :class="'carta-' + tipoCarta" v-html="valorC")
@@ -14,9 +18,11 @@ import {defineComponent, computed} from "vue";
 import {useDimensions} from "@/components/useDimensions";
 import { useStore } from "vuex";
 import { getEsOscuro } from "@/components/getEsOscuro";
+import vImgSimbolo from "./img-cartas/v-img-simbolo.vue";
 
 export default defineComponent({
     name: "carta",
+    components: {vImgSimbolo},
     props: {
         valor: {
             type: Number,
@@ -84,6 +90,16 @@ export default defineComponent({
             }
         });
 
+        const nombreSimbolo = computed(() => {
+            if (tipo.value === 0) {
+                return (((props.valor << 31) >>> 31) === 1)? "trebol": "pica";
+            } else if (tipo.value === 1) {
+                return (((props.valor << 31) >>> 31) === 1)? "corazon": "diamante";
+            } else {
+                return "";
+            }
+        });
+
         const colorDragon = computed<string>(() => {
             if (esOscuro.value) return "blanco";
             switch (tipo.value) {
@@ -106,6 +122,7 @@ export default defineComponent({
             tipo,
             tipoCarta,
             valorC,
+            nombreSimbolo,
             colorDragon,
             fnDescartar,
             pxesc
@@ -143,6 +160,21 @@ export default defineComponent({
     border-radius: 0.1rem
     opacity: 0.75
 
+.c-carta-numero
+    display: inline-block
+    position: absolute
+    top: 5%
+    left: 10%
+    font-size: 100%
+    line-height: 1
+
+.c-carta-img
+    display: inline-block
+    position: absolute
+    bottom: 7%
+    right: 10%
+    width: 60%
+
 .img-dragon
     width: 90%
     height: auto

src/components/getEsOscuro.ts

@@ -7,7 +7,6 @@ export const getEsOscuro = (store: Store<RiMaJonState>) => {
         if (store.state.modoColor === "oscuro") {
             return true;
         } else if (store.state.modoColor === "auto") {
-            console.log(store.state.modoColorUsuario);
             return store.state.modoColorUsuario === "oscuro";
         }
         return false;

src/components/img-cartas/v-img-simbolo.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
-div
-    img(:src="rutaSvg")
+img(:src="rutaSvg")
 
 //
 </template>
@@ -11,13 +10,19 @@ import { useStore } from "vuex";
 import { getEsOscuro } from "@/components/getEsOscuro";
 
 export default defineComponent({
-    name: "v-img-corazon",
-    setup() {
+    name: "v-img-simbolo",
+    props: {
+        tipo: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props) {
         const store = useStore();
 
         const {esOscuro} = getEsOscuro(store);
 
-        const rutaSvg = computed(() => `/img/simbolos-cartas/T${esOscuro.value? "Oscuro": "Claro"}_corazon.svg`);
+        const rutaSvg = computed(() => `/img/simbolos-cartas/T${esOscuro.value? "Oscuro": "Claro"}_${props.tipo}.svg`);
 
         return {
             rutaSvg
@@ -29,7 +34,12 @@ export default defineComponent({
 
 <style scoped lang="sass">
 
-
+img
+    width: 100%
+    height: auto
+    position: absolute
+    bottom: 0
+    left: 0
 
 //
 </style>

src/variables.ts

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

src/views/Ayuda/Ayuda.vue

@@ -3,8 +3,6 @@ div
     h1 Sobre el juego
     p Ri Ma Jon es un juego inspirado en Mahjong, pero ejecutado con cartas.
 
-    vImgCorazon
-
     h2 Cartas
     p Existen 108 cartas en el juego:
 
@@ -360,7 +358,6 @@ div
 import {defineComponent} from "vue";
 import carta from "@/components/carta.vue";
 import grupoCartas from "../../components/grupo-cartas.vue";
-import vImgCorazon from "../../components/img-cartas/v-img-corazon.vue"
 
 const cartas = [2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15,
     16, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 34, 34, 35, 35, 36, 36, 37, 37, 38, 38, 39, 39, 40, 40, 41,
@@ -425,8 +422,7 @@ export default defineComponent({
     name: "Ayuda",
     components: {
         carta,
-        grupoCartas,
-        vImgCorazon
+        grupoCartas
     },
     setup() {
         return {