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

Move to vite. Fix deps. Add jenkinsfile

Browse Source
This commit is contained in:
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 # Logs
node_modules logs
/dist *.log
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files # Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea .idea
.vscode
*.suo *.suo
*.ntvs* *.ntvs*
*.njsproj *.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 pnpm install
``` ```
### Compiles and hot-reloads for development ### Compile and Hot-Reload for Development
```
pnpm run serve ```sh
pnpm dev
``` ```
### Compiles and minifies for production ### Type-Check, Compile and Minify for Production
```
pnpm run build
```
### Customize configuration ```sh
See [Configuration Reference](https://cli.vuejs.org/config/). 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", "name": "rimajon-vue",
"version": "0.1.0", "version": "0.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve --port 3000", "dev": "vite",
"build": "vue-cli-service build --modern" "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": { "dependencies": {
"core-js": "^3.6.5", "pug": "^3.0.2",
"vue": "3.0.0", "sass": "^1.69.5",
"vue-router": "4.0.2", "vue": "^3.3.4",
"vuex": "4.0.0-rc.2", "vue-router": "^4.2.5",
"vuex": "^4.1.0",
"vuex-persist": "^3.1.3" "vuex-persist": "^3.1.3"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@tsconfig/node18": "^18.2.2",
"@vue/cli-plugin-router": "~4.5.0", "@types/node": "^18.18.5",
"@vue/cli-plugin-typescript": "~4.5.0", "@vitejs/plugin-vue": "^4.4.0",
"@vue/cli-plugin-vuex": "~4.5.0", "@vue/tsconfig": "^0.4.0",
"@vue/cli-service": "~4.5.0", "npm-run-all2": "^6.1.1",
"@vue/compiler-sfc": "^3.0.0-0", "typescript": "~5.2.0",
"phosphor-vue": "^1.0.0", "vite": "^4.4.11",
"pug": "2.0.4", "vue-tsc": "^1.8.19"
"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"
]
} }

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

83
src/App.vue
View File

@ -1,51 +1,46 @@
<template> <script setup lang="ts">
<router-view/> import { RouterView } from 'vue-router'
<div style="display: none;">{{ modoColor }}</div> import { useStore } from 'vuex';
</template> import { computed, onMounted, watch } from 'vue';
<script lang="ts">
import { defineComponent, computed, watch } from "vue";
import { useStore } from "vuex";
export default defineComponent({ const store = useStore();
setup() { const modoColorUsuario = computed<string>(() => store.state.modoColorUsuario);
const store = useStore();
const modoColorUsuario = computed<string>(() => store.state.modoColorUsuario);
const query = window.matchMedia("(prefers-color-scheme: dark)"); const query = window.matchMedia("(prefers-color-scheme: dark)");
const funActualizarMediaQuery = (ev: MediaQueryListEvent | MediaQueryList) => { const funActualizarMediaQuery = (ev: MediaQueryListEvent | MediaQueryList) => {
store.commit( store.commit(
"setModoColorUsuario", "setModoColorUsuario",
ev.matches ? "oscuro" : "claro" ev.matches ? "oscuro" : "claro"
); );
}; };
query.addEventListener("change", funActualizarMediaQuery); query.addEventListener("change", funActualizarMediaQuery);
funActualizarMediaQuery(query); funActualizarMediaQuery(query);
watch(modoColorUsuario, (v) => { watch(modoColorUsuario, (v) => {
console.log("Modo actualizado"); console.log("Modo actualizado");
if (v === "oscuro") { if (v === "oscuro") {
document.body.className = "tema-oscuro"; document.body.className = "tema-oscuro";
} else if (v === "claro") { } else if (v === "claro") {
document.body.className = "tema-claro"; document.body.className = "tema-claro";
} else { } else {
document.body.className = "tema-automatico"; document.body.className = "tema-automatico";
} }
});
(() => {
const modo = localStorage.getItem("modoColorUsuario");
if (modo === "claro" || modo === "oscuro") {
store.commit("setModoColorUsuario", modo);
} else {
store.commit("setModoColorUsuario", "");
}
})();
return {
modoColor: modoColorUsuario
}
}
}); });
(() => {
const modo = localStorage.getItem("modoColorUsuario");
if (modo === "claro" || modo === "oscuro") {
store.commit("setModoColorUsuario", modo);
} else {
store.commit("setModoColorUsuario", "");
}
})();
</script> </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 { computed } from "vue";
import { RiMaJonState } from "@/store"; import type { RiMaJonState } from "../store/index";
import { Store } from "vuex"; import { Store } from "vuex";
export const getEsOscuro = (store: Store<RiMaJonState>) => { export const getEsOscuro = (store: Store<RiMaJonState>) => {

5
src/components/getValorDora.ts
View File

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

21
src/main.ts
View File

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

61
src/router/index.ts
View File

@ -1,77 +1,76 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; import { createRouter, createWebHistory } from 'vue-router'
import Inicio from "../views/Inicio/Inicio.vue"; import Inicio from "../views/Inicio/Inicio.vue";
import Sala from "@/views/Sala/Sala.vue"; import Sala from "../views/Sala/Sala.vue";
import Juego from "@/views/Juego/Juego.vue"; import Juego from "../views/Juego/Juego.vue";
const routes: Array<RouteRecordRaw> = [ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
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("../views/Ayuda/Ayuda.vue")
}, },
{ {
path: "/tutorial/", path: "/tutorial/",
name: "Tutorial", name: "Tutorial",
component: () => import(/* webpackChunkName: "tutorial" */ "../views/Tutorial/Tutorial.vue"), component: () => import("../views/Tutorial/Tutorial.vue"),
children: [ children: [
{ {
path: "", path: "",
component: () => import(/* webpackChunkName: "tutorial_index" */ "../views/Tutorial/views/Index.vue") component: () => import("../views/Tutorial/views/Index.vue")
}, },
{ {
path: "cartas/", path: "cartas/",
component: () => import(/* webpackChunkName: "tutorial_cartas" */ "../views/Tutorial/views/Cartas.vue") component: () => import( "../views/Tutorial/views/Cartas.vue")
}, },
{ {
path: "mano/", path: "mano/",
component: () => import(/* webpackChunkName: "tutorial_mano" */ "../views/Tutorial/views/Mano.vue") component: () => import("../views/Tutorial/views/Mano.vue")
}, },
{ {
path: "mano/par/", 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/", 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/", 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/", path: "mano-lista/",
component: () => import(/* webpackChunkName: "tutorial_flujo-juego" */ "../views/Tutorial/views/ManoLista.vue") component: () => import( "../views/Tutorial/views/ManoLista.vue")
}, },
{ {
path: "bonus/", path: "bonus/",
component: () => import(/* webpackChunkName: "tutorial_bonus" */ "../views/Tutorial/views/Bonus.vue") component: () => import("../views/Tutorial/views/Bonus.vue")
}, },
{ {
path: "puntaje/", path: "puntaje/",
component: () => import(/* webpackChunkName: "tutorial_puntaje" */ "../views/Tutorial/views/Puntaje.vue") component: () => import("../views/Tutorial/views/Puntaje.vue")
} }
] ]
} }
]; ]
})
const router = createRouter({ export default router
history: createWebHistory(process.env.BASE_URL),
routes
});
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 crearUsuario from "./components/crear-usuario.vue";
import crearSala from "./components/crear-sala.vue"; import crearSala from "./components/crear-sala.vue";
import entrarSala from "./components/entrar-sala.vue"; import entrarSala from "./components/entrar-sala.vue";
import { servidorF } from "@/variables"; import {servidorF} from "../../variables"
export default defineComponent({ export default defineComponent({
name: "Inicio", 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": { "files": [],
"target": "esnext", "references": [
"module": "esnext", {
"strict": true, "path": "./tsconfig.node.json"
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
}, },
"lib": [ {
"esnext", "path": "./tsconfig.app.json"
"dom", }
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
] ]
} }

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))
}
}
})