initial

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+  //
+</script>

src/components/AppFooter.vue

@@ -0,0 +1,8 @@
+<template>
+  <v-footer height="40" app>
+    
+  </v-footer>
+</template>
+
+<script setup>
+</script>

src/components/AppHeader.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,15 @@
+<template>
+  <v-app>
+    <AppHeader />
+    
+    <v-main>
+      <router-view />
+    </v-main>
+
+    <AppFooter />
+  </v-app>
+</template>
+
+<script setup>
+  //
+</script>

src/main.js

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,7 @@
+<template>
+  <Home />
+</template>
+
+<script setup>
+  //
+</script>

src/plugins/README.md

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})

src/stores/index.js

@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()

src/styles/README.md

@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.

src/styles/settings.scss

@@ -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

@@ -0,0 +1,4 @@
+.container {
+    margin:auto;
+    max-width: 1200px;
+}