Public Access
Merge pull request 'Changed app from vue to react' (#1) from reactTry into main
Reviewed-on: https://codeberg.org/LoboTheDark/ToBePlayed-Frontend/pulls/1
This commit is contained in:
commit
7ff53c0f6c
10 files changed
+138
-492
No files matched your search
@@ -1,12 +1,11 @@
|
|||||||
# To Be Played - Frontend
|
# To Be Played - Frontend
|
||||||
|
|
||||||
A modern web application to manage your game backlog, built with Vue 3 and Vite.
|
A modern web application to manage your game backlog, built with React and Vite.
|
||||||
|
|
||||||
## 🚀 Tech Stack
|
## 🚀 Tech Stack
|
||||||
|
|
||||||
- **Framework:** [Vue 3](https://vuejs.org/) (Composition API with `<script setup>`)
|
- **Framework:** [React](https://react.dev/)
|
||||||
- **Build Tool:** [Vite](https://vitejs.dev/)
|
- **Build Tool:** [Vite](https://vitejs.dev/)
|
||||||
- **UI Component Library:** [Vuetify 4](https://vuetifyjs.com/)
|
|
||||||
- **Styling:** [Tailwind CSS 4](https://tailwindcss.com/)
|
- **Styling:** [Tailwind CSS 4](https://tailwindcss.com/)
|
||||||
- **Icons:** [Material Design Icons (MDI)](https://materialdesignicons.com/)
|
- **Icons:** [Material Design Icons (MDI)](https://materialdesignicons.com/)
|
||||||
|
|
||||||
@@ -16,9 +15,9 @@ A modern web application to manage your game backlog, built with Vue 3 and Vite.
|
|||||||
├── public/ # Static assets (favicons, icons)
|
├── public/ # Static assets (favicons, icons)
|
||||||
├── src/
|
├── src/
|
||||||
│ ├── assets/ # Images and global media
|
│ ├── assets/ # Images and global media
|
||||||
│ ├── components/ # Reusable Vue components
|
│ ├── components/ # Reusable React components
|
||||||
│ ├── App.vue # Main application layout and entry component
|
│ ├── App.jsx # Main application layout and entry component
|
||||||
│ ├── main.js # App initialization (Vue, Vuetify, Styles)
|
│ ├── main.jsx # App initialization (React DOM, Styles)
|
||||||
│ └── style.css # Global Tailwind and custom CSS
|
│ └── style.css # Global Tailwind and custom CSS
|
||||||
├── index.html # Entry HTML file
|
├── index.html # Entry HTML file
|
||||||
├── package.json # Dependencies and scripts
|
├── package.json # Dependencies and scripts
|
||||||
|
|||||||
+2
-2
@@ -7,7 +7,7 @@
|
|||||||
<title>tobeplayed-frontend</title>
|
<title>tobeplayed-frontend</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Generated
+48
-296
@@ -10,64 +10,17 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdi/font": "~7.4.47",
|
"@mdi/font": "~7.4.47",
|
||||||
"@tailwindcss/vite": "~4.2.2",
|
"@tailwindcss/vite": "~4.2.2",
|
||||||
"vite-plugin-vuetify": "~2.1.3",
|
"react": "^19.2.4",
|
||||||
"vue": "^3.5.30",
|
"react-dom": "^19.2.4"
|
||||||
"vuetify": "~4.0.3"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "~6.0.5",
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
"autoprefixer": "~10.4.27",
|
"autoprefixer": "~10.4.27",
|
||||||
"postcss": "~8.5.8",
|
"postcss": "~8.5.8",
|
||||||
"tailwindcss": "~4.2.2",
|
"tailwindcss": "~4.2.2",
|
||||||
"vite": "^8.0.1"
|
"vite": "^8.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@babel/helper-string-parser": {
|
|
||||||
"version": "7.27.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
|
|
||||||
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6.9.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@babel/helper-validator-identifier": {
|
|
||||||
"version": "7.28.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
|
|
||||||
"integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6.9.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@babel/parser": {
|
|
||||||
"version": "7.29.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
|
|
||||||
"integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/types": "^7.29.0"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"parser": "bin/babel-parser.js"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@babel/types": {
|
|
||||||
"version": "7.29.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
|
|
||||||
"integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/helper-string-parser": "^7.27.1",
|
|
||||||
"@babel/helper-validator-identifier": "^7.28.5"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6.9.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@emnapi/core": {
|
"node_modules/@emnapi/core": {
|
||||||
"version": "1.9.1",
|
"version": "1.9.1",
|
||||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
|
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
|
||||||
@@ -416,9 +369,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@rolldown/pluginutils": {
|
"node_modules/@rolldown/pluginutils": {
|
||||||
"version": "1.0.0-rc.2",
|
"version": "1.0.0-rc.7",
|
||||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
|
||||||
"integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
|
"integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
@@ -689,134 +642,30 @@
|
|||||||
"tslib": "^2.4.0"
|
"tslib": "^2.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vitejs/plugin-vue": {
|
"node_modules/@vitejs/plugin-react": {
|
||||||
"version": "6.0.5",
|
"version": "6.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
|
||||||
"integrity": "sha512-bL3AxKuQySfk1iGcBsQnoRVexTPJq0Z/ixFVM8OhVJAP6ZXXXLtM7NFKWhLl30Kg7uTBqIaPXbh+nuQCuBDedg==",
|
"integrity": "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@rolldown/pluginutils": "1.0.0-rc.2"
|
"@rolldown/pluginutils": "1.0.0-rc.7"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^20.19.0 || >=22.12.0"
|
"node": "^20.19.0 || >=22.12.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
|
"@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
|
||||||
"vue": "^3.2.25"
|
"babel-plugin-react-compiler": "^1.0.0",
|
||||||
}
|
"vite": "^8.0.0"
|
||||||
},
|
|
||||||
"node_modules/@vue/compiler-core": {
|
|
||||||
"version": "3.5.30",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.30.tgz",
|
|
||||||
"integrity": "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/parser": "^7.29.0",
|
|
||||||
"@vue/shared": "3.5.30",
|
|
||||||
"entities": "^7.0.1",
|
|
||||||
"estree-walker": "^2.0.2",
|
|
||||||
"source-map-js": "^1.2.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@vue/compiler-dom": {
|
|
||||||
"version": "3.5.30",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.30.tgz",
|
|
||||||
"integrity": "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@vue/compiler-core": "3.5.30",
|
|
||||||
"@vue/shared": "3.5.30"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@vue/compiler-sfc": {
|
|
||||||
"version": "3.5.30",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.30.tgz",
|
|
||||||
"integrity": "sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/parser": "^7.29.0",
|
|
||||||
"@vue/compiler-core": "3.5.30",
|
|
||||||
"@vue/compiler-dom": "3.5.30",
|
|
||||||
"@vue/compiler-ssr": "3.5.30",
|
|
||||||
"@vue/shared": "3.5.30",
|
|
||||||
"estree-walker": "^2.0.2",
|
|
||||||
"magic-string": "^0.30.21",
|
|
||||||
"postcss": "^8.5.8",
|
|
||||||
"source-map-js": "^1.2.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@vue/compiler-ssr": {
|
|
||||||
"version": "3.5.30",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.30.tgz",
|
|
||||||
"integrity": "sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@vue/compiler-dom": "3.5.30",
|
|
||||||
"@vue/shared": "3.5.30"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@vue/reactivity": {
|
|
||||||
"version": "3.5.30",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.30.tgz",
|
|
||||||
"integrity": "sha512-179YNgKATuwj9gB+66snskRDOitDiuOZqkYia7mHKJaidOMo/WJxHKF8DuGc4V4XbYTJANlfEKb0yxTQotnx4Q==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@vue/shared": "3.5.30"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@vue/runtime-core": {
|
|
||||||
"version": "3.5.30",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.30.tgz",
|
|
||||||
"integrity": "sha512-e0Z+8PQsUTdwV8TtEsLzUM7SzC7lQwYKePydb7K2ZnmS6jjND+WJXkmmfh/swYzRyfP1EY3fpdesyYoymCzYfg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@vue/reactivity": "3.5.30",
|
|
||||||
"@vue/shared": "3.5.30"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@vue/runtime-dom": {
|
|
||||||
"version": "3.5.30",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.30.tgz",
|
|
||||||
"integrity": "sha512-2UIGakjU4WSQ0T4iwDEW0W7vQj6n7AFn7taqZ9Cvm0Q/RA2FFOziLESrDL4GmtI1wV3jXg5nMoJSYO66egDUBw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@vue/reactivity": "3.5.30",
|
|
||||||
"@vue/runtime-core": "3.5.30",
|
|
||||||
"@vue/shared": "3.5.30",
|
|
||||||
"csstype": "^3.2.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@vue/server-renderer": {
|
|
||||||
"version": "3.5.30",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.30.tgz",
|
|
||||||
"integrity": "sha512-v+R34icapydRwbZRD0sXwtHqrQJv38JuMB4JxbOxd8NEpGLny7cncMp53W9UH/zo4j8eDHjQ1dEJXwzFQknjtQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@vue/compiler-ssr": "3.5.30",
|
|
||||||
"@vue/shared": "3.5.30"
|
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependenciesMeta": {
|
||||||
"vue": "3.5.30"
|
"@rolldown/plugin-babel": {
|
||||||
}
|
"optional": true
|
||||||
},
|
},
|
||||||
"node_modules/@vue/shared": {
|
"babel-plugin-react-compiler": {
|
||||||
"version": "3.5.30",
|
"optional": true
|
||||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.30.tgz",
|
}
|
||||||
"integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@vuetify/loader-shared": {
|
|
||||||
"version": "2.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-2.1.2.tgz",
|
|
||||||
"integrity": "sha512-X+1jBLmXHkpQEnC0vyOb4rtX2QSkBiFhaFXz8yhQqN2A4vQ6k2nChxN4Ol7VAY5KoqMdFoRMnmNdp/1qYXDQig==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"upath": "^2.0.1"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"vue": "^3.0.0",
|
|
||||||
"vuetify": ">=3"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/autoprefixer": {
|
"node_modules/autoprefixer": {
|
||||||
@@ -924,29 +773,6 @@
|
|||||||
],
|
],
|
||||||
"license": "CC-BY-4.0"
|
"license": "CC-BY-4.0"
|
||||||
},
|
},
|
||||||
"node_modules/csstype": {
|
|
||||||
"version": "3.2.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
|
||||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/debug": {
|
|
||||||
"version": "4.4.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
|
||||||
"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"ms": "^2.1.3"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6.0"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"supports-color": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/detect-libc": {
|
"node_modules/detect-libc": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||||
@@ -976,18 +802,6 @@
|
|||||||
"node": ">=10.13.0"
|
"node": ">=10.13.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/entities": {
|
|
||||||
"version": "7.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
|
|
||||||
"integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
|
|
||||||
"license": "BSD-2-Clause",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.12"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/escalade": {
|
"node_modules/escalade": {
|
||||||
"version": "3.2.0",
|
"version": "3.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||||
@@ -998,12 +812,6 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/estree-walker": {
|
|
||||||
"version": "2.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
|
||||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/fdir": {
|
"node_modules/fdir": {
|
||||||
"version": "6.5.0",
|
"version": "6.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
|
||||||
@@ -1322,12 +1130,6 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.5.5"
|
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/ms": {
|
|
||||||
"version": "2.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
|
||||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
"version": "3.3.11",
|
"version": "3.3.11",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
||||||
@@ -1406,6 +1208,27 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/react": {
|
||||||
|
"version": "19.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
|
||||||
|
"integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-dom": {
|
||||||
|
"version": "19.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
|
||||||
|
"integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"scheduler": "^0.27.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^19.2.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/rolldown": {
|
"node_modules/rolldown": {
|
||||||
"version": "1.0.0-rc.10",
|
"version": "1.0.0-rc.10",
|
||||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.10.tgz",
|
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.10.tgz",
|
||||||
@@ -1445,6 +1268,12 @@
|
|||||||
"integrity": "sha512-UkVDEFk1w3mveXeKgaTuYfKWtPbvgck1dT8TUG3bnccrH0XtLTuAyfCoks4Q/M5ZGToSVJTIQYCzy2g/atAOeg==",
|
"integrity": "sha512-UkVDEFk1w3mveXeKgaTuYfKWtPbvgck1dT8TUG3bnccrH0XtLTuAyfCoks4Q/M5ZGToSVJTIQYCzy2g/atAOeg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/scheduler": {
|
||||||
|
"version": "0.27.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
||||||
|
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/source-map-js": {
|
"node_modules/source-map-js": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||||
@@ -1496,16 +1325,6 @@
|
|||||||
"license": "0BSD",
|
"license": "0BSD",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"node_modules/upath": {
|
|
||||||
"version": "2.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
|
|
||||||
"integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=4",
|
|
||||||
"yarn": "*"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/update-browserslist-db": {
|
"node_modules/update-browserslist-db": {
|
||||||
"version": "1.2.3",
|
"version": "1.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
|
||||||
@@ -1613,73 +1432,6 @@
|
|||||||
"optional": true
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"node_modules/vite-plugin-vuetify": {
|
|
||||||
"version": "2.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-2.1.3.tgz",
|
|
||||||
"integrity": "sha512-Q4SC/4TqbNvaZIFb9YsfBqkGlYHbJJJ6uU3CnRBZqLUF3s5eCMVZAaV4GkTbehIH/bhSj42lMXztOwc71u6rVw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@vuetify/loader-shared": "^2.1.2",
|
|
||||||
"debug": "^4.3.3",
|
|
||||||
"upath": "^2.0.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": "^18.0.0 || >=20.0.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"vite": ">=5",
|
|
||||||
"vue": "^3.0.0",
|
|
||||||
"vuetify": ">=3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/vue": {
|
|
||||||
"version": "3.5.30",
|
|
||||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.30.tgz",
|
|
||||||
"integrity": "sha512-hTHLc6VNZyzzEH/l7PFGjpcTvUgiaPK5mdLkbjrTeWSRcEfxFrv56g/XckIYlE9ckuobsdwqd5mk2g1sBkMewg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@vue/compiler-dom": "3.5.30",
|
|
||||||
"@vue/compiler-sfc": "3.5.30",
|
|
||||||
"@vue/runtime-dom": "3.5.30",
|
|
||||||
"@vue/server-renderer": "3.5.30",
|
|
||||||
"@vue/shared": "3.5.30"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"typescript": "*"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"typescript": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/vuetify": {
|
|
||||||
"version": "4.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.0.3.tgz",
|
|
||||||
"integrity": "sha512-RjvmvXuq0omR4h4BQGNzkzl7/CKml+Q82JUu3AvecuX43V7eSxk35GC/TsUoKMWJVgXPLwGh5dpQnH1bG1D3qg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"funding": {
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/johnleider"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"typescript": ">=4.7",
|
|
||||||
"vite-plugin-vuetify": ">=2.1.0",
|
|
||||||
"vue": "^3.5.0",
|
|
||||||
"webpack-plugin-vuetify": ">=3.1.0"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"typescript": {
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"vite-plugin-vuetify": {
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"webpack-plugin-vuetify": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+3
-4
@@ -11,12 +11,11 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdi/font": "~7.4.47",
|
"@mdi/font": "~7.4.47",
|
||||||
"@tailwindcss/vite": "~4.2.2",
|
"@tailwindcss/vite": "~4.2.2",
|
||||||
"vite-plugin-vuetify": "~2.1.3",
|
"react": "^19.2.4",
|
||||||
"vue": "^3.5.30",
|
"react-dom": "^19.2.4"
|
||||||
"vuetify": "~4.0.3"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "~6.0.5",
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
"autoprefixer": "~10.4.27",
|
"autoprefixer": "~10.4.27",
|
||||||
"postcss": "~8.5.8",
|
"postcss": "~8.5.8",
|
||||||
"tailwindcss": "~4.2.2",
|
"tailwindcss": "~4.2.2",
|
||||||
|
|||||||
+67
@@ -0,0 +1,67 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
// Array to generate the placeholder game cards
|
||||||
|
const mockGames = [1, 2, 3];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 flex flex-col">
|
||||||
|
<header className="border-b shadow-sm bg-white p-4 flex justify-between items-center">
|
||||||
|
<div className="font-bold text-blue-600 flex items-center">
|
||||||
|
<i className="mdi mdi-controller mr-2 text-xl"></i>
|
||||||
|
To Be Played
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button className="mr-4">Dashboard</button>
|
||||||
|
<button className="bg-blue-600 text-white px-4 py-2 rounded">Login</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="grow container mx-auto py-20 px-4">
|
||||||
|
<section className="text-center mb-16">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">
|
||||||
|
Dein Game-Backlog unter Kontrolle.
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||||
|
Willkommen bei deiner neuen Applikation. Hier werden bald deine Spiele aus dem
|
||||||
|
<code className="bg-slate-200 px-1 rounded text-blue-600 ml-1">game-service</code> gelistet.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{mockGames.map((n) => {
|
||||||
|
return (
|
||||||
|
<div key={n} className="border border-slate-200 rounded-xl bg-white overflow-hidden">
|
||||||
|
<div className="h-48 bg-slate-100">
|
||||||
|
<img
|
||||||
|
src={`https://picsum.photos/500/300?random=${n}`}
|
||||||
|
alt={`Beispiel Spiel ${n}`}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
<h3 className="font-bold text-lg">Beispiel Spiel {n}</h3>
|
||||||
|
<p className="text-sm text-slate-500 mb-2">Status: In Warteschlange</p>
|
||||||
|
<p className="text-slate-500 text-sm">
|
||||||
|
Dies ist ein Platzhalter für ein Spiel in deiner Liste. Später kommen hier echte Daten per API.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="border-t p-4">
|
||||||
|
<button className="w-full bg-blue-100 text-blue-700 py-2 rounded font-medium hover:bg-blue-200">
|
||||||
|
Details ansehen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer className="bg-white border-t py-4 text-center text-slate-400 text-sm">
|
||||||
|
© 2026 To Be Played — Entwickelt mit React & Tailwind v4
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
-69
@@ -1,69 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-app>
|
|
||||||
<v-app-bar flat class="border-b shadow-sm">
|
|
||||||
<v-container class="d-flex align-center py-0">
|
|
||||||
<v-app-bar-title class="font-weight-bold text-primary">
|
|
||||||
<v-icon icon="mdi-controller" class="mr-2"></v-icon>
|
|
||||||
To Be Played
|
|
||||||
</v-app-bar-title>
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
<v-btn variant="text" class="text-none">Dashboard</v-btn>
|
|
||||||
<v-btn variant="flat" color="primary" class="text-none ml-2">Login</v-btn>
|
|
||||||
</v-container>
|
|
||||||
</v-app-bar>
|
|
||||||
|
|
||||||
<v-main class="bg-slate-50">
|
|
||||||
<v-container class="py-20">
|
|
||||||
|
|
||||||
<!-- Hero Sektion -->
|
|
||||||
<section class="text-center mb-16">
|
|
||||||
<h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">
|
|
||||||
Dein Game-Backlog unter Kontrolle.
|
|
||||||
</h1>
|
|
||||||
<p class="text-lg text-slate-600 max-w-2xl mx-auto">
|
|
||||||
Willkommen bei deiner neuen Applikation. Hier werden bald deine Spiele aus dem
|
|
||||||
<code class="bg-slate-200 px-1 rounded text-primary">game-service</code> gelistet.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col v-for="n in 3" :key="n" cols="12" md="4">
|
|
||||||
<v-card variant="outlined" class="rounded-xl border-slate-200 bg-white">
|
|
||||||
<v-img
|
|
||||||
height="200"
|
|
||||||
src="https://picsum.photos/500/300?random="
|
|
||||||
cover
|
|
||||||
class="bg-slate-100"
|
|
||||||
></v-img>
|
|
||||||
<v-card-item>
|
|
||||||
<v-card-title>Beispiel Spiel {{ n }}</v-card-title>
|
|
||||||
<v-card-subtitle>Status: In Warteschlange</v-card-subtitle>
|
|
||||||
</v-card-item>
|
|
||||||
<v-card-text class="text-slate-500">
|
|
||||||
Dies ist ein Platzhalter für ein Spiel in deiner Liste. Später kommen hier echte Daten per API.
|
|
||||||
</v-card-text>
|
|
||||||
<v-divider class="mx-4"></v-divider>
|
|
||||||
<v-card-actions class="pa-4">
|
|
||||||
<v-btn variant="tonal" color="primary" block>Details ansehen</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
</v-container>
|
|
||||||
</v-main>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<v-footer class="bg-white border-t py-4">
|
|
||||||
<v-container class="text-center text-slate-400 text-sm">
|
|
||||||
© 2026 To Be Played — Entwickelt mit Vue 3, Vuetify & Tailwind v4
|
|
||||||
</v-container>
|
|
||||||
</v-footer>
|
|
||||||
</v-app>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import viteLogo from '../assets/vite.svg'
|
|
||||||
import heroImg from '../assets/hero.png'
|
|
||||||
import vueLogo from '../assets/vue.svg'
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<section id="center">
|
|
||||||
<div class="hero">
|
|
||||||
<img :src="heroImg" class="base" width="170" height="179" alt="" />
|
|
||||||
<img :src="vueLogo" class="framework" alt="Vue logo" />
|
|
||||||
<img :src="viteLogo" class="vite" alt="Vite logo" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1>Get started</h1>
|
|
||||||
<p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
|
|
||||||
</div>
|
|
||||||
<button class="counter" @click="count++">Count is {{ count }}</button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="ticks"></div>
|
|
||||||
|
|
||||||
<section id="next-steps">
|
|
||||||
<div id="docs">
|
|
||||||
<svg class="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#documentation-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Documentation</h2>
|
|
||||||
<p>Your questions, answered</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vite.dev/" target="_blank">
|
|
||||||
<img class="logo" :src="viteLogo" alt="" />
|
|
||||||
Explore Vite
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://vuejs.org/" target="_blank">
|
|
||||||
<img class="button-icon" :src="vueLogo" alt="" />
|
|
||||||
Learn more
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="social">
|
|
||||||
<svg class="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#social-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Connect with us</h2>
|
|
||||||
<p>Join the Vite community</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
|
||||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#github-icon"></use>
|
|
||||||
</svg>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vite.dev/" target="_blank">
|
|
||||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#discord-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Discord
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://x.com/vite_js" target="_blank">
|
|
||||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#x-icon"></use>
|
|
||||||
</svg>
|
|
||||||
X.com
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
|
||||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#bluesky-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Bluesky
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="ticks"></div>
|
|
||||||
<section id="spacer"></section>
|
|
||||||
</template>
|
|
||||||
-18
@@ -1,18 +0,0 @@
|
|||||||
import { createApp } from 'vue';
|
|
||||||
import App from './App.vue';
|
|
||||||
import './style.css';
|
|
||||||
import 'vuetify/styles';
|
|
||||||
import { createVuetify } from 'vuetify';
|
|
||||||
import '@mdi/font/css/materialdesignicons.css';
|
|
||||||
|
|
||||||
const vuetify = createVuetify({
|
|
||||||
theme: {
|
|
||||||
defaultTheme: 'light',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const app = createApp(App);
|
|
||||||
|
|
||||||
app.use(vuetify);
|
|
||||||
|
|
||||||
app.mount('#app');
|
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App.jsx';
|
||||||
|
import './style.css';
|
||||||
|
import '@mdi/font/css/materialdesignicons.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
+2
-4
@@ -1,12 +1,10 @@
|
|||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from 'vite';
|
||||||
import vue from '@vitejs/plugin-vue';
|
import react from '@vitejs/plugin-react';
|
||||||
import tailwindcss from '@tailwindcss/vite';
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
import vuetify from 'vite-plugin-vuetify';
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
react(),
|
||||||
tailwindcss(),
|
tailwindcss(),
|
||||||
vuetify({ autoImport: true }),
|
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
Reference in new issue
Block a user