Lots of bug fixes and program improvements

.gitignore

@@ -57,3 +57,4 @@ typings/
 # dotenv environment variables file
 .env
 
+package-lock.json

dist/avatar/Skin.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as React from 'react';
 export interface Props {
     maskID: string;

dist/avatar/Skin.js

@@ -1,14 +1,9 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
     return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -24,7 +19,7 @@ function makeColor(name, color) {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         ColorComponent.prototype.render = function () {
-            return (React.createElement("g", { id: "Skin/\uD83D\uDC76\uD83C\uDFFD-03-Brown", mask: "url(#" + this.props.maskID + ")", fill: color },
+            return (React.createElement("g", { id: "Skin/👶🏽-03-Brown", mask: "url(#" + this.props.maskID + ")", fill: color },
                 React.createElement("g", { transform: "translate(0.000000, 0.000000)", id: "Color" },
                     React.createElement("rect", { x: "0", y: "0", width: "264", height: "280" }))));
         };

dist/avatar/clothes/BlazerShirt.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as React from 'react';
 export default class BlazerShirt extends React.Component {
     static optionValue: string;

dist/avatar/clothes/BlazerShirt.js

@@ -1,50 +1,45 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
     return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var lodash_1 = require("lodash");
+var uniqueId = require("lodash.uniqueid");
 var BlazerShirt = /** @class */ (function (_super) {
     __extends(BlazerShirt, _super);
     function BlazerShirt() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.path1 = lodash_1.uniqueId('react-path-');
-        _this.mask1 = lodash_1.uniqueId('react-mask-');
+        _this.path1 = uniqueId('react-path-');
+        _this.mask1 = uniqueId('react-mask-');
         return _this;
     }
     BlazerShirt.prototype.render = function () {
         var _a = this, path1 = _a.path1, mask1 = _a.mask1;
-        return (React.createElement("g", { id: 'Clothing/Blazer-+-Shirt', transform: 'translate(0.000000, 170.000000)' },
+        return (React.createElement("g", { id: "Clothing/Blazer-+-Shirt", transform: "translate(0.000000, 170.000000)" },
             React.createElement("defs", null,
-                React.createElement("path", { d: 'M133.960472,0.294916112 C170.936473,3.32499816 200,34.2942856 200,72.0517235 L200,81 L0,81 L0,72.0517235 C1.22536245e-14,33.9525631 29.591985,2.76498122 67.0454063,0.219526408 C67.0152598,0.593114549 67,0.969227185 67,1.34762511 C67,13.2107177 81.9984609,22.8276544 100.5,22.8276544 C119.001539,22.8276544 134,13.2107177 134,1.34762511 C134,0.994669088 133.986723,0.64370138 133.960472,0.294916112 Z', id: path1 })),
-            React.createElement("g", { id: 'Shirt', transform: 'translate(32.000000, 29.000000)' },
-                React.createElement("mask", { id: mask1, fill: 'white' },
+                React.createElement("path", { d: "M133.960472,0.294916112 C170.936473,3.32499816 200,34.2942856 200,72.0517235 L200,81 L0,81 L0,72.0517235 C1.22536245e-14,33.9525631 29.591985,2.76498122 67.0454063,0.219526408 C67.0152598,0.593114549 67,0.969227185 67,1.34762511 C67,13.2107177 81.9984609,22.8276544 100.5,22.8276544 C119.001539,22.8276544 134,13.2107177 134,1.34762511 C134,0.994669088 133.986723,0.64370138 133.960472,0.294916112 Z", id: path1 })),
+            React.createElement("g", { id: "Shirt", transform: "translate(32.000000, 29.000000)" },
+                React.createElement("mask", { id: mask1, fill: "white" },
                     React.createElement("use", { xlinkHref: '#' + path1 })),
-                React.createElement("use", { id: 'Clothes', fill: '#E6E6E6', xlinkHref: '#' + path1 }),
-                React.createElement("g", { id: 'Color/Palette/Black', mask: "url(#" + mask1 + ")", fill: '#262E33' },
-                    React.createElement("g", { transform: 'translate(-32.000000, -29.000000)', id: '\uD83D\uDD8DColor' },
-                        React.createElement("rect", { x: '0', y: '0', width: '264', height: '110' }))),
-                React.createElement("g", { id: 'Shadowy', opacity: '0.599999964', mask: "url(#" + mask1 + ")", fillOpacity: '0.16', fill: '#000000' },
-                    React.createElement("g", { transform: 'translate(60.000000, -25.000000)', id: 'Hola-\uD83D\uDC4B\uD83C\uDFFC' },
-                        React.createElement("ellipse", { cx: '40.5', cy: '27.8476251', rx: '39.6351047', ry: '26.9138272' })))),
-            React.createElement("g", { id: 'Blazer', transform: 'translate(32.000000, 28.000000)' },
-                React.createElement("path", { d: 'M68.784807,1.12222847 C30.512317,2.80409739 -1.89486556e-14,34.3646437 -1.42108547e-14,73.0517235 L0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z', id: 'Saco', fill: '#3A4C5A' }),
-                React.createElement("path", { d: 'M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z', id: 'Pocket-hanky', fill: '#E6E6E6' }),
-                React.createElement("path", { d: 'M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z', id: 'Wing', fill: '#2F4351' }),
-                React.createElement("path", { d: 'M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z', id: 'Wing', fill: '#2F4351', transform: 'translate(141.000000, 41.000000) scale(-1, 1) translate(-141.000000, -41.000000) ' }))));
+                React.createElement("use", { id: "Clothes", fill: "#E6E6E6", xlinkHref: '#' + path1 }),
+                React.createElement("g", { id: "Color/Palette/Black", mask: "url(#" + mask1 + ")", fill: "#262E33" },
+                    React.createElement("g", { transform: "translate(-32.000000, -29.000000)", id: "🖍Color" },
+                        React.createElement("rect", { x: "0", y: "0", width: "264", height: "110" }))),
+                React.createElement("g", { id: "Shadowy", opacity: "0.599999964", mask: "url(#" + mask1 + ")", fillOpacity: "0.16", fill: "#000000" },
+                    React.createElement("g", { transform: "translate(60.000000, -25.000000)", id: "Hola-👋🏼" },
+                        React.createElement("ellipse", { cx: "40.5", cy: "27.8476251", rx: "39.6351047", ry: "26.9138272" })))),
+            React.createElement("g", { id: "Blazer", transform: "translate(32.000000, 28.000000)" },
+                React.createElement("path", { d: "M68.784807,1.12222847 C30.512317,2.80409739 -1.89486556e-14,34.3646437 -1.42108547e-14,73.0517235 L0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z", id: "Saco", fill: "#3A4C5A" }),
+                React.createElement("path", { d: "M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z", id: "Pocket-hanky", fill: "#E6E6E6" }),
+                React.createElement("path", { d: "M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z", id: "Wing", fill: "#2F4351" }),
+                React.createElement("path", { d: "M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z", id: "Wing", fill: "#2F4351", transform: "translate(141.000000, 41.000000) scale(-1, 1) translate(-141.000000, -41.000000) " }))));
     };
     BlazerShirt.optionValue = 'BlazerShirt';
     return BlazerShirt;

dist/avatar/clothes/BlazerSweater.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as React from 'react';
 export default class BlazerSweater extends React.Component {
     static optionValue: string;

dist/avatar/clothes/BlazerSweater.js

@@ -1,46 +1,41 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
     return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var lodash_1 = require("lodash");
+var uniqueId = require("lodash.uniqueid");
 var BlazerSweater = /** @class */ (function (_super) {
     __extends(BlazerSweater, _super);
     function BlazerSweater() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.path1 = lodash_1.uniqueId('react-path-');
-        _this.mask1 = lodash_1.uniqueId('react-mask-');
+        _this.path1 = uniqueId('react-path-');
+        _this.mask1 = uniqueId('react-mask-');
         return _this;
     }
     BlazerSweater.prototype.render = function () {
         var _a = this, path1 = _a.path1, mask1 = _a.mask1;
-        return (React.createElement("g", { id: 'Clothing/Blazer-+-Sweater', transform: 'translate(0.000000, 170.000000)' },
+        return (React.createElement("g", { id: "Clothing/Blazer-+-Sweater", transform: "translate(0.000000, 170.000000)" },
             React.createElement("defs", null,
-                React.createElement("path", { d: 'M105.192402,29.0517235 L104,29.0517235 L104,29.0517235 C64.235498,29.0517235 32,61.2872215 32,101.051724 L32,110 L232,110 L232,101.051724 C232,61.2872215 199.764502,29.0517235 160,29.0517235 L160,29.0517235 L158.807598,29.0517235 C158.934638,30.0353144 159,31.0364513 159,32.0517235 C159,45.8588423 146.911688,57.0517235 132,57.0517235 C117.088312,57.0517235 105,45.8588423 105,32.0517235 C105,31.0364513 105.065362,30.0353144 105.192402,29.0517235 Z', id: path1 })),
-            React.createElement("mask", { id: mask1, fill: 'white' },
+                React.createElement("path", { d: "M105.192402,29.0517235 L104,29.0517235 L104,29.0517235 C64.235498,29.0517235 32,61.2872215 32,101.051724 L32,110 L232,110 L232,101.051724 C232,61.2872215 199.764502,29.0517235 160,29.0517235 L160,29.0517235 L158.807598,29.0517235 C158.934638,30.0353144 159,31.0364513 159,32.0517235 C159,45.8588423 146.911688,57.0517235 132,57.0517235 C117.088312,57.0517235 105,45.8588423 105,32.0517235 C105,31.0364513 105.065362,30.0353144 105.192402,29.0517235 Z", id: path1 })),
+            React.createElement("mask", { id: mask1, fill: "white" },
                 React.createElement("use", { xlinkHref: '#' + path1 })),
-            React.createElement("use", { id: 'Clothes', fill: '#E6E6E6', fillRule: 'evenodd', xlinkHref: '#' + path1 }),
-            React.createElement("g", { id: 'Color/Palette/Black', mask: "url(#" + mask1 + ")", fillRule: 'evenodd', fill: '#262E33' },
-                React.createElement("rect", { id: '\uD83D\uDD8DColor', x: '0', y: '0', width: '264', height: '110' })),
-            React.createElement("g", { id: 'Blazer', strokeWidth: '1', fillRule: 'evenodd', transform: 'translate(32.000000, 28.000000)' },
-                React.createElement("path", { d: 'M68.784807,1.12222847 C30.512317,2.80409739 1.24427139e-14,34.3646437 0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z', id: 'Saco', fill: '#3A4C5A' }),
-                React.createElement("path", { d: 'M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z', id: 'Pocket-hanky', fill: '#E6E6E6' }),
-                React.createElement("path", { d: 'M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z', id: 'Wing', fill: '#2F4351' }),
-                React.createElement("path", { d: 'M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z', id: 'Wing', fill: '#2F4351', transform: 'translate(141.000000, 41.000000) scale(-1, 1) translate(-141.000000, -41.000000) ' })),
-            React.createElement("path", { d: 'M156,21.5390062 C162.772319,26.1359565 167,32.6563196 167,39.8878801 C167,47.2887711 162.572015,53.9447688 155.520105,58.5564942 L149.57933,53.8764929 L145,54.207887 L146,51.0567821 L145.922229,50.995516 C152.022491,47.8530505 156,42.7003578 156,36.8768102 L156,21.5390062 Z M108,21.5390062 C101.227681,26.1359565 97,32.6563196 97,39.8878801 C97,47.2887711 101.427985,53.9447688 108.479895,58.5564942 L114.42067,53.8764929 L119,54.207887 L118,51.0567821 L118.077771,50.995516 C111.977509,47.8530505 108,42.7003578 108,36.8768102 L108,21.5390062 Z', id: 'Collar', fill: '#F2F2F2', fillRule: 'evenodd' })));
+            React.createElement("use", { id: "Clothes", fill: "#E6E6E6", fillRule: "evenodd", xlinkHref: '#' + path1 }),
+            React.createElement("g", { id: "Color/Palette/Black", mask: "url(#" + mask1 + ")", fillRule: "evenodd", fill: "#262E33" },
+                React.createElement("rect", { id: "🖍Color", x: "0", y: "0", width: "264", height: "110" })),
+            React.createElement("g", { id: "Blazer", strokeWidth: "1", fillRule: "evenodd", transform: "translate(32.000000, 28.000000)" },
+                React.createElement("path", { d: "M68.784807,1.12222847 C30.512317,2.80409739 1.24427139e-14,34.3646437 0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z", id: "Saco", fill: "#3A4C5A" }),
+                React.createElement("path", { d: "M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z", id: "Pocket-hanky", fill: "#E6E6E6" }),
+                React.createElement("path", { d: "M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z", id: "Wing", fill: "#2F4351" }),
+                React.createElement("path", { d: "M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z", id: "Wing", fill: "#2F4351", transform: "translate(141.000000, 41.000000) scale(-1, 1) translate(-141.000000, -41.000000) " })),
+            React.createElement("path", { d: "M156,21.5390062 C162.772319,26.1359565 167,32.6563196 167,39.8878801 C167,47.2887711 162.572015,53.9447688 155.520105,58.5564942 L149.57933,53.8764929 L145,54.207887 L146,51.0567821 L145.922229,50.995516 C152.022491,47.8530505 156,42.7003578 156,36.8768102 L156,21.5390062 Z M108,21.5390062 C101.227681,26.1359565 97,32.6563196 97,39.8878801 C97,47.2887711 101.427985,53.9447688 108.479895,58.5564942 L114.42067,53.8764929 L119,54.207887 L118,51.0567821 L118.077771,50.995516 C111.977509,47.8530505 108,42.7003578 108,36.8768102 L108,21.5390062 Z", id: "Collar", fill: "#F2F2F2", fillRule: "evenodd" })));
     };
     BlazerSweater.optionValue = 'BlazerSweater';
     return BlazerSweater;

dist/avatar/clothes/CollarSweater.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as React from 'react';
 export default class CollarSweater extends React.Component {
     static optionValue: string;