Joururi/yorha-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Alexis
2024-05-08 18:01:43 +02:00
parent a5465d6483 6fcf8cd1da
commit f1f87bebf4
46 changed files with 1411 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.cjs
View File

@@ -15,7 +15,6 @@ module.exports = {
'@vue/eslint-config-prettier/skip-formatting' '@vue/eslint-config-prettier/skip-formatting'
], ],
rules: { rules: {
indent: ['error', 2],
'prettier/prettier': [ 'prettier/prettier': [
'error', 'error',
{ {

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite Project</title> <title>YoRHa System</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

321
package-lock.json generated
View File

@@ -8,9 +8,14 @@
"name": "vue-template", "name": "vue-template",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3",
"@vueuse/core": "^10.1.2", "@vueuse/core": "^10.1.2",
"pinia": "^2.0.35", "pinia": "^2.0.35",
"vue": "^3.2.47", "sass": "^1.62.1",
"vue": "^3.3.1",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
"devDependencies": { "devDependencies": {
@@ -35,7 +40,7 @@
"start-server-and-test": "^2.0.0", "start-server-and-test": "^2.0.0",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"typescript": "~5.0.4", "typescript": "~5.0.4",
"vite": "^4.3.4", "vite": "^4.3.5",
"vitest": "^0.31.0", "vitest": "^0.31.0",
"vue-tsc": "^1.6.4" "vue-tsc": "^1.6.4"
} }
@@ -529,6 +534,60 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
} }
}, },
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
"integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
"integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-regular-svg-icons": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
"integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
"integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/vue-fontawesome": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
"integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
"vue": ">= 3.0.0 < 4"
}
},
"node_modules/@hapi/hoek": { "node_modules/@hapi/hoek": {
"version": "9.3.0", "version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -612,8 +671,7 @@
"node_modules/@jridgewell/sourcemap-codec": { "node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15", "version": "1.4.15",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
"dev": true
}, },
"node_modules/@jridgewell/trace-mapping": { "node_modules/@jridgewell/trace-mapping": {
"version": "0.3.18", "version": "0.3.18",
@@ -1151,56 +1209,6 @@
"@vue/shared": "3.3.0-beta.5" "@vue/shared": "3.3.0-beta.5"
} }
}, },
"node_modules/@volar/vue-language-core/node_modules/@vue/compiler-sfc": {
"version": "3.3.0-beta.5",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.0-beta.5.tgz",
"integrity": "sha512-CbiY2dkzU5IG652ygLUSufLGvXPKI12TQp1PeHs9acjgFjhvSJCSKmAOaCWnXgFsAgpbipPHgAMfWJ8B0h6Sjw==",
"dev": true,
"dependencies": {
"@babel/parser": "^7.20.15",
"@vue/compiler-core": "3.3.0-beta.5",
"@vue/compiler-dom": "3.3.0-beta.5",
"@vue/compiler-ssr": "3.3.0-beta.5",
"@vue/reactivity-transform": "3.3.0-beta.5",
"@vue/shared": "3.3.0-beta.5",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.0",
"postcss": "^8.1.10",
"source-map-js": "^1.0.2"
}
},
"node_modules/@volar/vue-language-core/node_modules/@vue/compiler-ssr": {
"version": "3.3.0-beta.5",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.0-beta.5.tgz",
"integrity": "sha512-16njciFrQ8ejVdH5tsaPbJwpkpBB2z2VWCxfC69UOylCgPxiW01syE9S/mozRvv5Ken9Sr9bd2MjebG/SEpPNg==",
"dev": true,
"dependencies": {
"@vue/compiler-dom": "3.3.0-beta.5",
"@vue/shared": "3.3.0-beta.5"
}
},
"node_modules/@volar/vue-language-core/node_modules/@vue/reactivity": {
"version": "3.3.0-beta.5",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.0-beta.5.tgz",
"integrity": "sha512-YrikWho94hX4lYoTKr1TtMtzzC8hSXVFw9sXlw2Fl6dyXDztu/djI2vNT4FbbcH1Hbm1+yKM09zrJYvkN/tlYA==",
"dev": true,
"dependencies": {
"@vue/shared": "3.3.0-beta.5"
}
},
"node_modules/@volar/vue-language-core/node_modules/@vue/reactivity-transform": {
"version": "3.3.0-beta.5",
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.0-beta.5.tgz",
"integrity": "sha512-v/PCri6+vL8WwwgowHlIopwiqonCj9wV60ZYDdX8AMDxk9Q01h2cWh61JF4XOX7qDs7NdJ7zSVyKSz4B98OXBw==",
"dev": true,
"dependencies": {
"@babel/parser": "^7.20.15",
"@vue/compiler-core": "3.3.0-beta.5",
"@vue/shared": "3.3.0-beta.5",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.0"
}
},
"node_modules/@volar/vue-language-core/node_modules/@vue/shared": { "node_modules/@volar/vue-language-core/node_modules/@vue/shared": {
"version": "3.3.0-beta.5", "version": "3.3.0-beta.5",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.0-beta.5.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.0-beta.5.tgz",
@@ -1245,57 +1253,49 @@
} }
}, },
"node_modules/@vue/compiler-core": { "node_modules/@vue/compiler-core": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.1.tgz",
"integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==", "integrity": "sha512-5le1qYSBgLWg2jdLrbydlhnPJkkzMw46UrRUvTnOKlfg6pThtm9ohhqBhNPHbr0RcM1MCbK5WZe/3Ghz0SZjpQ==",
"dependencies": { "dependencies": {
"@babel/parser": "^7.16.4", "@babel/parser": "^7.21.3",
"@vue/shared": "3.2.47", "@vue/shared": "3.3.1",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"source-map": "^0.6.1" "source-map-js": "^1.0.2"
} }
}, },
"node_modules/@vue/compiler-dom": { "node_modules/@vue/compiler-dom": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.1.tgz",
"integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==", "integrity": "sha512-VmgIsoLivCft3+oNc5KM7b9wd0nZxP/g2qilMwi1hJyGA624KWnNKHn4hzBQs4FpzydUVpNy+TWVT8KiRCh3MQ==",
"dependencies": { "dependencies": {
"@vue/compiler-core": "3.2.47", "@vue/compiler-core": "3.3.1",
"@vue/shared": "3.2.47" "@vue/shared": "3.3.1"
} }
}, },
"node_modules/@vue/compiler-sfc": { "node_modules/@vue/compiler-sfc": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.1.tgz",
"integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==", "integrity": "sha512-G+FPwBbXSLaA4+Ry5/bdD9Oda+sRslQcE9o6JSZaougRiT4OjVL0vtkbQHPrGRTULZV28OcrAjRfSZOSB0OTXQ==",
"dependencies": { "dependencies": {
"@babel/parser": "^7.16.4", "@babel/parser": "^7.20.15",
"@vue/compiler-core": "3.2.47", "@vue/compiler-core": "3.3.1",
"@vue/compiler-dom": "3.2.47", "@vue/compiler-dom": "3.3.1",
"@vue/compiler-ssr": "3.2.47", "@vue/compiler-ssr": "3.3.1",
"@vue/reactivity-transform": "3.2.47", "@vue/reactivity-transform": "3.3.1",
"@vue/shared": "3.2.47", "@vue/shared": "3.3.1",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"magic-string": "^0.25.7", "magic-string": "^0.30.0",
"postcss": "^8.1.10", "postcss": "^8.1.10",
"source-map": "^0.6.1" "source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-sfc/node_modules/magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
"dependencies": {
"sourcemap-codec": "^1.4.8"
} }
}, },
"node_modules/@vue/compiler-ssr": { "node_modules/@vue/compiler-ssr": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.1.tgz",
"integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==", "integrity": "sha512-QOQWGNCWuSeyKx4KvWSJlnIMGg+/2oCHgkFUYo7aJ+9Uaaz45yRgKQ+FNigy50NYBQIhpXn2e4OSR8GXh4knrQ==",
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.2.47", "@vue/compiler-dom": "3.3.1",
"@vue/shared": "3.2.47" "@vue/shared": "3.3.1"
} }
}, },
"node_modules/@vue/devtools-api": { "node_modules/@vue/devtools-api": {
@@ -1342,68 +1342,60 @@
} }
}, },
"node_modules/@vue/reactivity": { "node_modules/@vue/reactivity": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.1.tgz",
"integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==", "integrity": "sha512-zCfmazOtyUdC1NS/EPiSYJ4RqojqmTAviJyBbyVvY8zAv5NhK44Yfw0E1tt+m5vz0ZO1ptI9jDKBr3MWIEkpgw==",
"dependencies": { "dependencies": {
"@vue/shared": "3.2.47" "@vue/shared": "3.3.1"
} }
}, },
"node_modules/@vue/reactivity-transform": { "node_modules/@vue/reactivity-transform": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.1.tgz",
"integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==", "integrity": "sha512-MkOrJauAGH4MNdxGW/PmrDegMyOGX0wGIdKUZJRBXOTpotDONg7/TPJe2QeGeBCow/5v9iOqZOWCfvmOWIaDMg==",
"dependencies": { "dependencies": {
"@babel/parser": "^7.16.4", "@babel/parser": "^7.20.15",
"@vue/compiler-core": "3.2.47", "@vue/compiler-core": "3.3.1",
"@vue/shared": "3.2.47", "@vue/shared": "3.3.1",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"magic-string": "^0.25.7" "magic-string": "^0.30.0"
}
},
"node_modules/@vue/reactivity-transform/node_modules/magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
"dependencies": {
"sourcemap-codec": "^1.4.8"
} }
}, },
"node_modules/@vue/runtime-core": { "node_modules/@vue/runtime-core": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.1.tgz",
"integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==", "integrity": "sha512-Ljb37LYafhQqKIasc0r32Cva8gIh6VeSMjlwO6V03tCjHd18gmjP0F4UD+8/a59sGTysAgA8Rb9lIC2DVxRz2Q==",
"dependencies": { "dependencies": {
"@vue/reactivity": "3.2.47", "@vue/reactivity": "3.3.1",
"@vue/shared": "3.2.47" "@vue/shared": "3.3.1"
} }
}, },
"node_modules/@vue/runtime-dom": { "node_modules/@vue/runtime-dom": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.1.tgz",
"integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==", "integrity": "sha512-NBjYbQPtMklb7lsJsM2Juv5Ygry6mvZP7PdH1GZqrzfLkvlplQT3qCtQMd/sib6yiy8t9m/Y4hVU7X9nzb9Oeg==",
"dependencies": { "dependencies": {
"@vue/runtime-core": "3.2.47", "@vue/runtime-core": "3.3.1",
"@vue/shared": "3.2.47", "@vue/shared": "3.3.1",
"csstype": "^2.6.8" "csstype": "^3.1.1"
} }
}, },
"node_modules/@vue/server-renderer": { "node_modules/@vue/server-renderer": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.1.tgz",
"integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==", "integrity": "sha512-sod8ggOwbkQXw3lBjfzrbdxRS9lw/lNHoMaXghHawNYowf+4WoaLWD5ouz6fPZadUqNKAsqK95p8DYb1vcVfPA==",
"dependencies": { "dependencies": {
"@vue/compiler-ssr": "3.2.47", "@vue/compiler-ssr": "3.3.1",
"@vue/shared": "3.2.47" "@vue/shared": "3.3.1"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "3.2.47" "vue": "3.3.1"
} }
}, },
"node_modules/@vue/shared": { "node_modules/@vue/shared": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.1.tgz",
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==" "integrity": "sha512-ybDBtQ+479HL/bkeIOIAwgpeAEACzztkvulJLbK3JMFuTOv4qDivmV3AIsR8RHYJ+RD9tQxcHWBsX4GqEcYrfw=="
}, },
"node_modules/@vue/test-utils": { "node_modules/@vue/test-utils": {
"version": "2.3.2", "version": "2.3.2",
@@ -1665,7 +1657,6 @@
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dev": true,
"dependencies": { "dependencies": {
"normalize-path": "^3.0.0", "normalize-path": "^3.0.0",
"picomatch": "^2.0.4" "picomatch": "^2.0.4"
@@ -1908,7 +1899,6 @@
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true,
"engines": { "engines": {
"node": ">=8" "node": ">=8"
} }
@@ -1951,7 +1941,6 @@
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"dependencies": { "dependencies": {
"fill-range": "^7.0.1" "fill-range": "^7.0.1"
}, },
@@ -2163,7 +2152,6 @@
"version": "3.5.3", "version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
"dev": true,
"funding": [ "funding": [
{ {
"type": "individual", "type": "individual",
@@ -2190,7 +2178,6 @@
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"dependencies": { "dependencies": {
"is-glob": "^4.0.1" "is-glob": "^4.0.1"
}, },
@@ -2405,9 +2392,9 @@
} }
}, },
"node_modules/csstype": { "node_modules/csstype": {
"version": "2.6.21", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==" "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
}, },
"node_modules/cypress": { "node_modules/cypress": {
"version": "12.11.0", "version": "12.11.0",
@@ -3338,7 +3325,6 @@
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"dependencies": { "dependencies": {
"to-regex-range": "^5.0.1" "to-regex-range": "^5.0.1"
}, },
@@ -3477,7 +3463,6 @@
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"optional": true, "optional": true,
"os": [ "os": [
@@ -3932,6 +3917,11 @@
"node": ">= 4" "node": ">= 4"
} }
}, },
"node_modules/immutable": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
"integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
},
"node_modules/import-fresh": { "node_modules/import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4041,7 +4031,6 @@
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"dependencies": { "dependencies": {
"binary-extensions": "^2.0.0" "binary-extensions": "^2.0.0"
}, },
@@ -4120,7 +4109,6 @@
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@@ -4138,7 +4126,6 @@
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true,
"dependencies": { "dependencies": {
"is-extglob": "^2.1.1" "is-extglob": "^2.1.1"
}, },
@@ -4178,7 +4165,6 @@
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"engines": { "engines": {
"node": ">=0.12.0" "node": ">=0.12.0"
} }
@@ -4787,7 +4773,6 @@
"version": "0.30.0", "version": "0.30.0",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
"integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==", "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
"dev": true,
"dependencies": { "dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.13" "@jridgewell/sourcemap-codec": "^1.4.13"
}, },
@@ -5017,7 +5002,6 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@@ -5494,7 +5478,6 @@
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"engines": { "engines": {
"node": ">=8.6" "node": ">=8.6"
}, },
@@ -5950,7 +5933,6 @@
"version": "3.6.0", "version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"dependencies": { "dependencies": {
"picomatch": "^2.2.1" "picomatch": "^2.2.1"
}, },
@@ -6174,6 +6156,22 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true "dev": true
}, },
"node_modules/sass": {
"version": "1.62.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
"integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/saxes": { "node_modules/saxes": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -6304,14 +6302,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/source-map-js": { "node_modules/source-map-js": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -6320,12 +6310,6 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/sourcemap-codec": {
"version": "1.4.8",
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
"deprecated": "Please use @jridgewell/sourcemap-codec instead"
},
"node_modules/spdx-correct": { "node_modules/spdx-correct": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -6824,7 +6808,6 @@
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"dependencies": { "dependencies": {
"is-number": "^7.0.0" "is-number": "^7.0.0"
}, },
@@ -7245,15 +7228,15 @@
} }
}, },
"node_modules/vue": { "node_modules/vue": {
"version": "3.2.47", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.1.tgz",
"integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==", "integrity": "sha512-3Rwy4I5idbPVSDZu6I+fFh6tdDSZbauImCTqLxE7y0LpHtiDvPeY01OI7RkFPbva1nk4hoO0sv/NzosH2h60sg==",
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.2.47", "@vue/compiler-dom": "3.3.1",
"@vue/compiler-sfc": "3.2.47", "@vue/compiler-sfc": "3.3.1",
"@vue/runtime-dom": "3.2.47", "@vue/runtime-dom": "3.3.1",
"@vue/server-renderer": "3.2.47", "@vue/server-renderer": "3.3.1",
"@vue/shared": "3.2.47" "@vue/shared": "3.3.1"
} }
}, },
"node_modules/vue-eslint-parser": { "node_modules/vue-eslint-parser": {

9
package.json
View File

@@ -15,9 +15,14 @@
"format": "prettier --write src/" "format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3",
"@vueuse/core": "^10.1.2", "@vueuse/core": "^10.1.2",
"pinia": "^2.0.35", "pinia": "^2.0.35",
"vue": "^3.2.47", "sass": "^1.62.1",
"vue": "^3.3.1",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
"devDependencies": { "devDependencies": {
@@ -42,7 +47,7 @@
"start-server-and-test": "^2.0.0", "start-server-and-test": "^2.0.0",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"typescript": "~5.0.4", "typescript": "~5.0.4",
"vite": "^4.3.4", "vite": "^4.3.5",
"vitest": "^0.31.0", "vitest": "^0.31.0",
"vue-tsc": "^1.6.4" "vue-tsc": "^1.6.4"
} }

6
public/backgrounds/tile-bg.svg Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 5 5" style="enable-background:new 0 0 5 5;" xml:space="preserve">
<polygon points="4.5,0 4.5,4.5 0,4.5 0,5 5,5 5,0 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 401 B

27
public/backgrounds/yorha-bg-left.svg Normal file
View File

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511 566" style="enable-background:new 0 0 511 566;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.2;}
.st1{clip-path:url(#SVGID_00000054248822295797075820000001563571821240251807_);}
.st2{fill:none;stroke:#1D1D1B;stroke-width:0.5;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g class="st0">
<defs>
<rect id="SVGID_1_" y="0.5" class="st0" width="511.5" height="566"/>
</defs>
<clipPath id="SVGID_00000000912880200899487680000006902560803219149977_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_00000000912880200899487680000006902560803219149977_);">
<g>
<circle class="st2" cx="1.3" cy="2.2" r="179.1"/>
<line class="st2" x1="-177.9" y1="-177" x2="476.1" y2="477"/>
<line class="st2" x1="-231" y1="-177.1" x2="338" y2="391.9"/>
<line class="st2" x1="-131.2" y1="-177.1" x2="437.8" y2="391.9"/>
<circle class="st2" cx="1.3" cy="2.2" r="170.2"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

29
public/backgrounds/yorha-bg-right.svg Normal file
View File

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511 566" style="enable-background:new 0 0 511 566;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.2;}
.st1{clip-path:url(#SVGID_00000158709037777668649130000009517331871316557969_);}
.st2{fill:none;stroke:#1D1D1B;stroke-width:0.5;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g class="st0">
<g>
<defs>
<rect id="SVGID_1_" y="0.5" width="511.5" height="566"/>
</defs>
<clipPath id="SVGID_00000057861603827395612620000008022258052803901577_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_00000057861603827395612620000008022258052803901577_);">
<g>
<circle class="st2" cx="510.8" cy="565.7" r="179.1"/>
<line class="st2" x1="690" y1="744.9" x2="36" y2="90.9"/>
<line class="st2" x1="743.1" y1="745" x2="174.1" y2="176"/>
<line class="st2" x1="643.3" y1="745" x2="74.3" y2="176"/>
<circle class="st2" cx="510.8" cy="565.7" r="170.2"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/images/item-enhancement-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
public/images/item-enhancement-md.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
public/images/item-enhancement.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
public/images/item-restorative-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
public/images/item-restorative-md.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
public/images/item-restorative.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
public/sounds/btn-click.mp3 Normal file
View File

Binary file not shown.

BIN
public/sounds/btn-hover.mp3 Normal file
View File

Binary file not shown.

13
public/yorha-cursor.svg Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2D2C21;}
</style>
<rect x="28" y="23" transform="matrix(6.123234e-17 -1 1 6.123234e-17 5 54)" class="st0" width="3" height="3"/>
<rect x="28" y="6" transform="matrix(6.123234e-17 -1 1 6.123234e-17 22 37)" class="st0" width="3" height="3"/>
<g>
<path class="st0" d="M1,16l7,7l23-7L8,9L1,16z M10,16c0,0.8-0.7,1.5-1.5,1.5S7,16.8,7,16s0.7-1.5,1.5-1.5S10,15.2,10,16z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 759 B

57
src/App.vue
View File

@@ -3,5 +3,60 @@ import { RouterView } from 'vue-router'
</script> </script>
<template> <template>
<RouterView /> <div id="wrapper" class="py-16 px-8">
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>
</div>
</template> </template>
<style lang="scss" scoped>
#wrapper {
position: relative;
min-height: 100dvh;
min-height: 100vh;
max-height: 100dvh;
max-height: 100vh;
overflow-x: hidden;
display: grid;
grid-template-rows: 1fr;
isolation: isolate;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.12) 0%,
rgba(0, 0, 0, 0) 10%,
rgba(0, 0, 0, 0) 90%,
rgba(0, 0, 0, 0.12) 100%
);
&::after,
&::before {
display: block;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 50%;
content: '';
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}
&::before {
left: 0;
background-image: url('/backgrounds/yorha-bg-left.svg');
background-position: left;
}
&::after {
right: 0;
background-image: url('/backgrounds/yorha-bg-right.svg');
background-position: right;
}
}
</style>

14
src/assets/animations/_fade.scss Normal file
View File

@@ -0,0 +1,14 @@
.fade {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-to,
&-leave-from {
opacity: 1;
}
&-enter-active,
&-leave-active {
transition: all 0.2s ease;
}
}

8
src/assets/base/body.scss Normal file
View File

@@ -0,0 +1,8 @@
body {
@apply relative min-h-screen min-w-full text-y-beige-700 bg-y-beige-400 tracking-[-0.03em];
word-spacing: 0.5em;
&::before {
@apply absolute content-[''] h-full w-full bg-[url('/backgrounds/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
}
}

3
src/assets/main.css
View File

@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

18
src/assets/main.scss Normal file
View File

@@ -0,0 +1,18 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@import 'base/body';
}
@layer utilities {
@import 'utilities/scrollbar';
}
/**
* ANIMATIONS FOR TRANSITIONS
*/
@import 'animations/fade'

5
src/assets/utilities/_scrollbar.scss Normal file
View File

@@ -0,0 +1,5 @@
.y-scrollbar {
&::-webkit-scrollbar-button {
display: none;
}
}

38
src/components/YrhBanner.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="banner shadow-sharpest bg-y-beige-300 py-3 px-9">
<slot />
</div>
</template>
<style lang="scss" scoped>
.banner {
position: relative;
&::before {
display: block;
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 15px;
border-left-width: 8px;
border-right-width: 2px;
border-color: var(--color-y-beige-900);
opacity: 0.9;
}
&::after {
display: block;
position: absolute;
content: '';
bottom: 5px;
right: 5px;
height: 8px;
width: 8px;
background-color: var(--color-y-beige-900);
opacity: 0.9;
}
}
</style>

188
src/components/YrhButton.vue Normal file
View File

@@ -0,0 +1,188 @@
<script lang="ts" setup>
import { useElementHover, useFocus } from '@vueuse/core'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppConfig } from '@/stores/configStore'
const router = useRouter()
const { globalSound } = useAppConfig()
const hoverSfx = new Audio('/sounds/btn-hover.mp3')
const clickSfx = new Audio('/sounds/btn-click.mp3')
hoverSfx.volume = globalSound
clickSfx.volume = globalSound
const btnRef = ref<HTMLElement | null>()
const isBtnHovered = useElementHover(btnRef)
const { focused: isBtnFocused } = useFocus(btnRef)
const emit = defineEmits(['clicked'])
const props = defineProps<{
href?: string
target?: string
rel?: string
disabled?: boolean
isActive?: boolean
hasSquare?: boolean
hasArrow?: boolean | 'force'
noBg?: boolean
}>()
const attributes = {
href: props.href,
target: props.target,
rel: props.rel,
disabled: props.disabled
}
const isInternalLink = computed(() => props.href && props.href.charAt(0) === '/')
const elementTag = computed(() => {
if (props.href) {
if (isInternalLink.value) {
return 'button'
}
return 'a'
}
return 'button'
})
const shouldArrowDisplay = computed(
() => isBtnFocused.value || isBtnHovered.value || props.hasArrow === 'force'
)
function playHoverSfx() {
hoverSfx.play()
}
function handleClick(e: MouseEvent) {
clickSfx.play()
emit('clicked')
if (props.href && isInternalLink) {
router.push(props.href)
}
}
function handleMouseOver() {
if (!isBtnFocused.value) {
playHoverSfx()
}
}
function handleFocusin() {
if (!isBtnHovered.value) {
playHoverSfx()
}
}
</script>
<template>
<component
ref="btnRef"
:is="elementTag"
v-bind="attributes"
class="btn inline-block w-full p-1 px-2 text-left"
:class="{
active: isActive,
'bg-y-beige-500 hover:shadow-md focus-visible:shadow-md': !noBg,
'text-y-beige-700': noBg
}"
@mousedown="handleClick"
@keyup.enter="handleClick"
@keyup.space="handleClick"
@focusin="handleFocusin"
@mouseover="handleMouseOver"
>
<Transition name="fade" :duration="{ enter: 100, leave: 100 }">
<img
v-if="shouldArrowDisplay"
src="/yorha-cursor.svg"
height="32"
width="32"
class="absolute top-1/2 -translate-y-1/2 -left-11 scale-90 pointer-events-none transition-all"
:class="{ 'invert-[.33] opacity-60': props.hasArrow === 'force' }"
alt=""
/>
</Transition>
<span class="mr-1" v-if="hasSquare">
<font-awesome-icon :icon="['fas', 'square']" />
</span>
<slot />
</component>
</template>
<style lang="scss" scoped>
.btn {
position: relative;
isolation: isolate;
transition-property: color;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-delay: 0;
& + & {
margin-top: 1rem;
}
&::before,
&::after {
position: absolute;
content: '';
display: block;
left: 0;
height: 100%;
}
&::after {
position: absolute;
content: '';
display: block;
top: 0;
left: 0;
width: 0%;
transition-property: width;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
background-color: var(--color-y-beige-700);
z-index: -1;
}
&::before {
top: 50%;
transform: translateY(-50%);
width: 100%;
transition-property: border-color;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
border-top: 0.05rem solid transparent;
border-bottom: 0.05rem solid transparent;
}
&:not(:focus, :hover, .active) {
transition-delay: 0.15s;
}
&:focus {
outline: none;
}
&:focus,
&:hover,
&.active {
color: var(--color-y-beige-400);
&::before {
height: calc(100% + 0.35rem);
border-top-color: var(--color-y-beige-700);
border-bottom-color: var(--color-y-beige-700);
}
&::after {
width: 100%;
}
}
}
</style>

44
src/components/YrhCard.vue Normal file
View File

@@ -0,0 +1,44 @@
<script lang="ts" setup>
import { useSlots } from 'vue'
const slots = useSlots()
const props = defineProps<{
breatheBottom?: boolean
}>()
</script>
<template>
<article
class="h-full grid grid-rows-[auto_1fr_1fr_auto] gap-4 bg-y-beige-300"
:class="{ 'pb-4': props.breatheBottom }"
>
<header class="px-4 py-1 bg-y-beige-700">
<span class="tracking-wider text-lg text-y-beige-400">
<slot name="title" />
</span>
</header>
<figure v-if="slots.image" class="mx-4">
<div class="h-full bg-y-beige-500 grid place-items-center">
<slot name="image" />
</div>
</figure>
<div class="mx-4">
<slot name="content" />
</div>
<footer v-if="slots.footer" class="mx-4">
<slot name="footer" />
</footer>
</article>
</template>
<style lang="scss" scoped>
figure {
&::after {
content: '';
@apply block w-full h-[0.1rem] my-3 bg-y-beige-500;
}
}
</style>

22
src/components/YrhHeading.vue Normal file
View File

@@ -0,0 +1,22 @@
<script lang="ts" setup>
import { useSlots } from 'vue'
const slots = useSlots()
</script>
<template>
<div class="flex items-end">
<h1 class="text-4xl tracking-wider">
<slot />
</h1>
<span v-if="slots.subtitle" class="ml-2 text-lg font-medium">
<slot name="subtitle" />
</span>
</div>
</template>
<style scoped>
h1 {
text-shadow: 5px 5px 0px var(--color-y-beige-500);
}
</style>

94
src/components/YrhNav.vue Normal file
View File

@@ -0,0 +1,94 @@
<script lang="ts" setup>
import type { MenuItem } from '@/models/YrhNavItem'
import { useBannerStore } from '@/stores/banner'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import YrhButton from './YrhButton.vue'
const { bannerText } = storeToRefs(useBannerStore())
const props = defineProps<{
items?: MenuItem[]
}>()
const emit = defineEmits<{
(e: 'change-nav', key: string | null): void
}>()
const clickedKey = ref<string | null>(null)
const activeKey = ref<string | null>(null)
function handleClickedKey(e: Event, item: MenuItem) {
clickedKey.value = item.id
emit('change-nav', item.id)
}
function handleActiveBtn(e: Event, item: MenuItem) {
if (document.activeElement && e.type === 'mouseenter') {
;(document.activeElement as HTMLElement).blur()
}
activeKey.value = item.id
bannerText.value = item.bannerText
}
function handleInactiveState() {
if (document.activeElement && document.activeElement.tagName !== 'BUTTON') {
bannerText.value = null
}
activeKey.value = null
}
</script>
<template>
<div class="relative">
<menu v-if="props.items">
<li
v-for="item in props.items"
:key="item.id"
class="transition-all"
:class="item.id === clickedKey ? 'w-full' : 'w-11/12'"
>
<YrhButton
has-square
:href="item.href"
:has-arrow="item.id === clickedKey ? 'force' : true"
:is-active="item.id === clickedKey"
@mouseenter="handleActiveBtn($event, item)"
@focus="handleActiveBtn($event, item)"
@mouseleave="handleInactiveState"
@blur="handleInactiveState"
@clicked="handleClickedKey($event, item)"
>
{{ item.label }}
</YrhButton>
</li>
</menu>
</div>
</template>
<style lang="scss" scoped>
menu {
position: relative;
@apply pl-11;
li:not(:first-child) {
@apply mt-3;
}
&::before {
display: block;
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 15px;
border-left-width: 8px;
border-right-width: 2px;
border-color: var(--color-y-beige-900);
opacity: 0.25;
}
}
</style>

37
src/components/config/YrhAudioMenu.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup lang="ts">
import YrhAudioSlider from './YrhAudioSlider.vue'
</script>
<template>
<menu>
<li>
<YrhAudioSlider>Volume</YrhAudioSlider>
</li>
</menu>
</template>
<style lang="scss" scoped>
menu {
position: relative;
@apply pl-11;
li:not(:first-child) {
@apply mt-3;
}
&::before {
display: block;
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 15px;
border-left-width: 8px;
border-right-width: 2px;
border-color: var(--color-y-beige-900);
opacity: 0.25;
}
}
</style>

9
src/components/config/YrhAudioSlider.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
import YrhButton from '../YrhButton.vue'
</script>
<template>
<YrhButton>
<slot />
</YrhButton>
</template>

78
src/components/datas/YrhStatusCard.vue Normal file
View File

@@ -0,0 +1,78 @@
<script lang="ts" setup>
import { useStatusStore } from '@/stores/datas/statusStore'
import { storeToRefs } from 'pinia'
import YrhCard from '../YrhCard.vue'
const { androidData } = storeToRefs(useStatusStore())
</script>
<template>
<YrhCard>
<template #title> Status </template>
<template #content>
<div class="flex justify-between">
<span>
{{ androidData.designation }}
</span>
<span> Lv : {{ androidData.level || 0 }} </span>
</div>
<hr class="my-2 border-t-2 border-y-beige-500" />
<div class="flex justify-between">
<span> Funds (G): </span>
<span> {{ androidData.funds || 0 }} </span>
</div>
<div class="flex justify-between">
<span> EXP: </span>
<span> {{ androidData.exp || 0 }} </span>
</div>
<div class="flex justify-between">
<span> HP: </span>
<span> {{ androidData.hp || 0 }} / {{ androidData.maxHp || 0 }} </span>
</div>
<hr class="my-2 border-t-2 border-y-beige-500" />
<div class="flex justify-between">
<span> Attack (Light) : </span>
<span> {{ androidData.attackLightBonus || 0 }} </span>
</div>
<div class="flex justify-between">
<span> Attack (Heavy) : </span>
<span> {{ androidData.attackHeavyBonus || 0 }} </span>
</div>
<div class="flex justify-between">
<span> Ranged Attack : </span>
<div class="flex gap-6">
<span>{{ androidData.attackRangedBonus || 0 }}&nbsp;+</span>
<span>{{ androidData.attackRangedRaw || 0 }}</span>
</div>
</div>
<div class="flex justify-between">
<span> Defense : </span>
<span> {{ androidData.defenseRaw || 0 }} </span>
</div>
<div class="mt-2 text-y-beige-500 flex justify-around">
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
<font-awesome-icon :icon="['far', 'square']" />
</div>
<hr class="mt-2 mb-0 border-t-2 border-y-beige-500" />
</template>
<template #footer>
<div class="h-full grid place-items-center">
<span class="text-xs uppercase">No error</span>
</div>
</template>
</YrhCard>
</template>

62
src/components/datas/items/ItemSelection.vue Normal file
View File

@@ -0,0 +1,62 @@
<script lang="ts" setup>
import YrhButton from '@/components/YrhButton.vue'
import type { GameItem } from '@/models/YrhGameItem'
import { useItemStore } from '@/stores/datas/itemStore'
import { storeToRefs } from 'pinia'
const { currentItem } = storeToRefs(useItemStore())
const props = defineProps<{
items: GameItem[]
}>()
function handleSelectedItem(item: GameItem) {
currentItem.value = item
}
</script>
<template>
<div class="h-full relative pl-11">
<menu
class="h-[calc(100%-16px)] overflow-auto py-2 bg-y-beige-300 max-h-full shadow-sharpest y-scrollbar"
>
<li v-for="item in props.items" :key="item.name" class="mb-2 last:mb-0">
<YrhButton
no-bg
:has-arrow="item.name === currentItem?.name ? 'force' : true"
@clicked="handleSelectedItem(item)"
:is-active="item.name === currentItem?.name"
>
<span class="flex justify-between">
<span class="flex items-center">
<span v-if="item.category">
<img
:src="`/images/item-${item.category}-icon.png`"
class="pr-2"
height="24"
width="24"
alt=""
/>
</span>
<span>{{ item.name }}</span>
</span>
<span v-if="item.numberHeld">{{ item.numberHeld }}</span>
</span>
</YrhButton>
</li>
</menu>
</div>
</template>
<style lang="scss" scoped>
menu {
&::before {
@apply block absolute -top-2 -bottom-2 left-0 w-4;
content: '';
border-left-width: 8px;
border-right-width: 2px;
border-color: var(--color-y-beige-900);
opacity: 0.25;
}
}
</style>

14
src/main.ts
View File

@@ -1,14 +1,20 @@
import './assets/main.css' import './assets/main.scss'
import { createApp } from 'vue' import { createApp } from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSquare } from '@fortawesome/free-solid-svg-icons'
import { faSquare as faSquareHollow } from '@fortawesome/free-regular-svg-icons'
/* add icons to the library */
library.add(faSquare, faSquareHollow)
const app = createApp(App) const app = createApp(App)
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)
app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app') app.mount('#app')

15
src/models/YrhAndroidData.ts Normal file
View File

@@ -0,0 +1,15 @@
export interface AndroidData {
designation: string
funds?: number
exp?: number
level?: number
hp?: number
maxHp?: number
attackLightRaw?: number
attackLightBonus?: number
attackHeavyRaw?: number
attackHeavyBonus?: number
attackRangedRaw?: number
attackRangedBonus?: number
defenseRaw?: number
}

6
src/models/YrhGameItem.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface GameItem {
name: string
description: string
category?: 'restorative' | 'enhancement' | 'support'
numberHeld?: number
}

6
src/models/YrhNavItem.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface MenuItem {
id: string
label: string
bannerText: string
href?: string
}

25
src/router/index.ts
View File

@@ -1,5 +1,9 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import HomeVue from '../views/Home.vue'
import DataVue from '../views/Data.vue'
import ItemsVue from '@/views/datas/Items.vue'
import ConfigVue from '@/views/Config.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,7 +11,24 @@ const router = createRouter({
{ {
path: '/', path: '/',
name: 'home', name: 'home',
component: HomeView component: HomeVue
},
{
path: '/config',
name: 'config',
component: ConfigVue
},
{
path: '/data',
name: 'data',
component: DataVue,
children: [
{
path: 'items',
name: 'items',
component: ItemsVue
}
]
} }
] ]
}) })

8
src/stores/banner.ts Normal file
View File

@@ -0,0 +1,8 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useBannerStore = defineStore('bannerStore', () => {
const bannerText = ref<string | null>(null)
return { bannerText }
})

8
src/stores/configStore.ts Normal file
View File

@@ -0,0 +1,8 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useAppConfig = defineStore('appConfig', () => {
const globalSound = ref<number>(0.5)
return { globalSound }
})

102
src/stores/datas/itemStore.ts Normal file
View File

@@ -0,0 +1,102 @@
import type { GameItem } from '@/models/YrhGameItem'
import { defineStore } from 'pinia'
import { ref, type Ref } from 'vue'
export const useItemStore = defineStore('itemStore', () => {
const availableItems: Ref<GameItem[]> = ref([
{
name: 'Melee Attack Up (S)',
description: 'Weapon attacks do double damage for 15 seconds.',
category: 'enhancement',
numberHeld: 4
},
{
name: 'Melee Attack Up (L)',
description: 'Weapon attacks do double damage for 30 seconds.',
category: 'enhancement',
numberHeld: 1
},
{
name: 'Melee Defense Up (S)',
description: 'Melee damage taken is reduced by 50% for 15 seconds.',
category: 'enhancement',
numberHeld: 4
},
{
name: 'Melee Defense Up (L)',
description: 'Melee damage taken is reduced by 50% for 30 seconds.',
category: 'enhancement',
numberHeld: 1
},
// {
// name: 'Skill Salve (L)',
// description: 'Skill gauge replenishes twice as fast for 30 seconds',
// category: 'support',
// numberHeld: 6
// },
{
name: 'Impact Bracer (S)',
description: 'Prevents staggering from an attack for 15 seconds',
category: 'enhancement',
numberHeld: 2
},
{
name: 'Impact Bracer (L)',
description: 'Prevents staggering from an attack for 30 seconds',
category: 'enhancement',
numberHeld: 34
},
{
name: "Popola's Booze",
description:
'Increases the power of weapon-based attacks by 50% for 30 seconds. Also restores 100% HP.',
numberHeld: 1
},
{
name: 'Small Recovery',
description: 'Restores 25% of HP.',
category: 'restorative',
numberHeld: 12
},
{
name: 'Medium Recovery',
description: 'Restores 75% of HP.',
category: 'restorative',
numberHeld: 31
},
{
name: 'Full Recovery',
description: 'Restores all of your HP.',
category: 'restorative',
numberHeld: 34
},
{
name: 'Visual Cure',
description: 'Cures visual status ailments.',
category: 'restorative',
numberHeld: 87
},
{
name: 'Aural Cure',
description: 'Cures aural status ailments.',
category: 'restorative',
numberHeld: 60
},
{
name: 'Cure Manipulation',
description: 'Cure control anomalies.',
category: 'restorative',
numberHeld: 39
},
{
name: 'Cure All + Heal All',
description: 'Restores 100% HP and cures all status ailments.',
category: 'restorative',
numberHeld: 2
}
])
const currentItem = ref<GameItem | null>(availableItems.value[0])
return { currentItem, availableItems }
})

22
src/stores/datas/statusStore.ts Normal file
View File

@@ -0,0 +1,22 @@
import type { AndroidData } from '@/models/YrhAndroidData'
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useStatusStore = defineStore('statusStore', () => {
const androidData = ref<AndroidData>({
designation: '9S',
funds: 5375,
exp: 74158,
hp: 2643,
maxHp: 2643,
attackLightBonus: 2338,
attackLightRaw: 234,
attackHeavyBonus: 1878,
attackHeavyRaw: 188,
attackRangedBonus: 150,
attackRangedRaw: 15,
defenseRaw: 734
})
return { androidData }
})

57
src/views/Config.vue Normal file
View File

@@ -0,0 +1,57 @@
<script lang="ts" setup>
import YrhBanner from '@/components/YrhBanner.vue'
import YrhHeading from '@/components/YrhHeading.vue'
import YrhNav from '@/components/YrhNav.vue'
import YrhAudioMenu from '@/components/config/YrhAudioMenu.vue'
import type { MenuItem } from '@/models/YrhNavItem'
import { useBannerStore } from '@/stores/banner'
import { storeToRefs } from 'pinia'
import { ref, onMounted } from 'vue'
const { bannerText } = storeToRefs(useBannerStore())
const availableRoutes: MenuItem[] = [
{
id: 'language',
label: 'Language',
bannerText: 'Change terminal language'
},
{
id: 'audio',
label: 'Audio',
bannerText: 'Change audio settings'
}
]
const activeRoute = ref<string | null>('')
function switchActiveRoute(key: string | null) {
activeRoute.value = key
}
onMounted(() => {
bannerText.value = null
})
</script>
<template>
<main class="container grid grid-rows-[auto_1fr_5vh]">
<YrhHeading> SYSTEM CONFIGURATION </YrhHeading>
<div class="grid grid-cols-4 items-center">
<div>
<YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
</div>
<Transition name="fade" mode="out-in">
<YrhAudioMenu v-if="activeRoute === 'language'">test 1</YrhAudioMenu>
<div v-else-if="activeRoute === 'audio'">test 2</div>
</Transition>
</div>
<div>
<YrhBanner>
<Transition name="fade">
<span v-if="bannerText">{{ bannerText }}</span>
<span v-else>&#8203;</span>
</Transition>
</YrhBanner>
</div>
</main>
</template>

24
src/views/Data.vue Normal file
View File

@@ -0,0 +1,24 @@
<script lang="ts" setup>
import YrhBanner from '@/components/YrhBanner.vue'
import { useBannerStore } from '@/stores/banner'
import { storeToRefs } from 'pinia'
const { bannerText } = storeToRefs(useBannerStore())
</script>
<template>
<main class="container max-h-screen grid grid-rows-[auto_1fr_auto] overflow-auto">
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>
<YrhBanner>
<Transition name="fade">
<span v-if="bannerText">{{ bannerText }}</span>
<span v-else>&#8203;</span>
</Transition>
</YrhBanner>
</main>
</template>

90
src/views/Home.vue Normal file
View File

@@ -0,0 +1,90 @@
<script lang="ts" setup>
import YrhBanner from '@/components/YrhBanner.vue'
import YrhHeading from '@/components/YrhHeading.vue'
import YrhNav from '@/components/YrhNav.vue'
import type { MenuItem } from '@/models/YrhNavItem'
import { useBannerStore } from '@/stores/banner'
import { storeToRefs } from 'pinia'
import { ref, onMounted } from 'vue'
const { bannerText } = storeToRefs(useBannerStore())
const availableRoutes: MenuItem[] = [
{
id: 'current-data',
label: 'Current Data',
bannerText: 'Search through android data',
href: '/data/items'
},
{
id: 'settings',
label: 'Settings',
bannerText: 'Modify android configuration',
href: '/config'
},
{
id: 'credits',
label: 'Credits',
bannerText: "Search through personnel's archive"
}
]
const settingsOptions: MenuItem[] = [
{
id: 'dark-mode',
label: 'Dark Mode',
bannerText: 'Alter the terminal appearance'
},
{
id: 'language',
label: 'Language',
bannerText: 'Change terminal language'
},
{
id: 'audio',
label: 'Audio',
bannerText: 'Change audio settings'
},
{
id: 'video',
label: 'Video',
bannerText: 'Change video settings'
},
{
id: 'controls',
label: 'Controls',
bannerText: 'Change keyboard or gamepad controls'
}
]
const activeRoute = ref<string | null>('')
function switchActiveRoute(key: string | null) {
activeRoute.value = key
}
onMounted(() => {
bannerText.value = null
})
</script>
<template>
<main class="container grid grid-rows-[auto_1fr_5vh]">
<YrhHeading> YORHA SYSTEM </YrhHeading>
<div class="grid grid-cols-4 items-center">
<div>
<YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
</div>
<Transition name="fade" mode="out-in">
<YrhNav v-if="activeRoute === 'credits'" :items="settingsOptions" />
</Transition>
</div>
<div>
<YrhBanner>
<Transition name="fade">
<span v-if="bannerText">{{ bannerText }}</span>
<span v-else>&#8203;</span>
</Transition>
</YrhBanner>
</div>
</main>
</template>

5
src/views/HomeView.vue
View File

@@ -1,5 +0,0 @@
<template>
<main>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</main>
</template>

85
src/views/datas/Items.vue Normal file
View File

@@ -0,0 +1,85 @@
<script lang="ts" setup>
import YrhCard from '@/components/YrhCard.vue'
import YrhHeading from '@/components/YrhHeading.vue'
import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
import ItemSelection from '@/components/datas/items/ItemSelection.vue'
import { useBannerStore } from '@/stores/banner'
import { useItemStore } from '@/stores/datas/itemStore'
import { storeToRefs } from 'pinia'
import { computed, onMounted } from 'vue'
const { currentItem, availableItems } = storeToRefs(useItemStore())
const { bannerText } = storeToRefs(useBannerStore())
const currentItemImage = computed(() => {
switch (currentItem.value?.category) {
case 'enhancement':
return '/images/item-enhancement-md.png'
case 'restorative':
return '/images/item-restorative-md.png'
default:
return null
}
})
onMounted(() => {
bannerText.value = 'Select item'
})
</script>
<template>
<YrhHeading>
ITEMS
<template #subtitle> All items </template>
</YrhHeading>
<section class="grid grid-cols-3 gap-x-10 my-14 overflow-auto">
<div class="items-container max-h-full overflow-hidden">
<ItemSelection :items="availableItems" />
</div>
<div class="max-h-full">
<Transition name="fade" mode="out-in">
<YrhCard v-if="currentItem" breathe-bottom>
<template #title> {{ currentItem.name }} </template>
<template #image>
<img v-if="currentItemImage" :src="currentItemImage" height="100" width="100" alt="" />
</template>
<template #content> {{ currentItem.description }} </template>
<template #footer>
<div class="text-right">
Number held :
<span>{{ currentItem.numberHeld }}&nbsp;/&nbsp;99</span>
</div>
</template>
</YrhCard>
</Transition>
</div>
<div class="max-h-full overflow-hidden">
<div class="h-full max-h-full y-scrollbar overflow-y-auto">
<YrhStatusCard />
</div>
</div>
</section>
</template>
<style lang="scss" scoped>
.items-container {
@apply relative overflow-x-hidden;
&::before,
&::after {
content: '';
height: 0.1rem;
@apply block sticky ml-11 w-full h-2 left-14 -right-14 z-10 bg-y-beige-300;
border-color: rgba(45, 44, 33, 0.33);
}
&::before {
@apply top-0 border-b-2;
}
&::after {
@apply bottom-0 border-t-2;
}
}
</style>

48
tailwind.config.js
View File

@@ -5,7 +5,53 @@ module.exports = {
container: { container: {
padding: '2rem', padding: '2rem',
center: true center: true
},
fontFamily: {
sans: ['Noto Sans', 'ui-sans-serif', 'system-ui'],
serif: ['ui-serif', 'Georgia'],
mono: ['ui-monospace', 'SFMono-Regular'],
display: ['Oswald'],
body: ['Noto Sans']
},
extend: {
colors: {
'y-beige': {
DEFAULT: '#B0AB97',
50: '#FFFFFF',
100: '#F6F6F4',
200: '#E5E3DD',
300: '#D8D2B8',
400: '#cbc5af',
500: '#b0ab97',
600: '#767563',
700: '#4c4940',
800: '#3A382C',
900: '#2d2c21'
}
},
boxShadow: {
sharpest: '2px 2px #2d2c2150'
}
} }
}, },
plugins: [] plugins: [
function ({ addBase, theme }) {
function extractColorVars(colorObj, colorGroup = '') {
return Object.keys(colorObj).reduce((vars, colorKey) => {
const value = colorObj[colorKey]
const newVars =
typeof value === 'string'
? { [`--color${colorGroup}-${colorKey}`]: value }
: extractColorVars(value, `-${colorKey}`)
return { ...vars, ...newVars }
}, {})
}
addBase({
':root': extractColorVars(theme('colors'))
})
}
]
} }