Agregada estructura para un tutorial
This commit is contained in:
Araozu
parent
cf30f57c85
commit
e9eb89a87a
1
_redirects
Normal file
1
_redirects
Normal file
@ -0,0 +1 @@
|
|||||||
|
/* /index.html 200
|
||||||
@ -4,7 +4,7 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve --port 3000",
|
"serve": "vue-cli-service serve --port 3000",
|
||||||
"build": "vue-cli-service build"
|
"build": "vue-cli-service build --modern"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
|
|||||||
BIN
public/img/tutorial/Img_rimajon_claro.webp
Normal file
BIN
public/img/tutorial/Img_rimajon_claro.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/img/tutorial/Img_rimajon_oscuro.webp
Normal file
BIN
public/img/tutorial/Img_rimajon_oscuro.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -5,14 +5,14 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title>RiMaJon - Mahjong con cartas</title>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">
|
||||||
<script src="https://unpkg.com/phosphor-icons"></script>
|
<link rel="stylesheet" href="/resources/phosphor.css">
|
||||||
</head>
|
</head>
|
||||||
<body class="tema-automatico">
|
<body class="tema-automatico">
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>Necesitas activar JavaScript para continuar.</strong>
|
<strong>Para jugar RiMaJon necesitas activar JavaScript.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
|
|||||||
1
public/resources/phosphor.css
Normal file
1
public/resources/phosphor.css
Normal file
File diff suppressed because one or more lines are too long
@ -10,19 +10,30 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
component: Inicio
|
component: Inicio
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/sala/:id",
|
path: "/sala/:id/",
|
||||||
name: "Sala",
|
name: "Sala",
|
||||||
component: Sala
|
component: Sala
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/juego/:id",
|
path: "/juego/:id/",
|
||||||
name: "Juego",
|
name: "Juego",
|
||||||
component: Juego
|
component: Juego
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/ayuda",
|
path: "/ayuda/",
|
||||||
name: "Ayuda",
|
name: "Ayuda",
|
||||||
component: () => import(/* webpackChunkName: "ayuda" */ "../views/Ayuda/Ayuda.vue")
|
component: () => import(/* webpackChunkName: "ayuda" */ "../views/Ayuda/Ayuda.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/tutorial/",
|
||||||
|
name: "Tutorial",
|
||||||
|
component: () => import(/* webpackChunkName: "tutorial" */ "../views/Tutorial/Tutorial.vue"),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
component: () => import(/* webpackChunkName: "tutorial_index" */ "../views/Tutorial/views/Index.vue")
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@ -2,6 +2,7 @@ body
|
|||||||
font-family: "Pt Serif", serif
|
font-family: "Pt Serif", serif
|
||||||
background-color: var(--color-fondo)
|
background-color: var(--color-fondo)
|
||||||
color: var(--color-texto)
|
color: var(--color-texto)
|
||||||
|
margin: 0
|
||||||
|
|
||||||
// Claro
|
// Claro
|
||||||
.tema-automatico
|
.tema-automatico
|
||||||
|
|||||||
@ -17,7 +17,10 @@ div
|
|||||||
|
|
||||||
br
|
br
|
||||||
p
|
p
|
||||||
router-link(to="/ayuda") Ayuda
|
router-link(to="/ayuda/") Ayuda
|
||||||
|
br
|
||||||
|
p
|
||||||
|
router-link(to="/tutorial/") Tutorial
|
||||||
|
|
||||||
//
|
//
|
||||||
</template>
|
</template>
|
||||||
@ -100,6 +103,15 @@ export default defineComponent({
|
|||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
|
|
||||||
|
a
|
||||||
|
color: var(--color-fondo)
|
||||||
|
background-color: var(--color-texto)
|
||||||
|
border-radius: 0.25rem
|
||||||
|
padding: 0.5rem 1rem
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
//
|
//
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
67
src/views/Tutorial/Tutorial.vue
Normal file
67
src/views/Tutorial/Tutorial.vue
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
div.contenedor-tutorial
|
||||||
|
barra-lateral.layout
|
||||||
|
|
||||||
|
div.layout.contenido
|
||||||
|
h1 Tutorial de RiMaJon
|
||||||
|
|
||||||
|
router-view
|
||||||
|
|
||||||
|
//
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
import barraLateral from "./components/barra-lateral.vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Tutorial",
|
||||||
|
components: {barraLateral}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="sass">
|
||||||
|
|
||||||
|
.contenedor-tutorial
|
||||||
|
display: grid
|
||||||
|
grid-template-columns: 15rem auto
|
||||||
|
grid-column-gap: 2rem
|
||||||
|
|
||||||
|
.inner
|
||||||
|
padding: 0.5rem 0 0.5rem 1rem
|
||||||
|
|
||||||
|
.barra-lateral
|
||||||
|
position: sticky
|
||||||
|
max-height: calc(100vh - 3rem)
|
||||||
|
overflow-y: auto
|
||||||
|
top: 0.3rem
|
||||||
|
margin: 0.3rem
|
||||||
|
|
||||||
|
.layout
|
||||||
|
max-width: 75rem
|
||||||
|
border: solid 1px pink
|
||||||
|
padding: 1rem
|
||||||
|
border-radius: 0.3rem
|
||||||
|
|
||||||
|
.contenido
|
||||||
|
margin: 0.3rem
|
||||||
|
|
||||||
|
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>
|
||||||
130
src/views/Tutorial/components/barra-lateral.vue
Normal file
130
src/views/Tutorial/components/barra-lateral.vue
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
div.barra-lateral
|
||||||
|
router-link(to="/tutorial/") Inicio
|
||||||
|
br
|
||||||
|
hr
|
||||||
|
router-link(to="/tutorial/cartas/") Cartas
|
||||||
|
br
|
||||||
|
router-link(to="/") 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
|
||||||
|
router-link(to="/") Ganar al recibir una carta
|
||||||
|
br
|
||||||
|
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
|
||||||
|
router-link(to="/") Formar un cuádruple al recibir una carta
|
||||||
|
br
|
||||||
|
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
|
||||||
|
router-link(to="/") Yaku en mano cerrada
|
||||||
|
br
|
||||||
|
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
|
||||||
|
br
|
||||||
|
|
||||||
|
//
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "barra-lateral"
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="sass">
|
||||||
|
|
||||||
|
.barra-lateral
|
||||||
|
position: sticky
|
||||||
|
max-height: calc(100vh - 3rem)
|
||||||
|
overflow-y: auto
|
||||||
|
top: 0.3rem
|
||||||
|
margin: 0.3rem
|
||||||
|
|
||||||
|
.inner
|
||||||
|
padding: 0.5rem 0 0.5rem 1rem
|
||||||
|
|
||||||
|
a
|
||||||
|
display: inline-block
|
||||||
|
color: var(--color-texto)
|
||||||
|
font-size: 1.15rem
|
||||||
|
line-height: 1.2rem
|
||||||
|
margin: 0.3rem 0
|
||||||
|
|
||||||
|
//
|
||||||
|
</style>
|
||||||
71
src/views/Tutorial/components/sig-ant-pagina.vue
Normal file
71
src/views/Tutorial/components/sig-ant-pagina.vue
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
div.sig-ant-pagina
|
||||||
|
div.cont
|
||||||
|
div.link(v-if="rutaAnt" @click="irA(rutaAnt.ruta)")
|
||||||
|
p Anterior
|
||||||
|
p {{ rutaAnt.nombre }}
|
||||||
|
div(style="opacity: 0")
|
||||||
|
div.cont
|
||||||
|
div.link(v-if="rutaSig" @click="irA(rutaSig.ruta)")
|
||||||
|
router-link(to="/tutorial/cartas/")
|
||||||
|
p
|
||||||
|
| {{ rutaSig.nombre }}
|
||||||
|
|
||||||
|
//
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "sig-ant-pagina",
|
||||||
|
props: {
|
||||||
|
rutaAnt: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
rutaSig: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const irA = (ruta: string) => router.push(ruta);
|
||||||
|
|
||||||
|
return {
|
||||||
|
irA
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="sass">
|
||||||
|
|
||||||
|
.sig-ant-pagina
|
||||||
|
display: grid
|
||||||
|
grid-template-columns: 15rem calc(100% - 30rem) 15rem
|
||||||
|
|
||||||
|
.cont
|
||||||
|
position: relative
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
.link
|
||||||
|
border: solid 1px var(--color-borde)
|
||||||
|
border-radius: 0.2rem
|
||||||
|
max-width: 15rem
|
||||||
|
cursor: pointer
|
||||||
|
user-select: none
|
||||||
|
&:hover
|
||||||
|
border-color: var(--color-texto)
|
||||||
|
|
||||||
|
a
|
||||||
|
display: inline-block
|
||||||
|
width: 100%
|
||||||
|
color: var(--color-texto)
|
||||||
|
|
||||||
|
//
|
||||||
|
</style>
|
||||||
75
src/views/Tutorial/views/Index.vue
Normal file
75
src/views/Tutorial/views/Index.vue
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
div
|
||||||
|
p.
|
||||||
|
RiMaJon es un juego de cartas para 4 jugadores. Cada jugador inicia con 10 cartas,
|
||||||
|
y la meta es ser el primero en formar una mano válida.
|
||||||
|
|
||||||
|
br
|
||||||
|
img(:src="rutaImg")
|
||||||
|
br
|
||||||
|
|
||||||
|
p.
|
||||||
|
Cada jugador se toma turnos para extraer una carta, verificar si le sirve, y desechar otra carta.
|
||||||
|
<br>
|
||||||
|
Este proceso se repite hasta que alguien forme una mano válida, con lo cual es el ganador.
|
||||||
|
|
||||||
|
p El tutorial está dividido en varios temas, los cuales se encuentran en la barra lateral.
|
||||||
|
p Para empezar a jugar solo necesitas aprender los primeros 4 temas, puedes aprender el resto a medida que juegas.
|
||||||
|
|
||||||
|
sig-anterior-pagina(:rutaSig="rutaSig")
|
||||||
|
|
||||||
|
//
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent, computed} from "vue";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { getEsOscuro } from "@/components/getEsOscuro";
|
||||||
|
import sigAnteriorPagina from "@/views/Tutorial/components/sig-ant-pagina.vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Index",
|
||||||
|
components: {sigAnteriorPagina},
|
||||||
|
setup() {
|
||||||
|
const store = useStore();
|
||||||
|
const {esOscuro} = getEsOscuro(store);
|
||||||
|
|
||||||
|
const rutaImg = computed(() => (esOscuro.value)
|
||||||
|
? "/img/tutorial/Img_rimajon_oscuro.webp"
|
||||||
|
: "/img/tutorial/Img_rimajon_claro.webp"
|
||||||
|
);
|
||||||
|
|
||||||
|
const rutaSig = {
|
||||||
|
nombre: "Cartas",
|
||||||
|
ruta: "/tutorial/cartas/"
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
rutaImg,
|
||||||
|
rutaSig
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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>
|
||||||
Loading…
Reference in New Issue
Block a user