Agregada estructura para un tutorial
Araozu
parent
cf30f57c85
commit
e9eb89a87a
|
|
@ -0,0 +1 @@
|
|||
/* /index.html 200
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --port 3000",
|
||||
"build": "vue-cli-service build"
|
||||
"build": "vue-cli-service build --modern"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -5,14 +5,14 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<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=Secular+One&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/phosphor-icons"></script>
|
||||
<link rel="stylesheet" href="/resources/phosphor.css">
|
||||
</head>
|
||||
<body class="tema-automatico">
|
||||
<noscript>
|
||||
<strong>Necesitas activar JavaScript para continuar.</strong>
|
||||
<strong>Para jugar RiMaJon necesitas activar JavaScript.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -10,19 +10,30 @@ const routes: Array<RouteRecordRaw> = [
|
|||
component: Inicio
|
||||
},
|
||||
{
|
||||
path: "/sala/:id",
|
||||
path: "/sala/:id/",
|
||||
name: "Sala",
|
||||
component: Sala
|
||||
},
|
||||
{
|
||||
path: "/juego/:id",
|
||||
path: "/juego/:id/",
|
||||
name: "Juego",
|
||||
component: Juego
|
||||
},
|
||||
{
|
||||
path: "/ayuda",
|
||||
path: "/ayuda/",
|
||||
name: "Ayuda",
|
||||
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
|
||||
background-color: var(--color-fondo)
|
||||
color: var(--color-texto)
|
||||
margin: 0
|
||||
|
||||
// Claro
|
||||
.tema-automatico
|
||||
|
|
|
|||
|
|
@ -17,7 +17,10 @@ div
|
|||
|
||||
br
|
||||
p
|
||||
router-link(to="/ayuda") Ayuda
|
||||
router-link(to="/ayuda/") Ayuda
|
||||
br
|
||||
p
|
||||
router-link(to="/tutorial/") Tutorial
|
||||
|
||||
//
|
||||
</template>
|
||||
|
|
@ -100,6 +103,15 @@ export default defineComponent({
|
|||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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