Update save button to download zip of project json + serialized assets (costumes and sounds).

package.json

@@ -55,6 +55,7 @@
     "html-webpack-plugin": "^2.30.0",
     "immutable": "3.8.2",
     "jest": "^21.0.0",
+    "jszip": "^3.1.5",
     "lodash.bindall": "4.4.0",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.0",

src/containers/save-button.jsx

@@ -2,6 +2,7 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
+import JSZip from 'jszip';
 
 import ButtonComponent from '../components/button/button.jsx';
 import {ComingSoonTooltip} from '../components/coming-soon/coming-soon.jsx';
@@ -15,24 +16,44 @@ class SaveButton extends React.Component {
         ]);
     }
     handleClick () {
-        const json = this.props.saveProjectSb3();
+        const zip = new JSZip();
+        // Get the serialized project and assets from vm
+        const projectInfo = this.props.saveProjectSb3();
+
+        const json = projectInfo.projectJson;
+        const sounds = projectInfo.sounds;
+        const costumes = projectInfo.costumes;
+
+        // Put everything in a zip file
+        zip.file('project.json', json);
+        for (let i = 0; i < sounds.length; i++) {
+            const currSound = sounds[i];
+            zip.file(currSound.fileName, currSound.fileContent);
+        }
+        for (let i = 0; i < costumes.length; i++) {
+            const currCostume = costumes[i];
+            zip.file(currCostume.fileName, currCostume.fileContent);
+        }
 
         // Download project data into a file - create link element,
         // simulate click on it, and then remove it.
         const saveLink = document.createElement('a');
         document.body.appendChild(saveLink);
 
-        const data = new Blob([json], {type: 'text'});
-        const url = window.URL.createObjectURL(data);
-        saveLink.href = url;
+        zip.generateAsync({type: 'blob'}).then(content => {
+            const url = window.URL.createObjectURL(content);
+
+            saveLink.href = url;
 
-        // File name: project-DATE-TIME
-        const date = new Date();
-        const timestamp = `${date.toLocaleDateString()}-${date.toLocaleTimeString()}`;
-        saveLink.download = `project-${timestamp}.json`;
-        saveLink.click();
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(saveLink);
+            // TODO Project name/location should be chosen by user
+            // File name: project-DATE-TIME
+            const date = new Date();
+            const timestamp = `${date.toLocaleDateString()}-${date.toLocaleTimeString()}`;
+            saveLink.download = `project-${timestamp}.zip`;
+            saveLink.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(saveLink);
+        });
     }
     render () {
         const {