allow screenshot from game as thumbnail header

backend/app/bl/GamesManager.js

@@ -1,3 +1,5 @@
+import sharp from 'sharp';
+sharp.cache({ files : 0 });
 
 const collection = 'games';
 /**
@@ -11,7 +13,7 @@ class GamesManager{
      * @param {App} app Class initializer, основна апликация
      */
     init(app){
-        const {db, am} = app;
+        const {db, am, config} = app;
 
         /**
          * Creates a new game definition, създаване на нова игрова дефиниция
@@ -69,6 +71,14 @@ class GamesManager{
                 project: { name:1, id:1, thumb: 1}
             });
         }
+
+        this.setHeader = async function(ctx, id, file){
+            await sharp(file.path).resize({height: 500}).webp({quality: 75}).toFile(`${config.fs.repo}/thumb/${id}.webp`);
+            await sharp(file.path).webp({quality: 75}).toFile(`${config.fs.repo}/default/${id}.webp`);
+            let object = await this.read(id);
+            object.thumb = id;
+            await this.update(ctx, object);
+        }
     }
 
     /**

backend/controllers/api/GamesController.js

@@ -1,4 +1,7 @@
 import express from 'express';
+import multipart from 'connect-multiparty';
+
+const multipartMiddleware = multipart();
 
 /**
  * GamesController. API for the games manager, граничен клас за комуникация с модула за игрови дефиниции
@@ -35,6 +38,19 @@ class GamesController{
             }
         });
 
+        router.post('/:id/header', multipartMiddleware, async (req, res)=>{
+            try{
+                let id = parseInt(req.params.id);                
+                await game.setHeader(req, id, req.files.file);
+                res.json({status: 'OK'});
+                am.audit(req, `game-header-set`, id);
+            }catch(err){
+                console.error(err);
+                res.status(500).json({status: 'ERR', err});
+                am.audit(req, `game-header-error`, id, {e: err});
+            }
+        });
+
         /**
          * API: POST /api/game/ List games by given criteria, търсене в игрови дефиниции
          * @function list

src/components/GamePreview/GamePreview.vue

@@ -17,7 +17,9 @@
         <v-btn-toggle variant="tonal" v-model="store.prefs.xr.depthSense" class="ma-3" density="comfortable" color="green-darken-2">
             <v-btn :value="true" icon="mdi-cube-outline"></v-btn>
         </v-btn-toggle>
-        <v-btn icon="mdi-walk" @click="control"></v-btn>
+        <v-divider class="my-2"></v-divider>
+        <v-btn variant="tonal" icon="mdi-walk" @click="control" v-tooltip="`Pointer lock controls mode`" class="mx-1" size="small"></v-btn>
+        <v-btn variant="tonal" icon="mdi-image-frame" @click="setGameHeader" v-tooltip="`Capture screenshot as game header image`" class="mx-1" size="small"></v-btn>
     </v-navigation-drawer>
     <div class="container my-3 position-relative game-designer-canvas">
         <div ref="target" @click="targetClick"
@@ -54,5 +56,13 @@ export default {
             cameraType: 'perspective',
         }
     },
+    methods:{
+        async setGameHeader(){
+            let screenshot = await this.engine.captureScreenshot();
+            let fd = new FormData();
+            fd.append('file', screenshot);
+            await this.$api.game.setHeader(this.modelValue.id, fd);
+        }
+    }
 }
 </script>

src/mixins/GameEnvironmentMixin.js

@@ -9,6 +9,7 @@ export default {
 
     async mounted(){
         gameEngine = new GameEngine();
+        this.engine = gameEngine;
         //this.gameEngine = gameEngine;
         await gameEngine.init(this.$refs.target, { 
             xr: true, 

src/plugins/api.js

@@ -61,6 +61,9 @@ export default {
                 },
                 async remove(id){
                     return await $ax.delete(`/game/${id}`)
+                },
+                async setHeader(id, data){
+                    return await $ax.post(`/game/${id}/header`, data);
                 }
             },
             user:{