diff --git a/.babelrc b/.babelrc2
similarity index 100%
rename from .babelrc
rename to .babelrc2
diff --git a/.eslintrc.json b/.eslintrc.json
index 16f934a..7bdc88f 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -3,6 +3,7 @@
     "plugin:flowtype/recommended",
     "airbnb"
   ],
+  "parser":"@babel/eslint-parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
@@ -21,6 +22,8 @@
     "browser": true
   },
   "rules": {
+    "function-paren-newline": "off",
+    "function-call-argument-newline":"off",
     "max-len": [1, 80, 2, {"ignoreComments": true}],
     "no-bitwise": 0,
     "no-plusplus" : "off",
@@ -33,6 +36,7 @@
     "jsx-a11y/no-static-element-interactions":"off",
     "no-continue": "off",
     "no-multiple-empty-lines": "off",
+    "react/function-component-definition": "off",
     "lines-between-class-members":["warn", "always",{"exceptAfterSingleLine": true}]
   }
 }
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..dd91e8d
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,29 @@
+module.exports = function (api) {
+  api.cache(true);
+  const plugins = [
+    '@babel/plugin-transform-flow-strip-types',
+    '@babel/plugin-proposal-throw-expressions',
+    // react-optimize
+    '@babel/transform-react-constant-elements',
+    '@babel/transform-react-inline-elements',
+    'transform-react-remove-prop-types',
+    'transform-react-pure-class-to-function',
+  ];
+
+  const presets = [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    '@babel/react',
+  ];
+
+  return {
+    presets,
+    plugins
+  };
+}
diff --git a/i18n/template-ssr.pot b/i18n/template-ssr.pot
index 08fd9f5..de1cd41 100644
--- a/i18n/template-ssr.pot
+++ b/i18n/template-ssr.pot
@@ -286,22 +286,6 @@ msgstr ""
 msgid "Server error occured"
 msgstr ""
 
-#: src/routes/api/auth/register.js:31
-msgid "E-Mail already in use."
-msgstr ""
-
-#: src/routes/api/auth/register.js:33
-msgid "Username already in use."
-msgstr ""
-
-#: src/routes/api/auth/register.js:61
-msgid "Failed to create new user :("
-msgstr ""
-
-#: src/routes/api/auth/register.js:77
-msgid "Failed to establish session after register :("
-msgstr ""
-
 #: src/routes/api/auth/verify.js:25
 #: src/routes/api/auth/verify.js:32
 msgid "Mail verification"
@@ -321,6 +305,22 @@ msgstr ""
 msgid "You are not even logged in."
 msgstr ""
 
+#: src/routes/api/auth/register.js:31
+msgid "E-Mail already in use."
+msgstr ""
+
+#: src/routes/api/auth/register.js:33
+msgid "Username already in use."
+msgstr ""
+
+#: src/routes/api/auth/register.js:61
+msgid "Failed to create new user :("
+msgstr ""
+
+#: src/routes/api/auth/register.js:77
+msgid "Failed to establish session after register :("
+msgstr ""
+
 #: src/routes/api/auth/change_mail.js:41
 #: src/routes/api/auth/change_passwd.js:37
 #: src/routes/api/auth/delete_account.js:38
diff --git a/i18n/template.pot b/i18n/template.pot
index a39c208..ad7fdd1 100644
--- a/i18n/template.pot
+++ b/i18n/template.pot
@@ -162,7 +162,7 @@ msgstr ""
 msgid "Look at past Canvases"
 msgstr ""
 
-#: src/components/Converter.jsx:586
+#: src/components/Converter.jsx:559
 #: src/components/CoordinatesBox.jsx:32
 msgid "Copy to Clipboard"
 msgstr ""
@@ -186,27 +186,6 @@ msgstr ""
 msgid "Restore"
 msgstr ""
 
-#: src/components/buttons/CanvasSwitchButton.jsx:23
-#: src/components/windows/index.js:22
-msgid "Canvas Selection"
-msgstr ""
-
-#: src/components/buttons/ExpandMenuButton.jsx:23
-msgid "Close Menu"
-msgstr ""
-
-#: src/components/buttons/ExpandMenuButton.jsx:23
-msgid "Open Menu"
-msgstr ""
-
-#: src/components/buttons/ChatButton.jsx:92
-msgid "Close Chat"
-msgstr ""
-
-#: src/components/buttons/ChatButton.jsx:92
-msgid "Open Chat"
-msgstr ""
-
 #: src/actions/fetch.js:40
 msgid "You made too many requests"
 msgstr ""
@@ -236,6 +215,27 @@ msgstr ""
 msgid "Server answered with gibberish :("
 msgstr ""
 
+#: src/components/buttons/ChatButton.jsx:92
+msgid "Close Chat"
+msgstr ""
+
+#: src/components/buttons/ChatButton.jsx:92
+msgid "Open Chat"
+msgstr ""
+
+#: src/components/buttons/CanvasSwitchButton.jsx:23
+#: src/components/windows/index.js:22
+msgid "Canvas Selection"
+msgstr ""
+
+#: src/components/buttons/ExpandMenuButton.jsx:23
+msgid "Close Menu"
+msgstr ""
+
+#: src/components/buttons/ExpandMenuButton.jsx:23
+msgid "Open Menu"
+msgstr ""
+
 #: src/components/HistorySelect.jsx:144
 msgid "Loading"
 msgstr ""
@@ -260,6 +260,18 @@ msgstr ""
 msgid "Resize"
 msgstr ""
 
+#: src/components/buttons/GlobeButton.jsx:35
+msgid "Globe View"
+msgstr ""
+
+#: src/components/buttons/PalselButton.jsx:31
+msgid "Close Palette"
+msgstr ""
+
+#: src/components/buttons/PalselButton.jsx:31
+msgid "Open Palette"
+msgstr ""
+
 #: src/components/buttons/HelpButton.jsx:23
 #: src/components/windows/index.js:16
 msgid "Help"
@@ -279,18 +291,6 @@ msgstr ""
 msgid "Make Screenshot"
 msgstr ""
 
-#: src/components/buttons/GlobeButton.jsx:35
-msgid "Globe View"
-msgstr ""
-
-#: src/components/buttons/PalselButton.jsx:31
-msgid "Close Palette"
-msgstr ""
-
-#: src/components/buttons/PalselButton.jsx:31
-msgid "Open Palette"
-msgstr ""
-
 #: src/components/contextmenus/UserContextMenu.jsx:53
 msgid "Ping"
 msgstr ""
@@ -538,6 +538,34 @@ msgstr ""
 msgid "Partners:"
 msgstr ""
 
+#: src/components/windows/UserArea.jsx:27
+msgid "Profile"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:30
+msgid "Ranking"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:33
+msgid "Converter"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:39
+msgid "Admintools"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:39
+msgid "Modtools"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:40
+msgid "Loading..."
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:47
+msgid "Consider joining us on Guilded:"
+msgstr ""
+
 #: src/components/windows/Settings.jsx:133
 msgid "Show Grid"
 msgstr ""
@@ -602,7 +630,7 @@ msgstr ""
 msgid "For when you are playing on a potato."
 msgstr ""
 
-#: src/components/Converter.jsx:400
+#: src/components/Converter.jsx:373
 #: src/components/windows/Settings.jsx:195
 msgid "Light Grid"
 msgstr ""
@@ -631,79 +659,6 @@ msgstr ""
 msgid "Select Language"
 msgstr ""
 
-#: src/components/windows/UserArea.jsx:27
-msgid "Profile"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:30
-msgid "Ranking"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:33
-msgid "Converter"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:39
-msgid "Admintools"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:39
-msgid "Modtools"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:40
-msgid "Loading..."
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:47
-msgid "Consider joining us on Guilded:"
-msgstr ""
-
-#: src/components/windows/Register.jsx:81
-msgid "Register new account here"
-msgstr ""
-
-#: src/components/windows/Register.jsx:92
-msgid "Name"
-msgstr ""
-
-#: src/components/windows/ForgotPassword.jsx:82
-#: src/components/windows/Register.jsx:100
-msgid "Email"
-msgstr ""
-
-#: src/components/ChangeMail.jsx:80
-#: src/components/DeleteAccount.jsx:62
-#: src/components/LogInForm.jsx:83
-#: src/components/windows/Register.jsx:108
-msgid "Password"
-msgstr ""
-
-#: src/components/windows/Register.jsx:116
-msgid "Confirm Password"
-msgstr ""
-
-#: src/components/Admintools.jsx:311
-#: src/components/Admintools.jsx:392
-#: src/components/Admintools.jsx:467
-#: src/components/Admintools.jsx:512
-#: src/components/Admintools.jsx:595
-#: src/components/windows/ForgotPassword.jsx:86
-#: src/components/windows/Register.jsx:119
-msgid "Submit"
-msgstr ""
-
-#: src/components/windows/CanvasSelect.jsx:32
-msgid ""
-"Select the canvas you want to use.  Every canvas is unique and has "
-"different palettes, cooldown and requirements.  Archive of closed canvases "
-"can be accessed here:"
-msgstr ""
-
-#: src/components/windows/CanvasSelect.jsx:40
-msgid "Archive"
-msgstr ""
-
 #: src/components/windows/Archive.jsx:20
 msgid ""
 "While we tend to not delete canvases, some canvases are started for fun or "
@@ -737,6 +692,17 @@ msgid ""
 "how the canvas was at that time."
 msgstr ""
 
+#: src/components/windows/CanvasSelect.jsx:32
+msgid ""
+"Select the canvas you want to use.  Every canvas is unique and has "
+"different palettes, cooldown and requirements.  Archive of closed canvases "
+"can be accessed here:"
+msgstr ""
+
+#: src/components/windows/CanvasSelect.jsx:40
+msgid "Archive"
+msgstr ""
+
 #: src/components/windows/Chat.jsx:146
 msgid "Channel settings"
 msgstr ""
@@ -753,6 +719,40 @@ msgstr ""
 msgid "You must be logged in to chat"
 msgstr ""
 
+#: src/components/windows/Register.jsx:81
+msgid "Register new account here"
+msgstr ""
+
+#: src/components/windows/Register.jsx:92
+msgid "Name"
+msgstr ""
+
+#: src/components/windows/ForgotPassword.jsx:82
+#: src/components/windows/Register.jsx:100
+msgid "Email"
+msgstr ""
+
+#: src/components/ChangeMail.jsx:80
+#: src/components/DeleteAccount.jsx:62
+#: src/components/LogInForm.jsx:83
+#: src/components/windows/Register.jsx:108
+msgid "Password"
+msgstr ""
+
+#: src/components/windows/Register.jsx:116
+msgid "Confirm Password"
+msgstr ""
+
+#: src/components/Admintools.jsx:311
+#: src/components/Admintools.jsx:392
+#: src/components/Admintools.jsx:467
+#: src/components/Admintools.jsx:512
+#: src/components/Admintools.jsx:595
+#: src/components/windows/ForgotPassword.jsx:86
+#: src/components/windows/Register.jsx:119
+msgid "Submit"
+msgstr ""
+
 #: src/components/windows/ForgotPassword.jsx:60
 msgid "Sent you a mail with instructions to reset your password."
 msgstr ""
@@ -809,11 +809,28 @@ msgstr ""
 msgid "Password must be shorter than 60 characters."
 msgstr ""
 
-#: src/components/ChangeMail.jsx:91
-#: src/components/ChangeName.jsx:68
-#: src/components/ChangePassword.jsx:110
-#: src/components/LanguageSelect.jsx:73
-msgid "Save"
+#: src/components/LogInArea.jsx:21
+msgid "Login to access more features and stats."
+msgstr ""
+
+#: src/components/LogInArea.jsx:23
+msgid "Login with Name or Mail:"
+msgstr ""
+
+#: src/components/LogInArea.jsx:30
+msgid "I forgot my Password."
+msgstr ""
+
+#: src/components/LogInArea.jsx:31
+msgid "or login with:"
+msgstr ""
+
+#: src/components/LogInArea.jsx:72
+msgid "or register here:"
+msgstr ""
+
+#: src/components/LogInArea.jsx:79
+msgid "Register"
 msgstr ""
 
 #: src/components/UserAreaContent.jsx:63
@@ -861,30 +878,6 @@ msgstr ""
 msgid "Social Settings"
 msgstr ""
 
-#: src/components/LogInArea.jsx:21
-msgid "Login to access more features and stats."
-msgstr ""
-
-#: src/components/LogInArea.jsx:23
-msgid "Login with Name or Mail:"
-msgstr ""
-
-#: src/components/LogInArea.jsx:30
-msgid "I forgot my Password."
-msgstr ""
-
-#: src/components/LogInArea.jsx:31
-msgid "or login with:"
-msgstr ""
-
-#: src/components/LogInArea.jsx:72
-msgid "or register here:"
-msgstr ""
-
-#: src/components/LogInArea.jsx:79
-msgid "Register"
-msgstr ""
-
 #: src/components/Rankings.jsx:28
 msgid "Total"
 msgstr ""
@@ -975,77 +968,84 @@ msgstr ""
 msgid "User Name"
 msgstr ""
 
-#: src/components/Converter.jsx:260
+#: src/components/Converter.jsx:236
 msgid "Choose Canvas"
 msgstr ""
 
-#: src/components/Converter.jsx:286
+#: src/components/Converter.jsx:262
 msgid "Palette Download"
 msgstr ""
 
-#: src/components/Converter.jsx:288
+#: src/components/Converter.jsx:264
 #, javascript-format
 msgid "Palette for ${ gimpLink }"
 msgstr ""
 
-#: src/components/Converter.jsx:306
+#: src/components/Converter.jsx:282
 #, javascript-format
 msgid "Credit for the Palette of the Moon goes to ${ starhouseLink }."
 msgstr ""
 
-#: src/components/Converter.jsx:309
+#: src/components/Converter.jsx:285
 msgid "Image Converter"
 msgstr ""
 
-#: src/components/Converter.jsx:310
+#: src/components/Converter.jsx:286
 msgid "Convert an image to canvas colors"
 msgstr ""
 
-#: src/components/Converter.jsx:332
+#: src/components/Converter.jsx:305
 msgid "Choose Strategy"
 msgstr ""
 
-#: src/components/Converter.jsx:349
+#: src/components/Converter.jsx:322
 msgid "Choose Color Mode"
 msgstr ""
 
-#: src/components/Converter.jsx:377
+#: src/components/Converter.jsx:350
 msgid "Add Grid (uncheck if you need a 1:1 template)"
 msgstr ""
 
-#: src/components/Converter.jsx:402
-#: src/components/Converter.jsx:418
+#: src/components/Converter.jsx:375
+#: src/components/Converter.jsx:391
 msgid "Offset"
 msgstr ""
 
-#: src/components/Converter.jsx:448
+#: src/components/Converter.jsx:421
 msgid "Scale Image"
 msgstr ""
 
-#: src/components/Converter.jsx:460
+#: src/components/Converter.jsx:433
 msgid "Width"
 msgstr ""
 
-#: src/components/Converter.jsx:490
+#: src/components/Converter.jsx:463
 msgid "Height"
 msgstr ""
 
-#: src/components/Converter.jsx:528
+#: src/components/Converter.jsx:501
 msgid "Keep Ratio"
 msgstr ""
 
-#: src/components/Converter.jsx:541
+#: src/components/Converter.jsx:514
 msgid "Anti Aliasing"
 msgstr ""
 
-#: src/components/Converter.jsx:555
+#: src/components/Converter.jsx:528
 msgid "Reset"
 msgstr ""
 
-#: src/components/Converter.jsx:574
+#: src/components/Converter.jsx:547
 msgid "Download Template"
 msgstr ""
 
+#: src/components/ChangeMail.jsx:91
+#: src/components/ChangeName.jsx:68
+#: src/components/ChangePassword.jsx:110
+#: src/components/LanguageSelect.jsx:73
+msgid "Save"
+msgstr ""
+
 #: src/components/CanvasItem.jsx:27
 msgid "Cooldown"
 msgstr ""
@@ -1075,6 +1075,14 @@ msgstr ""
 msgid "Dimensions"
 msgstr ""
 
+#: src/components/LogInForm.jsx:76
+msgid "Name or Email"
+msgstr ""
+
+#: src/components/LogInForm.jsx:87
+msgid "LogIn"
+msgstr ""
+
 #: src/components/UserMessages.jsx:28
 msgid ""
 "Please verify your mail address \n"
@@ -1109,10 +1117,6 @@ msgstr ""
 msgid "Confirm New Password"
 msgstr ""
 
-#: src/components/DeleteAccount.jsx:66
-msgid "Yes, Delete My Account!"
-msgstr ""
-
 #: src/components/ChangeName.jsx:64
 msgid "New Username"
 msgstr ""
@@ -1127,6 +1131,10 @@ msgstr ""
 msgid "New Mail"
 msgstr ""
 
+#: src/components/DeleteAccount.jsx:66
+msgid "Yes, Delete My Account!"
+msgstr ""
+
 #: src/components/SocialSettings.jsx:38
 msgid "Block all Private Messages"
 msgstr ""
@@ -1139,14 +1147,6 @@ msgstr ""
 msgid "You have no users blocked"
 msgstr ""
 
-#: src/components/LogInForm.jsx:76
-msgid "Name or Email"
-msgstr ""
-
-#: src/components/LogInForm.jsx:87
-msgid "LogIn"
-msgstr ""
-
 #: src/components/windows/Help.jsx:15
 #: src/components/windows/Settings.jsx:134
 msgctxt "keybinds"
diff --git a/package-lock.json b/package-lock.json
index 70ae6bd..3538c50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,6 +67,7 @@
       "devDependencies": {
         "@babel/cli": "^7.16.7",
         "@babel/core": "^7.16.7",
+        "@babel/eslint-parser": "^7.16.5",
         "@babel/node": "^7.16.7",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
         "@babel/plugin-proposal-decorators": "^7.16.7",
@@ -93,7 +94,6 @@
         "@babel/preset-react": "^7.16.7",
         "@babel/preset-typescript": "^7.16.7",
         "assets-webpack-plugin": "^7.1.1",
-        "babel-eslint": "^10.1.0",
         "babel-loader": "^8.2.3",
         "babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -208,6 +208,24 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/eslint-parser": {
+      "version": "7.16.5",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.16.5.tgz",
+      "integrity": "sha512-mUqYa46lgWqHKQ33Q6LNCGp/wPR3eqOYTUixHFsfrSQqRxH0+WOzca75iEjFr5RDGH1dDz622LaHhLOzOuQRUA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-scope": "^5.1.1",
+        "eslint-visitor-keys": "^2.1.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.11.0",
+        "eslint": "^7.5.0 || ^8.0.0"
+      }
+    },
     "node_modules/@babel/generator": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz",
@@ -2981,27 +2999,6 @@
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
       "dev": true
     },
-    "node_modules/babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "peerDependencies": {
-        "eslint": ">= 4.12.1"
-      }
-    },
     "node_modules/babel-helper-is-react-class": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/babel-helper-is-react-class/-/babel-helper-is-react-class-1.0.0.tgz",
@@ -5086,16 +5083,25 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.0.tgz",
-      "integrity": "sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
+        "estraverse": "^4.1.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/eslint-scope/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
       }
     },
     "node_modules/eslint-utils": {
@@ -5116,7 +5122,7 @@
         "eslint": ">=5"
       }
     },
-    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
+    "node_modules/eslint-visitor-keys": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
       "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
@@ -5125,15 +5131,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -5183,6 +5180,19 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.0.tgz",
+      "integrity": "sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
     "node_modules/eslint/node_modules/eslint-visitor-keys": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz",
@@ -8405,9 +8415,9 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
       "engines": {
         "node": ">=8.6"
@@ -11321,28 +11331,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/webpack/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/webpack/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
@@ -11802,6 +11790,17 @@
         "source-map": "^0.5.0"
       }
     },
+    "@babel/eslint-parser": {
+      "version": "7.16.5",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.16.5.tgz",
+      "integrity": "sha512-mUqYa46lgWqHKQ33Q6LNCGp/wPR3eqOYTUixHFsfrSQqRxH0+WOzca75iEjFr5RDGH1dDz622LaHhLOzOuQRUA==",
+      "dev": true,
+      "requires": {
+        "eslint-scope": "^5.1.1",
+        "eslint-visitor-keys": "^2.1.0",
+        "semver": "^6.3.0"
+      }
+    },
     "@babel/generator": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz",
@@ -13773,20 +13772,6 @@
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
       "dev": true
     },
-    "babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      }
-    },
     "babel-helper-is-react-class": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/babel-helper-is-react-class/-/babel-helper-is-react-class-1.0.0.tgz",
@@ -15247,6 +15232,16 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "eslint-scope": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.0.tgz",
+          "integrity": "sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
+          }
+        },
         "eslint-visitor-keys": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz",
@@ -15491,13 +15486,21 @@
       "requires": {}
     },
     "eslint-scope": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.0.tgz",
-      "integrity": "sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "requires": {
         "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
+        "estraverse": "^4.1.1"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+          "dev": true
+        }
       }
     },
     "eslint-utils": {
@@ -15507,20 +15510,12 @@
       "dev": true,
       "requires": {
         "eslint-visitor-keys": "^2.0.0"
-      },
-      "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
-          "dev": true
-        }
       }
     },
     "eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
       "dev": true
     },
     "espree": {
@@ -17909,9 +17904,9 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
     "pify": {
@@ -19895,22 +19890,6 @@
             "uri-js": "^4.2.2"
           }
         },
-        "eslint-scope": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^4.1.1"
-          }
-        },
-        "estraverse": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-          "dev": true
-        },
         "schema-utils": {
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
diff --git a/package.json b/package.json
index de0b8f6..5063070 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "build-en": "npm run extract && npm run minify-css",
     "webpack": "webpack --config ./webpack.config.web.babel.js && webpack --config ./webpack.config.client.babel.js",
     "minify-css": "babel-node scripts/minifyCss.js",
-    "extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --env development --config ./webpack.config.client.babel.js",
+    "extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --config ./webpack.config.client.babel.js",
     "babel-node": "cd $INIT_CWD && babel-node",
     "lint": "cd $INIT_CWD && eslint --ext .jsx --ext .js",
     "lint:src": "eslint --ext .jsx --ext .js src",
@@ -113,11 +113,11 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "assets-webpack-plugin": "^7.1.1",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-ttag": "^1.7.30",
+    "@babel/eslint-parser": "^7.16.5",
     "clean-css": "^5.2.2",
     "copy-webpack-plugin": "^10.2.0",
     "css-loader": "^6.5.1",
diff --git a/src/components/App.jsx b/src/components/App.jsx
index f9db81a..f86b67f 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -21,11 +21,13 @@ import ExpandMenuButton from './buttons/ExpandMenuButton';
 import ModalRoot from './ModalRoot';
 import WindowManager from './WindowManager';
 
+const iconContextValue = { style: { verticalAlign: 'middle' } };
+
 const App = () => (
   <div>
     <Style />
     <div id="outstreamContainer" />
-    <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
+    <IconContext.Provider value={iconContextValue}>
       <CanvasSwitchButton />
       <Menu />
       <ChatButton />
diff --git a/src/components/Converter.jsx b/src/components/Converter.jsx
index 2d2c8bd..c4f207a 100644
--- a/src/components/Converter.jsx
+++ b/src/components/Converter.jsx
@@ -23,31 +23,6 @@ function downloadOutput() {
   output.toBlob((blob) => fileDownload(blob, 'ppfunconvert.png'));
 }
 
-function readFile(
-  file,
-  selectFile,
-  setScaleData,
-) {
-  if (!file) {
-    return;
-  }
-  const fr = new FileReader();
-  fr.onload = () => {
-    const img = new Image();
-    img.onload = () => {
-      setScaleData({
-        enabled: false,
-        width: img.width,
-        height: img.height,
-        aa: true,
-      });
-      selectFile(img);
-    };
-    img.src = fr.result;
-  };
-  fr.readAsDataURL(file);
-}
-
 function createCanvasFromImageData(imgData) {
   const { width, height } = imgData;
   const inputCanvas = document.createElement('canvas');
@@ -108,7 +83,7 @@ function scaleImage(imgData, width, height, doAA) {
   for (let y = 0; y < height; y += 1) {
     for (let x = 0; x < width; x += 1) {
       let posi = (Math.round(x / scaleX) + Math.round(y / scaleY)
-          * img.width) * 4;
+          * imgData.width) * 4;
       let poso = (x + y * width) * 4;
       datao[poso++] = datai[posi++];
       datao[poso++] = datai[posi++];
@@ -152,6 +127,7 @@ async function renderOutputImage(opts) {
       // dither
       const { colors, strategy, colorDist } = dither;
       const progEl = document.getElementById('qprog');
+      // eslint-disable-next-line no-await-in-loop
       image = await quantizeImage(colors, image, {
         strategy,
         colorDist,
@@ -315,11 +291,8 @@ function Converter() {
           const fileSel = evt.target;
           const file = (!fileSel.files || !fileSel.files[0])
             ? null : fileSel.files[0];
-          if (!file) {
-            setInputImageData(null);
-            return;
-          }
           const imageData = await getImageDataOfFile(file);
+          setInputImageData(null);
           setScaleData({
             enabled: false,
             width: imageData.width,
diff --git a/src/components/DailyRankings.jsx b/src/components/DailyRankings.jsx
index 316e225..b91e143 100644
--- a/src/components/DailyRankings.jsx
+++ b/src/components/DailyRankings.jsx
@@ -24,7 +24,7 @@ const DailyRankings = () => {
           </tr>
         </thead>
         <tbody>
-        {
+          {
           totalDailyRanking.map((rank) => (
             <tr>
               <td>{rank.dailyRanking}</td>
diff --git a/src/components/TotalRankings.jsx b/src/components/TotalRankings.jsx
index 5b2d477..e558ff6 100644
--- a/src/components/TotalRankings.jsx
+++ b/src/components/TotalRankings.jsx
@@ -22,7 +22,7 @@ const TotalRankings = () => {
           </tr>
         </thead>
         <tbody>
-        {
+          {
           totalRanking.map((rank) => (
             <tr>
               <td>{rank.ranking}</td>
diff --git a/src/components/WindowManager.jsx b/src/components/WindowManager.jsx
index 8c10d27..90db1ad 100644
--- a/src/components/WindowManager.jsx
+++ b/src/components/WindowManager.jsx
@@ -19,7 +19,7 @@ const WindowManager = () => {
 
   return (
     <div id="wm">
-    {
+      {
       windowIds.map((id) => (<Window key={id} id={id} />))
     }
     </div>
diff --git a/src/core/ChatProvider.js b/src/core/ChatProvider.js
index 8546785..174912e 100644
--- a/src/core/ChatProvider.js
+++ b/src/core/ChatProvider.js
@@ -23,7 +23,7 @@ export class ChatProvider {
     this.infoUserId = 1;
     this.eventUserId = 1;
     this.caseCheck = /^[A-Z !.]*$/;
-    this.cyrillic = new RegExp('[\u0436-\u043B]');
+    this.cyrillic = /[\u0436-\u043B]'/;
     this.filters = [
       {
         regexp: /ADMIN/gi,
diff --git a/src/core/MString.js b/src/core/MString.js
index 18a27a5..eac3dd1 100644
--- a/src/core/MString.js
+++ b/src/core/MString.js
@@ -139,8 +139,8 @@ export default class MString {
       const chr = this.txt[zEnd];
       if (zEnd >= this.txt.length
         || chr === '\n'
-        || chr == '['
-        || chr == '('
+        || chr === '['
+        || chr === '('
       ) {
         return null;
       }
@@ -158,7 +158,7 @@ export default class MString {
       }
       zEnd += 1;
     }
-    if (zEnd < zStart + 1 || ( !z && zIsLink )) {
+    if (zEnd < zStart + 1 || (!z && zIsLink)) {
       return null;
     }
 
@@ -198,7 +198,7 @@ export default class MString {
     if (cIter < this.iter + 4) {
       return null;
     }
-    
+
     /* special case where someone pasted a http link after a text
      * without space in between
      */
diff --git a/src/core/MarkdownParser.js b/src/core/MarkdownParser.js
index 16f86f5..5a70a3b 100644
--- a/src/core/MarkdownParser.js
+++ b/src/core/MarkdownParser.js
@@ -99,8 +99,8 @@ function parseMParagraph(text, opts, breakChar) {
        * x decides what element it is
        * defaults to ordinary link
        */
-      let tag = 'l'
-      let zIsLink = true;
+      let tag = 'l';
+      const zIsLink = true;
       if (x === '!') {
         tag = 'img';
         oldPos -= 1;
diff --git a/src/core/utils.js b/src/core/utils.js
index 8190319..9432d23 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -116,7 +116,7 @@ export function getCanvasBoundaries(canvasSize: number): number {
 // z is assumed to be height here
 // in ui and rendeer, y is height
 export function getOffsetOfPixel(
-  canvasSize: number = null,
+  canvasSize: number,
   x: number,
   y: number,
   z: number = null,
diff --git a/src/reducers/.eslintrc b/src/reducers/.eslintrc
new file mode 100644
index 0000000..5d837d0
--- /dev/null
+++ b/src/reducers/.eslintrc
@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "default-param-last": "off"
+    }
+}
diff --git a/src/ui/renderer.js b/src/ui/renderer.js
index a56b915..a6c25cf 100644
--- a/src/ui/renderer.js
+++ b/src/ui/renderer.js
@@ -13,7 +13,7 @@ import { sweetAlert } from '../actions';
 import { isWebGL2Available } from '../core/utils';
 
 const dummyRenderer = {
-  is3D: null, 
+  is3D: null,
   render: () => null,
   destructor: () => null,
   renderPixel: () => null,
@@ -41,7 +41,7 @@ export async function initRenderer(store, is3D: boolean) {
       renderer = dummyRenderer;
     } else {
       /* eslint-disable-next-line max-len */
-      const module = await import(/* webpackChunkName: "voxel" */ '../ui/Renderer3D');
+      const module = await import(/* webpackChunkName: "voxel" */ './Renderer3D');
       const Renderer3D = module.default;
       renderer = new Renderer3D(store);
     }
diff --git a/src/utils/image.js b/src/utils/image.js
index 649577f..c1986bd 100644
--- a/src/utils/image.js
+++ b/src/utils/image.js
@@ -57,15 +57,14 @@ export function getImageDataOfFile(file) {
   });
 }
 
-function createPointContainerFromImageData(imageData) {
-  const { width, height, data } = imageData;
-  console.log('create container from image data', data);
-  const pointContainer = new utils.PointContainer();
-  pointContainer.setWidth(width);
-  pointContainer.setHeight(height);
-  const pointArray = pointContainer.getPointArray();
+function* loadData(data, pointArray) {
   let i = 0;
   while (i < data.length) {
+    /*
+    if (!(i % 80)) {
+      yield Math.floor(i / data.length);
+    }
+    */
     const point = utils.Point.createByRGBA(
       data[i++],
       data[i++],
@@ -74,7 +73,30 @@ function createPointContainerFromImageData(imageData) {
     );
     pointArray.push(point);
   }
-  return pointContainer;
+}
+
+async function createPointContainerFromImageData(imageData, onProgress) {
+  return new Promise((resolve) => {
+    const { width, height, data } = imageData;
+    const pointContainer = new utils.PointContainer();
+    pointContainer.setWidth(width);
+    pointContainer.setHeight(height);
+    const pointArray = pointContainer.getPointArray();
+
+    const iterator = loadData(data, pointArray);
+    const next = () => {
+      const result = iterator.next();
+      if (result.done) {
+        resolve(pointContainer);
+      } else {
+        if (onProgress) {
+          onProgress(result.value);
+        }
+        setTimeout(next, 0);
+      }
+    };
+    setTimeout(next, 0);
+  });
 }
 
 function createImageDataFromPointContainer(pointContainer) {
@@ -90,12 +112,11 @@ function createImageDataFromPointContainer(pointContainer) {
   return idata;
 }
 
-export function quantizeImage(colors, imageData, opts) {
-  console.log('quantize image');
+function quantizePointContainer(colors, pointContainer, opts) {
+  const strategy = opts.strategy || 'Nearest';
+  const colorDist = opts.colorDist || 'Euclidean';
+
   return new Promise((resolve, reject) => {
-    const pointContainer = createPointContainerFromImageData(imageData);
-    const strategy = opts.strategy || 'Nearest';
-    const colorDist = opts.colorDist || 'Euclidean';
     // create palette
     const palette = new utils.Palette();
     palette.add(utils.Point.createByRGBA(0, 0, 0, 0));
@@ -104,7 +125,6 @@ export function quantizeImage(colors, imageData, opts) {
       const point = utils.Point.createByRGBA(r, g, b, 255);
       palette.add(point);
     }
-    console.log('palette', palette);
     // construct color distance calculator
     let distCalc;
     switch (colorDist) {
@@ -145,6 +165,7 @@ export function quantizeImage(colors, imageData, opts) {
         distCalc = new distance.Euclidean();
     }
     // idk why i need this :/
+    // eslint-disable-next-line no-underscore-dangle
     if (distCalc._setDefaults) distCalc._setDefaults();
     // construct image quantizer
     let imageQuantizer;
@@ -161,20 +182,22 @@ export function quantizeImage(colors, imageData, opts) {
         false,
       );
     }
-    console.log('quantizer', imageQuantizer);
     // quantize
-    let outPointContainer;
     const iterator = imageQuantizer.quantize(pointContainer, palette);
     const next = () => {
       try {
         const result = iterator.next();
         if (result.done) {
-          resolve(createImageDataFromPointContainer(outPointContainer));
+          resolve(createImageDataFromPointContainer(pointContainer));
         } else {
           if (result.value.pointContainer) {
-            outPointContainer = result.value.pointContainer;
+            pointContainer = result.value.pointContainer;
+          }
+          if (opts.onProgress) {
+            opts.onProgress(
+              Math.floor(25 + result.value.progress * 3 / 4),
+            );
           }
-          if (opts.onProgress) opts.onProgress(result.value.progress);
           setTimeout(next, 0);
         }
       } catch (error) {
@@ -184,3 +207,18 @@ export function quantizeImage(colors, imageData, opts) {
     setTimeout(next, 0);
   });
 }
+
+export function quantizeImage(colors, imageData, opts) {
+  return createPointContainerFromImageData(
+    imageData,
+    (value) => {
+      if (opts.onProgress) {
+        opts.onProgress(value);
+      }
+    },
+  ).then((pointContainer) => quantizePointContainer(
+    colors,
+    pointContainer,
+    opts,
+  ));
+}
diff --git a/webpack.config.client.babel.js b/webpack.config.client.babel.js
index 2231a6b..dc2c3bf 100644
--- a/webpack.config.client.babel.js
+++ b/webpack.config.client.babel.js
@@ -42,13 +42,6 @@ export function buildWebpackClientConfig(
   }
 
   const babelPlugins = [
-    '@babel/plugin-transform-flow-strip-types',
-    '@babel/plugin-proposal-throw-expressions',
-    // react-optimize
-    '@babel/transform-react-constant-elements',
-    '@babel/transform-react-inline-elements',
-    'transform-react-remove-prop-types',
-    'transform-react-pure-class-to-function',
     ['ttag', ttag],
   ];
 
@@ -80,7 +73,7 @@ export function buildWebpackClientConfig(
       alias: {
         ttag: 'ttag/dist/mock',
       },
-      extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+      extensions: ['.js', '.jsx'],
     },
 
     module: {
@@ -114,25 +107,26 @@ export function buildWebpackClientConfig(
           loader: 'babel-loader',
           include: [
             path.resolve(__dirname, 'src'),
+            ...['image-q'].map((moduleName) => (
+              path.resolve(__dirname + '/node_modules/' + moduleName)
+            ))
           ],
           options: {
             // should be !extract and adhere to .po timestamps
             // in cacheIdentifier
             cacheDirectory: false,
-            babelrc: false,
             presets: [
               ['@babel/preset-env', {
                 targets: {
                   browsers: pkg.browserslist,
                 },
+                /*
                 useBuiltIns: 'usage',
                 corejs: {
                   version: 3,
                 },
-                debug: false,
+                */
               }],
-              //'@babel/typescript',
-              '@babel/react',
             ],
             plugins: babelPlugins,
           },
diff --git a/webpack.config.web.babel.js b/webpack.config.web.babel.js
index 6f11856..ede4685 100644
--- a/webpack.config.web.babel.js
+++ b/webpack.config.web.babel.js
@@ -25,13 +25,6 @@ const basePackageValues = {
 const ttag = {};
 
 const babelPlugins = [
-  '@babel/plugin-transform-flow-strip-types',
-  '@babel/plugin-proposal-throw-expressions',
-  // react-optimize
-  '@babel/transform-react-constant-elements',
-  '@babel/transform-react-inline-elements',
-  'transform-react-remove-prop-types',
-  'transform-react-pure-class-to-function',
   ['ttag', ttag],
 ];
 
@@ -66,21 +59,19 @@ export default ({
     },
 
     resolve: {
-      extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+      extensions: ['.js', '.jsx'],
     },
 
     module: {
       rules: [
         {
-          test: /\.(js|jsx|ts|tsx)$/,
+          test: /\.(js|jsx)$/,
           loader: 'babel-loader',
           include: [
             path.resolve(__dirname, 'src'),
           ],
           options: {
             cacheDirectory: false,
-
-            babelrc: false,
             presets: [
               ['@babel/preset-env', {
                 targets: {
@@ -88,10 +79,7 @@ export default ({
                 },
                 modules: false,
                 useBuiltIns: false,
-                debug: false,
               }],
-              '@babel/typescript',
-              '@babel/react',
             ],
             plugins: babelPlugins,
           },