From 92d006128497bcfbeded325c6647aa0c2fd3d013 Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Fri, 16 Feb 2024 21:15:11 +0100
Subject: [PATCH] Allow creating GIF animations

---
 README.fr.md                       | 14 ++++++++++++++
 README.md                          | 13 +++++++++++++
 package.json                       |  2 ++
 src/components/ImageCollection.vue | 24 +++++++++++++++++++++++-
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 README.fr.md

diff --git a/README.fr.md b/README.fr.md
new file mode 100644
index 0000000..a16f9fc
--- /dev/null
+++ b/README.fr.md
@@ -0,0 +1,14 @@
+# Pixture
+
+## Exécuter un serveur de développement
+
+```bash
+npm install
+npm run dev
+```
+
+## Construire un site statique
+
+```bash
+npm run build
+```
diff --git a/README.md b/README.md
index 29f7655..7b82f0d 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,14 @@
 # Pixture
+
+## Run a development server
+
+```bash
+npm install
+npm run dev
+```
+
+## Build a static site
+
+```bash
+npm run build
+```
diff --git a/package.json b/package.json
index cb60c30..270c534 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
     "lint": "eslint \"src/**/*.vue\" \"src/**/*.ts\""
   },
   "dependencies": {
+    "gif.js": "^0.2.0",
     "vue": "^3.3.11"
   },
   "devDependencies": {
+    "@types/gif.js": "^0.2.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-typescript": "^12.0.0",
diff --git a/src/components/ImageCollection.vue b/src/components/ImageCollection.vue
index db0da32..1cb5661 100644
--- a/src/components/ImageCollection.vue
+++ b/src/components/ImageCollection.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue';
+import * as GIF from 'gif.js';
 
 defineEmits<{
   selected: [image: HTMLImageElement]
@@ -22,6 +23,24 @@ function onDragStart(event: DragEvent, idx: number): void {
   event.dataTransfer!.setData('text/plain', idx.toString());
 }
 
+function onAnimateClick(): void {
+  // @ts-expect-error wrong type definition
+  const FixedGIF = GIF.default as typeof GIF;
+  const gif = new FixedGIF({
+    workerScript: new URL('gif.js/dist/gif.worker.js', import.meta.url).toString(),
+  });
+  images.value.forEach((img) => gif.addFrame(img, { delay: 200 }));
+  gif.on('finished', (blob: Blob) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'animation.gif';
+    a.click();
+    URL.revokeObjectURL(url);
+  });
+  gif.render();
+}
+
 defineExpose({
   images
 })
@@ -34,6 +53,9 @@ defineExpose({
     <div v-for="(img, idx) in images" :key="idx" class="image-file">
       <img :src="img.src" width="64" height="64" alt="" draggable="true" @click="$emit('selected', img)" @dragstart="onDragStart($event, idx)" />
     </div>
+    <button v-if="images.length" @click="onAnimateClick">
+      Animate
+    </button>
   </div>
 </template>