diff --git a/app.bundle.js b/app.bundle.js
new file mode 100644
index 0000000..a988fe9
--- /dev/null
+++ b/app.bundle.js
@@ -0,0 +1,2 @@
+!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=7)}([function(e,n,t){"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map(function(n){var t=function(e,n){var t=e[1]||"",r=e[3];if(!r)return t;if(n&&"function"==typeof btoa){var o=(s=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),a=r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"});return[t].concat(a).concat([o]).join("\n")}var s;return[t].join("\n")}(n,e);return n[2]?"@media "+n[2]+"{"+t+"}":t}).join("")},n.i=function(e,t){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var a=this[o][0];null!=a&&(r[a]=!0)}for(o=0;o<e.length;o++){var s=e[o];null!=s[0]&&r[s[0]]||(t&&!s[2]?s[2]=t:t&&(s[2]="("+s[2]+") and ("+t+")"),n.push(s))}},n}},function(e,n,t){var r,o,a={},s=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),i=function(e){var n={};return function(e,t){if("function"==typeof e)return e();if(void 0===n[e]){var r=function(e,n){return n?n.querySelector(e):document.querySelector(e)}.call(this,e,t);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}n[e]=r}return n[e]}}(),l=null,c=0,d=[],u=t(4);function h(e,n){for(var t=0;t<e.length;t++){var r=e[t],o=a[r.id];if(o){o.refs++;for(var s=0;s<o.parts.length;s++)o.parts[s](r.parts[s]);for(;s<r.parts.length;s++)o.parts.push(v(r.parts[s],n))}else{var i=[];for(s=0;s<r.parts.length;s++)i.push(v(r.parts[s],n));a[r.id]={id:r.id,refs:1,parts:i}}}}function p(e,n){for(var t=[],r={},o=0;o<e.length;o++){var a=e[o],s=n.base?a[0]+n.base:a[0],i={css:a[1],media:a[2],sourceMap:a[3]};r[s]?r[s].parts.push(i):t.push(r[s]={id:s,parts:[i]})}return t}function f(e,n){var t=i(e.insertInto);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=d[d.length-1];if("top"===e.insertAt)r?r.nextSibling?t.insertBefore(n,r.nextSibling):t.appendChild(n):t.insertBefore(n,t.firstChild),d.push(n);else if("bottom"===e.insertAt)t.appendChild(n);else{if("object"!=typeof e.insertAt||!e.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=i(e.insertAt.before,t);t.insertBefore(n,o)}}function g(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e);var n=d.indexOf(e);n>=0&&d.splice(n,1)}function m(e){var n=document.createElement("style");if(void 0===e.attrs.type&&(e.attrs.type="text/css"),void 0===e.attrs.nonce){var r=function(){0;return t.nc}();r&&(e.attrs.nonce=r)}return b(n,e.attrs),f(e,n),n}function b(e,n){Object.keys(n).forEach(function(t){e.setAttribute(t,n[t])})}function v(e,n){var t,r,o,a;if(n.transform&&e.css){if(!(a="function"==typeof n.transform?n.transform(e.css):n.transform.default(e.css)))return function(){};e.css=a}if(n.singleton){var s=c++;t=l||(l=m(n)),r=x.bind(null,t,s,!1),o=x.bind(null,t,s,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(t=function(e){var n=document.createElement("link");return void 0===e.attrs.type&&(e.attrs.type="text/css"),e.attrs.rel="stylesheet",b(n,e.attrs),f(e,n),n}(n),r=function(e,n,t){var r=t.css,o=t.sourceMap,a=void 0===n.convertToAbsoluteUrls&&o;(n.convertToAbsoluteUrls||a)&&(r=u(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),i=e.href;e.href=URL.createObjectURL(s),i&&URL.revokeObjectURL(i)}.bind(null,t,n),o=function(){g(t),t.href&&URL.revokeObjectURL(t.href)}):(t=m(n),r=function(e,n){var t=n.css,r=n.media;r&&e.setAttribute("media",r);if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}.bind(null,t),o=function(){g(t)});return r(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;r(e=n)}else o()}}e.exports=function(e,n){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(n=n||{}).attrs="object"==typeof n.attrs?n.attrs:{},n.singleton||"boolean"==typeof n.singleton||(n.singleton=s()),n.insertInto||(n.insertInto="head"),n.insertAt||(n.insertAt="bottom");var t=p(e,n);return h(t,n),function(e){for(var r=[],o=0;o<t.length;o++){var s=t[o];(i=a[s.id]).refs--,r.push(i)}e&&h(p(e,n),n);for(o=0;o<r.length;o++){var i;if(0===(i=r[o]).refs){for(var l=0;l<i.parts.length;l++)i.parts[l]();delete a[i.id]}}}};var y,w=(y=[],function(e,n){return y[e]=n,y.filter(Boolean).join("\n")});function x(e,n,t,r){var o=t?"":r.css;if(e.styleSheet)e.styleSheet.cssText=w(n,o);else{var a=document.createTextNode(o),s=e.childNodes;s[n]&&e.removeChild(s[n]),s.length?e.insertBefore(a,s[n]):e.appendChild(a)}}},function(e,n,t){var r=t(3);"string"==typeof r&&(r=[[e.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};t(1)(r,o);r.locals&&(e.exports=r.locals)},function(e,n,t){(e.exports=t(0)(!1)).push([e.i,'/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/* Document\r\n   ========================================================================== */\r\n\r\n/**\r\n * 1. Correct the line height in all browsers.\r\n * 2. Prevent adjustments of font size after orientation changes in iOS.\r\n */\r\n\r\n html {\r\n    line-height: 1.15; /* 1 */\r\n    -webkit-text-size-adjust: 100%; /* 2 */\r\n  }\r\n  \r\n  /* Sections\r\n     ========================================================================== */\r\n  \r\n  /**\r\n   * Remove the margin in all browsers.\r\n   */\r\n  \r\n  body {\r\n    margin: 0;\r\n  }\r\n  \r\n  /**\r\n   * Render the `main` element consistently in IE.\r\n   */\r\n  \r\n  main {\r\n    display: block;\r\n  }\r\n  \r\n  /**\r\n   * Correct the font size and margin on `h1` elements within `section` and\r\n   * `article` contexts in Chrome, Firefox, and Safari.\r\n   */\r\n  \r\n  h1 {\r\n    font-size: 2em;\r\n    margin: 0.67em 0;\r\n  }\r\n  \r\n  /* Grouping content\r\n     ========================================================================== */\r\n  \r\n  /**\r\n   * 1. Add the correct box sizing in Firefox.\r\n   * 2. Show the overflow in Edge and IE.\r\n   */\r\n  \r\n  hr {\r\n    box-sizing: content-box; /* 1 */\r\n    height: 0; /* 1 */\r\n    overflow: visible; /* 2 */\r\n  }\r\n  \r\n  /**\r\n   * 1. Correct the inheritance and scaling of font size in all browsers.\r\n   * 2. Correct the odd `em` font sizing in all browsers.\r\n   */\r\n  \r\n  pre {\r\n    font-family: monospace, monospace; /* 1 */\r\n    font-size: 1em; /* 2 */\r\n  }\r\n  \r\n  /* Text-level semantics\r\n     ========================================================================== */\r\n  \r\n  /**\r\n   * Remove the gray background on active links in IE 10.\r\n   */\r\n  \r\n  a {\r\n    background-color: transparent;\r\n  }\r\n  \r\n  /**\r\n   * 1. Remove the bottom border in Chrome 57-\r\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\n   */\r\n  \r\n  abbr[title] {\r\n    border-bottom: none; /* 1 */\r\n    text-decoration: underline; /* 2 */\r\n    text-decoration: underline dotted; /* 2 */\r\n  }\r\n  \r\n  /**\r\n   * Add the correct font weight in Chrome, Edge, and Safari.\r\n   */\r\n  \r\n  b,\r\n  strong {\r\n    font-weight: bolder;\r\n  }\r\n  \r\n  /**\r\n   * 1. Correct the inheritance and scaling of font size in all browsers.\r\n   * 2. Correct the odd `em` font sizing in all browsers.\r\n   */\r\n  \r\n  code,\r\n  kbd,\r\n  samp {\r\n    font-family: monospace, monospace; /* 1 */\r\n    font-size: 1em; /* 2 */\r\n  }\r\n  \r\n  /**\r\n   * Add the correct font size in all browsers.\r\n   */\r\n  \r\n  small {\r\n    font-size: 80%;\r\n  }\r\n  \r\n  /**\r\n   * Prevent `sub` and `sup` elements from affecting the line height in\r\n   * all browsers.\r\n   */\r\n  \r\n  sub,\r\n  sup {\r\n    font-size: 75%;\r\n    line-height: 0;\r\n    position: relative;\r\n    vertical-align: baseline;\r\n  }\r\n  \r\n  sub {\r\n    bottom: -0.25em;\r\n  }\r\n  \r\n  sup {\r\n    top: -0.5em;\r\n  }\r\n  \r\n  /* Embedded content\r\n     ========================================================================== */\r\n  \r\n  /**\r\n   * Remove the border on images inside links in IE 10.\r\n   */\r\n  \r\n  img {\r\n    border-style: none;\r\n  }\r\n  \r\n  /* Forms\r\n     ========================================================================== */\r\n  \r\n  /**\r\n   * 1. Change the font styles in all browsers.\r\n   * 2. Remove the margin in Firefox and Safari.\r\n   */\r\n  \r\n  button,\r\n  input,\r\n  optgroup,\r\n  select,\r\n  textarea {\r\n    font-family: inherit; /* 1 */\r\n    font-size: 100%; /* 1 */\r\n    line-height: 1.15; /* 1 */\r\n    margin: 0; /* 2 */\r\n  }\r\n  \r\n  /**\r\n   * Show the overflow in IE.\r\n   * 1. Show the overflow in Edge.\r\n   */\r\n  \r\n  button,\r\n  input { /* 1 */\r\n    overflow: visible;\r\n  }\r\n  \r\n  /**\r\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n   * 1. Remove the inheritance of text transform in Firefox.\r\n   */\r\n  \r\n  button,\r\n  select { /* 1 */\r\n    text-transform: none;\r\n  }\r\n  \r\n  /**\r\n   * Correct the inability to style clickable types in iOS and Safari.\r\n   */\r\n  \r\n  button,\r\n  [type="button"],\r\n  [type="reset"],\r\n  [type="submit"] {\r\n    -webkit-appearance: button;\r\n  }\r\n  \r\n  /**\r\n   * Remove the inner border and padding in Firefox.\r\n   */\r\n  \r\n  button::-moz-focus-inner,\r\n  [type="button"]::-moz-focus-inner,\r\n  [type="reset"]::-moz-focus-inner,\r\n  [type="submit"]::-moz-focus-inner {\r\n    border-style: none;\r\n    padding: 0;\r\n  }\r\n  \r\n  /**\r\n   * Restore the focus styles unset by the previous rule.\r\n   */\r\n  \r\n  button:-moz-focusring,\r\n  [type="button"]:-moz-focusring,\r\n  [type="reset"]:-moz-focusring,\r\n  [type="submit"]:-moz-focusring {\r\n    outline: 1px dotted ButtonText;\r\n  }\r\n  \r\n  /**\r\n   * Correct the padding in Firefox.\r\n   */\r\n  \r\n  fieldset {\r\n    padding: 0.35em 0.75em 0.625em;\r\n  }\r\n  \r\n  /**\r\n   * 1. Correct the text wrapping in Edge and IE.\r\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\r\n   * 3. Remove the padding so developers are not caught out when they zero out\r\n   *    `fieldset` elements in all browsers.\r\n   */\r\n  \r\n  legend {\r\n    box-sizing: border-box; /* 1 */\r\n    color: inherit; /* 2 */\r\n    display: table; /* 1 */\r\n    max-width: 100%; /* 1 */\r\n    padding: 0; /* 3 */\r\n    white-space: normal; /* 1 */\r\n  }\r\n  \r\n  /**\r\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\n   */\r\n  \r\n  progress {\r\n    vertical-align: baseline;\r\n  }\r\n  \r\n  /**\r\n   * Remove the default vertical scrollbar in IE 10+.\r\n   */\r\n  \r\n  textarea {\r\n    overflow: auto;\r\n  }\r\n  \r\n  /**\r\n   * 1. Add the correct box sizing in IE 10.\r\n   * 2. Remove the padding in IE 10.\r\n   */\r\n  \r\n  [type="checkbox"],\r\n  [type="radio"] {\r\n    box-sizing: border-box; /* 1 */\r\n    padding: 0; /* 2 */\r\n  }\r\n  \r\n  /**\r\n   * Correct the cursor style of increment and decrement buttons in Chrome.\r\n   */\r\n  \r\n  [type="number"]::-webkit-inner-spin-button,\r\n  [type="number"]::-webkit-outer-spin-button {\r\n    height: auto;\r\n  }\r\n  \r\n  /**\r\n   * 1. Correct the odd appearance in Chrome and Safari.\r\n   * 2. Correct the outline style in Safari.\r\n   */\r\n  \r\n  [type="search"] {\r\n    -webkit-appearance: textfield; /* 1 */\r\n    outline-offset: -2px; /* 2 */\r\n  }\r\n  \r\n  /**\r\n   * Remove the inner padding in Chrome and Safari on macOS.\r\n   */\r\n  \r\n  [type="search"]::-webkit-search-decoration {\r\n    -webkit-appearance: none;\r\n  }\r\n  \r\n  /**\r\n   * 1. Correct the inability to style clickable types in iOS and Safari.\r\n   * 2. Change font properties to `inherit` in Safari.\r\n   */\r\n  \r\n  ::-webkit-file-upload-button {\r\n    -webkit-appearance: button; /* 1 */\r\n    font: inherit; /* 2 */\r\n  }\r\n  \r\n  /* Interactive\r\n     ========================================================================== */\r\n  \r\n  /*\r\n   * Add the correct display in Edge, IE 10+, and Firefox.\r\n   */\r\n  \r\n  details {\r\n    display: block;\r\n  }\r\n  \r\n  /*\r\n   * Add the correct display in all browsers.\r\n   */\r\n  \r\n  summary {\r\n    display: list-item;\r\n  }\r\n  \r\n  /* Misc\r\n     ========================================================================== */\r\n  \r\n  /**\r\n   * Add the correct display in IE 10+.\r\n   */\r\n  \r\n  template {\r\n    display: none;\r\n  }\r\n  \r\n  /**\r\n   * Add the correct display in IE 10.\r\n   */\r\n  \r\n  [hidden] {\r\n    display: none;\r\n  }',""])},function(e,n){e.exports=function(e){var n="undefined"!=typeof window&&window.location;if(!n)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var t=n.protocol+"//"+n.host,r=t+n.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,n){var o,a=n.trim().replace(/^"(.*)"$/,function(e,n){return n}).replace(/^'(.*)'$/,function(e,n){return n});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(a)?e:(o=0===a.indexOf("//")?a:0===a.indexOf("/")?t+a:r+a.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}},function(e,n,t){var r=t(6);"string"==typeof r&&(r=[[e.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};t(1)(r,o);r.locals&&(e.exports=r.locals)},function(e,n,t){(e.exports=t(0)(!1)).push([e.i,":root {\n  --def-font-color: #8f9d9f;\n  --bgcolor: #8b9296;\n  --hbg: #192227;\n  --tolbarbg: #192227;\n  --turquoise: #1abc9c;\n  --emerland: #2ecc71;\n  --peterriver: #3498db;\n  --amethyst: #9b59b6;\n  --wetasphalt: #34495e;\n  --sunflower: #f1c40f;\n  --carrot: #e67e22;\n  --alizarin: #e74c3c;\n  --clouds: #ecf0f1;\n  --concrete: #ecf0f1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Roboto', sans-serif;\n  color: white;\n  background-color: var(--bgcolor);\n  font-size: 16px;\n}\n\n.wrapper-piskel-clon-edit {\n  flex-direction: column;\n  height: 100vh;\n  display: flex;\n  overflow: hidden;\n}\n\nul {\n  list-style: none;\n  padding: 0;\n}\n\n.header {\n  color: var(--sunflower);\n  height: 50px;\n  display: flex;\n  align-items: center;\n  background-color: var(--hbg);\n  border-bottom: 1px solid #000;\n}\n\n.logo {\n  margin-left: 10px;\n}\n\n.main {\n  display: flex;\n  flex-grow: 1;\n}\n\n.animated-preview, .toolbar-layers, .toolbar {\n  width: 155px;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--tolbarbg);\n  border-right: 1px solid #000;\n}\n\n.toolbar {\n  border-right: none;\n}\n\n.pen-size {\n  display: flex;\n}\n\n.pen-size__item {\n  height: 25px;\n  width: 25px;\n  border: 3px solid var(--wetasphalt);\n  margin-right: 5px;\n}\n\n.activ-tool {\n  border: 3px solid var(--sunflower);\n}\n\n.toolbar__item {\n  padding: 0 5px;\n}\n\n.tools {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.tools__item {\n  color: white;\n  font-size: 1.5rem;\n  display: flex;\n  height: 42px;\n  width: 42px;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--wetasphalt);\n  margin: 0 5px 5px 0;\n}\n\n.disable-tool {\n  color: var(--def-font-color);\n}\n\n.color-palette {\n  display: flex;\n  flex-direction: column;\n}\n\n.palette {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.palette-color {\n  display: block;\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  margin: 0 15px 10px 0;\n}\n\n.cur-pev-color {\n  position: relative;\n}\n\n.cur-pev-color__item {\n  display: flex;\n  align-items: center;\n  position: absolute;\n}\n\n.current-color {\n  z-index: 1;\n}\n\n.prev-color {\n  top: 16px;\n  left: 8px;\n}\n\ninput[type='color'] {\n  -webkit-appearance: none;\n  border: none;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  padding: 0;\n  margin-right: 5px;\n}\n\ninput[type='color']::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\ninput[type='color']::-webkit-color-swatch {\n  border: none;\n  border-radius: 50%;\n}\n\ninput[type='color']:focus {\n  outline: none;\n  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1);\n}\n\n.circle {\n  border-radius: 50%;\n}\n\n.turquoise {\n  background-color: var(--turquoise);\n}\n\n.emerland {\n  background-color: var(--emerland);\n}\n\n.peterriver {\n  background-color: var(--peterriver);\n}\n\n.amethyst {\n  background-color: var(--amethyst);\n}\n\n.wetasphalt {\n  background-color: var(--wetasphalt);\n}\n\n.sunflower {\n  background-color: var(--sunflower);\n}\n\n.carrot {\n  background-color: var(--carrot);\n}\n\n.alizarin {\n  background-color: var(--alizarin);\n}\n\n.clouds {\n  background-color: var(--clouds);\n}\n\n.toolbar-layers {\n  align-items: center;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n}\n\n.canvas-wrapper {\n  flex-grow: 2;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.animated-preview {\n  width: 300px;\n  padding-top: 15px;\n  display: flex;\n  align-items: center;\n  border-right: none;\n  border-left: 1px solid #000;\n}\n\n.layers__item {\n  image-rendering: pixelated;\n  margin-top: 15px;\n  width: 120px;\n  height: 120px;\n  border: 3px solid var(--wetasphalt);\n  border-radius: 5px;\n  position: relative;\n  background-size: cover;\n}\n\n.activ-layer {\n  border: 3px solid var(--sunflower);\n}\n\n.layer-control {\n  color: var(--def-font-color);\n  position: absolute;\n  bottom: 3px;\n}\n\n.layer-control:hover {\n  color: var(--clouds);\n  cursor: pointer;\n}\n\n.clone {\n  left: 3px;\n  visibility: hidden;\n}\n\n.trash {\n  right: 3px;\n  visibility: hidden;\n}\n\n.layers__item:hover .clone, .layers__item:hover .trash {\n  visibility: visible;\n}\n\n.layers__new {\n  margin-top: 15px;\n  padding: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 3px solid var(--wetasphalt);\n  border-radius: 5px;\n  width: 120px;\n}\n\n.layers__new .fas {\n  font-size: 2rem;\n  margin-right: 5px;\n}\n\n.layers__new:hover {\n  border-color: var(--sunflower);\n}\n\n.canvas-background {\n  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEVMTExVVVUnhsEkAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=');\n}\n\n.layers .canvas-background {\n  border-radius: 5px;\n}\n\n.animated-preview__canvas {\n  width: 200px;\n  height: 200px;\n  image-rendering: pixelated;\n  border: 3px solid var(--wetasphalt);\n  border-bottom: none;\n  background-size: cover;\n}\n\n.main-canvas {\n  transform-origin: 0 0;\n  transform: scale(20, 20);\n  image-rendering: pixelated;\n  box-sizing: content-box;\n  cursor: url(\"https://img.icons8.com/cotton/24/000000/edit.png\") 10 80, auto;\n}\n\n.canvas-wrapper .canvas-background {\n  width: 640px;\n  height: 640px;\n}\n\n.layers__new:hover {\n  cursor: pointer;\n}\n\n.fps-range {\n  -webkit-appearance: none;\n  width: 200px;\n  background: var(--wetasphalt);\n  cursor: pointer;\n}\n\n.fps-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 20px;\n  height: 20px;\n  background: var(--sunflower);\n  cursor: pointer;\n  transition: .1s;\n}\n\n.canvas-info {\n  color: var(--sunflower);\n  font-size: 0.8rem;\n  position: absolute;\n  bottom: 10px;\n  align-self: flex-start;\n  margin: 10px 0 0 10px;\n}\n\n.fullScreen:fullscreen {\n  background: var(--bgcolor);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.fullScreen:fullscreen .animated-preview__canvas {\n  width: 100vh;\n  height: 100vh;\n  border: 3px solid var(--sunflower);\n}\n\n.openFullScreen {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 70px;\n  color: var(--sunflower);\n  height: 100%;\n  width: 100%;\n  visibility: hidden;\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.animated-preview__canvas:hover .openFullScreen {\n  visibility: visible;\n  cursor: pointer;\n}\n\n.fullScreen:fullscreen .animated-preview__canvas:hover .openFullScreen {\n  visibility: hidden;\n}\n\n.toolbar-layers:hover {\n  overflow-y: scroll;\n  -webkit-overflow-scrolling: touch;\n  -moz-overflow-scrolling: touch;\n  -ms-overflow-scrolling: touch;\n  -o-overflow-scrolling: touch;\n}\n\n.toolbar-layers::-webkit-scrollbar {\n  -webkit-appearance: none;\n  width: 7px;\n}\n\n.toolbar-layers::-webkit-scrollbar-thumb {\n  border-radius: 2px;\n  background-color: var(--wetasphalt);\n}\n\n[draggable] {\n  -moz-user-select: none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n  -khtml-user-drag: element;\n  -webkit-user-drag: element;\n}\n\n.dragn-drop {\n  cursor: move;\n}\n\n.hovered {\n  border: 3px dashed;\n}\n\n.hold {\n  border: 3px dashed var(--sunflower);\n}\n\n.save-piskel {\n  width: 200px;\n}\n\n.btn {\n  display: block;\n  margin-top: 15px;\n  color: var(--clouds);\n  text-decoration: none;\n  user-select: none;\n  background: var(--wetasphalt);\n  padding: .7em 1.5em;\n  outline: none;\n  border: none;\n  min-width: 200px;\n  cursor: pointer;\n}\n\n.btn .far {\n  margin-right: 5px;\n  font-size: 1.5rem;\n}\n\n.btn:hover {\n  background: var(--sunflower);\n  color: var(--bgcolor);\n}\n\n/*  landing page */\n\n.screenshot {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 500px;\n  background-color: var(--wetasphalt);\n}\n\n.description {\n  margin-right: 150px;\n}\n\n.description-caption {\n  font-size: 2.5rem;\n  max-width: 600px;\n  ;\n}\n\n.link {\n  margin-top: 15px;\n  padding: .7em 1.5em;\n  font-weight: bold;\n  font-size: 1.5rem;\n  text-decoration: none;\n  user-select: none;\n  color: var(--clouds);\n  background: var(--sunflower);\n  outline: none;\n  border: none;\n  cursor: pointer;\n}\n\n.create-sprite:hover {\n  background: var(--alizarin);\n}\n\n.task-link:hover {\n  background: var(--emerland);\n}\n\n.wrapper {\n  display: flex;\n}\n\n.example, .functionlity {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: 1.5rem;\n}\n\n.example {\n  color: var(--clouds);\n  background-color: var(--turquoise);\n  width: 30%;\n}\n\n.example-img {\n  border: 1px solid var(--wetasphalt);\n  border-radius: 5px;\n  background-color: var(--wetasphalt);\n  margin: 5px;\n}\n\n.functionlity {\n  color: var(--clouds);\n  background-color: var(--alizarin);\n  width: 70%;\n  padding-left: 10px;\n}\n\n.functionality-list-item span {\n  font-weight: bold;\n  line-height: 2rem;\n}\n\n.footer {\n  display: flex;\n  justify-content: center;\n  font-size: 1.5rem;\n}\n\n.footer-link {\n  margin-top: 15px;\n  text-decoration: none;\n  color: var(--clouds);\n}\n\n.footer-link:hover {\n  color: var(--sunflower);\n}\n",""])},function(e,n,t){"use strict";t.r(n);class r{constructor(e){this.state=e}start(){let e=!1;this.shortcutKeyTool(),document.querySelector(`[data-tool="${this.state.curentTool}"]`).classList.add("activ-tool");const n=document.querySelector(".main-canvas"),t=n.getContext("2d"),o=document.getElementById("color-input"),a=document.getElementById("prev-color-mark");a.style.backgroundColor=this.state.prevColor;const s=document.querySelector(".tools"),i=document.querySelector(".palette"),l=document.querySelector(".canvas-current-position");t.fillStyle=this.state.curentColor,t.strokeStyle=this.state.curentColor,o.value=this.state.curentColor;let c=0,d=0;const u=new Image;n.addEventListener("mousedown",s=>{t.fillStyle=this.state.curentColor,e=!0;const i=s.offsetX-1,l=s.offsetY-1;switch(this.state.curentTool){case"pen":t.fillRect(i,l,1,1);break;case"eraser":t.clearRect(i,l,1,1);break;case"color-picker":{const e=t.getImageData(i,l,1,1);if(e.data[3]/255!=0){let n=(+e.data[0]).toString(16),r=(+e.data[1]).toString(16),s=(+e.data[2]).toString(16);1===n.length&&(n=`0${n}`),1===r.length&&(r=`0${r}`),1===s.length&&(s=`0${s}`),this.state.prevColor=this.state.curentColor,this.state.curentColor=`#${n}${r}${s}`,o.value=this.state.curentColor,a.style.backgroundColor=this.state.prevColor,t.fillStyle=this.state.curentColor,t.strokeStyle=this.state.curentColor}break}case"lighten":r.lighten(s,t,i,l);break;case"vertical-mirror":t.fillRect(i,l,1,1),t.fillRect(n.width-i-1,l,1,1);break;case"rectangle":{c=i,d=l;const e=document.querySelector(".activ-layer").getAttribute("data-layer-num");u.src=this.state.frames[e].slice(5,-2);break}}}),n.addEventListener("mousemove",o=>{const a=o.offsetX-1,s=o.offsetY-1;if(e)switch(this.state.curentTool){case"pen":t.fillRect(a,s,1,1);break;case"eraser":t.clearRect(a,s,1,1);break;case"vertical-mirror":t.fillRect(a,s,1,1),t.fillRect(n.width-a-1,s,1,1);break;case"rectangle":t.clearRect(0,0,32,32),t.drawImage(u,0,0),c>a&&d>s?(t.fillRect(c,d+1,1,s-d-1),t.fillRect(c+1,d,a-c-1,1),t.fillRect(a,d+1,1,s-d-1),t.fillRect(c+1,s,a-c-1,1)):(t.fillRect(c,d,1,s-d+1),t.fillRect(c,d,a-c+1,1),t.fillRect(a,d,1,s-d+1),t.fillRect(c,s,a-c+1,1));break;case"lighten":r.lighten(o,t,a,s)}l.innerHTML=`${a+1} : ${s+1}`});const h=()=>{e=!1;const t=document.querySelector(".activ-layer").getAttribute("data-layer-num"),r=`url('${n.toDataURL()}')`;document.querySelector(".activ-layer").style.backgroundImage=r,this.state.frames[t]=r};n.addEventListener("mouseup",()=>{h()}),n.addEventListener("mouseout",()=>{h()}),s.addEventListener("click",e=>{e.target.classList.contains("disable-tool")||(this.state.curentTool=e.target.closest(".tools__item").getAttribute("data-tool"),document.querySelector(".activ-tool").classList.toggle("activ-tool"),e.target.closest(".tools__item").classList.toggle("activ-tool"))}),i.addEventListener("click",e=>{e.target.matches(".palette-color")&&(this.state.prevColor=this.state.curentColor,this.state.curentColor=function(e){const n=e.indexOf(",")>-1?",":" ",t=e.substr(4).split(")")[0].split(n);let r=(+t[0]).toString(16),o=(+t[1]).toString(16),a=(+t[2]).toString(16);return 1===r.length&&(r=`0${r}`),1===o.length&&(o=`0${o}`),1===a.length&&(a=`0${a}`),`#${r}${o}${a}`}(getComputedStyle(e.target).backgroundColor),o.value=this.state.curentColor,a.style.backgroundColor=this.state.prevColor,t.fillStyle=this.state.curentColor,t.strokeStyle=this.state.curentColor)}),o.addEventListener("change",e=>{this.state.prevColor=this.state.curentColor,a.style.backgroundColor=this.state.prevColor,this.state.curentColor=e.target.value,t.fillStyle=this.state.curentColor,t.strokeStyle=this.state.curentColor},!1)}static shadeColor(e,n){let t=parseInt(e.data[0],10),r=parseInt(e.data[1],10),o=parseInt(e.data[2],10);return t=parseInt(t*(100+n)/100,10),r=(r=parseInt(r*(100+n)/100,10))<255?r:255,o=(o=parseInt(o*(100+n)/100,10))<255?o:255,`#${1===(t=t<255?t:255).toString(16).length?`0${t.toString(16)}`:t.toString(16)}${1===r.toString(16).length?`0${r.toString(16)}`:r.toString(16)}${1===o.toString(16).length?`0${o.toString(16)}`:o.toString(16)}`}static lighten(e,n,t,o){const a=n.getImageData(t,o,1,1);a.data[3]/255!=0&&setTimeout(()=>{e.ctrlKey?n.fillStyle=r.shadeColor(a,-30):n.fillStyle=r.shadeColor(a,30),n.fillRect(t,o,1,1)},100)}static shortcutChangeTool(e,n){document.querySelector(`[data-tool="${n}"]`).classList.contains("disable-tool")||(e.state.curentTool=n,document.querySelector(".activ-tool").classList.toggle("activ-tool"),document.querySelector(`[data-tool="${e.state.curentTool}"]`).classList.toggle("activ-tool"))}shortcutKeyTool(){window.addEventListener("keyup",e=>{switch(e.code){case this.state.shortcut.pen:r.shortcutChangeTool(this,"pen");break;case this.state.shortcut.eraser:r.shortcutChangeTool(this,"eraser");break;case this.state.shortcut.verticalMirror:r.shortcutChangeTool(this,"vertical-mirror");break;case this.state.shortcut.colorPicker:r.shortcutChangeTool(this,"color-picker");break;case this.state.shortcut.rectangle:r.shortcutChangeTool(this,"rectangle");break;case this.state.shortcut.paintBucket:r.shortcutChangeTool(this,"paint-bucket");break;case this.state.shortcut.lighten:r.shortcutChangeTool(this,"lighten")}})}}class o{constructor(e){this.state=e}save(){document.querySelector(".save-piskel").addEventListener("click",e=>{if(e.target.matches(".save-piskel-clone")){const n={piskelClone:{name:"my-piskel-clone",description:"created with app piskel-clone"},version:"1.0"};n.settings={canvas:{height:"32",width:"32"},fps:`${this.state.fps}`},n.Frames=this.state.frames,o.download(e.target,n,"my-piskel-clone.clpiskel")}if(e.target.matches(".save-piskel")){const n=this.state.frames.map((e,n)=>`[${n}]`).join(","),t=document.createElement("canvas");t.height=32,t.width=32*this.state.frames.length;const r=t.getContext("2d"),a=new Image;let s=this.state.frames.map((e,n)=>(a.src=this.state.frames[n].slice(5,-2),r.drawImage(a,32*n,0),`${t.toDataURL()}`));s=s[s.length-1];const i=`{"name":"Layer 2","opacity":1,"frameCount":${this.state.frames.length},"chunks":[{"layout":[${n}],"base64PNG":"${s}"}]}`,l={modelVersion:2};l.piskel={name:"my-piskel",description:"created with app piskel-clone",fps:this.state.fps,height:32,width:32,layers:[i],hiddenFrames:[]},o.download(e.target,l,"my-piskel.piskel")}})}static download(e,n,t){const r=e,o=JSON.stringify(n),a=new Blob([o],{type:"octet/stream"}),s=window.URL.createObjectURL(a);r.href=s,r.target="_blank",r.download=t}}class a{constructor(e){this.state=e}start(){const e=document.querySelector(".layers__new"),n=document.querySelector(".layers");this.shortcutKeyFrame(),e.addEventListener("click",()=>{this.newFrame(),this.dagnDrop()}),n.addEventListener("click",e=>{if(e.target.matches(".clone")){const n=e.target.closest(".layers__item");this.cloneFrame(n),this.dagnDrop()}if(e.target.matches(".trash")&&this.state.frames.length>0){const n=e.target.closest(".layers__item");this.deleteFrame(n),this.dagnDrop()}if(e.target.matches(".layers__item")){document.querySelector(".activ-layer").classList.toggle("activ-layer"),e.target.closest(".layers__item").classList.toggle("activ-layer");const n=e.target.getAttribute("data-layer-num");a.loadImgOnCanvas(this.state.frames[n])}})}dagnDrop(){let e;document.querySelectorAll(".dragn-drop").forEach(n=>{n.addEventListener("dragstart",n=>{e=n.target,n.target.classList.add("hold")},!1),n.addEventListener("dragend",e=>{e.target.classList.remove("hold")},!1),n.addEventListener("dragenter",n=>{n.preventDefault(),n.target.classList.add("hovered"),e.style.backgroundImage=this.state.frames[n.target.getAttribute("data-layer-num")],n.target.style.backgroundImage="none"},!1),n.addEventListener("dragover",e=>{e.preventDefault(),e.target.style.backgroundImage="none"},!1),n.addEventListener("dragleave",n=>{n.target.classList.remove("hovered"),e.style.backgroundImage="none",n.target.style.backgroundImage=this.state.frames[n.target.getAttribute("data-layer-num")]},!1),n.addEventListener("drop",n=>{if(n.target.classList.remove("hovered"),e===n.target)e.style.backgroundImage=this.state.frames[e.getAttribute("data-layer-num")];else{const t=e.getAttribute("data-layer-num"),r=n.target.getAttribute("data-layer-num");e.style.backgroundImage=this.state.frames[r],n.target.style.backgroundImage=this.state.frames[t],[this.state.frames[t],this.state.frames[r]]=[this.state.frames[r],this.state.frames[t]],document.querySelector(".activ-layer").classList.toggle("activ-layer"),n.target.closest(".layers__item").classList.toggle("activ-layer"),a.loadImgOnCanvas(this.state.frames[r])}},!1)})}static loadImgOnCanvas(e){const n=document.querySelector(".main-canvas"),t=n.getContext("2d");t.clearRect(0,0,n.width,n.height);const r=new Image;r.src=e.slice(5,-2),r.onload=()=>{t.drawImage(r,0,0)}}static renderFramesList(e,n){return n.map((n,t)=>{let r="layers__item dragn-drop";return+t==+e&&(r="layers__item dragn-drop activ-layer"),`<div class="canvas-background"><div class="${r}" data-layer-num="${t}" draggable="true" style="background-image:${n}"><span class="layer-control clone fas fa-clone"></span><span class="layer-control trash fas fa-trash-alt"></span></div></div>`}).join("")}newFrame(){const e=document.querySelector(".main-canvas"),n=e.getContext("2d"),t=document.querySelector(".layers");this.state.frames.push("url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAALUlEQVRYR+3QQREAAAABQfqXFsNnFTizzXk99+MAAQIECBAgQIAAAQIECBAgMBo/ACHo7lH9AAAAAElFTkSuQmCC')"),n.clearRect(0,0,e.width,e.height),document.querySelector(".activ-layer").classList.toggle("activ-layer"),t.innerHTML+=`<div class="canvas-background"><div class="layers__item activ-layer dragn-drop" data-layer-num="${this.state.frames.length-1}" draggable="true"><span class="layer-control clone fas fa-clone"></span><span class="layer-control trash fas fa-trash-alt"></span></div></div>`}cloneFrame(e){const n=document.querySelector(".layers");let t=+e.getAttribute("data-layer-num");this.state.frames.splice(t,0,this.state.frames[t]),t+=1;const{state:{frames:r}}=this;n.innerHTML=a.renderFramesList(t,r),a.loadImgOnCanvas(this.state.frames[t])}deleteFrame(e){const n=document.querySelector(".layers");let t=e.getAttribute("data-layer-num");if(1!==this.state.frames.length){this.state.frames.splice(t,1),0!=+t&&(t-=1);const{state:{frames:e}}=this;n.innerHTML=a.renderFramesList(t,e),a.loadImgOnCanvas(this.state.frames[t])}}shortcutKeyFrame(){window.addEventListener("keyup",e=>{switch(e.code){case this.state.shortcut.newFrame:this.newFrame(),this.dagnDrop();break;case this.state.shortcut.dublicateFrame:{const e=document.querySelector(".activ-layer");this.cloneFrame(e),this.dagnDrop();break}case this.state.shortcut.deleteFrame:{const e=document.querySelector(".activ-layer");this.deleteFrame(e),this.dagnDrop();break}}})}}class s{constructor(e){this.state=e}start(){const e=document.querySelector(".animated-preview__canvas"),n=document.querySelector(".fullScreen"),t=document.querySelector(".fps-range"),r=document.querySelector(".fps-label"),o=document.querySelector(".openFullScreen");let a=1e3/+t.value;t.value=this.state.fps,r.innerHTML=`${this.state.fps} fps`;const{state:{frames:i}}=this;let l=()=>{let n=0;0!==i.length&&setTimeout(function t(){e.style.backgroundImage=i[n],n===i.length?n=0:n+=1,l=setTimeout(t,a)},a)};l(),t.addEventListener("input",e=>{this.state.fps=+e.target.value,r.innerHTML=`${this.state.fps} fps`,this.state.fps=+e.target.value,a=1e3/+e.target.value}),o.addEventListener("click",()=>{s.fullScreen(n)})}static fullScreen(e){e.requestFullscreen?e.requestFullscreen():e.webkitrequestFullscreen?e.webkitRequestFullscreen():e.mozRequestFullscreen&&e.mozRequestFullScreen()}}t(2),t(5);(new class{constructor(){this.state={curentColor:"#1abc9c",prevColor:"e67e22",curentTool:"pen",fps:12,frames:["url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAALUlEQVRYR+3QQREAAAABQfqXFsNnFTizzXk99+MAAQIECBAgQIAAAQIECBAgMBo/ACHo7lH9AAAAAElFTkSuQmCC')"],shortcut:{pen:"KeyP",eraser:"KeyE",verticalMirror:"KeyM",colorPicker:"KeyI",rectangle:"KeyR",paintBucket:"KeyB",lighten:"KeyL",newFrame:"KeyN",dublicateFrame:"KeyD",deleteFrame:"KeyT"}}}start(){this.state.curentColor=JSON.parse(localStorage.getItem("curentColor"))||this.state.curentColor,this.state.prevColor=JSON.parse(localStorage.getItem("prevColor"))||this.state.prevColor,this.state.curentTool=JSON.parse(localStorage.getItem("curentTool"))||this.state.curentTool,this.state.fps=JSON.parse(localStorage.getItem("fps"))||this.state.fps,this.state.shortcut=JSON.parse(localStorage.getItem("shortcut"))||this.state.shortcut;const e=new r(this.state),n=new o(this.state),t=new a(this.state),i=new s(this.state);e.start(),n.save(),t.start(),i.start(),window.onbeforeunload=()=>(localStorage.setItem("curentColor",JSON.stringify(this.state.curentColor)),localStorage.setItem("prevColor",JSON.stringify(this.state.prevColor)),localStorage.setItem("curentTool",JSON.stringify(this.state.curentTool)),localStorage.setItem("fps",JSON.stringify(this.state.fps)),localStorage.setItem("shortcut",JSON.stringify(this.state.shortcut)),"Данные не сохранены. Точно перейти?")}}).start()}]);
+//# sourceMappingURL=app.bundle.js.map
\ No newline at end of file
diff --git a/app.bundle.js.map b/app.bundle.js.map
new file mode 100644
index 0000000..935adcd
--- /dev/null
+++ b/app.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./node_modules/css-loader/dist/runtime/api.js","webpack:///./node_modules/style-loader/lib/addStyles.js","webpack:///./src/normalize.css?9568","webpack:///./src/normalize.css","webpack:///./node_modules/style-loader/lib/urls.js","webpack:///./src/style.css?8f34","webpack:///./src/style.css","webpack:///./src/app/tools/Tools.js","webpack:///./src/app/tools/SavePiskel.js","webpack:///./src/app/frames/Frames.js","webpack:///./src/app/frames/FramesAnimation.js","webpack:///./src/index.js","webpack:///./src/app/App.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","useSourceMap","list","toString","this","map","item","content","cssMapping","btoa","sourceMapping","sourceMap","unescape","encodeURIComponent","JSON","stringify","sourceURLs","sources","source","sourceRoot","concat","join","cssWithMappingToString","mediaQuery","alreadyImportedModules","length","id","push","fn","memo","stylesInDom","isOldIE","window","document","all","atob","apply","arguments","getElement","target","parent","styleTarget","querySelector","HTMLIFrameElement","contentDocument","head","e","singleton","singletonCounter","stylesInsertedAtTop","fixUrls","addStylesToDom","styles","options","domStyle","refs","j","parts","addStyle","listToStyles","newStyles","base","part","css","media","insertStyleElement","style","insertInto","Error","lastStyleElementInsertedAtTop","insertAt","nextSibling","insertBefore","appendChild","firstChild","before","removeStyleElement","parentNode","removeChild","idx","indexOf","splice","createStyleElement","createElement","undefined","attrs","type","nonce","nc","getNonce","addAttrs","el","keys","forEach","setAttribute","obj","update","remove","result","transform","default","styleIndex","applyToSingletonTag","URL","createObjectURL","revokeObjectURL","Blob","link","rel","createLinkElement","autoFixUrls","convertToAbsoluteUrls","blob","oldSrc","href","styleSheet","cssText","createTextNode","newObj","DEBUG","newList","mayRemove","textStore","replaceText","index","replacement","filter","Boolean","cssNode","childNodes","hmr","locals","location","baseUrl","protocol","host","currentDir","pathname","replace","fullMatch","origUrl","newUrl","unquotedOrigUrl","trim","$1","test","Tools","constructor","state","start","isPenDrawing","shortcutKeyTool","curentTool","classList","add","canvas","context","getContext","curentColorInput","getElementById","prevColorMark","backgroundColor","prevColor","tool","palette","canvasCurPosition","fillStyle","curentColor","strokeStyle","startX","startY","img","Image","addEventListener","x","offsetX","y","offsetY","fillRect","clearRect","pixel","getImageData","data","g","b","lighten","width","getAttribute","src","frames","slice","drawImage","innerHTML","endDraw","url","toDataURL","backgroundImage","contains","closest","toggle","matches","rgb","sep","color","substr","split","RGBToHex","getComputedStyle","[object Object]","percent","R","parseInt","G","B","event","setTimeout","ctrlKey","shadeColor","self","code","shortcut","pen","shortcutChangeTool","eraser","verticalMirror","colorPicker","rectangle","paintBucket","SavePiskel","save","piskelClone","description","settings","height","fps","Frames","download","layout","imageBase64","piskelStr","piskel","layers","hiddenFrames","fileName","json","newLayer","layersWrapper","shortcutKeyFrame","newFrame","dagnDrop","element","cloneFrame","deleteFrame","loadImgOnCanvas","stratDropElement","querySelectorAll","blok","preventDefault","startIndex","endIndex","imgSrc","onload","frame","frIndex","classItem","renderFramesList","dublicateFrame","Animation","animationPreview","PreviewFullScreen","fpsRange","fpsLabel","btnFullScreen","animatinTime","startAnimation","fullScreen","requestFullscreen","webkitrequestFullscreen","webkitRequestFullscreen","mozRequestFullscreen","mozRequestFullScreen","parse","localStorage","getItem","tools","savePiskel","framesAnimation","onbeforeunload","setItem"],"mappings":"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","file":"app.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 7);\n","\"use strict\";\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function (useSourceMap) {\n  var list = []; // return the list of modules as css string\n\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = cssWithMappingToString(item, useSourceMap);\n\n      if (item[2]) {\n        return '@media ' + item[2] + '{' + content + '}';\n      } else {\n        return content;\n      }\n    }).join('');\n  }; // import a list of modules into the list\n\n\n  list.i = function (modules, mediaQuery) {\n    if (typeof modules === 'string') {\n      modules = [[null, modules, '']];\n    }\n\n    var alreadyImportedModules = {};\n\n    for (var i = 0; i < this.length; i++) {\n      var id = this[i][0];\n\n      if (id != null) {\n        alreadyImportedModules[id] = true;\n      }\n    }\n\n    for (i = 0; i < modules.length; i++) {\n      var item = modules[i]; // skip already imported module\n      // this implementation is not 100% perfect for weird media query combinations\n      // when a module is imported multiple times with different media queries.\n      // I hope this will never occur (Hey this way we have smaller bundles)\n\n      if (item[0] == null || !alreadyImportedModules[item[0]]) {\n        if (mediaQuery && !item[2]) {\n          item[2] = mediaQuery;\n        } else if (mediaQuery) {\n          item[2] = '(' + item[2] + ') and (' + mediaQuery + ')';\n        }\n\n        list.push(item);\n      }\n    }\n  };\n\n  return list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n  var content = item[1] || '';\n  var cssMapping = item[3];\n\n  if (!cssMapping) {\n    return content;\n  }\n\n  if (useSourceMap && typeof btoa === 'function') {\n    var sourceMapping = toComment(cssMapping);\n    var sourceURLs = cssMapping.sources.map(function (source) {\n      return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */';\n    });\n    return [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n  }\n\n  return [content].join('\\n');\n} // Adapted from convert-source-map (MIT)\n\n\nfunction toComment(sourceMap) {\n  // eslint-disable-next-line no-undef\n  var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n  var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n  return '/*# ' + data + ' */';\n}","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n\nvar stylesInDom = {};\n\nvar\tmemoize = function (fn) {\n\tvar memo;\n\n\treturn function () {\n\t\tif (typeof memo === \"undefined\") memo = fn.apply(this, arguments);\n\t\treturn memo;\n\t};\n};\n\nvar isOldIE = memoize(function () {\n\t// Test for IE <= 9 as proposed by Browserhacks\n\t// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n\t// Tests for existence of standard globals is to allow style-loader\n\t// to operate correctly into non-standard environments\n\t// @see https://github.com/webpack-contrib/style-loader/issues/177\n\treturn window && document && document.all && !window.atob;\n});\n\nvar getTarget = function (target, parent) {\n  if (parent){\n    return parent.querySelector(target);\n  }\n  return document.querySelector(target);\n};\n\nvar getElement = (function (fn) {\n\tvar memo = {};\n\n\treturn function(target, parent) {\n                // If passing function in options, then use it for resolve \"head\" element.\n                // Useful for Shadow Root style i.e\n                // {\n                //   insertInto: function () { return document.querySelector(\"#foo\").shadowRoot }\n                // }\n                if (typeof target === 'function') {\n                        return target();\n                }\n                if (typeof memo[target] === \"undefined\") {\n\t\t\tvar styleTarget = getTarget.call(this, target, parent);\n\t\t\t// Special case to return head of iframe instead of iframe itself\n\t\t\tif (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n\t\t\t\ttry {\n\t\t\t\t\t// This will throw an exception if access to iframe is blocked\n\t\t\t\t\t// due to cross-origin restrictions\n\t\t\t\t\tstyleTarget = styleTarget.contentDocument.head;\n\t\t\t\t} catch(e) {\n\t\t\t\t\tstyleTarget = null;\n\t\t\t\t}\n\t\t\t}\n\t\t\tmemo[target] = styleTarget;\n\t\t}\n\t\treturn memo[target]\n\t};\n})();\n\nvar singleton = null;\nvar\tsingletonCounter = 0;\nvar\tstylesInsertedAtTop = [];\n\nvar\tfixUrls = require(\"./urls\");\n\nmodule.exports = function(list, options) {\n\tif (typeof DEBUG !== \"undefined\" && DEBUG) {\n\t\tif (typeof document !== \"object\") throw new Error(\"The style-loader cannot be used in a non-browser environment\");\n\t}\n\n\toptions = options || {};\n\n\toptions.attrs = typeof options.attrs === \"object\" ? options.attrs : {};\n\n\t// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n\t// tags it will allow on a page\n\tif (!options.singleton && typeof options.singleton !== \"boolean\") options.singleton = isOldIE();\n\n\t// By default, add <style> tags to the <head> element\n        if (!options.insertInto) options.insertInto = \"head\";\n\n\t// By default, add <style> tags to the bottom of the target\n\tif (!options.insertAt) options.insertAt = \"bottom\";\n\n\tvar styles = listToStyles(list, options);\n\n\taddStylesToDom(styles, options);\n\n\treturn function update (newList) {\n\t\tvar mayRemove = [];\n\n\t\tfor (var i = 0; i < styles.length; i++) {\n\t\t\tvar item = styles[i];\n\t\t\tvar domStyle = stylesInDom[item.id];\n\n\t\t\tdomStyle.refs--;\n\t\t\tmayRemove.push(domStyle);\n\t\t}\n\n\t\tif(newList) {\n\t\t\tvar newStyles = listToStyles(newList, options);\n\t\t\taddStylesToDom(newStyles, options);\n\t\t}\n\n\t\tfor (var i = 0; i < mayRemove.length; i++) {\n\t\t\tvar domStyle = mayRemove[i];\n\n\t\t\tif(domStyle.refs === 0) {\n\t\t\t\tfor (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();\n\n\t\t\t\tdelete stylesInDom[domStyle.id];\n\t\t\t}\n\t\t}\n\t};\n};\n\nfunction addStylesToDom (styles, options) {\n\tfor (var i = 0; i < styles.length; i++) {\n\t\tvar item = styles[i];\n\t\tvar domStyle = stylesInDom[item.id];\n\n\t\tif(domStyle) {\n\t\t\tdomStyle.refs++;\n\n\t\t\tfor(var j = 0; j < domStyle.parts.length; j++) {\n\t\t\t\tdomStyle.parts[j](item.parts[j]);\n\t\t\t}\n\n\t\t\tfor(; j < item.parts.length; j++) {\n\t\t\t\tdomStyle.parts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\t\t} else {\n\t\t\tvar parts = [];\n\n\t\t\tfor(var j = 0; j < item.parts.length; j++) {\n\t\t\t\tparts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\n\t\t\tstylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};\n\t\t}\n\t}\n}\n\nfunction listToStyles (list, options) {\n\tvar styles = [];\n\tvar newStyles = {};\n\n\tfor (var i = 0; i < list.length; i++) {\n\t\tvar item = list[i];\n\t\tvar id = options.base ? item[0] + options.base : item[0];\n\t\tvar css = item[1];\n\t\tvar media = item[2];\n\t\tvar sourceMap = item[3];\n\t\tvar part = {css: css, media: media, sourceMap: sourceMap};\n\n\t\tif(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]});\n\t\telse newStyles[id].parts.push(part);\n\t}\n\n\treturn styles;\n}\n\nfunction insertStyleElement (options, style) {\n\tvar target = getElement(options.insertInto)\n\n\tif (!target) {\n\t\tthrow new Error(\"Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.\");\n\t}\n\n\tvar lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];\n\n\tif (options.insertAt === \"top\") {\n\t\tif (!lastStyleElementInsertedAtTop) {\n\t\t\ttarget.insertBefore(style, target.firstChild);\n\t\t} else if (lastStyleElementInsertedAtTop.nextSibling) {\n\t\t\ttarget.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);\n\t\t} else {\n\t\t\ttarget.appendChild(style);\n\t\t}\n\t\tstylesInsertedAtTop.push(style);\n\t} else if (options.insertAt === \"bottom\") {\n\t\ttarget.appendChild(style);\n\t} else if (typeof options.insertAt === \"object\" && options.insertAt.before) {\n\t\tvar nextSibling = getElement(options.insertAt.before, target);\n\t\ttarget.insertBefore(style, nextSibling);\n\t} else {\n\t\tthrow new Error(\"[Style Loader]\\n\\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\\n Must be 'top', 'bottom', or Object.\\n (https://github.com/webpack-contrib/style-loader#insertat)\\n\");\n\t}\n}\n\nfunction removeStyleElement (style) {\n\tif (style.parentNode === null) return false;\n\tstyle.parentNode.removeChild(style);\n\n\tvar idx = stylesInsertedAtTop.indexOf(style);\n\tif(idx >= 0) {\n\t\tstylesInsertedAtTop.splice(idx, 1);\n\t}\n}\n\nfunction createStyleElement (options) {\n\tvar style = document.createElement(\"style\");\n\n\tif(options.attrs.type === undefined) {\n\t\toptions.attrs.type = \"text/css\";\n\t}\n\n\tif(options.attrs.nonce === undefined) {\n\t\tvar nonce = getNonce();\n\t\tif (nonce) {\n\t\t\toptions.attrs.nonce = nonce;\n\t\t}\n\t}\n\n\taddAttrs(style, options.attrs);\n\tinsertStyleElement(options, style);\n\n\treturn style;\n}\n\nfunction createLinkElement (options) {\n\tvar link = document.createElement(\"link\");\n\n\tif(options.attrs.type === undefined) {\n\t\toptions.attrs.type = \"text/css\";\n\t}\n\toptions.attrs.rel = \"stylesheet\";\n\n\taddAttrs(link, options.attrs);\n\tinsertStyleElement(options, link);\n\n\treturn link;\n}\n\nfunction addAttrs (el, attrs) {\n\tObject.keys(attrs).forEach(function (key) {\n\t\tel.setAttribute(key, attrs[key]);\n\t});\n}\n\nfunction getNonce() {\n\tif (typeof __webpack_nonce__ === 'undefined') {\n\t\treturn null;\n\t}\n\n\treturn __webpack_nonce__;\n}\n\nfunction addStyle (obj, options) {\n\tvar style, update, remove, result;\n\n\t// If a transform function was defined, run it on the css\n\tif (options.transform && obj.css) {\n\t    result = typeof options.transform === 'function'\n\t\t ? options.transform(obj.css) \n\t\t : options.transform.default(obj.css);\n\n\t    if (result) {\n\t    \t// If transform returns a value, use that instead of the original css.\n\t    \t// This allows running runtime transformations on the css.\n\t    \tobj.css = result;\n\t    } else {\n\t    \t// If the transform function returns a falsy value, don't add this css.\n\t    \t// This allows conditional loading of css\n\t    \treturn function() {\n\t    \t\t// noop\n\t    \t};\n\t    }\n\t}\n\n\tif (options.singleton) {\n\t\tvar styleIndex = singletonCounter++;\n\n\t\tstyle = singleton || (singleton = createStyleElement(options));\n\n\t\tupdate = applyToSingletonTag.bind(null, style, styleIndex, false);\n\t\tremove = applyToSingletonTag.bind(null, style, styleIndex, true);\n\n\t} else if (\n\t\tobj.sourceMap &&\n\t\ttypeof URL === \"function\" &&\n\t\ttypeof URL.createObjectURL === \"function\" &&\n\t\ttypeof URL.revokeObjectURL === \"function\" &&\n\t\ttypeof Blob === \"function\" &&\n\t\ttypeof btoa === \"function\"\n\t) {\n\t\tstyle = createLinkElement(options);\n\t\tupdate = updateLink.bind(null, style, options);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\n\t\t\tif(style.href) URL.revokeObjectURL(style.href);\n\t\t};\n\t} else {\n\t\tstyle = createStyleElement(options);\n\t\tupdate = applyToTag.bind(null, style);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\t\t};\n\t}\n\n\tupdate(obj);\n\n\treturn function updateStyle (newObj) {\n\t\tif (newObj) {\n\t\t\tif (\n\t\t\t\tnewObj.css === obj.css &&\n\t\t\t\tnewObj.media === obj.media &&\n\t\t\t\tnewObj.sourceMap === obj.sourceMap\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tupdate(obj = newObj);\n\t\t} else {\n\t\t\tremove();\n\t\t}\n\t};\n}\n\nvar replaceText = (function () {\n\tvar textStore = [];\n\n\treturn function (index, replacement) {\n\t\ttextStore[index] = replacement;\n\n\t\treturn textStore.filter(Boolean).join('\\n');\n\t};\n})();\n\nfunction applyToSingletonTag (style, index, remove, obj) {\n\tvar css = remove ? \"\" : obj.css;\n\n\tif (style.styleSheet) {\n\t\tstyle.styleSheet.cssText = replaceText(index, css);\n\t} else {\n\t\tvar cssNode = document.createTextNode(css);\n\t\tvar childNodes = style.childNodes;\n\n\t\tif (childNodes[index]) style.removeChild(childNodes[index]);\n\n\t\tif (childNodes.length) {\n\t\t\tstyle.insertBefore(cssNode, childNodes[index]);\n\t\t} else {\n\t\t\tstyle.appendChild(cssNode);\n\t\t}\n\t}\n}\n\nfunction applyToTag (style, obj) {\n\tvar css = obj.css;\n\tvar media = obj.media;\n\n\tif(media) {\n\t\tstyle.setAttribute(\"media\", media)\n\t}\n\n\tif(style.styleSheet) {\n\t\tstyle.styleSheet.cssText = css;\n\t} else {\n\t\twhile(style.firstChild) {\n\t\t\tstyle.removeChild(style.firstChild);\n\t\t}\n\n\t\tstyle.appendChild(document.createTextNode(css));\n\t}\n}\n\nfunction updateLink (link, options, obj) {\n\tvar css = obj.css;\n\tvar sourceMap = obj.sourceMap;\n\n\t/*\n\t\tIf convertToAbsoluteUrls isn't defined, but sourcemaps are enabled\n\t\tand there is no publicPath defined then lets turn convertToAbsoluteUrls\n\t\ton by default.  Otherwise default to the convertToAbsoluteUrls option\n\t\tdirectly\n\t*/\n\tvar autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;\n\n\tif (options.convertToAbsoluteUrls || autoFixUrls) {\n\t\tcss = fixUrls(css);\n\t}\n\n\tif (sourceMap) {\n\t\t// http://stackoverflow.com/a/26603875\n\t\tcss += \"\\n/*# sourceMappingURL=data:application/json;base64,\" + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + \" */\";\n\t}\n\n\tvar blob = new Blob([css], { type: \"text/css\" });\n\n\tvar oldSrc = link.href;\n\n\tlink.href = URL.createObjectURL(blob);\n\n\tif(oldSrc) URL.revokeObjectURL(oldSrc);\n}\n","\nvar content = require(\"!!../node_modules/css-loader/dist/cjs.js!./normalize.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../node_modules/css-loader/dist/cjs.js!./normalize.css\", function() {\n\t\tvar newContent = require(\"!!../node_modules/css-loader/dist/cjs.js!./normalize.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","exports = module.exports = require(\"../node_modules/css-loader/dist/runtime/api.js\")(false);\n// Module\nexports.push([module.id, \"/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\\r\\n\\r\\n/* Document\\r\\n   ========================================================================== */\\r\\n\\r\\n/**\\r\\n * 1. Correct the line height in all browsers.\\r\\n * 2. Prevent adjustments of font size after orientation changes in iOS.\\r\\n */\\r\\n\\r\\n html {\\r\\n    line-height: 1.15; /* 1 */\\r\\n    -webkit-text-size-adjust: 100%; /* 2 */\\r\\n  }\\r\\n  \\r\\n  /* Sections\\r\\n     ========================================================================== */\\r\\n  \\r\\n  /**\\r\\n   * Remove the margin in all browsers.\\r\\n   */\\r\\n  \\r\\n  body {\\r\\n    margin: 0;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Render the `main` element consistently in IE.\\r\\n   */\\r\\n  \\r\\n  main {\\r\\n    display: block;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Correct the font size and margin on `h1` elements within `section` and\\r\\n   * `article` contexts in Chrome, Firefox, and Safari.\\r\\n   */\\r\\n  \\r\\n  h1 {\\r\\n    font-size: 2em;\\r\\n    margin: 0.67em 0;\\r\\n  }\\r\\n  \\r\\n  /* Grouping content\\r\\n     ========================================================================== */\\r\\n  \\r\\n  /**\\r\\n   * 1. Add the correct box sizing in Firefox.\\r\\n   * 2. Show the overflow in Edge and IE.\\r\\n   */\\r\\n  \\r\\n  hr {\\r\\n    box-sizing: content-box; /* 1 */\\r\\n    height: 0; /* 1 */\\r\\n    overflow: visible; /* 2 */\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * 1. Correct the inheritance and scaling of font size in all browsers.\\r\\n   * 2. Correct the odd `em` font sizing in all browsers.\\r\\n   */\\r\\n  \\r\\n  pre {\\r\\n    font-family: monospace, monospace; /* 1 */\\r\\n    font-size: 1em; /* 2 */\\r\\n  }\\r\\n  \\r\\n  /* Text-level semantics\\r\\n     ========================================================================== */\\r\\n  \\r\\n  /**\\r\\n   * Remove the gray background on active links in IE 10.\\r\\n   */\\r\\n  \\r\\n  a {\\r\\n    background-color: transparent;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * 1. Remove the bottom border in Chrome 57-\\r\\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\\r\\n   */\\r\\n  \\r\\n  abbr[title] {\\r\\n    border-bottom: none; /* 1 */\\r\\n    text-decoration: underline; /* 2 */\\r\\n    text-decoration: underline dotted; /* 2 */\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Add the correct font weight in Chrome, Edge, and Safari.\\r\\n   */\\r\\n  \\r\\n  b,\\r\\n  strong {\\r\\n    font-weight: bolder;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * 1. Correct the inheritance and scaling of font size in all browsers.\\r\\n   * 2. Correct the odd `em` font sizing in all browsers.\\r\\n   */\\r\\n  \\r\\n  code,\\r\\n  kbd,\\r\\n  samp {\\r\\n    font-family: monospace, monospace; /* 1 */\\r\\n    font-size: 1em; /* 2 */\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Add the correct font size in all browsers.\\r\\n   */\\r\\n  \\r\\n  small {\\r\\n    font-size: 80%;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Prevent `sub` and `sup` elements from affecting the line height in\\r\\n   * all browsers.\\r\\n   */\\r\\n  \\r\\n  sub,\\r\\n  sup {\\r\\n    font-size: 75%;\\r\\n    line-height: 0;\\r\\n    position: relative;\\r\\n    vertical-align: baseline;\\r\\n  }\\r\\n  \\r\\n  sub {\\r\\n    bottom: -0.25em;\\r\\n  }\\r\\n  \\r\\n  sup {\\r\\n    top: -0.5em;\\r\\n  }\\r\\n  \\r\\n  /* Embedded content\\r\\n     ========================================================================== */\\r\\n  \\r\\n  /**\\r\\n   * Remove the border on images inside links in IE 10.\\r\\n   */\\r\\n  \\r\\n  img {\\r\\n    border-style: none;\\r\\n  }\\r\\n  \\r\\n  /* Forms\\r\\n     ========================================================================== */\\r\\n  \\r\\n  /**\\r\\n   * 1. Change the font styles in all browsers.\\r\\n   * 2. Remove the margin in Firefox and Safari.\\r\\n   */\\r\\n  \\r\\n  button,\\r\\n  input,\\r\\n  optgroup,\\r\\n  select,\\r\\n  textarea {\\r\\n    font-family: inherit; /* 1 */\\r\\n    font-size: 100%; /* 1 */\\r\\n    line-height: 1.15; /* 1 */\\r\\n    margin: 0; /* 2 */\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Show the overflow in IE.\\r\\n   * 1. Show the overflow in Edge.\\r\\n   */\\r\\n  \\r\\n  button,\\r\\n  input { /* 1 */\\r\\n    overflow: visible;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\\r\\n   * 1. Remove the inheritance of text transform in Firefox.\\r\\n   */\\r\\n  \\r\\n  button,\\r\\n  select { /* 1 */\\r\\n    text-transform: none;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Correct the inability to style clickable types in iOS and Safari.\\r\\n   */\\r\\n  \\r\\n  button,\\r\\n  [type=\\\"button\\\"],\\r\\n  [type=\\\"reset\\\"],\\r\\n  [type=\\\"submit\\\"] {\\r\\n    -webkit-appearance: button;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Remove the inner border and padding in Firefox.\\r\\n   */\\r\\n  \\r\\n  button::-moz-focus-inner,\\r\\n  [type=\\\"button\\\"]::-moz-focus-inner,\\r\\n  [type=\\\"reset\\\"]::-moz-focus-inner,\\r\\n  [type=\\\"submit\\\"]::-moz-focus-inner {\\r\\n    border-style: none;\\r\\n    padding: 0;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Restore the focus styles unset by the previous rule.\\r\\n   */\\r\\n  \\r\\n  button:-moz-focusring,\\r\\n  [type=\\\"button\\\"]:-moz-focusring,\\r\\n  [type=\\\"reset\\\"]:-moz-focusring,\\r\\n  [type=\\\"submit\\\"]:-moz-focusring {\\r\\n    outline: 1px dotted ButtonText;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Correct the padding in Firefox.\\r\\n   */\\r\\n  \\r\\n  fieldset {\\r\\n    padding: 0.35em 0.75em 0.625em;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * 1. Correct the text wrapping in Edge and IE.\\r\\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\\r\\n   * 3. Remove the padding so developers are not caught out when they zero out\\r\\n   *    `fieldset` elements in all browsers.\\r\\n   */\\r\\n  \\r\\n  legend {\\r\\n    box-sizing: border-box; /* 1 */\\r\\n    color: inherit; /* 2 */\\r\\n    display: table; /* 1 */\\r\\n    max-width: 100%; /* 1 */\\r\\n    padding: 0; /* 3 */\\r\\n    white-space: normal; /* 1 */\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\\r\\n   */\\r\\n  \\r\\n  progress {\\r\\n    vertical-align: baseline;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Remove the default vertical scrollbar in IE 10+.\\r\\n   */\\r\\n  \\r\\n  textarea {\\r\\n    overflow: auto;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * 1. Add the correct box sizing in IE 10.\\r\\n   * 2. Remove the padding in IE 10.\\r\\n   */\\r\\n  \\r\\n  [type=\\\"checkbox\\\"],\\r\\n  [type=\\\"radio\\\"] {\\r\\n    box-sizing: border-box; /* 1 */\\r\\n    padding: 0; /* 2 */\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Correct the cursor style of increment and decrement buttons in Chrome.\\r\\n   */\\r\\n  \\r\\n  [type=\\\"number\\\"]::-webkit-inner-spin-button,\\r\\n  [type=\\\"number\\\"]::-webkit-outer-spin-button {\\r\\n    height: auto;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * 1. Correct the odd appearance in Chrome and Safari.\\r\\n   * 2. Correct the outline style in Safari.\\r\\n   */\\r\\n  \\r\\n  [type=\\\"search\\\"] {\\r\\n    -webkit-appearance: textfield; /* 1 */\\r\\n    outline-offset: -2px; /* 2 */\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Remove the inner padding in Chrome and Safari on macOS.\\r\\n   */\\r\\n  \\r\\n  [type=\\\"search\\\"]::-webkit-search-decoration {\\r\\n    -webkit-appearance: none;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * 1. Correct the inability to style clickable types in iOS and Safari.\\r\\n   * 2. Change font properties to `inherit` in Safari.\\r\\n   */\\r\\n  \\r\\n  ::-webkit-file-upload-button {\\r\\n    -webkit-appearance: button; /* 1 */\\r\\n    font: inherit; /* 2 */\\r\\n  }\\r\\n  \\r\\n  /* Interactive\\r\\n     ========================================================================== */\\r\\n  \\r\\n  /*\\r\\n   * Add the correct display in Edge, IE 10+, and Firefox.\\r\\n   */\\r\\n  \\r\\n  details {\\r\\n    display: block;\\r\\n  }\\r\\n  \\r\\n  /*\\r\\n   * Add the correct display in all browsers.\\r\\n   */\\r\\n  \\r\\n  summary {\\r\\n    display: list-item;\\r\\n  }\\r\\n  \\r\\n  /* Misc\\r\\n     ========================================================================== */\\r\\n  \\r\\n  /**\\r\\n   * Add the correct display in IE 10+.\\r\\n   */\\r\\n  \\r\\n  template {\\r\\n    display: none;\\r\\n  }\\r\\n  \\r\\n  /**\\r\\n   * Add the correct display in IE 10.\\r\\n   */\\r\\n  \\r\\n  [hidden] {\\r\\n    display: none;\\r\\n  }\", \"\"]);\n\n","\n/**\n * When source maps are enabled, `style-loader` uses a link element with a data-uri to\n * embed the css on the page. This breaks all relative urls because now they are relative to a\n * bundle instead of the current page.\n *\n * One solution is to only use full urls, but that may be impossible.\n *\n * Instead, this function \"fixes\" the relative urls to be absolute according to the current page location.\n *\n * A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.\n *\n */\n\nmodule.exports = function (css) {\n  // get current location\n  var location = typeof window !== \"undefined\" && window.location;\n\n  if (!location) {\n    throw new Error(\"fixUrls requires window.location\");\n  }\n\n\t// blank or null?\n\tif (!css || typeof css !== \"string\") {\n\t  return css;\n  }\n\n  var baseUrl = location.protocol + \"//\" + location.host;\n  var currentDir = baseUrl + location.pathname.replace(/\\/[^\\/]*$/, \"/\");\n\n\t// convert each url(...)\n\t/*\n\tThis regular expression is just a way to recursively match brackets within\n\ta string.\n\n\t /url\\s*\\(  = Match on the word \"url\" with any whitespace after it and then a parens\n\t   (  = Start a capturing group\n\t     (?:  = Start a non-capturing group\n\t         [^)(]  = Match anything that isn't a parentheses\n\t         |  = OR\n\t         \\(  = Match a start parentheses\n\t             (?:  = Start another non-capturing groups\n\t                 [^)(]+  = Match anything that isn't a parentheses\n\t                 |  = OR\n\t                 \\(  = Match a start parentheses\n\t                     [^)(]*  = Match anything that isn't a parentheses\n\t                 \\)  = Match a end parentheses\n\t             )  = End Group\n              *\\) = Match anything and then a close parens\n          )  = Close non-capturing group\n          *  = Match anything\n       )  = Close capturing group\n\t \\)  = Match a close parens\n\n\t /gi  = Get all matches, not the first.  Be case insensitive.\n\t */\n\tvar fixedCss = css.replace(/url\\s*\\(((?:[^)(]|\\((?:[^)(]+|\\([^)(]*\\))*\\))*)\\)/gi, function(fullMatch, origUrl) {\n\t\t// strip quotes (if they exist)\n\t\tvar unquotedOrigUrl = origUrl\n\t\t\t.trim()\n\t\t\t.replace(/^\"(.*)\"$/, function(o, $1){ return $1; })\n\t\t\t.replace(/^'(.*)'$/, function(o, $1){ return $1; });\n\n\t\t// already a full url? no change\n\t\tif (/^(#|data:|http:\\/\\/|https:\\/\\/|file:\\/\\/\\/|\\s*$)/i.test(unquotedOrigUrl)) {\n\t\t  return fullMatch;\n\t\t}\n\n\t\t// convert the url to a full url\n\t\tvar newUrl;\n\n\t\tif (unquotedOrigUrl.indexOf(\"//\") === 0) {\n\t\t  \t//TODO: should we add protocol?\n\t\t\tnewUrl = unquotedOrigUrl;\n\t\t} else if (unquotedOrigUrl.indexOf(\"/\") === 0) {\n\t\t\t// path should be relative to the base url\n\t\t\tnewUrl = baseUrl + unquotedOrigUrl; // already starts with '/'\n\t\t} else {\n\t\t\t// path should be relative to current directory\n\t\t\tnewUrl = currentDir + unquotedOrigUrl.replace(/^\\.\\//, \"\"); // Strip leading './'\n\t\t}\n\n\t\t// send back the fixed url(...)\n\t\treturn \"url(\" + JSON.stringify(newUrl) + \")\";\n\t});\n\n\t// send back the fixed css\n\treturn fixedCss;\n};\n","\nvar content = require(\"!!../node_modules/css-loader/dist/cjs.js!./style.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../node_modules/css-loader/dist/cjs.js!./style.css\", function() {\n\t\tvar newContent = require(\"!!../node_modules/css-loader/dist/cjs.js!./style.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","exports = module.exports = require(\"../node_modules/css-loader/dist/runtime/api.js\")(false);\n// Module\nexports.push([module.id, \":root {\\n  --def-font-color: #8f9d9f;\\n  --bgcolor: #8b9296;\\n  --hbg: #192227;\\n  --tolbarbg: #192227;\\n  --turquoise: #1abc9c;\\n  --emerland: #2ecc71;\\n  --peterriver: #3498db;\\n  --amethyst: #9b59b6;\\n  --wetasphalt: #34495e;\\n  --sunflower: #f1c40f;\\n  --carrot: #e67e22;\\n  --alizarin: #e74c3c;\\n  --clouds: #ecf0f1;\\n  --concrete: #ecf0f1;\\n}\\n\\n* {\\n  box-sizing: border-box;\\n}\\n\\nbody {\\n  font-family: 'Roboto', sans-serif;\\n  color: white;\\n  background-color: var(--bgcolor);\\n  font-size: 16px;\\n}\\n\\n.wrapper-piskel-clon-edit {\\n  flex-direction: column;\\n  height: 100vh;\\n  display: flex;\\n  overflow: hidden;\\n}\\n\\nul {\\n  list-style: none;\\n  padding: 0;\\n}\\n\\n.header {\\n  color: var(--sunflower);\\n  height: 50px;\\n  display: flex;\\n  align-items: center;\\n  background-color: var(--hbg);\\n  border-bottom: 1px solid #000;\\n}\\n\\n.logo {\\n  margin-left: 10px;\\n}\\n\\n.main {\\n  display: flex;\\n  flex-grow: 1;\\n}\\n\\n.animated-preview, .toolbar-layers, .toolbar {\\n  width: 155px;\\n  display: flex;\\n  flex-direction: column;\\n  background-color: var(--tolbarbg);\\n  border-right: 1px solid #000;\\n}\\n\\n.toolbar {\\n  border-right: none;\\n}\\n\\n.pen-size {\\n  display: flex;\\n}\\n\\n.pen-size__item {\\n  height: 25px;\\n  width: 25px;\\n  border: 3px solid var(--wetasphalt);\\n  margin-right: 5px;\\n}\\n\\n.activ-tool {\\n  border: 3px solid var(--sunflower);\\n}\\n\\n.toolbar__item {\\n  padding: 0 5px;\\n}\\n\\n.tools {\\n  display: flex;\\n  flex-wrap: wrap;\\n}\\n\\n.tools__item {\\n  color: white;\\n  font-size: 1.5rem;\\n  display: flex;\\n  height: 42px;\\n  width: 42px;\\n  align-items: center;\\n  justify-content: center;\\n  background-color: var(--wetasphalt);\\n  margin: 0 5px 5px 0;\\n}\\n\\n.disable-tool {\\n  color: var(--def-font-color);\\n}\\n\\n.color-palette {\\n  display: flex;\\n  flex-direction: column;\\n}\\n\\n.palette {\\n  display: flex;\\n  flex-wrap: wrap;\\n}\\n\\n.palette-color {\\n  display: block;\\n  height: 32px;\\n  width: 32px;\\n  border-radius: 50%;\\n  margin: 0 15px 10px 0;\\n}\\n\\n.cur-pev-color {\\n  position: relative;\\n}\\n\\n.cur-pev-color__item {\\n  display: flex;\\n  align-items: center;\\n  position: absolute;\\n}\\n\\n.current-color {\\n  z-index: 1;\\n}\\n\\n.prev-color {\\n  top: 16px;\\n  left: 8px;\\n}\\n\\ninput[type='color'] {\\n  -webkit-appearance: none;\\n  border: none;\\n  width: 32px;\\n  height: 32px;\\n  border-radius: 50%;\\n  padding: 0;\\n  margin-right: 5px;\\n}\\n\\ninput[type='color']::-webkit-color-swatch-wrapper {\\n  padding: 0;\\n}\\n\\ninput[type='color']::-webkit-color-swatch {\\n  border: none;\\n  border-radius: 50%;\\n}\\n\\ninput[type='color']:focus {\\n  outline: none;\\n  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1);\\n}\\n\\n.circle {\\n  border-radius: 50%;\\n}\\n\\n.turquoise {\\n  background-color: var(--turquoise);\\n}\\n\\n.emerland {\\n  background-color: var(--emerland);\\n}\\n\\n.peterriver {\\n  background-color: var(--peterriver);\\n}\\n\\n.amethyst {\\n  background-color: var(--amethyst);\\n}\\n\\n.wetasphalt {\\n  background-color: var(--wetasphalt);\\n}\\n\\n.sunflower {\\n  background-color: var(--sunflower);\\n}\\n\\n.carrot {\\n  background-color: var(--carrot);\\n}\\n\\n.alizarin {\\n  background-color: var(--alizarin);\\n}\\n\\n.clouds {\\n  background-color: var(--clouds);\\n}\\n\\n.toolbar-layers {\\n  align-items: center;\\n  overflow-y: scroll;\\n  overflow-x: hidden;\\n  height: 100%;\\n}\\n\\n.canvas-wrapper {\\n  flex-grow: 2;\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n}\\n\\n.animated-preview {\\n  width: 300px;\\n  padding-top: 15px;\\n  display: flex;\\n  align-items: center;\\n  border-right: none;\\n  border-left: 1px solid #000;\\n}\\n\\n.layers__item {\\n  image-rendering: pixelated;\\n  margin-top: 15px;\\n  width: 120px;\\n  height: 120px;\\n  border: 3px solid var(--wetasphalt);\\n  border-radius: 5px;\\n  position: relative;\\n  background-size: cover;\\n}\\n\\n.activ-layer {\\n  border: 3px solid var(--sunflower);\\n}\\n\\n.layer-control {\\n  color: var(--def-font-color);\\n  position: absolute;\\n  bottom: 3px;\\n}\\n\\n.layer-control:hover {\\n  color: var(--clouds);\\n  cursor: pointer;\\n}\\n\\n.clone {\\n  left: 3px;\\n  visibility: hidden;\\n}\\n\\n.trash {\\n  right: 3px;\\n  visibility: hidden;\\n}\\n\\n.layers__item:hover .clone, .layers__item:hover .trash {\\n  visibility: visible;\\n}\\n\\n.layers__new {\\n  margin-top: 15px;\\n  padding: 5px;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  border: 3px solid var(--wetasphalt);\\n  border-radius: 5px;\\n  width: 120px;\\n}\\n\\n.layers__new .fas {\\n  font-size: 2rem;\\n  margin-right: 5px;\\n}\\n\\n.layers__new:hover {\\n  border-color: var(--sunflower);\\n}\\n\\n.canvas-background {\\n  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEVMTExVVVUnhsEkAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=');\\n}\\n\\n.layers .canvas-background {\\n  border-radius: 5px;\\n}\\n\\n.animated-preview__canvas {\\n  width: 200px;\\n  height: 200px;\\n  image-rendering: pixelated;\\n  border: 3px solid var(--wetasphalt);\\n  border-bottom: none;\\n  background-size: cover;\\n}\\n\\n.main-canvas {\\n  transform-origin: 0 0;\\n  transform: scale(20, 20);\\n  image-rendering: pixelated;\\n  box-sizing: content-box;\\n  cursor: url(\\\"https://img.icons8.com/cotton/24/000000/edit.png\\\") 10 80, auto;\\n}\\n\\n.canvas-wrapper .canvas-background {\\n  width: 640px;\\n  height: 640px;\\n}\\n\\n.layers__new:hover {\\n  cursor: pointer;\\n}\\n\\n.fps-range {\\n  -webkit-appearance: none;\\n  width: 200px;\\n  background: var(--wetasphalt);\\n  cursor: pointer;\\n}\\n\\n.fps-range::-webkit-slider-thumb {\\n  -webkit-appearance: none;\\n  width: 20px;\\n  height: 20px;\\n  background: var(--sunflower);\\n  cursor: pointer;\\n  transition: .1s;\\n}\\n\\n.canvas-info {\\n  color: var(--sunflower);\\n  font-size: 0.8rem;\\n  position: absolute;\\n  bottom: 10px;\\n  align-self: flex-start;\\n  margin: 10px 0 0 10px;\\n}\\n\\n.fullScreen:fullscreen {\\n  background: var(--bgcolor);\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n}\\n\\n.fullScreen:fullscreen .animated-preview__canvas {\\n  width: 100vh;\\n  height: 100vh;\\n  border: 3px solid var(--sunflower);\\n}\\n\\n.openFullScreen {\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  font-size: 70px;\\n  color: var(--sunflower);\\n  height: 100%;\\n  width: 100%;\\n  visibility: hidden;\\n  background: rgba(255, 255, 255, 0.3);\\n}\\n\\n.animated-preview__canvas:hover .openFullScreen {\\n  visibility: visible;\\n  cursor: pointer;\\n}\\n\\n.fullScreen:fullscreen .animated-preview__canvas:hover .openFullScreen {\\n  visibility: hidden;\\n}\\n\\n.toolbar-layers:hover {\\n  overflow-y: scroll;\\n  -webkit-overflow-scrolling: touch;\\n  -moz-overflow-scrolling: touch;\\n  -ms-overflow-scrolling: touch;\\n  -o-overflow-scrolling: touch;\\n}\\n\\n.toolbar-layers::-webkit-scrollbar {\\n  -webkit-appearance: none;\\n  width: 7px;\\n}\\n\\n.toolbar-layers::-webkit-scrollbar-thumb {\\n  border-radius: 2px;\\n  background-color: var(--wetasphalt);\\n}\\n\\n[draggable] {\\n  -moz-user-select: none;\\n  -khtml-user-select: none;\\n  -webkit-user-select: none;\\n  user-select: none;\\n  -khtml-user-drag: element;\\n  -webkit-user-drag: element;\\n}\\n\\n.dragn-drop {\\n  cursor: move;\\n}\\n\\n.hovered {\\n  border: 3px dashed;\\n}\\n\\n.hold {\\n  border: 3px dashed var(--sunflower);\\n}\\n\\n.save-piskel {\\n  width: 200px;\\n}\\n\\n.btn {\\n  display: block;\\n  margin-top: 15px;\\n  color: var(--clouds);\\n  text-decoration: none;\\n  user-select: none;\\n  background: var(--wetasphalt);\\n  padding: .7em 1.5em;\\n  outline: none;\\n  border: none;\\n  min-width: 200px;\\n  cursor: pointer;\\n}\\n\\n.btn .far {\\n  margin-right: 5px;\\n  font-size: 1.5rem;\\n}\\n\\n.btn:hover {\\n  background: var(--sunflower);\\n  color: var(--bgcolor);\\n}\\n\\n/*  landing page */\\n\\n.screenshot {\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  height: 500px;\\n  background-color: var(--wetasphalt);\\n}\\n\\n.description {\\n  margin-right: 150px;\\n}\\n\\n.description-caption {\\n  font-size: 2.5rem;\\n  max-width: 600px;\\n  ;\\n}\\n\\n.link {\\n  margin-top: 15px;\\n  padding: .7em 1.5em;\\n  font-weight: bold;\\n  font-size: 1.5rem;\\n  text-decoration: none;\\n  user-select: none;\\n  color: var(--clouds);\\n  background: var(--sunflower);\\n  outline: none;\\n  border: none;\\n  cursor: pointer;\\n}\\n\\n.create-sprite:hover {\\n  background: var(--alizarin);\\n}\\n\\n.task-link:hover {\\n  background: var(--emerland);\\n}\\n\\n.wrapper {\\n  display: flex;\\n}\\n\\n.example, .functionlity {\\n  display: flex;\\n  flex-direction: column;\\n  align-items: center;\\n  font-size: 1.5rem;\\n}\\n\\n.example {\\n  color: var(--clouds);\\n  background-color: var(--turquoise);\\n  width: 30%;\\n}\\n\\n.example-img {\\n  border: 1px solid var(--wetasphalt);\\n  border-radius: 5px;\\n  background-color: var(--wetasphalt);\\n  margin: 5px;\\n}\\n\\n.functionlity {\\n  color: var(--clouds);\\n  background-color: var(--alizarin);\\n  width: 70%;\\n  padding-left: 10px;\\n}\\n\\n.functionality-list-item span {\\n  font-weight: bold;\\n  line-height: 2rem;\\n}\\n\\n.footer {\\n  display: flex;\\n  justify-content: center;\\n  font-size: 1.5rem;\\n}\\n\\n.footer-link {\\n  margin-top: 15px;\\n  text-decoration: none;\\n  color: var(--clouds);\\n}\\n\\n.footer-link:hover {\\n  color: var(--sunflower);\\n}\\n\", \"\"]);\n\n","export default class Tools {\n    constructor(state) {\n        this.state = state;\n    }\n\n    start() {\n        let isPenDrawing = false;\n        this.shortcutKeyTool();\n\n        document\n            .querySelector(`[data-tool=\"${this.state.curentTool}\"]`)\n            .classList.add('activ-tool');\n\n        const canvas = document.querySelector('.main-canvas');\n        const context = canvas.getContext('2d');\n\n        const curentColorInput = document.getElementById('color-input');\n        const prevColorMark = document.getElementById('prev-color-mark');\n        prevColorMark.style.backgroundColor = this.state.prevColor;\n\n        const tool = document.querySelector('.tools');\n        const palette = document.querySelector('.palette');\n\n        const canvasCurPosition = document.querySelector('.canvas-current-position');\n\n        context.fillStyle = this.state.curentColor;\n        context.strokeStyle = this.state.curentColor;\n        curentColorInput.value = this.state.curentColor;\n\n        let startX = 0; // coordinates start point to draw\n        let startY = 0;\n        const img = new Image();\n        // draw\n        canvas.addEventListener('mousedown', e => {\n            context.fillStyle = this.state.curentColor;\n            isPenDrawing = true;\n            const x = e.offsetX - 1;\n            const y = e.offsetY - 1;\n\n            switch (this.state.curentTool) {\n                case 'pen': {\n                    context.fillRect(x, y, 1, 1);\n                    break;\n                }\n                case 'eraser': {\n                    context.clearRect(x, y, 1, 1);\n                    break;\n                }\n                case 'color-picker': {\n                    const pixel = context.getImageData(x, y, 1, 1);\n                    if (pixel.data[3] / 255 !== 0) {\n                        let r = (+pixel.data[0]).toString(16);\n                        let g = (+pixel.data[1]).toString(16);\n                        let b = (+pixel.data[2]).toString(16);\n                        if (r.length === 1) r = `0${r}`;\n                        if (g.length === 1) g = `0${g}`;\n                        if (b.length === 1) b = `0${b}`;\n                        this.state.prevColor = this.state.curentColor;\n                        this.state.curentColor = `#${r}${g}${b}`;\n                        curentColorInput.value = this.state.curentColor;\n                        prevColorMark.style.backgroundColor = this.state.prevColor;\n                        context.fillStyle = this.state.curentColor;\n                        context.strokeStyle = this.state.curentColor;\n                    }\n                    break;\n                }\n                case 'lighten': {\n                    Tools.lighten(e, context, x, y);\n                    break;\n                }\n                case 'vertical-mirror': {\n                    context.fillRect(x, y, 1, 1);\n                    context.fillRect(canvas.width - x - 1, y, 1, 1);\n                    break;\n                }\n                case 'rectangle': {\n                    startX = x;\n                    startY = y;\n                    const index = document\n                        .querySelector('.activ-layer')\n                        .getAttribute('data-layer-num');\n                    img.src = this.state.frames[index].slice(5, -2);\n                    break;\n                }\n                default: // do nothing\n            }\n        });\n\n        canvas.addEventListener('mousemove', e => {\n            const x = e.offsetX - 1;\n            const y = e.offsetY - 1;\n            if (isPenDrawing) {\n                switch (this.state.curentTool) {\n                    case 'pen': {\n                        context.fillRect(x, y, 1, 1);\n                        break;\n                    }\n                    case 'eraser': {\n                        context.clearRect(x, y, 1, 1);\n                        break;\n                    }\n                    case 'vertical-mirror': {\n                        context.fillRect(x, y, 1, 1);\n                        context.fillRect(canvas.width - x - 1, y, 1, 1);\n                        break;\n                    }\n                    case 'rectangle': {\n                        context.clearRect(0, 0, 32, 32);\n                        context.drawImage(img, 0, 0);\n                        if (startX > x && startY > y) {\n                            context.fillRect(startX, startY + 1, 1, y - startY - 1);\n                            context.fillRect(startX + 1, startY, x - startX - 1, 1);\n                            context.fillRect(x, startY + 1, 1, y - startY - 1);\n                            context.fillRect(startX + 1, y, x - startX - 1, 1);\n                        } else {\n                            context.fillRect(startX, startY, 1, y - startY + 1);\n                            context.fillRect(startX, startY, x - startX + 1, 1);\n                            context.fillRect(x, startY, 1, y - startY + 1);\n                            context.fillRect(startX, y, x - startX + 1, 1);\n                        }\n                        break;\n                    }\n                    case 'lighten': {\n                        Tools.lighten(e, context, x, y);\n                        break;\n                    }\n                    default: // do nothing\n                }\n            }\n            canvasCurPosition.innerHTML = `${x + 1} : ${y + 1}`;\n        });\n\n        const endDraw = () => {\n            isPenDrawing = false;\n            const index = document.querySelector('.activ-layer').getAttribute('data-layer-num');\n            const url = `url('${canvas.toDataURL()}')`;\n            document.querySelector('.activ-layer').style.backgroundImage = url;\n            this.state.frames[index] = url;\n        };\n\n        canvas.addEventListener('mouseup', () => {\n            endDraw();\n        });\n\n        canvas.addEventListener('mouseout', () => {\n            endDraw();\n        });\n\n        // change tool\n        tool.addEventListener('click', e => {\n            if (!e.target.classList.contains('disable-tool')) {\n                this.state.curentTool = e.target.closest('.tools__item').getAttribute('data-tool');\n                document.querySelector('.activ-tool').classList.toggle('activ-tool');\n                e.target.closest('.tools__item').classList.toggle('activ-tool');\n            }\n        });\n\n        // work with color\n        function RGBToHex(rgb) {\n            const sep = rgb.indexOf(',') > -1 ? ',' : ' ';\n            const color = rgb\n                .substr(4)\n                .split(')')[0]\n                .split(sep);\n\n            let r = (+color[0]).toString(16);\n            let g = (+color[1]).toString(16);\n            let b = (+color[2]).toString(16);\n\n            if (r.length === 1) r = `0${r}`;\n            if (g.length === 1) g = `0${g}`;\n            if (b.length === 1) b = `0${b}`;\n\n            return `#${r}${g}${b}`;\n        }\n\n        //  color selection from palette\n        palette.addEventListener('click', e => {\n            if (e.target.matches('.palette-color')) {\n                this.state.prevColor = this.state.curentColor;\n                this.state.curentColor = RGBToHex(getComputedStyle(e.target).backgroundColor);\n\n                curentColorInput.value = this.state.curentColor;\n                prevColorMark.style.backgroundColor = this.state.prevColor;\n\n                context.fillStyle = this.state.curentColor;\n                context.strokeStyle = this.state.curentColor;\n            }\n        });\n\n        //  color selection from input type=color\n        curentColorInput.addEventListener(\n            'change',\n            e => {\n                this.state.prevColor = this.state.curentColor;\n                prevColorMark.style.backgroundColor = this.state.prevColor;\n                this.state.curentColor = e.target.value;\n                context.fillStyle = this.state.curentColor;\n                context.strokeStyle = this.state.curentColor;\n            },\n            false\n        );\n    }\n\n    static shadeColor(pixel, percent) {\n        let R = parseInt(pixel.data[0], 10);\n        let G = parseInt(pixel.data[1], 10);\n        let B = parseInt(pixel.data[2], 10);\n\n        R = parseInt((R * (100 + percent)) / 100, 10);\n        G = parseInt((G * (100 + percent)) / 100, 10);\n        B = parseInt((B * (100 + percent)) / 100, 10);\n\n        R = R < 255 ? R : 255;\n        G = G < 255 ? G : 255;\n        B = B < 255 ? B : 255;\n\n        const RR = R.toString(16).length === 1 ? `0${R.toString(16)}` : R.toString(16);\n        const GG = G.toString(16).length === 1 ? `0${G.toString(16)}` : G.toString(16);\n        const BB = B.toString(16).length === 1 ? `0${B.toString(16)}` : B.toString(16);\n\n        return `#${RR}${GG}${BB}`;\n    }\n\n    static lighten(event, context, x, y) {\n        const pixel = context.getImageData(x, y, 1, 1);\n        if (pixel.data[3] / 255 !== 0) {\n            setTimeout(() => {\n                if (event.ctrlKey) {\n                    // eslint-disable-next-line no-param-reassign\n                    context.fillStyle = Tools.shadeColor(pixel, -30);\n                } else {\n                    // eslint-disable-next-line no-param-reassign\n                    context.fillStyle = Tools.shadeColor(pixel, 30);\n                }\n                context.fillRect(x, y, 1, 1);\n            }, 100);\n        }\n    }\n\n    static shortcutChangeTool(self, name) {\n        if (!document.querySelector(`[data-tool=\"${name}\"]`).classList.contains('disable-tool')) {\n            // eslint-disable-next-line no-param-reassign\n            self.state.curentTool = name;\n            document.querySelector('.activ-tool').classList.toggle('activ-tool');\n            document\n                .querySelector(`[data-tool=\"${self.state.curentTool}\"]`)\n                .classList.toggle('activ-tool');\n        }\n    }\n\n    shortcutKeyTool() {\n        window.addEventListener('keyup', e => {\n            switch (e.code) {\n                case this.state.shortcut.pen: {\n                    Tools.shortcutChangeTool(this, 'pen');\n                    break;\n                }\n                case this.state.shortcut.eraser: {\n                    Tools.shortcutChangeTool(this, 'eraser');\n                    break;\n                }\n                case this.state.shortcut.verticalMirror: {\n                    Tools.shortcutChangeTool(this, 'vertical-mirror');\n                    break;\n                }\n                case this.state.shortcut.colorPicker: {\n                    Tools.shortcutChangeTool(this, 'color-picker');\n                    break;\n                }\n                case this.state.shortcut.rectangle: {\n                    Tools.shortcutChangeTool(this, 'rectangle');\n                    break;\n                }\n                case this.state.shortcut.paintBucket: {\n                    Tools.shortcutChangeTool(this, 'paint-bucket');\n                    break;\n                }\n                case this.state.shortcut.lighten: {\n                    Tools.shortcutChangeTool(this, 'lighten');\n                    break;\n                }\n                default: // do nothing\n            }\n        });\n    }\n}\n","export default class SavePiskel {\n    constructor(state) {\n        this.state = state;\n    }\n\n    save() {\n        const savePiskel = document.querySelector('.save-piskel');\n\n        savePiskel.addEventListener('click', e => {\n            if (e.target.matches('.save-piskel-clone')) {\n                const piskelClone = {};\n                piskelClone.piskelClone = {\n                    name: 'my-piskel-clone',\n                    description: 'created with app piskel-clone'\n                };\n                piskelClone.version = '1.0';\n                piskelClone.settings = {\n                    canvas: {\n                        height: '32',\n                        width: '32'\n                    },\n                    fps: `${this.state.fps}`\n                };\n                piskelClone.Frames = this.state.frames;\n\n                SavePiskel.download(e.target, piskelClone, 'my-piskel-clone.clpiskel');\n            }\n\n            if (e.target.matches('.save-piskel')) {\n                const layout = this.state.frames\n                    .map((item, index) => {\n                        return `[${index}]`;\n                    })\n                    .join(',');\n\n                const canvas = document.createElement(`canvas`);\n                canvas.height = 32;\n                canvas.width = this.state.frames.length * 32;\n                const context = canvas.getContext('2d');\n                const img = new Image();\n\n                let imageBase64 = this.state.frames.map((item, index) => {\n                    img.src = this.state.frames[index].slice(5, -2);\n                    context.drawImage(img, index * 32, 0);\n                    return `${canvas.toDataURL()}`;\n                });\n\n                imageBase64 = imageBase64[imageBase64.length - 1];\n\n                // eslint-disable-next-line prettier/prettier\n                const piskelStr = `{\"name\":\"Layer 2\",\"opacity\":1,\"frameCount\":${this.state.frames.length},\"chunks\":[{\"layout\":[${layout}],\"base64PNG\":\"${imageBase64}\"}]}`;\n\n                const piskelClone = {};\n                piskelClone.modelVersion = 2;\n                piskelClone.piskel = {\n                    name: 'my-piskel',\n                    description: 'created with app piskel-clone',\n                    fps: this.state.fps,\n                    height: 32,\n                    width: 32,\n                    layers: [piskelStr],\n                    hiddenFrames: []\n                };\n\n                SavePiskel.download(e.target, piskelClone, 'my-piskel.piskel');\n            }\n        });\n    }\n\n    static download(target, object, fileName) {\n        const link = target;\n        const json = JSON.stringify(object);\n        const blob = new Blob([json], { type: 'octet/stream' });\n        const url = window.URL.createObjectURL(blob);\n        link.href = url;\n        link.target = '_blank';\n        link.download = fileName;\n    }\n}\n","/* eslint-disable no-param-reassign */\nexport default class Frames {\n    constructor(state) {\n        this.state = state;\n    }\n\n    start() {\n        const newLayer = document.querySelector('.layers__new');\n        const layersWrapper = document.querySelector('.layers');\n        this.shortcutKeyFrame();\n\n        // add new frame\n        newLayer.addEventListener('click', () => {\n            this.newFrame();\n            this.dagnDrop();\n        });\n\n        layersWrapper.addEventListener('click', e => {\n            // clone frame\n            if (e.target.matches('.clone')) {\n                const element = e.target.closest('.layers__item');\n                this.cloneFrame(element);\n                this.dagnDrop();\n            }\n\n            // delete frame\n            if (e.target.matches('.trash') && this.state.frames.length > 0) {\n                const element = e.target.closest('.layers__item');\n                this.deleteFrame(element);\n                this.dagnDrop();\n            }\n\n            // switch frames\n            if (e.target.matches('.layers__item')) {\n                document.querySelector('.activ-layer').classList.toggle('activ-layer');\n                e.target.closest('.layers__item').classList.toggle('activ-layer');\n                const index = e.target.getAttribute('data-layer-num');\n                Frames.loadImgOnCanvas(this.state.frames[index]);\n            }\n        });\n    }\n\n    dagnDrop() {\n        const dagDrop = document.querySelectorAll('.dragn-drop');\n        let stratDropElement;\n\n        dagDrop.forEach(blok => {\n            blok.addEventListener(\n                'dragstart',\n                event => {\n                    stratDropElement = event.target;\n                    event.target.classList.add('hold');\n                },\n                false\n            );\n\n            blok.addEventListener(\n                'dragend',\n                e => {\n                    e.target.classList.remove('hold');\n                },\n                false\n            );\n\n            blok.addEventListener(\n                'dragenter',\n                event => {\n                    event.preventDefault();\n                    event.target.classList.add('hovered');\n                    stratDropElement.style.backgroundImage = this.state.frames[\n                        event.target.getAttribute('data-layer-num')\n                    ];\n                    event.target.style.backgroundImage = 'none';\n                },\n                false\n            );\n\n            blok.addEventListener(\n                'dragover',\n                event => {\n                    event.preventDefault();\n                    event.target.style.backgroundImage = 'none';\n                },\n                false\n            );\n\n            blok.addEventListener(\n                'dragleave',\n                event => {\n                    event.target.classList.remove('hovered');\n                    stratDropElement.style.backgroundImage = 'none';\n                    event.target.style.backgroundImage = this.state.frames[\n                        event.target.getAttribute('data-layer-num')\n                    ];\n                },\n                false\n            );\n\n            blok.addEventListener(\n                'drop',\n                event => {\n                    event.target.classList.remove('hovered');\n                    if (stratDropElement === event.target) {\n                        stratDropElement.style.backgroundImage = this.state.frames[\n                            stratDropElement.getAttribute('data-layer-num')\n                        ];\n                    } else {\n                        const startIndex = stratDropElement.getAttribute('data-layer-num');\n                        const endIndex = event.target.getAttribute('data-layer-num');\n\n                        stratDropElement.style.backgroundImage = this.state.frames[endIndex];\n                        event.target.style.backgroundImage = this.state.frames[startIndex];\n\n                        [this.state.frames[startIndex], this.state.frames[endIndex]] = [\n                            this.state.frames[endIndex],\n                            this.state.frames[startIndex]\n                        ];\n\n                        document.querySelector('.activ-layer').classList.toggle('activ-layer');\n                        event.target.closest('.layers__item').classList.toggle('activ-layer');\n                        Frames.loadImgOnCanvas(this.state.frames[endIndex]);\n                    }\n                },\n                false\n            );\n        });\n    }\n\n    static loadImgOnCanvas(imgSrc) {\n        const canvas = document.querySelector('.main-canvas');\n        const context = canvas.getContext('2d');\n        context.clearRect(0, 0, canvas.width, canvas.height);\n        const img = new Image();\n        img.src = imgSrc.slice(5, -2);\n        img.onload = () => {\n            context.drawImage(img, 0, 0);\n        };\n    }\n\n    static renderFramesList(index, frames) {\n        const contextHtml = frames\n            .map((frame, frIndex) => {\n                let classItem = 'layers__item dragn-drop';\n                if (+frIndex === +index) {\n                    classItem = 'layers__item dragn-drop activ-layer';\n                }\n                return `<div class=\"canvas-background\"><div class=\"${classItem}\" data-layer-num=\"${frIndex}\" draggable=\"true\" style=\"background-image:${frame}\"><span class=\"layer-control clone fas fa-clone\"></span><span class=\"layer-control trash fas fa-trash-alt\"></span></div></div>`;\n            })\n            .join('');\n\n        return contextHtml;\n    }\n\n    newFrame() {\n        const canvas = document.querySelector('.main-canvas');\n        const context = canvas.getContext('2d');\n        const layersWrapper = document.querySelector('.layers');\n        this.state.frames.push(\n            `url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAALUlEQVRYR+3QQREAAAABQfqXFsNnFTizzXk99+MAAQIECBAgQIAAAQIECBAgMBo/ACHo7lH9AAAAAElFTkSuQmCC')`\n        );\n        context.clearRect(0, 0, canvas.width, canvas.height);\n        document.querySelector('.activ-layer').classList.toggle('activ-layer');\n        layersWrapper.innerHTML += `<div class=\"canvas-background\"><div class=\"layers__item activ-layer dragn-drop\" data-layer-num=\"${this\n            .state.frames.length -\n            1}\" draggable=\"true\"><span class=\"layer-control clone fas fa-clone\"></span><span class=\"layer-control trash fas fa-trash-alt\"></span></div></div>`;\n    }\n\n    cloneFrame(element) {\n        const layersWrapper = document.querySelector('.layers');\n        let index = +element.getAttribute('data-layer-num');\n        this.state.frames.splice(index, 0, this.state.frames[index]);\n        index += 1;\n        const {\n            state: { frames }\n        } = this;\n        layersWrapper.innerHTML = Frames.renderFramesList(index, frames);\n        Frames.loadImgOnCanvas(this.state.frames[index]);\n    }\n\n    deleteFrame(element) {\n        const layersWrapper = document.querySelector('.layers');\n        let index = element.getAttribute('data-layer-num');\n        if (this.state.frames.length !== 1) {\n            this.state.frames.splice(index, 1);\n            if (+index !== 0) {\n                index -= 1;\n            }\n            const {\n                state: { frames }\n            } = this;\n\n            layersWrapper.innerHTML = Frames.renderFramesList(index, frames);\n            Frames.loadImgOnCanvas(this.state.frames[index]);\n        }\n    }\n\n    shortcutKeyFrame() {\n        window.addEventListener('keyup', e => {\n            switch (e.code) {\n                case this.state.shortcut.newFrame: {\n                    this.newFrame();\n                    this.dagnDrop();\n                    break;\n                }\n                case this.state.shortcut.dublicateFrame: {\n                    const element = document.querySelector('.activ-layer');\n                    this.cloneFrame(element);\n                    this.dagnDrop();\n                    break;\n                }\n                case this.state.shortcut.deleteFrame: {\n                    const element = document.querySelector('.activ-layer');\n                    this.deleteFrame(element);\n                    this.dagnDrop();\n                    break;\n                }\n                default: // do nothing\n            }\n        });\n    }\n}\n","export default class Animation {\n    constructor(state) {\n        this.state = state;\n    }\n\n    start() {\n        const animationPreview = document.querySelector('.animated-preview__canvas');\n        const PreviewFullScreen = document.querySelector('.fullScreen');\n        const fpsRange = document.querySelector('.fps-range');\n        const fpsLabel = document.querySelector('.fps-label');\n        const btnFullScreen = document.querySelector('.openFullScreen');\n        let animatinTime = 1000 / +fpsRange.value;\n\n        fpsRange.value = this.state.fps;\n        fpsLabel.innerHTML = `${this.state.fps} fps`;\n\n        const {\n            state: { frames }\n        } = this;\n\n        let startAnimation = () => {\n            let i = 0;\n            if (frames.length !== 0) {\n                setTimeout(function frame() {\n                    animationPreview.style.backgroundImage = frames[i];\n                    if (i === frames.length) {\n                        i = 0;\n                    } else {\n                        i += 1;\n                    }\n                    startAnimation = setTimeout(frame, animatinTime);\n                }, animatinTime);\n            }\n        };\n\n        startAnimation();\n\n        fpsRange.addEventListener('input', e => {\n            this.state.fps = +e.target.value;\n            fpsLabel.innerHTML = `${this.state.fps} fps`;\n            this.state.fps = +e.target.value;\n            animatinTime = 1000 / +e.target.value;\n        });\n\n        btnFullScreen.addEventListener('click', () => {\n            Animation.fullScreen(PreviewFullScreen);\n        });\n    }\n\n    static fullScreen(element) {\n        if (element.requestFullscreen) {\n            element.requestFullscreen();\n        } else if (element.webkitrequestFullscreen) {\n            element.webkitRequestFullscreen();\n        } else if (element.mozRequestFullscreen) {\n            element.mozRequestFullScreen();\n        }\n    }\n}\n","import App from './app/App';\nimport './normalize.css';\nimport './style.css';\n\nconst app = new App();\napp.start();\n","import Tools from './tools/Tools';\nimport SavePiskel from './tools/SavePiskel';\nimport Frames from './frames/Frames';\nimport Animation from './frames/FramesAnimation';\n\nexport default class App {\n    constructor() {\n        this.state = {\n            curentColor: '#1abc9c',\n            prevColor: 'e67e22',\n            curentTool: 'pen',\n            fps: 12,\n            frames: [\n                `url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAALUlEQVRYR+3QQREAAAABQfqXFsNnFTizzXk99+MAAQIECBAgQIAAAQIECBAgMBo/ACHo7lH9AAAAAElFTkSuQmCC')`\n            ],\n            shortcut: {\n                pen: 'KeyP',\n                eraser: 'KeyE',\n                verticalMirror: 'KeyM',\n                colorPicker: 'KeyI',\n                rectangle: 'KeyR',\n                paintBucket: 'KeyB',\n                lighten: 'KeyL',\n                newFrame: 'KeyN',\n                dublicateFrame: 'KeyD',\n                deleteFrame: 'KeyT'\n            }\n        };\n    }\n\n    start() {\n        this.state.curentColor =\n            JSON.parse(localStorage.getItem('curentColor')) || this.state.curentColor;\n\n        this.state.prevColor =\n            JSON.parse(localStorage.getItem('prevColor')) || this.state.prevColor;\n\n        this.state.curentTool =\n            JSON.parse(localStorage.getItem('curentTool')) || this.state.curentTool;\n\n        this.state.fps = JSON.parse(localStorage.getItem('fps')) || this.state.fps;\n\n        this.state.shortcut = JSON.parse(localStorage.getItem('shortcut')) || this.state.shortcut;\n\n        const tools = new Tools(this.state);\n        const savePiskel = new SavePiskel(this.state);\n        const frames = new Frames(this.state);\n        const framesAnimation = new Animation(this.state);\n\n        tools.start();\n        savePiskel.save();\n        frames.start();\n        framesAnimation.start();\n\n        window.onbeforeunload = () => {\n            localStorage.setItem('curentColor', JSON.stringify(this.state.curentColor));\n            localStorage.setItem('prevColor', JSON.stringify(this.state.prevColor));\n            localStorage.setItem('curentTool', JSON.stringify(this.state.curentTool));\n            localStorage.setItem('fps', JSON.stringify(this.state.fps));\n            localStorage.setItem('shortcut', JSON.stringify(this.state.shortcut));\n            return 'Данные не сохранены. Точно перейти?';\n        };\n    }\n}\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/assets/img/color-pattern.gif b/assets/img/color-pattern.gif
new file mode 100644
index 0000000..a3bc873
Binary files /dev/null and b/assets/img/color-pattern.gif differ
diff --git a/assets/img/feature-live-preview.gif b/assets/img/feature-live-preview.gif
new file mode 100644
index 0000000..ee1a7fa
Binary files /dev/null and b/assets/img/feature-live-preview.gif differ
diff --git a/assets/img/llama.gif b/assets/img/llama.gif
new file mode 100644
index 0000000..a60e910
Binary files /dev/null and b/assets/img/llama.gif differ
diff --git a/assets/img/megaman.gif b/assets/img/megaman.gif
new file mode 100644
index 0000000..079a147
Binary files /dev/null and b/assets/img/megaman.gif differ
diff --git a/assets/img/screenshot.png b/assets/img/screenshot.png
new file mode 100644
index 0000000..5f8eb67
Binary files /dev/null and b/assets/img/screenshot.png differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..eb44a0d
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5e390a5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
+    <title>Piskel clone</title>
+<link rel="shortcut icon" href="favicon.ico"></head>
+
+<body style="background-color: #34495e">
+    <header class="header">
+        <h1 class="logo">Piskel clone</h1>
+    </header>
+    <main>
+        <section class="screenshot">
+            <div class="description">
+                <h2 class="description-caption">Piskel-clone is a clone of free online animated sprite editor.</h2>
+
+                <a href="piskel-clone-edit.html" class="link create-sprite">Create Sprite</a>
+                <a href="https://github.com/rolling-scopes-school/tasks/blob/2018-Q3/tasks/piskel-clone.md"
+                    class="link task-link">Task link</a>
+            </div>
+            <img class="screnshot-img" src="./assets/img/screenshot.png" alt="screenshot piskel clone editor"
+                width="800px" height="485px">
+        </section>
+
+        <section class="wrapper">
+            <div class="example">
+                <h2>Exsample</h2>
+                <div class="example-preview">
+                    <div>
+                        <img class="example-img" src="./assets/img/megaman.gif" alt="megaman exsample" width="64px"
+                            height="64px">
+                        <img class="example-img" src="./assets/img/llama.gif" alt="megaman exsample" width="64px"
+                            height="64px">
+                    </div>
+                    <div>
+                        <img class="example-img" src="./assets/img/color-pattern.gif" alt="megaman exsample"
+                            width="64px" height="64px">
+                        <img class="example-img" src="./assets/img/feature-live-preview.gif" alt="megaman exsample"
+                            width="64px" height="64px">
+                    </div>
+                </div>
+            </div>
+            <div class="functionlity">
+                <h2>Implemented functionality</h2>
+                <ul class="functionality-list">
+                    <li class="functionality-list-item"><span>Tools:</span> pen, eraser, color picker, vertical mirror,
+                        rectangle, lighten</li>
+                    <li class="functionality-list-item"><span>Preview:</span> Small animation preview and Full screen
+                        mode</li>
+                    <li class="functionality-list-item"><span>Frame management:</span> add, delete,
+                        clone and reorder a frame via Drag and
+                        Drop</li>
+                    <li class="functionality-list-item"><span>Keyboard shortcuts</span> for tools and frame management
+                    </li>
+                    <li class="functionality-list-item"><span>Show cursor coordinates</span></li>
+                    <li class="functionality-list-item"><span>Save user session in localstorage</span></li>
+                    <li class="functionality-list-item"><span>Full compatibility with original export format
+                            (.piskel)</span></li>
+                </ul>
+            </div>
+        </section>
+        <footer class="footer">
+            <a class="footer-link" href="https://github.com/Spinnen87"><span class="fab fa-github"></span> Maxim
+                Semikov</a>
+        </footer>
+    </main>
+<script type="text/javascript" src="app.bundle.js"></script></body>
+
+</html>
diff --git a/piskel-clone-edit.html b/piskel-clone-edit.html
new file mode 100644
index 0000000..b2907d1
--- /dev/null
+++ b/piskel-clone-edit.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" />
+    <title>Piskel clone edit</title>
+<link rel="shortcut icon" href="favicon.ico"></head>
+
+<body>
+    <div class="wrapper-piskel-clon-edit">
+        <header class="header">
+            <h1 class="logo">Piskel clone</h1>
+        </header>
+        <main class="main">
+            <div class="toolbar">
+                <ul class="toolbar__item tools">
+                    <li id="pen" class="tools__item fas fa-pen" data-tool="pen"></li>
+                    <li id="pen" class="tools__item fas fa-eraser" data-tool="eraser"></li>
+                    <li id="pen" class="tools__item fas fa-eye-dropper" data-tool="color-picker"></li>
+                    <li id="pen" class="tools__item fas fa-grip-vertical" data-tool="vertical-mirror"></li>
+                    <li id="pen" class="tools__item far fa-square" data-tool="rectangle"></li>
+                    <li id="pen" class="tools__item fas fa-fill disable-tool" data-tool="paint-bucket"></li>
+                    <li id="pen" class="tools__item fas fa-sun" data-tool="lighten"></li>
+
+                </ul>
+                <div class="toolbar__item color-palette">
+                    <ul class="palette">
+                        <li class="palette-color emerland"></li>
+                        <li class="palette-color turquoise"></li>
+                        <li class="palette-color peterriver"></li>
+                        <li class="palette-color amethyst"></li>
+                        <li class="palette-color sunflower"></li>
+                        <li class="palette-color carrot"></li>
+                        <li class="palette-color alizarin"></li>
+                        <li class="palette-color clouds"></li>
+                        <li class="palette-color wetasphalt"></li>
+                    </ul>
+                    <div class="cur-pev-color">
+                        <div class="cur-pev-color__item current-color">
+                            <input class="choose-color" type="color" name="color-input" id="color-input"
+                                value="#1abc9c" />
+                            <label for="color-input" class="hidden-on-small">Cur. color</label>
+                        </div>
+                        <div class="cur-pev-color__item prev-color hidden-on-small">
+                            <div id="prev-color-mark" class="palette-color carrot"></div>
+                            <p class="hidden-on-small">Prev color</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="toolbar-layers">
+                <div class="layers">
+                    <div class="canvas-background">
+                        <div class="layers__item dragn-drop activ-layer" data-layer-num="0" draggable="true">
+                            <span class="layer-control clone fas fa-clone"></span>
+                            <span class="layer-control trash fas fa-trash-alt"></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="layers__new">
+                    <div class="fas fa-plus"></div>
+                    <div>Add new frame</div>
+                </div>
+            </div>
+            <div class="canvas-wrapper">
+                <div class="canvas-background">
+                    <canvas id="main-canvas" class="main-canvas" width="32px" height="32px"></canvas>
+                </div>
+            </div>
+            <div class="animated-preview">
+                <div class="fullScreen">
+                    <div class="canvas-background">
+                        <div class="animated-preview__canvas">
+                            <span class="openFullScreen fas fa-compress"></span>
+                        </div>
+
+                    </div>
+                </div>
+                <input class="fps-range" type="range" min="1" max="24" value="12" step="1">
+                <div class="fps-label">12 fps</div>
+                <div class="save-piskel">
+                    <a href="#" class="btn save-piskel-clone"><span class="far fa-save"></span>Save as .clpiskel</a>
+                    <a href="#" class="btn save-piskel"><span class="far fa-save"></span>Save as .piskel</a>
+                </div>
+                <div class="canvas-info">
+                    <div class="canvas-size">
+                        [ 32 x 32 ]
+                    </div>
+                    <div class="canvas-current-position">
+                        0:0
+                    </div>
+
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+<script type="text/javascript" src="app.bundle.js"></script></body>
+
+</html>