added palette generation via html to reduce file size

package.json

@@ -81,6 +81,7 @@
   "dependencies": {
     "es6-promise": "^4.1.0",
     "file-saver": "^1.3.2",
+    "hyperscript": "^2.0.2",
     "jszip": "^3.1.3",
     "keyboardjs": "^2.3.3",
     "pako": "^1.0.5",

src/components/modals/Downloadproject/Downloadproject.js

@@ -3,12 +3,14 @@ import ModalWindow from '../../modalwindow/Modalwindow';
 import ToggleCheckbox from '../../togglecheckbox/Togglecheckbox';
 
 import Downloader from '../../../fileloaders/Downloader';
-import { combineImageDataToCanvas, combineColorPaletteToCanvas } from '../../../utils/canvasUtils';
+import { combineImageDataToCanvas } from '../../../utils/canvasUtils';
 import { getAllActiveColors } from '../../../utils/colorUtils';
 import StateLoader from '../../../statemanager/StateLoader';
 
 import { Files } from '../../../defaults/constants';
 
+import generatePalette from '../../../htmlgenerators/paletteGenerator';
+
 class DownloadProjectModal extends Component {
   constructor (props) {
     super(props);
@@ -48,11 +50,10 @@ class DownloadProjectModal extends Component {
     const spritesImageDataArray = this.props.framesOrder.map(
       el => this.props.framesCollection[el].naturalImageData
     );
-    return Downloader.prepareCanvasBlobAsync(
-      combineColorPaletteToCanvas(
-        getAllActiveColors(spritesImageDataArray),
-        100,
-        500
+
+    return Downloader.prepareHTMLBlobAsync(
+      generatePalette(
+        getAllActiveColors(spritesImageDataArray)
       ),
       Files.NAME.PALETTE
     );

src/defaults/constants.js

@@ -3,11 +3,12 @@ export const projectExtension = '.pxlsh';
 export const Files = {
   MIMETYPE: {
     JSON: 'application/json',
+    HTML: 'text/html',
     GIF: 'image/gif',
     PNG: 'image/png'
   },
   NAME: {
-    PALETTE: 'palette.png',
+    PALETTE: 'palette.html',
     SPRITES: 'sprites.png',
     ANIMATION: 'animation.gif',
     PROJECT: 'project' + projectExtension,

src/fileloaders/Downloader.js

@@ -57,6 +57,18 @@ export default class Downloader {
     });
   }
 
+  static prepareHTMLBlobAsync (dataHTML, name) {
+    return new Promise(resolve => {
+      const serializer = new XMLSerializer(),
+            html = serializer.serializeToString(dataHTML);
+
+      resolve({
+        blob: new Blob([html], { type: Files.MIMETYPE.HTML }),
+        name
+      });
+    });
+  }
+
   static prepareCanvasBlobAsync (canvas, name) {
     return new Promise(resolve => {
       toBlob(canvas)(blob => {

src/htmlgenerators/paletteGenerator.js

@@ -0,0 +1,40 @@
+import h from 'hyperscript';
+
+import { getBlackWhiteContrastColor, stringToRGBA } from '../utils/colorUtils';
+
+export default list => {
+  const ulStyle = {
+    'list-style': 'none',
+    'padding': '0',
+    'width': '400px',
+    'margin': '0 auto'
+  };
+
+  const liStyle = {
+    'height': '25px',
+    'font-size': '22px',
+    'font-family': 'monospace',
+    'text-align': 'center',
+    'padding': '20px'
+  };
+
+  return h('html',
+    h('head'),
+    h('body',
+      h('ul',
+        { style: ulStyle },
+        list.map(color =>
+          h('li', color, {
+            style: Object.assign(
+              liStyle,
+              {
+                'background-color': color,
+                'color': getBlackWhiteContrastColor(stringToRGBA(color))
+              }
+            )
+          })
+        )
+      )
+    )
+  );
+};