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

Move to vite. Fix deps. Add jenkinsfile

master
Araozu 2023-11-26 07:50:33 -05:00
parent dfdea0df66
commit 339d6876f3
26 changed files with 1477 additions and 9436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig
View File

@ -1,12 +0,0 @@
[*]
indent_style = space
indent_size = 4
[*.sass]
indent_size = 2
[*.json]
indent_size = 2
[*.yaml]
indent_size = 2

27
.gitignore vendored
View File

@ -1,21 +1,26 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.vscode
*.suo
*.ntvs*
*.njsproj

1
.npmrc
View File

@ -1 +0,0 @@
shamefully-hoist=true

3
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

24
Jenkinsfile vendored Normal file
View File

@ -0,0 +1,24 @@
pipeline {
agent any
environment {
PATH = "/var/lib/jenkins/.nvm/versions/node/v20.9.0/bin:/var/lib/jenkins/bin:${env.PATH}"
}
stages {
stage('Install') {
steps {
sh 'pnpm i'
}
}
stage('Build') {
steps {
sh './node_modules/.bin/vite build'
}
}
stage('Deploy') {
steps {
sh 'rm -rf /var/www/rimajon-fe/*'
sh 'cp -r ./dist/* /var/www/rimajon-fe/'
}
}
}
}

45
README.md
View File

@ -1,19 +1,40 @@
# rimajon
# rimajon-vue
## Project setup
```
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
pnpm install
```
### Compiles and hot-reloads for development
```
pnpm run serve
### Compile and Hot-Reload for Development
```sh
pnpm dev
```
### Compiles and minifies for production
```
pnpm run build
```
### Type-Check, Compile and Minify for Production
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
```sh
pnpm build
```

5
babel.config.js
View File

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

1
env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

19
index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="/resources/phosphor.css">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

47
package.json
View File

@ -1,35 +1,30 @@
{
"name": "rimajon",
"version": "0.1.0",
"name": "rimajon-vue",
"version": "0.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build --modern"
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "3.0.0",
"vue-router": "4.0.2",
"vuex": "4.0.0-rc.2",
"pug": "^3.0.2",
"sass": "^1.69.5",
"vue": "^3.3.4",
"vue-router": "^4.2.5",
"vuex": "^4.1.0",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0-0",
"phosphor-vue": "^1.0.0",
"pug": "2.0.4",
"pug-plain-loader": "1.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
"@tsconfig/node18": "^18.2.2",
"@types/node": "^18.18.5",
"@vitejs/plugin-vue": "^4.4.0",
"@vue/tsconfig": "^0.4.0",
"npm-run-all2": "^6.1.1",
"typescript": "~5.2.0",
"vite": "^4.4.11",
"vue-tsc": "^1.8.19"
}
}

10491
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

1
public/_redirects
View File

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

20
public/index.html
View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<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>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">
<link rel="stylesheet" href="/resources/phosphor.css">
</head>
<body class="tema-automatico">
<noscript>
<strong>Para jugar RiMaJon necesitas activar JavaScript.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

23
src/App.vue
View File

@ -1,14 +1,9 @@
<template>
<router-view/>
<div style="display: none;">{{ modoColor }}</div>
</template>
<script setup lang="ts">
import { RouterView } from 'vue-router'
import { useStore } from 'vuex';
import { computed, onMounted, watch } from 'vue';
<script lang="ts">
import { defineComponent, computed, watch } from "vue";
import { useStore } from "vuex";
export default defineComponent({
setup() {
const store = useStore();
const modoColorUsuario = computed<string>(() => store.state.modoColorUsuario);
@ -42,10 +37,10 @@ export default defineComponent({
}
})();
return {
modoColor: modoColorUsuario
}
}
});
</script>
<template>
<RouterView />
<div style="display: none;">{{ modoColor }}</div>
</template>

0
src/styles/global.sass → src/assets/global.sass
View File

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

2
src/components/getEsOscuro.ts
View File

@ -1,5 +1,5 @@
import { computed } from "vue";
import { RiMaJonState } from "@/store";
import type { RiMaJonState } from "../store/index";
import { Store } from "vuex";
export const getEsOscuro = (store: Store<RiMaJonState>) => {

5
src/components/getValorDora.ts
View File

@ -1,6 +1,7 @@
import { Store } from "vuex";
import { RiMaJonState } from "@/store";
import { computed, ComputedRef } from "vue";
import type { RiMaJonState } from "../store";
import { computed} from "vue";
import type { ComputedRef } from "vue";
export const getClaseDora = (valor: ComputedRef<number>, store: Store<RiMaJonState>) => computed<string>(() => {
const [dora1] = store.state.dora;

21
src/main.ts
View File

@ -1,11 +1,12 @@
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import "./styles/global.sass";
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "./assets/global.sass"
// @ts-ignore
createApp(App)
.use(store)
.use(router)
.mount('#app');
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

43
src/router/index.ts
View File

@ -1,9 +1,11 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router'
import Inicio from "../views/Inicio/Inicio.vue";
import Sala from "@/views/Sala/Sala.vue";
import Juego from "@/views/Juego/Juego.vue";
import Sala from "../views/Sala/Sala.vue";
import Juego from "../views/Juego/Juego.vue";
const routes: Array<RouteRecordRaw> = [
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'Home',
@ -19,59 +21,56 @@ const routes: Array<RouteRecordRaw> = [
name: "Juego",
component: Juego
},
{
path: "/ayuda/",
name: "Ayuda",
component: () => import(/* webpackChunkName: "ayuda" */ "../views/Ayuda/Ayuda.vue")
component: () => import("../views/Ayuda/Ayuda.vue")
},
{
path: "/tutorial/",
name: "Tutorial",
component: () => import(/* webpackChunkName: "tutorial" */ "../views/Tutorial/Tutorial.vue"),
component: () => import("../views/Tutorial/Tutorial.vue"),
children: [
{
path: "",
component: () => import(/* webpackChunkName: "tutorial_index" */ "../views/Tutorial/views/Index.vue")
component: () => import("../views/Tutorial/views/Index.vue")
},
{
path: "cartas/",
component: () => import(/* webpackChunkName: "tutorial_cartas" */ "../views/Tutorial/views/Cartas.vue")
component: () => import( "../views/Tutorial/views/Cartas.vue")
},
{
path: "mano/",
component: () => import(/* webpackChunkName: "tutorial_mano" */ "../views/Tutorial/views/Mano.vue")
component: () => import("../views/Tutorial/views/Mano.vue")
},
{
path: "mano/par/",
component: () => import(/* webpackChunkName: "tutorial_mano_par" */ "../views/Tutorial/views/Mano/Par.vue")
component: () => import("../views/Tutorial/views/Mano/Par.vue")
},
{
path: "mano/secuencia/",
component: () => import(/* webpackChunkName: "tutorial_mano_secuencia" */ "../views/Tutorial/views/Mano/Secuencia.vue")
component: () => import("../views/Tutorial/views/Mano/Secuencia.vue")
},
{
path: "mano/triple/",
component: () => import(/* webpackChunkName: "tutorial_mano_triple" */ "../views/Tutorial/views/Mano/Triple.vue")
component: () => import("../views/Tutorial/views/Mano/Triple.vue")
},
{
path: "mano-lista/",
component: () => import(/* webpackChunkName: "tutorial_flujo-juego" */ "../views/Tutorial/views/ManoLista.vue")
component: () => import( "../views/Tutorial/views/ManoLista.vue")
},
{
path: "bonus/",
component: () => import(/* webpackChunkName: "tutorial_bonus" */ "../views/Tutorial/views/Bonus.vue")
component: () => import("../views/Tutorial/views/Bonus.vue")
},
{
path: "puntaje/",
component: () => import(/* webpackChunkName: "tutorial_puntaje" */ "../views/Tutorial/views/Puntaje.vue")
component: () => import("../views/Tutorial/views/Puntaje.vue")
}
]
}
];
]
})
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;
export default router

5
src/shims-vue.d.ts vendored
View File

@ -1,5 +0,0 @@
declare module '*.vue' {
import { defineComponent } from 'vue'
const component: ReturnType<typeof defineComponent>
export default component
}

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

@ -35,7 +35,7 @@ import {useStore} from "vuex";
import crearUsuario from "./components/crear-usuario.vue";
import crearSala from "./components/crear-sala.vue";
import entrarSala from "./components/entrar-sala.vue";
import { servidorF } from "@/variables";
import {servidorF} from "../../variables"
export default defineComponent({
name: "Inicio",

12
tsconfig.app.json Normal file
View File

@ -0,0 +1,12 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

42
tsconfig.json
View File

@ -1,39 +1,11 @@
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
{
"path": "./tsconfig.app.json"
}
]
}

16
tsconfig.node.json Normal file
View File

@ -0,0 +1,16 @@
{
"extends": "@tsconfig/node18/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*"
],
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

16
vite.config.ts Normal file
View File

@ -0,0 +1,16 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})