From 0f205d882e8be6bd2dcb7ac8de2e11a822eac020 Mon Sep 17 00:00:00 2001
From: Haroldo de Oliveira Pinheiro <haroldo@atsinformatica.com.br>
Date: Tue, 11 Jun 2024 21:13:43 -0300
Subject: [PATCH 1/2] Refactor date infix logic

---
 src/components/PixelEditor.vue | 4 ++--
 src/utils/date.js              | 1 +
 src/views/Project.vue          | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/date.js

diff --git a/src/components/PixelEditor.vue b/src/components/PixelEditor.vue
index cbf6d60..1193379 100644
--- a/src/components/PixelEditor.vue
+++ b/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';
 
@@ -127,8 +128,7 @@ export default {
       });
 
       canvas.toBlob(function(blob) {
-        const dateInfix = new Date().toISOString().replace(/\..*/, '').replace(/[T:]/g, '-');
-        saveAs(blob, `image-${dateInfix}.png`);
+        saveAs(blob, `image-${getDateInfix()}.png`);
       });
     },
 
diff --git a/src/utils/date.js b/src/utils/date.js
new file mode 100644
index 0000000..6aad5ee
--- /dev/null
+++ b/src/utils/date.js
@@ -0,0 +1 @@
+export const getDateInfix = () => new Date().toISOString().replace(/\..*/, '').replace(/[T:]/g, '-');
diff --git a/src/views/Project.vue b/src/views/Project.vue
index ed04047..6ff6a76 100644
--- a/src/views/Project.vue
+++ b/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() {

From 0afd57c5e55a512a1d74da8ddc62efd6bc52189c Mon Sep 17 00:00:00 2001
From: Haroldo de Oliveira Pinheiro <haroldo@atsinformatica.com.br>
Date: Tue, 11 Jun 2024 21:26:04 -0300
Subject: [PATCH 2/2] Add prefixes to the exported filenames

---
 src/components/PixelEditor.vue  | 5 +++--
 src/components/PlayerEditor.vue | 3 ++-
 src/views/BackgroundEditor.vue  | 1 +
 src/views/Player0Editor.vue     | 1 +
 src/views/Player1Editor.vue     | 1 +
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/PixelEditor.vue b/src/components/PixelEditor.vue
index 1193379..f723c2d 100644
--- a/src/components/PixelEditor.vue
+++ b/src/components/PixelEditor.vue
@@ -85,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 {
@@ -127,8 +128,8 @@ export default {
         ctx.fillRect(px.x, px.y, 1, 1);
       });
 
-      canvas.toBlob(function(blob) {
-        saveAs(blob, `image-${getDateInfix()}.png`);
+      canvas.toBlob((blob) => {
+        saveAs(blob, `${this.name}-${getDateInfix()}.png`);
       });
     },
 
diff --git a/src/components/PlayerEditor.vue b/src/components/PlayerEditor.vue
index 3936f5e..30314c2 100644
--- a/src/components/PlayerEditor.vue
+++ b/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;
diff --git a/src/views/BackgroundEditor.vue b/src/views/BackgroundEditor.vue
index 4599307..7f5b5c5 100644
--- a/src/views/BackgroundEditor.vue
+++ b/src/views/BackgroundEditor.vue
@@ -52,6 +52,7 @@
                     <pixel-editor
                       :width="32"
                       :height="11"
+                      name="background"
                       v-model="background.pixels"
                       fgColor="orange"
                       @input="handleChildChange"
diff --git a/src/views/Player0Editor.vue b/src/views/Player0Editor.vue
index f4b7df0..e23ad92 100644
--- a/src/views/Player0Editor.vue
+++ b/src/views/Player0Editor.vue
@@ -3,6 +3,7 @@
     :storageFactory="usePlayer0Storage"
     title="Player 0"
     fgColor="red"
+    name="player0"
   />
 </template>
 <script>
diff --git a/src/views/Player1Editor.vue b/src/views/Player1Editor.vue
index 6947fa7..45f8bbe 100644
--- a/src/views/Player1Editor.vue
+++ b/src/views/Player1Editor.vue
@@ -3,6 +3,7 @@
     :storageFactory="usePlayer1Storage"
     title="Player 1"
     fgColor="blue"
+    name="player1"
   />
 </template>
 <script>