allow screenshot from game as thumbnail header

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:{