陆陆侠的生活

├── .eslintrc.cjs ├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public ├── beian.png ├── bg.png ├── favicon.ico ├── grain.js ├── loading-bg.png └── logo.svg ├── src ├── App.vue ├── assets │ ├── base.css │ └── logo.svg ├── components │ ├── CardContent.vue │ ├── CardDragBar.vue │ ├── Coordinate.vue │ ├── EditorBtn.vue │ ├── EditorModeBox.vue │ ├── Footer.vue │ ├── FooterItem.vue │ ├── JumpTargetBox.vue │ └── Selection.vue ├── main.js └── router │ └── index.js ├── vite.config.js └── windi.config.ts /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | require("@rushstack/eslint-patch/modern-module-resolution"); 3 | 4 | module.exports = { 5 | root: true, 6 | extends: [ 7 | "plugin:vue/vue3-essential", 8 | "eslint:recommended", 9 | "@vue/eslint-config-prettier", 10 | ], 11 | env: { 12 | "vue/setup-compiler-macros": true, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # llxlife-2022 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin). 8 | 9 | ## Customize configuration 10 | 11 | See [Vite Configuration Reference](https://vitejs.dev/config/). 12 | 13 | ## Project Setup 14 | 15 | ```sh 16 | npm install 17 | ``` 18 | 19 | ### Compile and Hot-Reload for Development 20 | 21 | ```sh 22 | npm run dev 23 | ``` 24 | 25 | ### Compile and Minify for Production 26 | 27 | ```sh 28 | npm run build 29 | ``` 30 | 31 | ### Lint with [ESLint](https://eslint.org/) 32 | 33 | ```sh 34 | npm run lint 35 | ``` 36 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 陆陆侠的生活 16 | 17 | 18 |

19 |

20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "llxlife-2022", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite --host", 6 | "build": "vite build", 7 | "preview": "vite preview --port 5050", 8 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.26.1", 12 | "hammerjs": "^2.0.8", 13 | "interactjs": "^1.10.11", 14 | "lodash": "^4.17.21", 15 | "lxgw-wenkai-screen-webfont": "^1.5.0", 16 | "markdown-it": "^12.3.2", 17 | "sass": "^1.49.9", 18 | "vue": "^3.2.31", 19 | "vue-router": "^4.0.12" 20 | }, 21 | "devDependencies": { 22 | "@rushstack/eslint-patch": "^1.1.0", 23 | "@vitejs/plugin-vue": "^2.2.2", 24 | "@vue/eslint-config-prettier": "^7.0.0", 25 | "eslint": "^8.5.0", 26 | "eslint-plugin-vue": "^8.2.0", 27 | "prettier": "^2.5.1", 28 | "vite": "^2.9.0", 29 | "vite-plugin-rewrite-all": "^0.1.2", 30 | "vite-plugin-windicss": "^1.7.1", 31 | "windicss": "^3.4.4" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/beian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luluxia/llxlife-2022/22cc012031d91c5f98edf9ae9e40ce5be99e2360/public/beian.png -------------------------------------------------------------------------------- /public/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luluxia/llxlife-2022/22cc012031d91c5f98edf9ae9e40ce5be99e2360/public/bg.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luluxia/llxlife-2022/22cc012031d91c5f98edf9ae9e40ce5be99e2360/public/favicon.ico -------------------------------------------------------------------------------- /public/grain.js: -------------------------------------------------------------------------------- 1 | class Grain { 2 | constructor (el) { 3 | /** 4 | * Options 5 | * Increase the pattern size if visible pattern 6 | */ 7 | this.patternSize = 150; 8 | this.patternScaleX = 1; 9 | this.patternScaleY = 1; 10 | this.patternRefreshInterval = 3; // 8 11 | this.patternAlpha = 10; // int between 0 and 255, 12 | 13 | /** 14 | * Create canvas 15 | */ 16 | this.canvas = el; 17 | this.ctx = this.canvas.getContext('2d'); 18 | this.ctx.scale(this.patternScaleX, this.patternScaleY); 19 | 20 | /** 21 | * Create a canvas that will be used to generate grain and used as a 22 | * pattern on the main canvas. 23 | */ 24 | this.patternCanvas = document.createElement('canvas'); 25 | this.patternCanvas.width = this.patternSize; 26 | this.patternCanvas.height = this.patternSize; 27 | this.patternCtx = this.patternCanvas.getContext('2d'); 28 | this.patternData = this.patternCtx.createImageData(this.patternSize, this.patternSize); 29 | this.patternPixelDataLength = this.patternSize * this.patternSize * 4; // rgba = 4 30 | 31 | /** 32 | * Prebind prototype function, so later its easier to user 33 | */ 34 | this.resize = this.resize.bind(this); 35 | this.loop = this.loop.bind(this); 36 | 37 | this.frame = 0; 38 | 39 | window.addEventListener('resize', this.resize); 40 | this.resize(); 41 | 42 | window.requestAnimationFrame(this.loop); 43 | } 44 | 45 | resize () { 46 | this.canvas.width = window.innerWidth * devicePixelRatio; 47 | this.canvas.height = window.innerHeight * devicePixelRatio; 48 | } 49 | 50 | update () { 51 | const {patternPixelDataLength, patternData, patternAlpha, patternCtx} = this; 52 | 53 | // put a random shade of gray into every pixel of the pattern 54 | for (let i = 0; i < patternPixelDataLength; i += 4) { 55 | // const value = (Math.random() * 255) | 0; 56 | const value = Math.random() * 255; 57 | 58 | patternData.data[i] = value; 59 | patternData.data[i + 1] = value; 60 | patternData.data[i + 2] = value; 61 | patternData.data[i + 3] = patternAlpha; 62 | } 63 | 64 | patternCtx.putImageData(patternData, 0, 0); 65 | } 66 | 67 | draw () { 68 | const {ctx, patternCanvas, canvas, viewHeight} = this; 69 | const {width, height} = canvas; 70 | 71 | // clear canvas 72 | ctx.clearRect(0, 0, width, height); 73 | 74 | // fill the canvas using the pattern 75 | ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat'); 76 | ctx.fillRect(0, 0, width, height); 77 | } 78 | 79 | loop () { 80 | // only update grain every n frames 81 | const shouldDraw = ++this.frame % this.patternRefreshInterval === 0; 82 | if (shouldDraw) { 83 | this.update(); 84 | this.draw(); 85 | } 86 | 87 | window.requestAnimationFrame(this.loop); 88 | } 89 | } 90 | 91 | 92 | /** 93 | * Initiate Grain 94 | */ 95 | const el = document.querySelector('.grain'); 96 | const grain = new Grain(el); -------------------------------------------------------------------------------- /public/loading-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luluxia/llxlife-2022/22cc012031d91c5f98edf9ae9e40ce5be99e2360/public/loading-bg.png -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 932 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 895 | 896 | 1046 | 1047 | 1098 | -------------------------------------------------------------------------------- /src/assets/base.css: -------------------------------------------------------------------------------- 1 | /* color palette from */ 2 | :root { 3 | --vt-c-white: #ffffff; 4 | --vt-c-white-soft: #f8f8f8; 5 | --vt-c-white-mute: #f2f2f2; 6 | 7 | --vt-c-black: #181818; 8 | --vt-c-black-soft: #222222; 9 | --vt-c-black-mute: #282828; 10 | 11 | --vt-c-indigo: #2c3e50; 12 | 13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); 14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); 15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); 16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); 17 | 18 | --vt-c-text-light-1: var(--vt-c-indigo); 19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66); 20 | --vt-c-text-dark-1: var(--vt-c-white); 21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); 22 | } 23 | 24 | /* semantic color variables for this project */ 25 | :root { 26 | --color-background: var(--vt-c-white); 27 | --color-background-soft: var(--vt-c-white-soft); 28 | --color-background-mute: var(--vt-c-white-mute); 29 | 30 | --color-border: var(--vt-c-divider-light-2); 31 | --color-border-hover: var(--vt-c-divider-light-1); 32 | 33 | --color-heading: var(--vt-c-text-light-1); 34 | --color-text: var(--vt-c-text-light-1); 35 | 36 | --section-gap: 160px; 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --color-background: var(--vt-c-black); 42 | --color-background-soft: var(--vt-c-black-soft); 43 | --color-background-mute: var(--vt-c-black-mute); 44 | 45 | --color-border: var(--vt-c-divider-dark-2); 46 | --color-border-hover: var(--vt-c-divider-dark-1); 47 | 48 | --color-heading: var(--vt-c-text-dark-1); 49 | --color-text: var(--vt-c-text-dark-2); 50 | } 51 | } 52 | 53 | *, 54 | *::before, 55 | *::after { 56 | box-sizing: border-box; 57 | margin: 0; 58 | position: relative; 59 | font-weight: normal; 60 | } 61 | 62 | body { 63 | min-height: 100vh; 64 | color: var(--color-text); 65 | background: var(--color-background); 66 | transition: color 0.5s, background-color 0.5s; 67 | line-height: 1.6; 68 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 69 | Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 70 | font-size: 15px; 71 | text-rendering: optimizeLegibility; 72 | -webkit-font-smoothing: antialiased; 73 | -moz-osx-font-smoothing: grayscale; 74 | } 75 | -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/CardContent.vue: -------------------------------------------------------------------------------- 1 | 16 | 26 | 27 | -------------------------------------------------------------------------------- /src/components/CardDragBar.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Coordinate.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/EditorBtn.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/EditorModeBox.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/FooterItem.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/JumpTargetBox.vue: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/components/Selection.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | 5 | import "virtual:windi.css"; 6 | import 'virtual:windi-devtools' 7 | 8 | const app = createApp(App); 9 | 10 | app.use(router); 11 | 12 | app.mount("#app"); 13 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from "vue-router"; 2 | 3 | const router = createRouter({ 4 | history: createWebHistory(import.meta.env.BASE_URL), 5 | routes: [ 6 | { 7 | path: "/", 8 | redirect: "/world/main/0,0", 9 | // name: "home", 10 | // component: HomeView, 11 | }, 12 | { 13 | path: "/world/:world/:position?", 14 | name: "home", 15 | component: {template: ''} 16 | }, 17 | { 18 | path: "/:pathMatch(.*)*", 19 | redirect: "/world/main/404,404", 20 | component: {template: ''} 21 | } 22 | ], 23 | }); 24 | 25 | export default router; 26 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from "url"; 2 | 3 | import { defineConfig } from "vite"; 4 | import vue from "@vitejs/plugin-vue"; 5 | 6 | import WindiCSS from "vite-plugin-windicss"; 7 | 8 | import pluginRewriteAll from 'vite-plugin-rewrite-all'; 9 | 10 | // https://vitejs.dev/config/ 11 | export default defineConfig({ 12 | plugins: [vue(), WindiCSS(), pluginRewriteAll()], 13 | resolve: { 14 | alias: { 15 | "@": fileURLToPath(new URL("./src", import.meta.url)), 16 | }, 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /windi.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite-plugin-windicss"; 2 | function range(size, startAt = 1, step = 1) { 3 | return Array.from(Array(size).keys()).map(i => i * step + startAt); 4 | }; 5 | export default defineConfig({ 6 | safelist: [ 7 | // range(20, 10, 10).map(i => `!w-${i}`), 8 | // range(20, 10, 10).map(i => `w-${i}`), 9 | // range(10, 0, 10).map(i => `opacity-${i}`), 10 | // range(10, 0, 10).map(i => `bg-opacity-${i}`), 11 | range(100, 10, 10).map(i => `!w-${i}px`), 12 | range(100, 10, 10).map(i => `!h-${i}px`), 13 | '!md:w-200', '!md:w-140', 'opacity-0', 'opacity-100', 'scale-0', 'scale-1' 14 | ], 15 | }); 16 | --------------------------------------------------------------------------------