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

Agregada estructura para un tutorial

Browse Source
This commit is contained in:
Araozu 2020-10-22 08:09:43 -05:00
parent cf30f57c85
commit e9eb89a87a
14 changed files with 380 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_redirects Normal file
View File

@ -0,0 +1 @@
/* /index.html 200

6
babel.config.js
View File

@ -1,5 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
presets: [
'@vue/cli-plugin-babel/preset'
]
}

2
package.json
View File

@ -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",

BIN
public/img/tutorial/Img_rimajon_claro.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
public/img/tutorial/Img_rimajon_oscuro.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

6
public/index.html
View File

@ -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 -->

1
public/resources/phosphor.css Normal file
View File

File diff suppressed because one or more lines are too long

17
src/router/index.ts
View File

@ -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")
}
]
}
];

1
src/styles/global.sass
View File

@ -2,6 +2,7 @@ body
font-family: "Pt Serif", serif
background-color: var(--color-fondo)
color: var(--color-texto)
margin: 0
// Claro
.tema-automatico

14
src/views/Inicio/Inicio.vue
View File

@ -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>

67
src/views/Tutorial/Tutorial.vue Normal file
View 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
View 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
View 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") &nbsp;
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
View 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>