gameobject module dev

2024-11-04 20:26:27 +02:00
parent 53350ef548
commit 2978f11869
20 changed files with 1391 additions and 114 deletions
@@ -1,7 +1,7 @@
 <template>
  <v-app>
    <v-main>
-      <router-view />
+      <router-view :key="$route.fullPath"/>
    </v-main>
  </v-app>
 </template>
@@ -7,29 +7,37 @@
                <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 to="/game-objects/add">Нов игрови обект</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-navigation-drawer class="bg-secondary" ocation="$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-item prepend-icon="mdi-database" to="/game-objects/list" :title="$l.gameObjects"></v-list-item>
+            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" :title="$l.gameScenarios"></v-list-item>
+            <v-list-item prepend-icon="mdi-cogs" :title="$l.gameRules"></v-list-item>
+            <v-divider></v-divider>
+            <v-list-item prepend-icon="mdi-controller" :title="$l.games"></v-list-item>
+        </v-list>
+        <v-divider></v-divider>
+        <v-list nav>
+            <v-list-item @click="toggleTheme" prepend-icon="mdi-theme-light-dark" :title="$l.darkMode"></v-list-item>
        </v-list>
    </v-navigation-drawer>
 </template>

 <script setup>
-import { ref } from 'vue'
-const drawer = ref(false);
+import { useTheme } from 'vuetify'
+const theme = useTheme()

+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+}
 </script>
@@ -21,13 +21,11 @@ class GameEngine {
            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;
    }
@@ -0,0 +1,91 @@
+<template>
+    <v-card :title="id =='add' ? $l.createGameObject : $l.editGameObject" class="container my-3">
+        <v-form class="pa-4" v-model="valid">
+            <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+            <v-select :label="$l.objectType" v-model="object.type" :items="objectTypes" :rules="[rules.required]">
+            </v-select>
+            <v-file-input :label="$l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
+            <div v-if="object.asset?.name">{{ object.asset.name }}</div>
+        </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" v-if="object.asset?.type == 'bundle'" prepend-icon="mdi-camera" color="secondary">{{ $l.captureThumbnail }}</v-btn>
+            <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">{{ $l.publish }}</v-btn>
+        </v-card-actions>
+    </v-card>
+
+    <v-card :title="$l.preview" class="container my-3" v-if="object.asset">
+        <div ref="target" v-if="object?.asset?.type == 'bundle'"></div>
+        <v-img v-else :src="`/asset/default/${object.asset?.name}`"></v-img>
+    </v-card>
+</template>
+
+<script>
+import { GameEngine } from '@/gameEngine';
+
+const gameEngine = new GameEngine();
+
+export default {
+    data() {
+        return {
+            object: {},
+            valid: false,
+            rules: {
+                required: v => v ? true : this.$l.fieldRequired,
+                requiredFile: v => (v?.length || this.id != 'add') ? true : this.$l.fieldRequired
+            },
+            objectTypes: ['panorama2d', 'environment3d', 'object3d', 'object2d', 'player3d', 'audio'].map(e => ({
+                title: this.$l[e],
+                value: e
+            })),
+            loading: false
+        }
+    },
+    async created(){
+        if (this.id && this.id != 'add'){
+            this.object = (await this.$api.gameObject.load(this.id)).data;
+        }
+    },
+    mounted() {
+        //this.$refs.target?.appendChild(gameEngine.renderer.domElement);
+    },
+    computed: {
+        fileToUpload(){
+            return this.object?.file instanceof File
+        },
+        id(){
+            return this.$route.params?.id;
+        }
+    },
+    methods: {
+        async saveAndPreview() {
+            this.loading = true;
+            try {
+                let fd = new FormData();
+                let keys = ['name', 'type'];
+                if (this.fileToUpload) keys.push('file');
+                if (this.id != 'add') keys.push('id');
+
+                keys.forEach(e=>fd.append(e, this.object[e]))
+                let result = await this.$api.gameObject.save(fd);
+                Object.assign(this.object, result.data.object);
+                if (this.id == 'add'){
+                    this.$router.replace({ params: {id: this.object.id} });
+                }
+            } catch (err) {
+                console.error(err);
+            }
+            this.loading = false
+        },
+        captureThumbnail() {
+
+        },
+        async publish() {
+
+        }
+    }
+}
+</script>
@@ -1,67 +0,0 @@
-<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,27 @@
+<template>
+    <v-container>
+        <v-row>
+            <v-col v-for="(v, i) in items" :key="i" cols="3">
+                {{ v.name }}
+                <span class="font-weight-thin">{{ v.type }}</span>
+                <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`"></v-btn>
+                <v-img :src="`/asset/thumb/${v.asset?.thumb}`"></v-img>
+            </v-col>
+        </v-row>
+    </v-container>
+    
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            items: []
+        }
+    },
+    
+    async created(){
+        this.items = (await this.$api.gameObject.search()).data.data
+    },
+}
+</script>
@@ -10,6 +10,12 @@ export default {
            gameObject:{
                async save(data){
                    return await $ax.put('/game-object', data);
+                },
+                async load(id){
+                    return await $ax.get(`/game-object/${id}`);
+                },
+                async search(query){
+                    return await $ax.post('/game-object', query);
                }
            }
        }
@@ -1,6 +1,7 @@
 const lang = {
    bg: {
        createGameObject: 'Добавяне на игрови обект',
+        editGameObject: 'Редактиране на игрови обект',
        name: 'Име',
        fieldRequired: 'Полето е задължително',
        objectType: 'Тип обект',
@@ -12,8 +13,14 @@ const lang = {
        audio: 'Аудио',
        player3d: 'Играч',
        saveAndPreview: 'Запис и преглед',
+        preview: 'Преглед',
        captureThumbnail: 'Capture thumbnail',
-        publish: 'Публикуване'
+        publish: 'Публикуване',
+        gameObjects: 'Обекти',
+        gameScenarios: 'Сценарии',
+        gameRules: 'Правила',
+        games: 'Игри',
+        darkMode: 'Тъмен режим'
    },
    en: {

@@ -35,8 +35,14 @@ export default createVuetify({
    themes: {
      light: {
        colors: {
-          // primary: '#1867C0',
-          // secondary: '#5CBBF6',
+          primary: '#497d95',
+          secondary: '#63963a',
+        },
+      },
+      dark: {
+        colors: {
+          primary: '#497d95',
+          secondary: '#63963a',
        },
      },
    },