games group and order

backend/app/bl/GamesManager.js

@@ -68,7 +68,7 @@ class GamesManager{
         this.list = async function(query){
             return await db.list(collection, {
                 query,
-                project: { name:1, description:1, id:1, thumb: 1}
+                project: { name:1, description:1, id:1, thumb: 1, group: 1, order: 1}
             });
         }
 

src/components/AppHeader.vue

@@ -2,15 +2,15 @@
     <v-app-bar color="blue" scroll-behavior="collapse" scroll-threshold="50" :height="100" image="/static/bck-2.webp">
         <!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
         <template v-slot:prepend>
-            <v-avatar class="ml-3" size="66" rounded="0">
+            <v-avatar class="ml-4 mr-3" size="66" rounded="0">
                 <v-img src="/logo.webp" alt="ProNature Logo"></v-img>
             </v-avatar>
         </template>
         <v-app-bar-title>
             <router-link to="/">{{ l.playground }}</router-link>
         </v-app-bar-title>
-        <v-btn to="/manage" icon="mdi-wrench-cog-outline" v-if="roles.editor" v-tooltip="l.workshop"></v-btn>
         <CommonHeader></CommonHeader>
+        <v-btn to="/manage" icon="mdi-wrench-cog-outline" v-if="roles.editor" v-tooltip="l.workshop" variant="flat" color="secondary"></v-btn>
     </v-app-bar>
 </template>
 

src/components/AssetsManagement/AssetSelector.vue

@@ -4,7 +4,7 @@
         <v-card title="Assets">
             <AssetBrowser :query="query" @select="select" :hideFilter="true"></AssetBrowser>
             <v-card-actions>
-                <v-btn text="Close" color="primary" @click="dialog = false"></v-btn>
+                <v-btn :text="l.close" color="primary" @click="dialog = false"></v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>

src/components/ConsoleHeader.vue

@@ -3,7 +3,7 @@
         <!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
         <template v-slot:prepend>
             <router-link to="/manage">
-                <v-avatar class="ml-3" size="66" rounded="0">
+                <v-avatar class="ml-4 mr-3" size="66" rounded="0">
                     <v-img src="/logo.webp" alt="ProNature Logo"></v-img>
                 </v-avatar>
             </router-link>
@@ -12,7 +12,6 @@
             <router-link to="/manage">{{ l.workshop }}</router-link>
         </v-app-bar-title>
         <template v-slot:append>
-            <v-btn to="/" icon="mdi-controller" v-tooltip="l.playground"></v-btn>
             <v-menu>
                 <template v-slot:activator="{ props }">
                     <v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
@@ -24,21 +23,31 @@
                 </v-list>
             </v-menu>
             <CommonHeader></CommonHeader>
+            <v-btn to="/" icon="mdi-controller" v-tooltip="l.playground" variant="flat" color="primary"></v-btn>
         </template>
     </v-app-bar>
 
     <v-navigation-drawer class="bg-secondary" expand-on-hover rail>
         <v-divider></v-divider>
         <v-list nav>
-            <v-list-item prepend-icon="mdi-database" to="/manage/game-objects/list"
+            <v-list-item prepend-icon="mdi-database" to="/manage/game-objects/list" :title="l.gameObjects">
-                :title="l.gameObjects"></v-list-item>
+                <template v-slot:append>
-            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/manage/scenarios/list"
+                    <v-btn icon="mdi-plus" variant="text" to="/manage/game-objects/add"></v-btn>
-                :title="l.gameScenarios"></v-list-item>
+                </template>
+            </v-list-item>
+            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/manage/scenarios/list" :title="l.gameScenarios">
+                <template v-slot:append>
+                    <v-btn icon="mdi-plus" variant="text" to="/manage/scenarios/add"></v-btn>
+                </template>
+            </v-list-item>
             <!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
-            <v-divider></v-divider>
+            <!-- <v-divider></v-divider> -->
-            <v-list-item prepend-icon="mdi-controller" :title="l.games" to="/manage/games/list"></v-list-item>
+            <v-list-item prepend-icon="mdi-controller" :title="l.games" to="/manage/games/list">
+                <template v-slot:append>
+                    <v-btn icon="mdi-plus" variant="text" to="/manage/games/add"></v-btn>
+                </template>
+            </v-list-item>
             <v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/manage/preview/list"></v-list-item>
-
         </v-list>
         <v-divider></v-divider>
     </v-navigation-drawer>

src/pages/index.vue

@@ -1,7 +1,8 @@
 <template>
-    <v-container>
+    <v-container v-for="(g, gi) in groups">
+        <h1 class="text-h5 my-2" style="border-bottom:1px solid grey">{{ g }}</h1>
         <v-row>
-            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="6" md="4" xl="4">
+            <v-col v-for="(v, i) in items.filter(t=>t.group == g).sort((a, b)=>(a.order||0) - (b.order||0) )" :key="i" cols="12" xs="6" sm="6" md="4" xl="4">
                 <v-card :to="`/playground/game/${v.id}`" class="hover-effect">
                     <v-img :src="`/asset/thumb/${v.thumb}.webp`" cover content-class="d-flex flex-column justify-end" gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)">
                         <v-card-title class="text-white text-h6" v-text="v.name"></v-card-title>
@@ -14,16 +15,22 @@
 </template>
 
 <script>
-
 export default {
     data(){
         return {
-            items: []
+            items: [],
+            groups: []
         }
     },
     
     async created(){
-        this.items = (await this.$api.game.search()).data.data
+        this.items = (await this.$api.game.search()).data.data;
+        this.items.forEach(i=>{
+            if (this.groups.indexOf(i.group) == -1){
+                this.groups.push(i.group);
+            }
+        })
+        this.groups.sort();
     },
 }
 </script>

src/pages/manage/game-objects/[[id]].vue

@@ -102,7 +102,7 @@ export default {
                 fd.append('object', JSON.stringify(this.object));
                 let result = await this.$api.gameObject.save(fd);
                 Object.assign(this.object, result.data.object);
-                if (this.id == 'add') {
+                if (this.id == 'add' || params.preview) {
                     this.$router.replace({ params: { id: this.object.id }, query:{ tab:'preview' } });
                 }
                 this.debug(this.object)

src/pages/manage/games/[[id]].vue

@@ -13,6 +13,8 @@
                 <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-textarea :label="l.description" v-model="object.description"></v-textarea>
+                    <v-text-field :label="l.group" v-model="object.group"></v-text-field>
+                    <v-number-input density="compact" :label="l.order" v-model="object.order"></v-number-input>
                     <v-select :label="l.scenario" :items="scenarios" :disabled="this.id != 'add'" v-model="object.scenario" item-title="name" item-value="id"></v-select>
                 </v-form>
             </v-tabs-window-item>

src/plugins/lang.js

@@ -28,6 +28,8 @@ const lang = {
         captureThumbnail: 'Save thumbnail',
         publish: 'Publish',
         close: 'Close',
+        group: 'Group',
+        order: 'Order',
         gameObjects: 'Objects',
         gameObjectType: 'Game object type',
         activationConditions: 'Activation conditions',
@@ -196,6 +198,8 @@ const lang = {
         captureThumbnail: 'Save thumbnail',
         publish: 'Публикуване',
         close: 'Затвори',
+        group: 'Група',
+        order: 'Поредност',
         gameObjects: 'Игрови обекти',
         gameObjectType: 'Тип игрови обект',
         activationConditions: 'Условия за активиране',