Mejoras a varios componentes y agregada documentacion para Cartas

src/router/index.ts

@@ -32,6 +32,10 @@ const routes: Array<RouteRecordRaw> = [
             {
                 path: "",
                 component: () => import(/* webpackChunkName: "tutorial_index" */ "../views/Tutorial/views/Index.vue")
+            },
+            {
+                path: "cartas/",
+                component: () => import(/* webpackChunkName: "tutorial_cartas" */ "../views/Tutorial/views/Cartas.vue")
             }
         ]
     }

src/views/Tutorial/Tutorial.vue

@@ -5,7 +5,8 @@ div.contenedor-tutorial
     div.layout.contenido
         h1 Tutorial de RiMaJon
 
-        router-view
+        slot-estilos
+            router-view
 
 //
 </template>
@@ -13,10 +14,11 @@ div.contenedor-tutorial
 <script lang="ts">
 import {defineComponent} from "vue";
 import barraLateral from "./components/barra-lateral.vue";
+import slotEstilos from "./components/slot-estilos.vue"
 
 export default defineComponent({
     name: "Tutorial",
-    components: {barraLateral}
+    components: {barraLateral, slotEstilos}
 });
 
 </script>

src/views/Tutorial/components/barra-lateral.vue

@@ -1,24 +1,20 @@
 <template lang="pug">
 div.barra-lateral
     router-link(to="/tutorial/") Inicio
-    br
     hr
     router-link(to="/tutorial/cartas/") Cartas
     br
-    router-link(to="/") Mano
+    router-link(to="/tutorial/mano/") Mano
-    br
     div.inner
         router-link(to="/") Par
         br
         router-link(to="/") Secuencia
         br
         router-link(to="/") Triple
-        br
 
     router-link(to="/") Flujo del juego
     br
     router-link(to="/") Cómo ganar
-    br
     div.inner
         router-link(to="/") Mano lista
         br
@@ -27,22 +23,18 @@ div.barra-lateral
         router-link(to="/") Ganar robando una carta
         br
         router-link(to="/") Restricciones para ganar
-        br
 
     hr
 
     router-link(to="/") Descartes y Robos
-    br
     div.inner
         router-link(to="/") Robar para formar secuencia
         br
         router-link(to="/") Robar para formar triple
-        br
 
     router-link(to="/") Mano abierta/cerrada
     br
     router-link(to="/") Cuádruple
-    br
     div.inner
         router-link(to="/") Robar para formar un cuádruple
         br
@@ -51,10 +43,8 @@ div.barra-lateral
         router-link(to="/") Formar un cuádruple en un triple robado
         br
         router-link(to="/") Bonus abierto
-        br
 
     router-link(to="/") Yaku - Manos
-    br
     div.inner
         router-link(to="/") Yaku normal
         br
@@ -63,33 +53,26 @@ div.barra-lateral
         router-link(to="/") Yaku en mano cerrada y abierta
         br
         router-link(to="/") Yaku no acumulable
-        br
 
     router-link(to="/") Bonus
-    br
     div.inner
         router-link(to="/") Bonus cerrado
         br
         router-link(to="/") Bonus abierto
-        br
 
     router-link(to="/") Dragones
-    br
     div.inner
         router-link(to="/") Dragon de la partida
         br
         router-link(to="/") Dragon del jugador
-        br
 
     router-link(to="/") Puntaje
-    br
     div.inner
         router-link(to="/") Al ganar robando la carta ganadora
         br
         router-link(to="/") Al ganar recibiendo la carta ganadora
         br
         router-link(to="/") Múltiples ganadores
-        br
 
     router-link(to="/") Empate
     br

src/views/Tutorial/components/sig-ant-pagina.vue

@@ -1,15 +1,14 @@
 <template lang="pug">
 div.sig-ant-pagina
     div.cont
-        div.link(v-if="rutaAnt" @click="irA(rutaAnt.ruta)")
+        div.link(v-if="rutaAnt")
-            p Anterior
+            router-link(:to="rutaAnt.ruta")
-            p {{ rutaAnt.nombre }}
+                p {{ rutaAnt.nombre }}
     div(style="opacity: 0") &nbsp;
     div.cont
-        div.link(v-if="rutaSig" @click="irA(rutaSig.ruta)")
+        div.link(v-if="rutaSig")
-            router-link(to="/tutorial/cartas/")
+            router-link(:to="rutaSig.ruta")
-                p
+                p {{ rutaSig.nombre }}
-                    | {{ rutaSig.nombre }}
 
 //
 </template>
@@ -66,6 +65,8 @@ a
     display: inline-block
     width: 100%
     color: var(--color-texto)
+    p
+        text-align: center
 
 //
 </style>

src/views/Tutorial/components/slot-estilos.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+div
+    slot
+
+//
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    name: "slot-estilos"
+});
+
+</script>
+
+<style lang="sass">
+
+p
+    font-size: 1.35rem
+    text-align: justify
+
+a
+    display: inline-block
+    color: var(--color-texto)
+    font-size: 1.15rem
+    line-height: 1.2rem
+    margin: 0.3rem 0
+
+img
+    width: 100%
+    height: auto
+    max-width: 50rem
+
+.inner
+    padding: 0.5rem 0 0.5rem 1rem
+
+
+
+//
+</style>

src/views/Tutorial/views/Cartas.vue

@@ -0,0 +1,68 @@
+<template lang="pug">
+div
+    h2 Cartas
+
+    p RiMaJon usa su propio conjunto de cartas, similar a una baraja normal. Estas son todas las cartas:
+
+    carta(v-for="(c, i) in cartas" :valor="c" :key="i")
+
+    p Hay 108 cartas, y se dividen en 4 tipos:
+
+    div.inner
+        h3 Números rojos
+        p Son cartas de la A hasta el 10 de color negro. Hay 4 cartas de cada número.
+        h3 Números negros
+        p Son cartas de la A hasta el 10 de color negro. Hay 4 cartas de cada número.
+        h3 Dragones
+        p Son cartas con imágenes de dragones, de 4 colores diferentes. Hay 4 cartas de cada color de dragon.
+        h3 Realeza
+        p Son las cartas de J, Q, K. Son de color verde y no tienen símbolo. Hay 4 cartas de cada uno.
+
+    p Los símbolos de las cartas de números no tienen importancia por ahora.
+
+    sigAnteriorPagina(:rutaSig="rutaSig" :rutaAnt="rutaAnt")
+
+//
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import carta from "@/components/carta.vue";
+import sigAnteriorPagina from "@/views/Tutorial/components/sig-ant-pagina.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,
+    41, 42, 42, 43, 43, 44, 44, 45, 45, 46, 46, 47, 47, 48, 48, 49, 49, 50, 50, 51, 51, 52, 52, 53, 53, 64, 64,
+    64, 64, 96, 96, 96, 96, 128, 128, 128, 128, 160, 160, 160, 160, 192, 192, 192, 192, 224, 224, 224, 224,
+    256, 256, 256, 256];
+
+export default defineComponent({
+    name: "Cartas",
+    components: {carta, sigAnteriorPagina},
+    setup() {
+
+        const rutaAnt = {
+            nombre: "Inicio",
+            ruta: "/tutorial/"
+        };
+
+        const rutaSig = {
+            nombre: "Mano",
+            ruta: "/mano/"
+        };
+
+        return {
+            cartas,
+            rutaSig,
+            rutaAnt
+        }
+    }
+});
+
+</script>
+
+<style scoped lang="sass">
+
+
+//
+</style>

src/views/Tutorial/views/Index.vue

@@ -55,21 +55,6 @@ export default defineComponent({
 
 <style scoped lang="sass">
 
-p
-    font-size: 1.35rem
-    text-align: justify
-
-a
-    display: inline-block
-    color: var(--color-texto)
-    font-size: 1.15rem
-    line-height: 1.2rem
-    margin: 0.3rem 0
-
-img
-    width: 100%
-    height: auto
-    max-width: 50rem
 
 //
 </style>