Improve exported filename generation

Merge pull request #89 from haroldo-ok/export-image

src/components/PixelEditor.vue

@@ -73,6 +73,7 @@ import {chunk, debounce} from 'lodash';
 import {saveAs} from 'file-saver';
 
 import {isMatrixEqual} from '../utils/array';
+import {getDateInfix} from '../utils/date';
 import {loadImageFromFile, openFileDialog} from '../utils/file';
 import {createResizedCanvas} from '../utils/image';
 
@@ -84,6 +85,7 @@ export default {
     aspectRatio: {type: Number, default: 4.0 / 3},
     fgColor: {type: String, default: 'white'},
     bgColor: {type: String, default: 'black'},
+    name: {type: String, default: 'image'},
   },
   data() {
     return {
@@ -126,9 +128,8 @@ export default {
         ctx.fillRect(px.x, px.y, 1, 1);
       });
 
-      canvas.toBlob(function(blob) {
-        const dateInfix = new Date().toISOString().replace(/\..*/, '').replace(/[T:]/g, '-');
-        saveAs(blob, `image-${dateInfix}.png`);
+      canvas.toBlob((blob) => {
+        saveAs(blob, `${this.name}-${getDateInfix()}.png`);
       });
     },
 

src/components/PlayerEditor.vue

@@ -107,6 +107,7 @@
                         :aspectRatio="160/192"
                         v-model="frame.pixels"
                         :fgColor="fgColor"
+                        :name="name"
                         @input="handleChildChange"
                       />
                     </div>
@@ -157,7 +158,7 @@ import {playfieldToMatrix} from '../utils/pixels';
 
 export default defineComponent({
   components: {PixelEditor},
-  props: ['storageFactory', 'title', 'fgColor'],
+  props: ['storageFactory', 'title', 'fgColor', 'name'],
   setup(props) {
     const getMaxId = (elements) => {
       return max(elements.map((o) => o.id))||0;

src/utils/date.js

@@ -0,0 +1 @@
+export const getDateInfix = () => new Date().toISOString().replace(/\..*/, '').replace(/[T:]/g, '-');

src/views/BackgroundEditor.vue

@@ -52,6 +52,7 @@
                     <pixel-editor
                       :width="32"
                       :height="11"
+                      name="background"
                       v-model="background.pixels"
                       fgColor="orange"
                       @input="handleChildChange"

src/views/Player0Editor.vue

@@ -3,6 +3,7 @@
     :storageFactory="usePlayer0Storage"
     title="Player 0"
     fgColor="red"
+    name="player0"
   />
 </template>
 <script>

src/views/Player1Editor.vue

@@ -3,6 +3,7 @@
     :storageFactory="usePlayer1Storage"
     title="Player 1"
     fgColor="blue"
+    name="player1"
   />
 </template>
 <script>

src/views/Project.vue

@@ -25,6 +25,7 @@ import {saveAs} from 'file-saver';
 import YAML from 'yaml';
 
 import {useBackgroundsStorage, usePlayer0Storage, usePlayer1Storage, useWorkspaceStorage} from '../hooks/project';
+import {getDateInfix} from '../utils/date';
 import {matrixToPlayfield, playfieldToMatrix} from '../utils/pixels';
 
 const FORMAT_TYPE = 'VCS Game Maker Project';
@@ -77,8 +78,7 @@ export default defineComponent({
       });
 
       const projectBlob = new Blob([projectYaml], {type: 'text/yaml'});
-      const dateInfix = new Date().toISOString().replace(/\..*/, '').replace(/[T:]/g, '-');
-      saveAs(projectBlob, `project-${dateInfix}.vcsgm`);
+      saveAs(projectBlob, `project-${getDateInfix()}.vcsgm`);
     },
 
     handleLoadProject() {