imi-bas/pronature-platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

initial

Browse Source
This commit is contained in:
goynov
2024-10-29 19:49:24 +02:00
commit 11eb888b9c
42 changed files with 7877 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.browserslistrc
+4
View File
@@ -0,0 +1,4 @@
> 1%
last 2 versions
not dead
not ie 11
.editorconfig
+5
View File
@@ -0,0 +1,5 @@
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
.eslintrc-auto-import.json
+79
View File
@@ -0,0 +1,79 @@
{
"globals": {
"Component": true,
"ComponentPublicInstance": true,
"ComputedRef": true,
"EffectScope": true,
"ExtractDefaultPropTypes": true,
"ExtractPropTypes": true,
"ExtractPublicPropTypes": true,
"InjectionKey": true,
"PropType": true,
"Ref": true,
"VNode": true,
"WritableComputedRef": true,
"computed": true,
"createApp": true,
"customRef": true,
"defineAsyncComponent": true,
"defineComponent": true,
"effectScope": true,
"getCurrentInstance": true,
"getCurrentScope": true,
"h": true,
"inject": true,
"isProxy": true,
"isReactive": true,
"isReadonly": true,
"isRef": true,
"markRaw": true,
"nextTick": true,
"onActivated": true,
"onBeforeMount": true,
"onBeforeRouteLeave": true,
"onBeforeRouteUpdate": true,
"onBeforeUnmount": true,
"onBeforeUpdate": true,
"onDeactivated": true,
"onErrorCaptured": true,
"onMounted": true,
"onRenderTracked": true,
"onRenderTriggered": true,
"onScopeDispose": true,
"onServerPrefetch": true,
"onUnmounted": true,
"onUpdated": true,
"provide": true,
"reactive": true,
"readonly": true,
"ref": true,
"resolveComponent": true,
"shallowReactive": true,
"shallowReadonly": true,
"shallowRef": true,
"toRaw": true,
"toRef": true,
"toRefs": true,
"toValue": true,
"triggerRef": true,
"unref": true,
"useAttrs": true,
"useCssModule": true,
"useCssVars": true,
"useLink": true,
"useRoute": true,
"useRouter": true,
"useSlots": true,
"watch": true,
"watchEffect": true,
"watchPostEffect": true,
"watchSyncEffect": true,
"DirectiveBinding": true,
"MaybeRef": true,
"MaybeRefOrGetter": true,
"onWatcherCleanup": true,
"useId": true,
"useModel": true,
"useTemplateRef": true
}
}
.eslintrc.js
+19
View File
@@ -0,0 +1,19 @@
/**
* .eslint.js
*
* ESLint configuration file.
*/
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'vuetify',
'./.eslintrc-auto-import.json',
],
rules: {
'vue/multi-word-component-names': 'off',
},
}
.gitignore
+23
View File
@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.cert
README.md
+79
View File
@@ -0,0 +1,79 @@
# Vuetify (Default)
This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
## ❗️ Important Links
- 📄 [Docs](https://vuetifyjs.com/)
- 🚨 [Issues](https://issues.vuetifyjs.com/)
- 🏬 [Store](https://store.vuetifyjs.com/)
- 🎮 [Playground](https://play.vuetifyjs.com/)
- 💬 [Discord](https://community.vuetifyjs.com)
## 💿 Install
Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
| Package Manager | Command |
|---------------------------------------------------------------|----------------|
| [yarn](https://yarnpkg.com/getting-started) | `yarn install` |
| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install) | `npm install` |
| [pnpm](https://pnpm.io/installation) | `pnpm install` |
| [bun](https://bun.sh/#getting-started) | `bun install` |
After completing the installation, your environment is ready for Vuetify development.
## ✨ Features
- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
## 💡 Usage
This section covers how to start the development server and build your project for production.
### Starting the Development Server
To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
```bash
yarn dev
```
(Repeat for npm, pnpm, and bun with respective commands.)
> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
### Building for Production
To build your project for production, use:
```bash
yarn build
```
(Repeat for npm, pnpm, and bun with respective commands.)
Once the build process is completed, your application will be ready for deployment in a production environment.
## 💪 Support Vuetify Development
This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
## 📑 License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2016-present Vuetify, LLC
backend/app/App.js
+51
View File
@@ -0,0 +1,51 @@
import path, { dirname } from 'path';
import { fileURLToPath } from 'url';
class App{
constructor(){
this.root = path.resolve(dirname(fileURLToPath(import.meta.url)) + '/../../');
}
plugins = [];
async use(plugin){
this[plugin.name] = plugin;
plugin.app = this;
this.plugins.push(plugin);
}
async init(){
for (let p of this.plugins){
console.debug('Initializing', p.name)
if(p.init) await p.init(this);
}
}
async importModules(modules){
const mods = {};
for (let m of modules){
mods[m.name] = (await import(`../${m.path}`))[m.name];
}
for (let m of modules){
this.use(new mods[m.name]())
}
}
async replace(p){
let old = this[p.name];
this.plugins[this.plugins.indexOf(old)] = p;
this[p.name] = p;
p.app = this;
if(p.init) await p.init(this);
}
async start(){
for (let p of this.plugins){
console.debug('Starting', p.name)
if(p.start) await p.start(this);
}
}
}
export default App;
backend/app/Config.js
+41
View File
@@ -0,0 +1,41 @@
import path from 'path'
class Config{
name = 'config';
fs = {
repo: null
}
db = {
name:'pronature',
url: "mongodb://127.0.0.1:27017/pronature"
}
site = {
host:'https://localhost:5173',
ssl: true,
port: 3000,
certificate: {
key: './.cert/dev-key.pem',
cert: './.cert/dev-cert.pem',
passphrase: 'parola'
}
}
am = {
salt : 'P@ssSal7y!!',
cookie: {
secret: 'S3cret4C00k!ie$',
maxAge: 1000 * 60 * 60 * 24 * 7
}
}
async init(app){
if (!this.fs.repo){
this.fs.repo = path.resolve(`${app.root}/repo`) + '/';
}
}
async start(app){
}
}
export { Config };
backend/app/Db.js
+186
View File
@@ -0,0 +1,186 @@
import { ObjectId, MongoClient } from 'mongodb';
let db;
let dbo;
class Db {
name = 'db';
init(app){
this.app = app;
}
async start(app){
db = await MongoClient.connect(app.config.db.url, {maxPoolSize: 256});
try {
dbo = db.db(app.config.db.name);
this.instance = dbo;
for (let c of ['users', 'user_sessions', 'history', 'log', 'assets']){
try {
await dbo.createCollection(c);
}catch(err){}
}
}finally{
}
}
async create(collection, value){
try {
delete value._id;
return await dbo.collection(collection).insertOne(value);
}finally{
}
}
async get(collection, key, projection){
try {
let res = await dbo.collection(collection).findOne(key, projection ? {projection} : undefined)
return res;
}finally{
}
}
async list(collection, query){
try {
let cursor = dbo.collection(collection).find(query.query, query.project ? {projection: query.project} : undefined);
query.sort && cursor.sort(query.sort);
query.skip && cursor.skip(query.skip);
query.limit && cursor.limit(query.limit);
let count = await dbo.collection(collection).countDocuments(query.query);
let result = await cursor.toArray();
return {data: result, count:count};
}finally{
}
}
async aggregate(collection, specs){
try {
let cursor = dbo.collection(collection);
let aggCursor = cursor.aggregate(specs);
let result = await aggCursor.toArray();
return result.length == 1 ? result[0] : result;
}finally{
}
}
async distinct(collection, key, query){
try {
return await dbo.collection(collection).distinct(key, query);
}finally{
}
}
async update(collection, key, value){
let r;
try {
delete value._id;
r = await dbo.collection(collection).replaceOne(key, value, {upsert:true});
}finally{
return r;
}
}
async updateSet(collection, key, value){
let r;
try {
r = await dbo.collection(collection).updateMany(key, value);
}finally{
return r;
}
}
async remove(collection, key){
try {
await dbo.collection(collection).deleteMany(key);
}finally{
}
}
convertToObjectId(object, key, recursive, result){
if (object && object[key]){
if (Array.isArray(object[key])){
object[key].forEach((v, i, a)=>{
a[i] = this.ObjectId(v);
result && result.push(a[i]);
})
}else{
let oid = this.ObjectId(object[key])
object[key] = oid;
result && result.push(oid);
}
}
if (recursive){
for (var k in object){
if (typeof(object[k]) == 'object'){
this.convertToObjectId(object[k], key, recursive, result);
}
}
}
}
sanitizeQuery(q){
if (!q) return;
Object.getOwnPropertyNames(q).forEach(n=>{
if (n.startsWith('$')){
//sanitize $
console.warn('Deleting suspicious query key', n)
delete q[n];
}
if (typeof(q[n]) == 'object'){
this.sanitizeQuery(q[n]);
}
//prepare for DB
if (n.startsWith('*')){
let n1 = '$' + n.slice(1);
q[n1] = q[n];
delete q[n];
n = n1;
}
if (['$where', '$group', '$merge', '$lookup', '$accumulator', '$function'].includes(n)){
delete q[n];
console.warn('Deleting suspicious query key', n);
}
})
if (q.$oid){
q.$oid.forEach(o=>{
q[o] = this.ObjectId(q[o]);
})
delete q.$oid;
}
return q;
}
sanitizeProjection(p){
if (!p) return { _id: 1 };
let props = Object.getOwnPropertyNames(p);
props.forEach(n=>{
if (typeof p[n] == 'object'){
console.warn('Deleting suspicious projection key, object', n)
delete p[n]
}else if (!n.match(/^[0-9a-zA-Z\._\$\#\-\:]*$/)){
console.warn('Deleting suspicious projection key', n)
delete p[n]
}else if (typeof p[n] !== 'number' && !p[n].match(/^[0-9a-zA-Z\._\$\#\-]*$/)){
console.warn('Deleting suspicious projection value', n, p[n])
delete p[n]
}
})
props = Object.getOwnPropertyNames(p);
if (props.length == 0){
return { _id: 1 };
}
}
checkLimit(q){
if (!q) return;
if (!q.limit) q.limit = 100;
if (q.limit == 'all') delete q.limit;
}
ObjectId(id){
return new ObjectId(id);
}
}
export { Db };
backend/app/WebServer.js
+111
View File
@@ -0,0 +1,111 @@
import express from 'express'
import session from 'express-session';
import compression from 'compression';
import MongoDBStore from 'connect-mongodb-session';
import https from 'https';
import fs from 'fs';
import cookieParser from 'cookie-parser';
import helmet from 'helmet';
import { v4 as uuidv4 } from 'uuid';
class WebServer {
name = 'webServer';
async init(app) {
const xapp = express();
this.xapp = xapp;
xapp.disable('x-powered-by');
xapp.use(compression());
xapp.use(cookieParser());
const store = new MongoDBStore(session)({
uri: app.config.db.url,
databaseName: app.config.db.name,
collection: 'user_sessions'
});
store.on('error', function (error) {
console.log(error);
});
xapp.use(session({
secret: app.config.am.cookie.secret,
cookie: {
maxAge: app.config.am.cookie.maxAge || 1000 * 60 * 60 * 24 * 7,
secure: !!app.config.am.cookie.secure,
httpOnly: true,
sameSite: app.config.am.cookie.sameSite
},
store,
resave: false,
saveUninitialized: (app.config.am?.session?.saveUninitialized === undefined) ? true : app.config.am.session.saveUninitialized,
proxy: true
}));
// xapp.use((req, res, next) => {
// let l = app.config.langs.find(l => l.code == (req.query?.lang || req.cookies.lang || 'bg'));
// req.lang = l || app.config.langs[0];
// next();
// })
xapp.use(express.json({ limit: '150mb' }));
xapp.use(express.urlencoded({ extended: false, limit: '150mb' }));
xapp.use((req, res, next) => {
res.locals.cspNonce = uuidv4();
next();
});
app.config.am.helmet && xapp.use(helmet(app.config.am.helmet));
}
async start(app) {
let indexFile = app.root + '/index.html';
let indexFileContent = fs.readFileSync(indexFile, { encoding: 'utf-8' });
function index(req, res) {
//res.sendFile(indexFile);
res.send(indexFileContent.replace(/\#NONCE\#/g, res.locals.cspNonce));
}
this.xapp.get('/', index);
// app.config.langs.forEach(l => {
// this.xapp.use('/' + l.code, index);
// })
this.xapp.use(express.static(`${this.app.root}/dist/`));
this.xapp.use((req, res, next) => {
if (req.method == 'GET' || req.method == 'POST') {
return res.status(404).end();
} else next();
});
///error handler!
this.xapp.use((err, req, res, next) => {
console.error(err.stack)
res.status(500).send('Something broke!')
})
let started = () => {
console.log(`app started on port ${app.config.site.port}. SSL is ${app.config.site.ssl ? 'enabled' : 'disabled'}.`)
}
if (app.config.site.ssl) {
this.server = https.createServer({
key: fs.readFileSync(app.config.site.certificate.key),
cert: fs.readFileSync(app.config.site.certificate.cert),
passphrase: app.config.site.certificate.passphrase
}, this.xapp).listen(app.config.site.port, started);
} else {
this.server = this.xapp.listen(app.config.site.port, app.config.site.hostAddress || '127.0.0.1', started);
}
}
}
export { WebServer };
backend/controllers/api/GameObjects.js
+25
View File
@@ -0,0 +1,25 @@
import express from 'express';
import fs from 'fs';
import { v4 as uuidv4 } from 'uuid';
import multipart from 'connect-multiparty';
const multipartMiddleware = multipart();
class GameObjectsApi{
name = 'gameObjectsApi'
route = '/api/game-object'
init(app){
const { am, config } = app;
const router = express.Router();
router.put('/', multipartMiddleware, async (req, res)=>{
try{
}catch(err){
}
});
app.webServer.xapp.use(this.route, router);
}
}
export {GameObjectsApi}
backend/main.js
+31
View File
@@ -0,0 +1,31 @@
import 'dotenv/config';
console.debug = function(){
if (process.env.debug){
console.log.apply(console, arguments);
}
}
import App from './app/App.js';
const modules = [
{name:'Config', path:'app/Config.js'},
{name:'Db', path:'app/Db.js'},
{name:'WebServer', path:'app/WebServer.js'},
{name:'GameObjectsApi', path:'controllers/api/GameObjects.js'},
]
process.on('uncaughtException', err => {
console.error(err, 'Uncaught Exception thrown');
}).on('unhandledRejection', (reason, p) => {
console.error(reason, 'Unhandled Rejection at Promise', p);
});
const app = new App();
await app.importModules(modules);
await app.init();
console.log(`Starting...`);
app.start();
index.html
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/logo.webp" rel="icon">
<link rel="stylesheet" href="/src/styles/style.scss">
<title>ProNature</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
jsconfig.json
+20
View File
@@ -0,0 +1,20 @@
{
"compilerOptions": {
"allowJs": true,
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "bundler",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
package-lock.json
Generated
+6591
View File
File diff suppressed because it is too large Load Diff
package.json
+53
View File
@@ -0,0 +1,53 @@
{
"name": "pronature-platform",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"backend": "node ./backend/main.js",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --fix --ignore-path .gitignore"
},
"dependencies": {
"@mdi/font": "7.4.47",
"@vitejs/plugin-basic-ssl": "^1.1.0",
"axios": "^1.7.7",
"compression": "^1.7.4",
"connect-mongodb-session": "^5.0.0",
"connect-multiparty": "^2.2.0",
"cookie-parser": "^1.4.7",
"core-js": "^3.37.1",
"dotenv": "^16.4.5",
"express": "^4.21.1",
"express-session": "^1.18.1",
"helmet": "^8.0.0",
"mongodb": "^6.10.0",
"roboto-fontface": "*",
"three": "^0.169.0",
"uuid": "^11.0.2",
"vue": "^3.4.31",
"vuetify": "^3.6.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"eslint": "^8.57.0",
"eslint-config-standard": "^17.1.0",
"eslint-config-vuetify": "^1.0.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-n": "^16.6.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.4.0",
"eslint-plugin-vue": "^9.27.0",
"pinia": "^2.1.7",
"sass": "1.77.6",
"unplugin-auto-import": "^0.17.6",
"unplugin-fonts": "^1.1.1",
"unplugin-vue-components": "^0.27.2",
"unplugin-vue-router": "^0.10.0",
"vite": "^5.3.3",
"vite-plugin-vue-layouts": "^0.11.0",
"vite-plugin-vuetify": "^2.0.3",
"vue-router": "^4.4.0"
}
}
pronature-platform.code-workspace
+13
View File
@@ -0,0 +1,13 @@
{
"folders": [
{
"path": "."
}
],
"settings": {
"vetur.completion.autoImport": true,
"vetur.completion.tagCasing": "kebab",
"vue.complete.casing.props": "kebab",
"vue.complete.casing.tags": "kebab"
}
}
public/logo.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

src/App.vue
+11
View File
@@ -0,0 +1,11 @@
<template>
<v-app>
<v-main>
<router-view />
</v-main>
</v-app>
</template>
<script setup>
//
</script>
src/components/AppFooter.vue
+8
View File
@@ -0,0 +1,8 @@
<template>
<v-footer height="40" app>
</v-footer>
</template>
<script setup>
</script>
src/components/AppHeader.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<v-app-bar color="primary" prominent>
<!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
<v-app-bar-title>ProNature Administrative Console</v-app-bar-title>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
</template>
<v-list>
<v-list-item to="/game-objects/">Нов игрови обект</v-list-item>
<v-list-item>Нов сценарий</v-list-item>
<v-list-item>Нова игра</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-navigation-drawer :location="$vuetify.display.mobile ? 'bottom' : undefined" expand-on-hover rail>
<v-list>
<v-list-item prepend-avatar="/logo.webp" subtitle="Admin Console" title="ProNature"></v-list-item>
</v-list>
<v-divider></v-divider>
<v-list nav>
<v-list-item prepend-icon="mdi-database" to="/game-objects" title="Game Objects"></v-list-item>
<v-list-item prepend-icon="mdi-receipt-text-edit-outline" title="Game Scenarios"></v-list-item>
<v-list-item prepend-icon="mdi-cogs" title="Game Rules"></v-list-item>
<v-list-item prepend-icon="mdi-controller" title="Games"></v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script setup>
import { ref } from 'vue'
const drawer = ref(false);
</script>
src/components/Home.vue
+14
View File
@@ -0,0 +1,14 @@
<template>
<v-container class="fill-height">
<v-responsive
class="align-centerfill-height mx-auto"
>
</v-responsive>
</v-container>
</template>
<script setup>
//
</script>
src/components/README.md
+35
View File
@@ -0,0 +1,35 @@
# Components
Vue template files in this folder are automatically imported.
## 🚀 Usage
Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
The following example assumes a component located at `src/components/MyComponent.vue`:
```vue
<template>
<div>
<MyComponent />
</div>
</template>
<script lang="ts" setup>
//
</script>
```
When your template is rendered, the component's import will automatically be inlined, which renders to this:
```vue
<template>
<div>
<MyComponent />
</div>
</template>
<script lang="ts" setup>
import MyComponent from '@/components/MyComponent.vue'
</script>
```
src/gameEngine/index.js
+36
View File
@@ -0,0 +1,36 @@
import * as THREE from 'three';
class GameEngine {
constructor() {
const width = window.innerWidth/2, height = window.innerHeight/2;
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
camera.position.z = 1;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
function animate(time) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render(scene, camera);
}
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(width, height);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);
this.renderer = renderer;
}
}
export {GameEngine}
src/layouts/default.vue
+15
View File
@@ -0,0 +1,15 @@
<template>
<v-app>
<AppHeader />
<v-main>
<router-view />
</v-main>
<AppFooter />
</v-app>
</template>
<script setup>
//
</script>
src/main.js
+20
View File
@@ -0,0 +1,20 @@
/**
* main.js
*
* Bootstraps Vuetify and other plugins then mounts the App`
*/
// Plugins
import { registerPlugins } from '@/plugins'
// Components
import App from './App.vue'
// Composables
import { createApp } from 'vue'
const app = createApp(App)
registerPlugins(app)
app.mount('#app')
src/pages/README.md
+5
View File
@@ -0,0 +1,5 @@
# Pages
Vue components created in this folder will automatically be converted to navigatable routes.
Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.
src/pages/game-objects/index.vue
+67
View File
@@ -0,0 +1,67 @@
<template>
<v-card :title="$l.createGameObject" class="container my-3">
<v-form class="pa-4" v-model="valid">
<v-text-field :label="$l.name" v-model="name" :rules="[rules.required]"></v-text-field>
<v-select :label="$l.objectType" v-model="type" :items="objectTypes" :rules="[rules.required]">
</v-select>
<v-file-input :label="$l.objectFile" v-model="file" :rules="[rules.requiredFile]"></v-file-input>
</v-form>
<v-card-actions>
<v-btn @click="saveAndPreview" :loading="loading" prepend-icon="mdi-content-save" color="primary" :disabled="!valid">
{{ $l.saveAndPreview }}
</v-btn>
<v-btn @click="captureThumbnail" prepend-icon="mdi-camera" color="secondary">{{$l.captureThumbnail}}</v-btn>
<v-btn @click="publish" prepend-icon="mdi-publish" color="success">{{$l.publish}}</v-btn>
</v-card-actions>
</v-card>
<v-card title="Preview" class="container my-3">
<div ref="target"></div>
</v-card>
</template>
<script>
import { GameEngine } from '@/gameEngine';
const gameEngine = new GameEngine();
export default {
data(){
return {
name: null,
type: null,
file: null,
valid: false,
rules:{
required: v=> v ? true : this.$l.fieldRequired,
requiredFile: v=> v?.length ? true : this.$l.fieldRequired
},
objectTypes: ['panorama2d', 'environment3d', 'object3d', 'object2d', 'player3d', 'audio'].map(e=>({
title: this.$l[e],
value: e
})),
loading:false
}
},
mounted() {
this.$refs.target.appendChild(gameEngine.renderer.domElement);
},
methods: {
async saveAndPreview() {
this.loading = true;
let fd = new FormData();
fd.append('file', this.file);
fd.append('name', this.name);
fd.append('type', this.type);
let result = await this.$api.gameObject.save(fd)
this.loading = false
},
captureThumbnail() {
},
async publish(){
}
}
}
</script>
src/pages/index.vue
+7
View File
@@ -0,0 +1,7 @@
<template>
<Home />
</template>
<script setup>
//
</script>
src/plugins/README.md
+3
View File
@@ -0,0 +1,3 @@
# Plugins
Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.
src/plugins/api.js
+17
View File
@@ -0,0 +1,17 @@
import axios from 'axios';
const $ax = axios.create({
baseURL: '/api/'
})
export default {
install: (app, options) => {
app.config.globalProperties.$api = {
gameObject:{
async save(data){
return await $ax.put('/game-object', data);
}
}
}
}
}
src/plugins/index.js
+21
View File
@@ -0,0 +1,21 @@
/**
* plugins/index.js
*
* Automatically included in `./src/main.js`
*/
// Plugins
import vuetify from './vuetify'
import lang from './lang'
import pinia from '@/stores'
import router from '@/router'
import api from './api'
export function registerPlugins (app) {
app
.use(vuetify)
.use(router)
.use(pinia)
.use(api)
.use(lang)
}
src/plugins/lang.js
+29
View File
@@ -0,0 +1,29 @@
const lang = {
bg: {
createGameObject: 'Добавяне на игрови обект',
name: 'Име',
fieldRequired: 'Полето е задължително',
objectType: 'Тип обект',
objectFile: 'Файл',
panorama2d: 'Панорамна снимка',
environment3d: 'Околна среда',
object3d: 'Триизмерен обект',
object2d: 'Двумерен обект (изображение)',
audio: 'Аудио',
player3d: 'Играч',
saveAndPreview: 'Запис и преглед',
captureThumbnail: 'Capture thumbnail',
publish: 'Публикуване'
},
en: {
}
}
export default {
install: (app, options) => {
// inject a globally available $translate() method
app.config.globalProperties.$l = lang.bg
}
}
src/plugins/vuetify.js
+44
View File
@@ -0,0 +1,44 @@
/**
* plugins/vuetify.js
*
* Framework documentation: https://vuetifyjs.com`
*/
// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
// Composables
import { createVuetify } from 'vuetify'
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
defaults:{
global:{
// density:'comfortable'
//variant: 'outlined'
},
VCardActions:{
VBtn: { variant: 'elevated' },
},
VSelect: {
variant: 'outlined'
},
VTextField: {
variant: 'outlined'
},
VFileInput: {
variant: 'outlined'
}
},
theme: {
themes: {
light: {
colors: {
// primary: '#1867C0',
// secondary: '#5CBBF6',
},
},
},
},
})
src/router/index.js
+36
View File
@@ -0,0 +1,36 @@
/**
* router/index.ts
*
* Automatic routes for `./src/pages/*.vue`
*/
// Composables
import { createRouter, createWebHistory } from 'vue-router/auto'
import { setupLayouts } from 'virtual:generated-layouts'
import { routes } from 'vue-router/auto-routes'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: setupLayouts(routes),
})
// Workaround for https://github.com/vitejs/vite/issues/11804
router.onError((err, to) => {
if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
if (!localStorage.getItem('vuetify:dynamic-reload')) {
console.log('Reloading page to fix dynamic import error')
localStorage.setItem('vuetify:dynamic-reload', 'true')
location.assign(to.fullPath)
} else {
console.error('Dynamic import error, reloading page did not fix it', err)
}
} else {
console.error(err)
}
})
router.isReady().then(() => {
localStorage.removeItem('vuetify:dynamic-reload')
})
export default router
src/stores/README.md
+5
View File
@@ -0,0 +1,5 @@
# Store
Pinia stores are used to store reactive state and expose actions to mutate it.
Full documentation for this feature can be found in the Official [Pinia](https://pinia.esm.dev/) repository.
src/stores/app.js
+8
View File
@@ -0,0 +1,8 @@
// Utilities
import { defineStore } from 'pinia'
export const useAppStore = defineStore('app', {
state: () => ({
//
}),
})
src/stores/index.js
+4
View File
@@ -0,0 +1,4 @@
// Utilities
import { createPinia } from 'pinia'
export default createPinia()
src/styles/README.md
+3
View File
@@ -0,0 +1,3 @@
# Styles
This directory is for configuring the styles of the application.
src/styles/settings.scss
+10
View File
@@ -0,0 +1,10 @@
/**
* src/styles/settings.scss
*
* Configures SASS variables and Vuetify overwrites
*/
// https://vuetifyjs.com/features/sass-variables/`
// @use 'vuetify/settings' with (
// $color-pack: false
// );
src/styles/style.scss
+4
View File
@@ -0,0 +1,4 @@
.container {
margin:auto;
max-width: 1200px;
}
vite.config.mjs
+92
View File
@@ -0,0 +1,92 @@
// Plugins
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Fonts from 'unplugin-fonts/vite'
import Layouts from 'vite-plugin-vue-layouts'
import Vue from '@vitejs/plugin-vue'
import VueRouter from 'unplugin-vue-router/vite'
import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import basicSsl from '@vitejs/plugin-basic-ssl'
// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
VueRouter(),
Layouts(),
Vue({
template: { transformAssetUrls }
}),
// https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
Vuetify({
autoImport: true,
styles: {
configFile: 'src/styles/settings.scss',
},
}),
Components(),
Fonts({
google: {
families: [{
name: 'Roboto',
styles: 'wght@100;300;400;500;700;900',
}],
},
}),
AutoImport({
imports: [
'vue',
'vue-router',
],
eslintrc: {
enabled: true,
},
vueTemplate: true,
}),
basicSsl()
],
define: { 'process.env': {} },
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
],
},
server: {
watch: {
ignored: /repo|3rdparty/
},
hmr:true,
strictPort: true,
//host:'0.0.0.0',
proxy:{
'/api': {
target: 'https://localhost:3000',
changeOrigin: true,
secure: false
},
'/asset': {
target: 'https://localhost:3000',
changeOrigin: true,
secure: false
},
'^/proxied/.*': {
target: 'https://localhost:3000',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/proxied/, ''),
},
}
}
})