initial

2024-10-29 19:49:24 +02:00
commit 11eb888b9c
42 changed files with 7877 additions and 0 deletions
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
@@ -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
+  }
+}
@@ -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',
+  },
+}
@@ -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
@@ -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
@@ -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;
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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}
@@ -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();
@@ -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>
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
@@ -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"
+  }
+}
@@ -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"
+	}
+}
@@ -0,0 +1,11 @@
+<template>
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+  //
+</script>
@@ -0,0 +1,8 @@
+<template>
+  <v-footer height="40" app>
+    
+  </v-footer>
+</template>
+
+<script setup>
+</script>
@@ -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>
@@ -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>
@@ -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>
+```
@@ -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}
@@ -0,0 +1,15 @@
+<template>
+  <v-app>
+    <AppHeader />
+    
+    <v-main>
+      <router-view />
+    </v-main>
+
+    <AppFooter />
+  </v-app>
+</template>
+
+<script setup>
+  //
+</script>
@@ -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')
@@ -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.
@@ -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>
@@ -0,0 +1,7 @@
+<template>
+  <Home />
+</template>
+
+<script setup>
+  //
+</script>
@@ -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.
@@ -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);
+                }
+            }
+        }
+    }
+}
@@ -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)
+}
@@ -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
+    }
+}
@@ -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',
+        },
+      },
+    },
+  },
+})
@@ -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
@@ -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.
@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})
@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()
@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.
@@ -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
+// );
@@ -0,0 +1,4 @@
+.container {
+    margin:auto;
+    max-width: 1200px;
+}
@@ -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/, ''),
+      },
+    }
+  }
+})