g(x,c))a[d]=x,a[n]=c,d=n;else break a}}return b}\nfunction g(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}if(\"object\"===typeof performance&&\"function\"===typeof performance.now){var l=performance;exports.unstable_now=function(){return l.now()}}else{var p=Date,q=p.now();exports.unstable_now=function(){return p.now()-q}}var r=[],t=[],u=1,v=null,y=3,z=!1,A=!1,B=!1,D=\"function\"===typeof setTimeout?setTimeout:null,E=\"function\"===typeof clearTimeout?clearTimeout:null,F=\"undefined\"!==typeof setImmediate?setImmediate:null;\n\"undefined\"!==typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function G(a){for(var b=h(t);null!==b;){if(null===b.callback)k(t);else if(b.startTime<=a)k(t),b.sortIndex=b.expirationTime,f(r,b);else break;b=h(t)}}function H(a){B=!1;G(a);if(!A)if(null!==h(r))A=!0,I(J);else{var b=h(t);null!==b&&K(H,b.startTime-a)}}\nfunction J(a,b){A=!1;B&&(B=!1,E(L),L=-1);z=!0;var c=y;try{G(b);for(v=h(r);null!==v&&(!(v.expirationTime>b)||a&&!M());){var d=v.callback;if(\"function\"===typeof d){v.callback=null;y=v.priorityLevel;var e=d(v.expirationTime<=b);b=exports.unstable_now();\"function\"===typeof e?v.callback=e:v===h(r)&&k(r);G(b)}else k(r);v=h(r)}if(null!==v)var w=!0;else{var m=h(t);null!==m&&K(H,m.startTime-b);w=!1}return w}finally{v=null,y=c,z=!1}}var N=!1,O=null,L=-1,P=5,Q=-1;\nfunction M(){return exports.unstable_now()-Qa||125d?(a.sortIndex=c,f(t,a),null===h(r)&&a===h(t)&&(B?(E(L),L=-1):B=!0,K(H,c-d))):(a.sortIndex=e,f(r,a),A||z||(A=!0,I(J)));return a};\nexports.unstable_shouldYield=M;exports.unstable_wrapCallback=function(a){var b=y;return function(){var c=y;y=b;try{return a.apply(this,arguments)}finally{y=c}}};\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/scheduler.production.min.js');\n} else {\n module.exports = require('./cjs/scheduler.development.js');\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.f = {};\n// This file contains only the entry chunk.\n// The chunk loading function for additional chunks\n__webpack_require__.e = (chunkId) => {\n\treturn Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {\n\t\t__webpack_require__.f[key](chunkId, promises);\n\t\treturn promises;\n\t}, []));\n};","// This function allow to reference async chunks\n__webpack_require__.u = (chunkId) => {\n\t// return url for filenames based on template\n\treturn \"static/js/\" + chunkId + \".\" + \"9c5e822e\" + \".chunk.js\";\n};","// This function allow to reference async chunks\n__webpack_require__.miniCssF = (chunkId) => {\n\t// return url for filenames based on template\n\treturn undefined;\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","var inProgress = {};\nvar dataWebpackPrefix = \"dummy:\";\n// loadScript function to load a script via script tag\n__webpack_require__.l = (url, done, key, chunkId) => {\n\tif(inProgress[url]) { inProgress[url].push(done); return; }\n\tvar script, needAttach;\n\tif(key !== undefined) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tfor(var i = 0; i < scripts.length; i++) {\n\t\t\tvar s = scripts[i];\n\t\t\tif(s.getAttribute(\"src\") == url || s.getAttribute(\"data-webpack\") == dataWebpackPrefix + key) { script = s; break; }\n\t\t}\n\t}\n\tif(!script) {\n\t\tneedAttach = true;\n\t\tscript = document.createElement('script');\n\n\t\tscript.charset = 'utf-8';\n\t\tscript.timeout = 120;\n\t\tif (__webpack_require__.nc) {\n\t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n\t\t}\n\t\tscript.setAttribute(\"data-webpack\", dataWebpackPrefix + key);\n\n\t\tscript.src = url;\n\t}\n\tinProgress[url] = [done];\n\tvar onScriptComplete = (prev, event) => {\n\t\t// avoid mem leaks in IE.\n\t\tscript.onerror = script.onload = null;\n\t\tclearTimeout(timeout);\n\t\tvar doneFns = inProgress[url];\n\t\tdelete inProgress[url];\n\t\tscript.parentNode && script.parentNode.removeChild(script);\n\t\tdoneFns && doneFns.forEach((fn) => (fn(event)));\n\t\tif(prev) return prev(event);\n\t}\n\tvar timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);\n\tscript.onerror = onScriptComplete.bind(null, script.onerror);\n\tscript.onload = onScriptComplete.bind(null, script.onload);\n\tneedAttach && document.head.appendChild(script);\n};","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"/\";","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t179: 0\n};\n\n__webpack_require__.f.j = (chunkId, promises) => {\n\t\t// JSONP chunk loading for javascript\n\t\tvar installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;\n\t\tif(installedChunkData !== 0) { // 0 means \"already installed\".\n\n\t\t\t// a Promise means \"currently loading\".\n\t\t\tif(installedChunkData) {\n\t\t\t\tpromises.push(installedChunkData[2]);\n\t\t\t} else {\n\t\t\t\tif(true) { // all chunks have JS\n\t\t\t\t\t// setup Promise in chunk cache\n\t\t\t\t\tvar promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));\n\t\t\t\t\tpromises.push(installedChunkData[2] = promise);\n\n\t\t\t\t\t// start chunk loading\n\t\t\t\t\tvar url = __webpack_require__.p + __webpack_require__.u(chunkId);\n\t\t\t\t\t// create error before stack unwound to get useful stacktrace later\n\t\t\t\t\tvar error = new Error();\n\t\t\t\t\tvar loadingEnded = (event) => {\n\t\t\t\t\t\tif(__webpack_require__.o(installedChunks, chunkId)) {\n\t\t\t\t\t\t\tinstalledChunkData = installedChunks[chunkId];\n\t\t\t\t\t\t\tif(installedChunkData !== 0) installedChunks[chunkId] = undefined;\n\t\t\t\t\t\t\tif(installedChunkData) {\n\t\t\t\t\t\t\t\tvar errorType = event && (event.type === 'load' ? 'missing' : event.type);\n\t\t\t\t\t\t\t\tvar realSrc = event && event.target && event.target.src;\n\t\t\t\t\t\t\t\terror.message = 'Loading chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';\n\t\t\t\t\t\t\t\terror.name = 'ChunkLoadError';\n\t\t\t\t\t\t\t\terror.type = errorType;\n\t\t\t\t\t\t\t\terror.request = realSrc;\n\t\t\t\t\t\t\t\tinstalledChunkData[1](error);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t\t__webpack_require__.l(url, loadingEnded, \"chunk-\" + chunkId, chunkId);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n};\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n// no on chunks loaded\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkdummy\"] = self[\"webpackChunkdummy\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","// Code source from here, thanks author\n// https://github.com/drawcall/Proton/blob/gh-pages/source/src/utils/Rand.js\nclass Rand {\n\n constructor() {\n this.list = [];\n }\n\n set(probability, target) {\n this.list.push({\n probability,\n target,\n a: 0,\n b: 1\n });\n\n this.calculation();\n }\n\n calculation() {\n let total = 0;\n for (let i = 0; i < this.list.length; i++) {\n total += this.list[i].probability;\n }\n\n for (let i = 0; i < this.list.length; i++) {\n const obj = this.list[i];\n const val = obj.probability / total;\n\n obj.a = i === 0 ? 0 : this.list[i - 1].b;\n obj.b = obj.a + val;\n }\n }\n\n getResult() {\n const val = Math.random();\n for (let i = 0; i < this.list.length; i++) {\n const obj = this.list[i];\n\n if (val <= obj.b && val > obj.a) {\n return obj.target;\n }\n }\n\n return this.list[0].target;\n }\n};\n\nexport default Rand;\n","import React from \"react\";\nimport RAFManager from \"raf-manager\";\nexport default class Canvas extends React.Component {\n constructor(props) {\n super(props);\n\n this._iid = 0;\n this._oid = 0;\n this.size = { width: 0, height: 0 };\n this.canvasRef = React.createRef();\n }\n\n componentDidMount() {\n this._oid = setTimeout(() => {\n this.initCanvas();\n this.resize = this.resize.bind(this);\n window.addEventListener(\"resize\", this.resize);\n }, 100);\n\n const canvas = this.getCanvas();\n this.props.onCanvasDidMount && this.props.onCanvasDidMount(canvas);\n }\n\n initCanvas() {\n const canvas = this.getCanvas();\n\n if (this.props.globalCompositeOperation) {\n const context = canvas.getContext(\"2d\");\n context.globalCompositeOperation = this.props.globalCompositeOperation;\n }\n\n const { width, height } = this.setCanvasSize(canvas);\n this.heartbeatDetectionCanvasSize(canvas);\n this.props.onCanvasInited(canvas, width, height);\n }\n\n getCanvas(){\n const canvas = this.canvasRef.current;\n return canvas;\n }\n\n heartbeatDetectionCanvasSize(canvas) {\n this._iid = setInterval(() => {\n if(this.canvasRef.current){\n const newHeight = this.canvasRef.current.clientHeight;\n if (newHeight !== this.size.height) {\n const { width, height } = this.setCanvasSize(canvas);\n this.props.onResize && this.props.onResize(width, height);\n }\n }\n }, 1000 / 10);\n }\n\n componentWillUnmount() {\n try{\n window.removeEventListener(\"resize\", this.resize);\n clearInterval(this._iid);\n clearTimeout(this._oid);\n }catch(e){\n }\n }\n\n resize() {\n const canvas = this.getCanvas();\n const { width, height } = this.setCanvasSize(canvas);\n this.props.onResize && this.props.onResize(width, height);\n }\n\n setCanvasSize(canvas) {\n const width = this.canvasRef.current.clientWidth;\n const height = this.canvasRef.current.clientHeight;\n\n this.size.width = width;\n this.size.height = height;\n canvas.width = width;\n canvas.height = height;\n return { width, height };\n }\n\n handleWaypointEnter() {\n RAFManager.start();\n }\n\n handleWaypointLeave() {\n RAFManager.stop();\n }\n\n getStyle() {\n const { bg } = this.props;\n let style = { width: \"100%\", height: \"100%\" };\n\n if (bg === true) {\n style = Object.assign(style, {\n position: \"absolute\",\n zIndex: -1,\n top: 0,\n left: 0\n });\n } else if(bg && typeof bg === \"object\") {\n style = Object.assign(style, bg);\n }\n\n return style;\n }\n\n handleMouseDown(e) {\n this.props.onMouseDown && this.props.onMouseDown(e);\n }\n\n render() {\n return (\n \n );\n }\n}\n","\nfunction hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : {};\n}\n\nfunction getColor(color, a) {\n let c;\n if (color) {\n c = hexToRgb(color);\n return `rgba(${c.r},${c.g},${c.b}, ${a})`;\n } else {\n return null;\n }\n}\n\n\nexport { hexToRgb, getColor };","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\nimport { getColor } from \"../utils/Color\";\n\nexport default class Ball extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n this.createMiniEmitter(canvas);\n RAFManager.add(this.renderProton);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) { }\n }\n\n onResize() { }\n\n createProton(canvas, width, height) {\n const context = canvas.getContext(\"2d\");\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(4, 9),\n new Proton.Span(0.8, 1.3)\n );\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(1, 50));\n emitter.addInitialize(new Proton.Life(5, 6));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(5, 8),\n new Proton.Span(30, 70),\n \"polar\"\n )\n );\n\n emitter.addBehaviour(new Proton.Alpha(1, 0));\n emitter.addBehaviour(\n new Proton.Color([\"#36aaf3\", \"#fd769c\", \"#94ff22\", \"#ffa545\", \"#ffffff\"])\n );\n emitter.addBehaviour(new Proton.Scale(0.7, 1));\n emitter.addBehaviour(new Proton.Gravity(3));\n emitter.addBehaviour(new Proton.Collision(emitter));\n emitter.addBehaviour(this.customDeadBehaviour(canvas));\n emitter.addBehaviour(\n new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"bound\"\n )\n );\n\n emitter.p.x = Math.min(500, Math.max(canvas.width / 2 - 400, 50));\n emitter.p.y = canvas.height / 2 + 50;\n emitter.emit();\n this.proton.addEmitter(emitter);\n\n const renderer = new Proton.CanvasRenderer(canvas);\n renderer.onProtonUpdate = ()=> {\n context.fillStyle = getColor(this.props.color, 0.2) || \"rgba(255, 255, 255, 0.2)\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n };\n this.proton.addRenderer(renderer);\n }\n\n customDeadBehaviour(canvas) {\n return {\n initialize: function (particle) { },\n applyBehaviour: particle => {\n if (particle.p.y + particle.radius >= canvas.height) {\n if (particle.radius > 9) {\n this.miniEmitteing(particle);\n particle.dead = true;\n }\n }\n }\n };\n }\n\n createMiniEmitter(canvas) {\n const miniEmitter = new Proton.Emitter();\n miniEmitter.rate = new Proton.Rate(\n new Proton.Span(3, 6),\n new Proton.Span(1, 2)\n );\n\n miniEmitter.addInitialize(new Proton.Mass(1));\n miniEmitter.radiusInitialize = new Proton.Radius();\n miniEmitter.addInitialize(miniEmitter.radiusInitialize);\n miniEmitter.addInitialize(new Proton.Life(0.5, 1));\n miniEmitter.addInitialize(\n new Proton.V(\n new Proton.Span(1.5, 3),\n new Proton.Span(0, 70, true),\n \"polar\"\n )\n );\n\n miniEmitter.colorBehaviour = new Proton.Color(\"#ffffff\");\n miniEmitter.addBehaviour(new Proton.Alpha(1, 0));\n miniEmitter.addBehaviour(miniEmitter.colorBehaviour);\n miniEmitter.addBehaviour(new Proton.Gravity(4));\n miniEmitter.addBehaviour(new Proton.Collision(miniEmitter));\n miniEmitter.addBehaviour(\n new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"bound\"\n )\n );\n this.proton.addEmitter(miniEmitter);\n\n this.miniEmitter = miniEmitter;\n }\n\n miniEmitteing(particle) {\n const miniEmitter = this.miniEmitter;\n miniEmitter.radiusInitialize.reset(\n particle.radius * 0.05,\n particle.radius * 0.2\n );\n miniEmitter.colorBehaviour.reset(particle.color);\n miniEmitter.p.x = particle.p.x;\n miniEmitter.p.y = particle.p.y;\n miniEmitter.emit(\"once\");\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Color extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#529B88\",\n \"#CDD180\",\n \"#FFFA32\",\n \"#FB6255\",\n \"#FB4A53\",\n \"#FF4E50\",\n \"#F9D423\"\n ];\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize() {}\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(5, 8),\n new Proton.Span(0.1, 0.25)\n );\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(20, 200));\n emitter.addInitialize(new Proton.Life(2, 4));\n emitter.addInitialize(\n new Proton.Position(new Proton.RectZone(0, 0, width, height))\n );\n\n emitter.addBehaviour(new Proton.Alpha(0, 1, Infinity, Proton.easeOutCubic));\n emitter.addBehaviour(new Proton.Scale(1, 0, Infinity, Proton.easeOutCubic));\n emitter.addBehaviour(new Proton.Color(this.colors, \"random\"));\n\n emitter.emit();\n this.proton.addEmitter(emitter);\n\n const renderer = new Proton.CanvasRenderer(canvas);\n this.proton.addRenderer(renderer);\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Color extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#529B88\",\n \"#CDD180\",\n \"#FFFA32\",\n \"#FB6255\",\n \"#FB4A53\",\n \"#FF4E50\",\n \"#F9D423\"\n ];\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) { }\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);;\n }\n\n getProp(key, defaultVal) {\n const config = this.props.config || {};\n const val = config[key] || defaultVal;\n if (Array.isArray(val)) {\n return new Proton.Span(val[0], val[1]);\n } else {\n return val;\n }\n }\n\n getArrProp(key, defaultVal) {\n const config = this.props.config || {};\n const val = config[key] || defaultVal;\n if (!val) return null;\n\n if (Array.isArray(val)) {\n return val;\n } else {\n return [val, val];\n }\n }\n\n createProton(canvas, width, height) {\n const num = this.getProp(\"num\", [5, 8]);\n const rps = this.getProp(\"rps\", [0.1, 0.2]);\n const mass = this.getProp(\"mass\", 1);\n const radius = this.getProp(\"radius\", [10, 30]);\n const life = this.getProp(\"life\", [2, 3]);\n const body = this.getProp(\"body\");\n const position = this.getProp(\"position\");\n const v = this.getProp(\"v\", [2, 3]);\n const tha = this.getProp(\"tha\", [-15, 15]);\n const alpha = this.getArrProp(\"alpha\");\n const scale = this.getArrProp(\"scale\");\n const color = this.getArrProp(\"color\");\n const cross = this.getProp(\"cross\", \"dead\");\n const random = this.getProp(\"random\");\n const rotate = this.getArrProp(\"rotate\");\n const g = this.getProp(\"g\");\n const f = this.getArrProp(\"f\");\n const emitterV = this.getProp(\"emitter\");\n\n this.proton = new Proton();\n let emitter;\n if (emitterV === \"follow\") {\n emitter = new Proton.FollowEmitter();\n } else {\n emitter = new Proton.Emitter();\n }\n emitter.rate = new Proton.Rate(num, rps);\n\n emitter.addInitialize(new Proton.Mass(mass));\n emitter.addInitialize(new Proton.Radius(radius));\n emitter.addInitialize(new Proton.Life(life));\n emitter.addInitialize(new Proton.Velocity(v, tha, \"polar\"));\n if (body) emitter.addInitialize(new Proton.Body(body));\n\n let pos;\n if (position === \"all\" || position === \"screen\") {\n pos = new Proton.Position(new Proton.RectZone(0, 0, canvas.width, canvas.height))\n } else if (typeof position === \"object\") {\n pos = new Proton.Position(new Proton.RectZone(position.x, position.y, position.width, position.height))\n } else {\n emitter.p.x = canvas.width / 2;\n emitter.p.y = canvas.height / 2;\n }\n\n emitter.addInitialize(pos);\n\n /// behaviour\n const alphaB = alpha ? new Proton.Alpha(alpha[0], alpha[1]) : new Proton.Alpha(0, 1);\n const scaleB = scale ? new Proton.Scale(scale[0], scale[1]) : new Proton.Scale(1, 0.2);\n const colorB = color ? new Proton.Color(color[0], color[1]) : new Proton.Color(this.colors);\n\n emitter.addBehaviour(alphaB);\n emitter.addBehaviour(scaleB);\n if(!body) emitter.addBehaviour(colorB);\n\n if(rotate){\n if(rotate[0]===true||rotate[0]===\"rotate\"){\n emitter.addBehaviour(new Proton.Rotate());\n }else{\n emitter.addBehaviour(new Proton.Rotate(rotate[0], rotate[1]));\n }\n }\n\n const zone = new Proton.RectZone(0, 0, canvas.width, canvas.height)\n const crossZoneBehaviour = new Proton.CrossZone(zone, cross);\n emitter.addBehaviour(crossZoneBehaviour);\n\n random && emitter.addBehaviour(new Proton.RandomDrift(random, random, 0.05));\n g && emitter.addBehaviour(new Proton.G(g));\n f && emitter.addBehaviour(new Proton.F(f[0], f[1]));\n\n emitter.emit();\n this.proton.addEmitter(emitter);\n\n const renderer = this.createRenderer(canvas);\n this.proton.addRenderer(renderer);\n\n this.emitter = emitter;\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n createRenderer(canvas) {\n const width = canvas.width;\n const height = canvas.height;\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n\n const onUpdate = this.getProp(\"onUpdate\");\n if (onUpdate) {\n renderer.onProtonUpdate = () => {\n onUpdate(context, width, height);\n };\n }\n\n const onParticleCreated = this.getProp(\"onParticleCreated\");\n if (onParticleCreated) {\n renderer.onParticleCreated = (particle) => {\n onParticleCreated(context, particle);\n };\n }\n\n const onParticleUpdate = this.getProp(\"onParticleUpdate\");\n if (onParticleUpdate) {\n renderer.onParticleUpdate = (particle) => {\n onParticleUpdate(context, particle);\n };\n }\n\n return renderer;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n handleMouseDown(e) {\n const onMouseDown = this.getProp(\"onMouseDown\");\n if (onMouseDown) {\n onMouseDown(e);\n }\n }\n\n render() {\n const globalCompositeOperation = this.props.globalCompositeOperation || this.props.operation || \"source-over\";\n\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\nimport { getColor } from \"../utils/Color\";\n\nexport default class Lines extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasDidMount(canvas){\n if(this.props.color){\n canvas.style.backgroundColor = this.props.color;\n }\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) { }\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.damping = 0.008;\n emitter.rate = new Proton.Rate(this.props.num ? this.props.num : 250);\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(4));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(1.5),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n const mouseObj = {\n x: width / 2,\n y: height / 2\n };\n\n const attractionBehaviour = new Proton.Attraction(mouseObj, 0, 0);\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"cross\"\n );\n emitter.addBehaviour(new Proton.Color(\"random\"));\n emitter.addBehaviour(attractionBehaviour, crossZoneBehaviour);\n emitter.addBehaviour(new Proton.RandomDrift(10, 10, 0.05));\n emitter.p.x = canvas.width / 2;\n emitter.p.y = canvas.height / 2;\n emitter.emit(\"once\");\n\n this.proton.addEmitter(emitter);\n this.proton.addRenderer(this.createRenderer(canvas));\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n createRenderer(canvas) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n renderer.onProtonUpdate = () => {\n context.fillStyle = getColor(this.props.color, 0.02) || \"rgba(0, 0, 0, 0.02)\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleUpdate = function (particle) {\n context.beginPath();\n context.strokeStyle = particle.color;\n context.lineWidth = 1;\n context.moveTo(particle.old.p.x, particle.old.p.y);\n context.lineTo(particle.p.x, particle.p.y);\n context.closePath();\n context.stroke();\n };\n\n return renderer;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\nimport { getColor } from \"../utils/Color\";\n\nexport default class Thick extends React.Component {\n constructor(props) {\n super(props);\n this.hue = 0;\n this.index = 0;\n this.colorTemplate = `hsla(hue,80%,50%, 0.75)`;\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasDidMount(canvas){\n if(this.props.color){\n canvas.style.backgroundColor = this.props.color;\n }\n }\n\n onCanvasInited(canvas, width, height) {\n this.canvas = canvas;\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.damping = 0.008;\n emitter.rate = new Proton.Rate(this.props.num ? this.props.num : 150);\n\n // Initialize\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(8));\n emitter.addInitialize(\n new Proton.V(new Proton.Span(0.1, 0.5), new Proton.Span(0, 360), \"polar\")\n );\n emitter.addInitialize(\n new Proton.Position(\n new Proton.CircleZone(canvas.width / 2, canvas.height / 2, 100)\n )\n );\n\n // Behaviour\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"cross\"\n );\n emitter.addBehaviour(crossZoneBehaviour);\n this.repulsion = new Proton.Repulsion(\n {\n x: canvas.width / 2,\n y: canvas.height / 2 - 100\n },\n 3,\n 300\n );\n\n this.attraction = new Proton.Attraction(\n {\n x: canvas.width / 2,\n y: canvas.height / 2\n },\n 3,\n 200\n );\n emitter.addBehaviour(this.attraction, this.repulsion);\n emitter.addBehaviour(new Proton.Color(\"random\"));\n emitter.addBehaviour(new Proton.RandomDrift(20, 15, 0.15));\n\n emitter.emit(\"once\");\n this.proton.addEmitter(emitter);\n this.proton.addRenderer(this.createRenderer(canvas));\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n createRenderer(canvas) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n\n renderer.onProtonUpdate = () => {\n this.hue += 1;\n context.fillStyle = getColor(this.props.color, 0.02) || \"rgba(0, 0, 0, 0.02)\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleCreated = particle => {\n particle.data.begin = Proton.MathUtil.randomAToB(1, 120);\n particle.data.tha = Proton.MathUtil.randomAToB(0, Math.PI * 2);\n };\n\n renderer.onParticleUpdate = particle => {\n const hue = particle.data.begin + this.hue;\n particle.color = this.colorTemplate.replace(\"hue\", hue % 360);\n\n const ratio = 3 / 4;\n const radius =\n particle.radius * (1 - ratio) * Math.cos((particle.data.tha += 0.01)) +\n particle.radius * ratio;\n\n context.beginPath();\n context.fillStyle = particle.color;\n context.arc(particle.p.x, particle.p.y, radius, 0, Math.PI * 2, true);\n context.closePath();\n context.fill();\n };\n\n return renderer;\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n renderProton() {\n const canvas = this.canvas;\n this.proton.update();\n if (this.index % 200 === 0) {\n this.attraction.targetPosition.x = Math.random() * canvas.width;\n this.attraction.targetPosition.y = Math.random() * canvas.height;\n\n this.repulsion.targetPosition.x = Math.random() * canvas.width;\n this.repulsion.targetPosition.y = Math.random() * canvas.height;\n }\n\n this.index++;\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Square extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#fad390\",\n \"#81ecec\",\n \"#ffffff\",\n \"#badc58\",\n \"#f9ca24\",\n \"#FEA47F\"\n ];\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onCanvasDidMount(canvas) {\n \n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n const dis = 150;\n this.crossZoneBehaviour.zone.width = width + 2 * dis;\n this.crossZoneBehaviour.zone.height = height + 2 * dis;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(this.props.num ? this.props.num : 50);\n emitter.damping = 0;\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(4, 70));\n emitter.addInitialize(\n new Proton.Velocity(new Proton.Span(2, 10), new Proton.Span(0), \"polar\")\n );\n emitter.addInitialize(\n new Proton.Position(\n new Proton.LineZone(0, canvas.height, canvas.width, canvas.height)\n )\n );\n\n const dis = 150;\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(\n 0 - dis,\n 0 - dis,\n canvas.width + 2 * dis,\n canvas.height + 2 * dis\n ),\n \"cross\"\n );\n emitter.addBehaviour(crossZoneBehaviour);\n emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.1, 0.55)));\n emitter.addBehaviour(new Proton.Color(this.colors));\n\n emitter.emit(\"once\");\n this.proton.addEmitter(emitter);\n const renderer = this.createRenderer(canvas);\n this.proton.addRenderer(renderer);\n\n this.crossZoneBehaviour = crossZoneBehaviour;\n emitter.preEmit(2);\n }\n\n createRenderer(canvas) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CustomRenderer();\n\n renderer.onProtonUpdate = () => {\n context.clearRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleCreated = particle => {\n const w = particle.radius || 60;\n const h = Proton.MathUtil.randomAToB(100, 200, \"int\");\n particle.data.w = w;\n particle.data.h = h;\n };\n\n renderer.onParticleUpdate = particle => {\n const w = particle.data.w;\n const h = particle.data.h;\n context.save();\n context.globalAlpha = particle.alpha;\n context.fillStyle = particle.color;\n\n context.translate(particle.p.x, particle.p.y);\n context.rotate(Proton.MathUtil.degreeTransform(particle.rotation));\n context.translate(-particle.p.x, -particle.p.y);\n\n context.beginPath();\n context.rect(particle.p.x - w / 2, particle.p.y - h / 2, w, h);\n\n context.closePath();\n context.fill();\n context.globalAlpha = 1;\n context.restore();\n };\n\n return renderer;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\nimport { getColor } from \"../utils/Color\";\n\nexport default class Cobweb extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(100),\n new Proton.Span(0.05, 0.2)\n );\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(1, 4));\n emitter.addInitialize(new Proton.Life(Infinity));\n\n const pointZone = new Proton.Position(\n new Proton.RectZone(0, 0, width, height)\n );\n emitter.addInitialize(pointZone);\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(0.3, 0.6),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n\n emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.2, 0.9)));\n emitter.addBehaviour(new Proton.Color(this.props.color || \"#333\"));\n this.crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, width, height),\n \"cross\"\n );\n emitter.addBehaviour(this.crossZoneBehaviour);\n\n emitter.emit(\"once\");\n emitter.damping = 0;\n this.proton.addEmitter(emitter);\n this.proton.addRenderer(this.createRenderer(canvas, emitter));\n }\n\n createRenderer(canvas, emitter) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n const R = 140;\n\n renderer.onProtonUpdateAfter = ()=> {\n let particles = emitter.particles;\n\n for (let i = 0; i < particles.length; i++) {\n for (let j = i + 1; j < particles.length; j++) {\n let pA = particles[i];\n let pB = particles[j];\n let dis = pA.p.distanceTo(pB.p);\n\n if (dis < R) {\n let alpha = (1 - dis / R) * 0.5;\n context.strokeStyle = getColor(this.props.color, alpha) || `rgba(3, 3, 3, ${alpha})`;\n context.beginPath();\n context.moveTo(pA.p.x, pA.p.y);\n context.lineTo(pB.p.x, pB.p.y);\n context.closePath();\n context.stroke();\n }\n }\n }\n };\n\n return renderer;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Circle extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#74b9ff\",\n \"#e84393\",\n \"#6c5ce7\",\n \"#00b894\",\n \"#fdcb6e\",\n \"#006266\",\n \"#1B1464\"\n ];\n\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) { }\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(this.props.num || 20);\n emitter.damping = 0.008;\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(30, 600));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(0.5),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n emitter.addInitialize(\n new Proton.Position(\n new Proton.RectZone(0, 0, canvas.width, canvas.height)\n )\n );\n\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"cross\"\n );\n emitter.addBehaviour(crossZoneBehaviour);\n emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.35, 0.55)));\n emitter.addBehaviour(new Proton.Color(this.getColor()));\n emitter.addBehaviour(new Proton.RandomDrift(50, 50, 0.5));\n\n emitter.emit(\"once\");\n this.proton.addEmitter(emitter);\n\n const renderer = new Proton.CanvasRenderer(canvas);\n this.proton.addRenderer(renderer);\n\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n getColor() {\n let c = this.colors;\n if (this.props.color) {\n if(Array.isArray(this.props.color)){\n c = this.props.color;\n }else{\n c = [this.props.color];\n }\n }\n\n return c;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Tadpole extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasDidMount(canvas) {\n\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n this.renderProton();\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.damping = 0.008;\n emitter.rate = new Proton.Rate(this.props.num ? this.props.num : 50);\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(5, 9));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(1.5),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n emitter.addInitialize(\n new Proton.Position(new Proton.RectZone(0, 0, width, height))\n );\n\n const mouseInfo = {\n x: width / 2,\n y: height / 2\n };\n\n const attractionBehaviour = new Proton.Attraction(mouseInfo, 0, 0);\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"bound\"\n );\n emitter.addBehaviour(new Proton.Color(this.props.color || \"#bbb\"));\n //emitter.addBehaviour(new Proton.Alpha(new Proton.Span(0.5, 1)));\n emitter.addBehaviour(attractionBehaviour, crossZoneBehaviour);\n emitter.addBehaviour(new Proton.RandomDrift(15, 15, 0.05));\n emitter.emit(\"once\");\n\n this.proton.addEmitter(emitter);\n this.proton.addRenderer(this.createRenderer(canvas));\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n createRenderer(canvas) {\n const jointCount = 10;\n const delayTime = 8;\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n\n renderer.onProtonUpdate = function () {\n context.clearRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleCreated = particle => {\n particle.data.points = [];\n particle.data.index = 0;\n };\n\n renderer.onParticleUpdate = function (particle) {\n drawTadpoleTail(particle);\n if (particle.data.index % delayTime === 0) fillPointsData(particle);\n drawTadpoleHead(particle);\n particle.data.index++;\n };\n\n const fillPointsData = particle => {\n particle.data.points.unshift(particle.p.y);\n particle.data.points.unshift(particle.p.x);\n\n if (particle.data.points.length > jointCount) {\n particle.data.points.pop();\n particle.data.points.pop();\n }\n };\n\n const drawTadpoleHead = particle => {\n context.fillStyle = particle.color;\n context.beginPath();\n context.arc(\n particle.p.x,\n particle.p.y,\n particle.radius,\n 0,\n Math.PI * 2,\n true\n );\n context.closePath();\n context.fill();\n };\n\n const drawTadpoleTail = particle => {\n context.beginPath();\n context.strokeStyle = particle.color;\n\n context.moveTo(particle.p.x, particle.p.y);\n\n const l = particle.data.points.length;\n for (let i = 0; i < l; i += 2) {\n const x = particle.data.points[i];\n const y = particle.data.points[i + 1];\n\n context.lineWidth = linearEvaluation(i, l);\n context.lineTo(x, y);\n context.stroke();\n }\n };\n\n const linearEvaluation = (i, l) => {\n if (l <= 2) return 1;\n\n const max = 6;\n const A = (max - 1) / (2 / l - 1);\n const B = 1 - A;\n const X = (i + 2) / l;\n let val = A * X + B;\n val = val >> 0;\n\n return val;\n };\n\n return renderer;\n }\n\n renderProton() {\n RAFManager.add(() => {\n this.proton.update();\n //this.proton.stats.update();\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nconst COLOR = [\n \"#f6b93b\",\n \"#18dcff\",\n \"#cd84f1\",\n \"#ED4C67\",\n \"#ffffff\",\n \"#b71540\",\n \"#32ff7e\",\n \"#ff3838\"\n];\n\nexport default class Polygon extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas);\n this.createEmitter({\n canvas,\n x: width / 2,\n y: height / 2,\n mainEmitter: true,\n zone: \"bound\"\n });\n\n RAFManager.add(this.renderProton);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onResize() {}\n\n createProton(canvas) {\n this.proton = new Proton();\n const renderer = this.createRenderer(canvas);\n this.proton.addRenderer(renderer);\n }\n\n createRenderer(canvas) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CustomRenderer();\n\n renderer.onProtonUpdate = () => {\n context.clearRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleCreated = particle => {\n particle.data.count = Proton.MathUtil.randomAToB(3, 10, true);\n };\n\n renderer.onParticleUpdate = particle => {\n context.save();\n context.globalAlpha = particle.alpha;\n context.fillStyle = particle.color;\n\n context.translate(particle.p.x, particle.p.y);\n context.rotate(Proton.MathUtil.degreeTransform(particle.rotation));\n context.translate(-particle.p.x, -particle.p.y);\n\n context.beginPath();\n drawPolygon(particle, particle.data.count);\n\n context.closePath();\n context.fill();\n context.globalAlpha = 1;\n context.restore();\n };\n\n renderer.onParticleDead = particle => {};\n\n const drawPolygon = (particle, count) => {\n if (count >= 7) {\n context.arc(\n particle.p.x,\n particle.p.y,\n particle.radius,\n 0,\n Math.PI * 2,\n true\n );\n } else {\n const radius = particle.radius;\n\n for (let i = 0; i <= count; i++) {\n let x =\n particle.p.x +\n radius * Math.cos((((Math.PI / 180) * 360) / count) * i);\n let y =\n particle.p.y +\n radius * Math.sin((((Math.PI / 180) * 360) / count) * i);\n\n if (i === 0) context.moveTo(x, y);\n else context.lineTo(x, y);\n }\n }\n };\n\n return renderer;\n }\n\n createEmitter({\n mainEmitter,\n canvas,\n x,\n y,\n radius,\n color = COLOR,\n zone = \"dead\",\n once = \"all\",\n alpha = 0.85,\n gravity = 3.5\n }) {\n const emitter = this.proton.pool.get(Proton.Emitter);\n\n if (!emitter.completed) {\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(4, 9),\n new Proton.Span(1.6, 2.2)\n );\n\n const radiusInit = mainEmitter\n ? new Proton.Radius(10, 110)\n : new Proton.Radius(3, radius);\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(radiusInit);\n emitter.addInitialize(new Proton.Life(3, 6));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(4, 6),\n new Proton.Span(-90, 90),\n \"polar\"\n )\n );\n\n emitter.addBehaviour(new Proton.Alpha(alpha, 0.2));\n emitter.addBehaviour(new Proton.Color(color));\n emitter.addBehaviour(new Proton.Scale(1, 0.3));\n emitter.addBehaviour(new Proton.Rotate());\n emitter.addBehaviour(new Proton.Gravity(gravity));\n\n emitter.addBehaviour(this.customDeadBehaviour(canvas));\n emitter.addBehaviour(\n new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n zone\n )\n );\n }\n\n emitter.p.x = x;\n emitter.p.y = y;\n if (once === \"once\") emitter.emit(\"once\");\n else emitter.emit();\n\n this.proton.addEmitter(emitter);\n //this.expireEmitter(emitter);\n }\n\n expireEmitter(emitter) {\n setTimeout(() => {\n emitter.completed = true;\n this.proton.pool.expire(emitter);\n this.proton.removeEmitter(emitter);\n }, 500);\n }\n\n customDeadBehaviour(canvas) {\n return {\n initialize: particle => {\n particle.data = particle.data || {};\n particle.data.oldRadius = particle.radius;\n particle.data.emitterCount = 0;\n },\n applyBehaviour: particle => {\n if (particle.radius < 5) return;\n if (particle.data.emitterCount >= 2) return;\n\n if (particle.radius <= (1 / 3) * particle.data.oldRadius) {\n particle.data.emitterCount++;\n this.createEmitter({\n canvas,\n x: particle.p.x,\n y: particle.p.y,\n radius: particle.radius * (1 / 2),\n alpha: 0.5,\n gravity: 5,\n color: particle.color,\n once: \"once\"\n });\n }\n }\n };\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Fountain extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#529B88\",\n \"#CDD180\",\n \"#FFFA32\",\n \"#FB6255\",\n \"#FB4A53\",\n \"#FF4E50\",\n \"#F9D423\"\n ];\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize() {}\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(4, 8),\n new Proton.Span(0.1, 0.25)\n );\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(20, 200));\n emitter.addInitialize(new Proton.Life(2, 4));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(4, 7),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n emitter.addInitialize(\n new Proton.Position(new Proton.CircleZone(width / 2, height / 2, 100))\n );\n\n emitter.addBehaviour(new Proton.Alpha(1, 0));\n emitter.addBehaviour(new Proton.Scale(0.2, 1));\n emitter.addBehaviour(this.createCustomBehaviour());\n emitter.addBehaviour(new Proton.Color(this.colors, \"random\"));\n emitter.emit();\n this.proton.addEmitter(emitter);\n\n const renderer = new Proton.CanvasRenderer(canvas);\n this.proton.addRenderer(renderer);\n }\n\n createCustomBehaviour() {\n const f = 10 * 100;\n return {\n initialize: function(particle) {\n particle.f = new Proton.Vector2D(0, 0);\n },\n applyBehaviour: particle => {\n let length = particle.v.length() / 1000;\n let gradient = particle.v.getGradient();\n gradient += 3.14 / 2;\n\n particle.f.x = f * length * Math.cos(gradient);\n particle.f.y = f * length * Math.sin(gradient);\n particle.a.add(particle.f);\n }\n };\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport Rand from \"./utils/Rand.js\";\nimport Ball from \"./particles/Ball.jsx\";\nimport Color from \"./particles/Color.jsx\";\nimport Custom from \"./particles/Custom.jsx\";\nimport Lines from \"./particles/Lines.jsx\";\nimport Thick from \"./particles/Thick.jsx\";\nimport Square from \"./particles/Square.jsx\";\nimport Cobweb from \"./particles/Cobweb.jsx\";\nimport Circle from \"./particles/Circle.jsx\";\nimport Tadpole from \"./particles/Tadpole.jsx\";\nimport Polygon from \"./particles/Polygon.jsx\";\nimport Fountain from \"./particles/Fountain.jsx\";\n\nexport default class ParticlesBg extends Component {\n\n constructor(props) {\n super(props);\n }\n\n getRandom() {\n const { num, bg, color } = this.props;\n\n // Code source from here, thanks author\n // https://github.com/drawcall/Proton/blob/gh-pages/source/src/utils/Rand.js\n if (!this.random) {\n this.random = new Rand();\n this.random.set(0.25, );\n this.random.set(0.2, );\n this.random.set(0.2, );\n this.random.set(0.16, );\n this.random.set(0.18, );\n this.random.set(0.04, );\n this.random.set(0.1, );\n this.random.set(0.08, );\n this.random.set(0.18, );\n this.random.set(0.15, );\n }\n return this.random.getResult();\n }\n\n getBgParticles() {\n const { type, num, bg, color, config } = this.props;\n\n let particles;\n switch (String(type).toLowerCase()) {\n case \"color\":\n particles = ;\n break;\n case \"ball\":\n particles = ;\n break;\n case \"lines\":\n particles = ;\n break;\n case \"thick\":\n particles = ;\n break;\n case \"circle\":\n particles = ;\n break;\n case \"cobweb\":\n particles = ;\n break;\n case \"polygon\":\n particles = ;\n break;\n case \"square\":\n particles = ;\n break;\n case \"tadpole\":\n particles = ;\n break;\n case \"fountain\":\n particles = ;\n break;\n case \"custom\":\n particles = ;\n break;\n case \"random\":\n particles = this.getRandom(num);\n break;\n\n default:\n particles = ;\n break;\n }\n\n return particles;\n }\n\n render() {\n const particles = this.getBgParticles();\n return {particles};\n }\n}\n","var __defProp = Object.defineProperty;\nvar __defProps = Object.defineProperties;\nvar __getOwnPropDescs = Object.getOwnPropertyDescriptors;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n for (var prop in b || (b = {}))\n if (__hasOwnProp.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n if (__getOwnPropSymbols)\n for (var prop of __getOwnPropSymbols(b)) {\n if (__propIsEnum.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n }\n return a;\n};\nvar __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));\n\n// src/index.tsx\nimport React, { Component } from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nvar Tilt = class extends Component {\n constructor(props) {\n super(props);\n this.ref = React.createRef();\n this.state = {\n style: {}\n };\n const defaultSettings = {\n reverse: false,\n max: 35,\n perspective: 1e3,\n easing: \"cubic-bezier(.03,.98,.52,.99)\",\n scale: \"1.1\",\n speed: \"1000\",\n transition: true,\n axis: null,\n reset: true\n };\n this.width = null;\n this.height = null;\n this.left = null;\n this.top = null;\n this.transitionTimeout = null;\n this.updateCall = null;\n this.element = null;\n this.settings = Object.assign({}, defaultSettings, this.props.options);\n this.reverse = this.settings.reverse ? -1 : 1;\n this.onMouseEnter = this.onMouseEnter.bind(this, this.props.onMouseEnter);\n this.onMouseMove = this.onMouseMove.bind(this, this.props.onMouseMove);\n this.onMouseLeave = this.onMouseLeave.bind(this, this.props.onMouseLeave);\n }\n componentDidMount() {\n this.element = this.ref.current;\n setTimeout(() => {\n if (this.element.parentElement.querySelector(\":hover\") === this.element) {\n this.onMouseEnter();\n }\n }, 0);\n }\n componentWillUnmount() {\n clearTimeout(this.transitionTimeout);\n cancelAnimationFrame(this.updateCall);\n }\n onMouseEnter(cb = () => {\n }, e) {\n this.updateElementPosition();\n this.setState(Object.assign({}, this.state, {\n style: __spreadProps(__spreadValues({}, this.state.style), {\n willChange: \"transform\"\n })\n }));\n this.setTransition();\n return cb(e);\n }\n reset() {\n window.requestAnimationFrame(() => {\n this.setState(Object.assign({}, this.state, {\n style: __spreadProps(__spreadValues({}, this.state.style), {\n transform: `perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`\n })\n }));\n });\n }\n onMouseMove(cb = () => {\n }, e) {\n e.persist();\n if (this.updateCall !== null) {\n window.cancelAnimationFrame(this.updateCall);\n }\n this.event = e;\n this.updateCall = requestAnimationFrame(this.update.bind(this, e));\n return cb(e);\n }\n setTransition() {\n clearTimeout(this.transitionTimeout);\n this.setState(Object.assign({}, this.state, {\n style: __spreadProps(__spreadValues({}, this.state.style), {\n transition: `${this.settings.speed}ms ${this.settings.easing}`\n })\n }));\n this.transitionTimeout = setTimeout(() => {\n this.setState(Object.assign({}, this.state, {\n style: __spreadProps(__spreadValues({}, this.state.style), {\n transition: \"\"\n })\n }));\n }, this.settings.speed);\n }\n onMouseLeave(cb = () => {\n }, e) {\n this.setTransition();\n if (this.settings.reset) {\n this.reset();\n }\n return cb(e);\n }\n getValues(e) {\n const x = (e.nativeEvent.clientX - this.left) / this.width;\n const y = (e.nativeEvent.clientY - this.top) / this.height;\n const _x = Math.min(Math.max(x, 0), 1);\n const _y = Math.min(Math.max(y, 0), 1);\n const tiltX = (this.reverse * (this.settings.max / 2 - _x * this.settings.max)).toFixed(2);\n const tiltY = (this.reverse * (_y * this.settings.max - this.settings.max / 2)).toFixed(2);\n const percentageX = _x * 100;\n const percentageY = _y * 100;\n return {\n tiltX,\n tiltY,\n percentageX,\n percentageY\n };\n }\n updateElementPosition() {\n const rect = this.element.getBoundingClientRect();\n this.width = this.element.offsetWidth;\n this.height = this.element.offsetHeight;\n this.left = rect.left;\n this.top = rect.top;\n }\n update(e) {\n const values = this.getValues(e);\n this.setState(Object.assign({}, this.state, {\n style: __spreadProps(__spreadValues({}, this.state.style), {\n transform: `perspective(${this.settings.perspective}px) rotateX(${this.settings.axis === \"x\" ? 0 : values.tiltY}deg) rotateY(${this.settings.axis === \"y\" ? 0 : values.tiltX}deg) scale3d(${this.settings.scale}, ${this.settings.scale}, ${this.settings.scale})`\n })\n }));\n this.updateCall = null;\n }\n render() {\n const style = Object.assign({}, this.props.style, this.state.style);\n return /* @__PURE__ */ jsx(\n \"div\",\n {\n style,\n ref: this.ref,\n className: this.props.className,\n onMouseEnter: this.onMouseEnter,\n onMouseMove: this.onMouseMove,\n onMouseLeave: this.onMouseLeave,\n children: this.props.children\n }\n );\n }\n};\nexport {\n Tilt\n};\n","import React from 'react';\r\nimport { Tilt } from 'react-tilt';\r\nimport img from './img.png';\r\nimport './Logo.css';\r\n\r\nconst Logo = () => {\r\n\treturn(\r\n\t\t\r\n\t\t\t
\r\n\t\t \r\n\t\t \t
\r\n\t\t
\r\n\t\t \r\n\t\t
\t\r\n\t);\r\n}\r\n\r\nexport default Logo;","import React from 'react';\r\nimport './ImageLinkForm.css';\r\n\r\nconst ImageLinkForm = ({onInputChange, onButtonSubmit}) => {\r\n\treturn(\r\n\t\t\r\n\t\t\t
\r\n\t\t\t\t{'Faces Will be Detected Here'}\r\n\t\t\t
\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t
\r\n\t);\r\n}\r\n\r\nexport default ImageLinkForm;","import React from 'react';\r\nimport './FaceRecognition.css';\r\n\r\nconst FaceRecognition = ({imageUrl, box}) => {\r\n\treturn(\r\n\t\t\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t
\r\n\t);\r\n}\r\n\r\nexport default FaceRecognition;","function ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nfunction _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n\n return target;\n}\n\nfunction _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) {\n return typeof obj;\n } : function (obj) {\n return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n }, _typeof(obj);\n}\n\nfunction _wrapRegExp() {\n _wrapRegExp = function (re, groups) {\n return new BabelRegExp(re, void 0, groups);\n };\n\n var _super = RegExp.prototype,\n _groups = new WeakMap();\n\n function BabelRegExp(re, flags, groups) {\n var _this = new RegExp(re, flags);\n\n return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype);\n }\n\n function buildGroups(result, re) {\n var g = _groups.get(re);\n\n return Object.keys(g).reduce(function (groups, name) {\n return groups[name] = result[g[name]], groups;\n }, Object.create(null));\n }\n\n return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {\n var result = _super.exec.call(this, str);\n\n return result && (result.groups = buildGroups(result, this)), result;\n }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) {\n if (\"string\" == typeof substitution) {\n var groups = _groups.get(this);\n\n return _super[Symbol.replace].call(this, str, substitution.replace(/\\$<([^>]+)>/g, function (_, name) {\n return \"$\" + groups[name];\n }));\n }\n\n if (\"function\" == typeof substitution) {\n var _this = this;\n\n return _super[Symbol.replace].call(this, str, function () {\n var args = arguments;\n return \"object\" != typeof args[args.length - 1] && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args);\n });\n }\n\n return _super[Symbol.replace].call(this, str, substitution);\n }, _wrapRegExp.apply(this, arguments);\n}\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n Object.defineProperty(subClass, \"prototype\", {\n writable: false\n });\n if (superClass) _setPrototypeOf(subClass, superClass);\n}\n\nfunction _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nfunction _slicedToArray(arr, i) {\n return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();\n}\n\nfunction _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n}\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return _arrayLikeToArray(arr);\n}\n\nfunction _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}\n\nfunction _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}\n\nfunction _iterableToArrayLimit(arr, i) {\n var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"];\n\n if (_i == null) return;\n var _arr = [];\n var _n = true;\n var _d = false;\n\n var _s, _e;\n\n try {\n for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {\n _arr.push(_s.value);\n\n if (i && _arr.length === i) break;\n }\n } catch (err) {\n _d = true;\n _e = err;\n } finally {\n try {\n if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n } finally {\n if (_d) throw _e;\n }\n }\n\n return _arr;\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\n return arr2;\n}\n\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nfunction _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nvar noop = function noop() {};\n\nvar _WINDOW = {};\nvar _DOCUMENT = {};\nvar _MUTATION_OBSERVER = null;\nvar _PERFORMANCE = {\n mark: noop,\n measure: noop\n};\n\ntry {\n if (typeof window !== 'undefined') _WINDOW = window;\n if (typeof document !== 'undefined') _DOCUMENT = document;\n if (typeof MutationObserver !== 'undefined') _MUTATION_OBSERVER = MutationObserver;\n if (typeof performance !== 'undefined') _PERFORMANCE = performance;\n} catch (e) {}\n\nvar _ref = _WINDOW.navigator || {},\n _ref$userAgent = _ref.userAgent,\n userAgent = _ref$userAgent === void 0 ? '' : _ref$userAgent;\nvar WINDOW = _WINDOW;\nvar DOCUMENT = _DOCUMENT;\nvar MUTATION_OBSERVER = _MUTATION_OBSERVER;\nvar PERFORMANCE = _PERFORMANCE;\nvar IS_BROWSER = !!WINDOW.document;\nvar IS_DOM = !!DOCUMENT.documentElement && !!DOCUMENT.head && typeof DOCUMENT.addEventListener === 'function' && typeof DOCUMENT.createElement === 'function';\nvar IS_IE = ~userAgent.indexOf('MSIE') || ~userAgent.indexOf('Trident/');\n\nvar _familyProxy, _familyProxy2, _familyProxy3, _familyProxy4, _familyProxy5;\n\nvar NAMESPACE_IDENTIFIER = '___FONT_AWESOME___';\nvar UNITS_IN_GRID = 16;\nvar DEFAULT_CSS_PREFIX = 'fa';\nvar DEFAULT_REPLACEMENT_CLASS = 'svg-inline--fa';\nvar DATA_FA_I2SVG = 'data-fa-i2svg';\nvar DATA_FA_PSEUDO_ELEMENT = 'data-fa-pseudo-element';\nvar DATA_FA_PSEUDO_ELEMENT_PENDING = 'data-fa-pseudo-element-pending';\nvar DATA_PREFIX = 'data-prefix';\nvar DATA_ICON = 'data-icon';\nvar HTML_CLASS_I2SVG_BASE_CLASS = 'fontawesome-i2svg';\nvar MUTATION_APPROACH_ASYNC = 'async';\nvar TAGNAMES_TO_SKIP_FOR_PSEUDOELEMENTS = ['HTML', 'HEAD', 'STYLE', 'SCRIPT'];\nvar PRODUCTION = function () {\n try {\n return process.env.NODE_ENV === 'production';\n } catch (e) {\n return false;\n }\n}();\nvar FAMILY_CLASSIC = 'classic';\nvar FAMILY_SHARP = 'sharp';\nvar FAMILIES = [FAMILY_CLASSIC, FAMILY_SHARP];\n\nfunction familyProxy(obj) {\n // Defaults to the classic family if family is not available\n return new Proxy(obj, {\n get: function get(target, prop) {\n return prop in target ? target[prop] : target[FAMILY_CLASSIC];\n }\n });\n}\nvar PREFIX_TO_STYLE = familyProxy((_familyProxy = {}, _defineProperty(_familyProxy, FAMILY_CLASSIC, {\n 'fa': 'solid',\n 'fas': 'solid',\n 'fa-solid': 'solid',\n 'far': 'regular',\n 'fa-regular': 'regular',\n 'fal': 'light',\n 'fa-light': 'light',\n 'fat': 'thin',\n 'fa-thin': 'thin',\n 'fad': 'duotone',\n 'fa-duotone': 'duotone',\n 'fab': 'brands',\n 'fa-brands': 'brands',\n 'fak': 'kit',\n 'fakd': 'kit',\n 'fa-kit': 'kit',\n 'fa-kit-duotone': 'kit'\n}), _defineProperty(_familyProxy, FAMILY_SHARP, {\n 'fa': 'solid',\n 'fass': 'solid',\n 'fa-solid': 'solid',\n 'fasr': 'regular',\n 'fa-regular': 'regular',\n 'fasl': 'light',\n 'fa-light': 'light',\n 'fast': 'thin',\n 'fa-thin': 'thin'\n}), _familyProxy));\nvar STYLE_TO_PREFIX = familyProxy((_familyProxy2 = {}, _defineProperty(_familyProxy2, FAMILY_CLASSIC, {\n solid: 'fas',\n regular: 'far',\n light: 'fal',\n thin: 'fat',\n duotone: 'fad',\n brands: 'fab',\n kit: 'fak'\n}), _defineProperty(_familyProxy2, FAMILY_SHARP, {\n solid: 'fass',\n regular: 'fasr',\n light: 'fasl',\n thin: 'fast'\n}), _familyProxy2));\nvar PREFIX_TO_LONG_STYLE = familyProxy((_familyProxy3 = {}, _defineProperty(_familyProxy3, FAMILY_CLASSIC, {\n fab: 'fa-brands',\n fad: 'fa-duotone',\n fak: 'fa-kit',\n fal: 'fa-light',\n far: 'fa-regular',\n fas: 'fa-solid',\n fat: 'fa-thin'\n}), _defineProperty(_familyProxy3, FAMILY_SHARP, {\n fass: 'fa-solid',\n fasr: 'fa-regular',\n fasl: 'fa-light',\n fast: 'fa-thin'\n}), _familyProxy3));\nvar LONG_STYLE_TO_PREFIX = familyProxy((_familyProxy4 = {}, _defineProperty(_familyProxy4, FAMILY_CLASSIC, {\n 'fa-brands': 'fab',\n 'fa-duotone': 'fad',\n 'fa-kit': 'fak',\n 'fa-light': 'fal',\n 'fa-regular': 'far',\n 'fa-solid': 'fas',\n 'fa-thin': 'fat'\n}), _defineProperty(_familyProxy4, FAMILY_SHARP, {\n 'fa-solid': 'fass',\n 'fa-regular': 'fasr',\n 'fa-light': 'fasl',\n 'fa-thin': 'fast'\n}), _familyProxy4));\nvar ICON_SELECTION_SYNTAX_PATTERN = /fa(s|r|l|t|d|b|k|ss|sr|sl|st)?[\\-\\ ]/; // eslint-disable-line no-useless-escape\n\nvar LAYERS_TEXT_CLASSNAME = 'fa-layers-text';\nvar FONT_FAMILY_PATTERN = /Font ?Awesome ?([56 ]*)(Solid|Regular|Light|Thin|Duotone|Brands|Free|Pro|Sharp|Kit)?.*/i;\nvar FONT_WEIGHT_TO_PREFIX = familyProxy((_familyProxy5 = {}, _defineProperty(_familyProxy5, FAMILY_CLASSIC, {\n 900: 'fas',\n 400: 'far',\n normal: 'far',\n 300: 'fal',\n 100: 'fat'\n}), _defineProperty(_familyProxy5, FAMILY_SHARP, {\n 900: 'fass',\n 400: 'fasr',\n 300: 'fasl',\n 100: 'fast'\n}), _familyProxy5));\nvar oneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nvar oneToTwenty = oneToTen.concat([11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);\nvar ATTRIBUTES_WATCHED_FOR_MUTATION = ['class', 'data-prefix', 'data-icon', 'data-fa-transform', 'data-fa-mask'];\nvar DUOTONE_CLASSES = {\n GROUP: 'duotone-group',\n SWAP_OPACITY: 'swap-opacity',\n PRIMARY: 'primary',\n SECONDARY: 'secondary'\n};\nvar prefixes = new Set();\nObject.keys(STYLE_TO_PREFIX[FAMILY_CLASSIC]).map(prefixes.add.bind(prefixes));\nObject.keys(STYLE_TO_PREFIX[FAMILY_SHARP]).map(prefixes.add.bind(prefixes));\nvar RESERVED_CLASSES = [].concat(FAMILIES, _toConsumableArray(prefixes), ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', 'beat', 'border', 'fade', 'beat-fade', 'bounce', 'flip-both', 'flip-horizontal', 'flip-vertical', 'flip', 'fw', 'inverse', 'layers-counter', 'layers-text', 'layers', 'li', 'pull-left', 'pull-right', 'pulse', 'rotate-180', 'rotate-270', 'rotate-90', 'rotate-by', 'shake', 'spin-pulse', 'spin-reverse', 'spin', 'stack-1x', 'stack-2x', 'stack', 'ul', DUOTONE_CLASSES.GROUP, DUOTONE_CLASSES.SWAP_OPACITY, DUOTONE_CLASSES.PRIMARY, DUOTONE_CLASSES.SECONDARY]).concat(oneToTen.map(function (n) {\n return \"\".concat(n, \"x\");\n})).concat(oneToTwenty.map(function (n) {\n return \"w-\".concat(n);\n}));\n\nvar initial = WINDOW.FontAwesomeConfig || {};\n\nfunction getAttrConfig(attr) {\n var element = DOCUMENT.querySelector('script[' + attr + ']');\n\n if (element) {\n return element.getAttribute(attr);\n }\n}\n\nfunction coerce(val) {\n // Getting an empty string will occur if the attribute is set on the HTML tag but without a value\n // We'll assume that this is an indication that it should be toggled to true\n if (val === '') return true;\n if (val === 'false') return false;\n if (val === 'true') return true;\n return val;\n}\n\nif (DOCUMENT && typeof DOCUMENT.querySelector === 'function') {\n var attrs = [['data-family-prefix', 'familyPrefix'], ['data-css-prefix', 'cssPrefix'], ['data-family-default', 'familyDefault'], ['data-style-default', 'styleDefault'], ['data-replacement-class', 'replacementClass'], ['data-auto-replace-svg', 'autoReplaceSvg'], ['data-auto-add-css', 'autoAddCss'], ['data-auto-a11y', 'autoA11y'], ['data-search-pseudo-elements', 'searchPseudoElements'], ['data-observe-mutations', 'observeMutations'], ['data-mutate-approach', 'mutateApproach'], ['data-keep-original-source', 'keepOriginalSource'], ['data-measure-performance', 'measurePerformance'], ['data-show-missing-icons', 'showMissingIcons']];\n attrs.forEach(function (_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n attr = _ref2[0],\n key = _ref2[1];\n\n var val = coerce(getAttrConfig(attr));\n\n if (val !== undefined && val !== null) {\n initial[key] = val;\n }\n });\n}\n\nvar _default = {\n styleDefault: 'solid',\n familyDefault: 'classic',\n cssPrefix: DEFAULT_CSS_PREFIX,\n replacementClass: DEFAULT_REPLACEMENT_CLASS,\n autoReplaceSvg: true,\n autoAddCss: true,\n autoA11y: true,\n searchPseudoElements: false,\n observeMutations: true,\n mutateApproach: 'async',\n keepOriginalSource: true,\n measurePerformance: false,\n showMissingIcons: true\n}; // familyPrefix is deprecated but we must still support it if present\n\nif (initial.familyPrefix) {\n initial.cssPrefix = initial.familyPrefix;\n}\n\nvar _config = _objectSpread2(_objectSpread2({}, _default), initial);\n\nif (!_config.autoReplaceSvg) _config.observeMutations = false;\nvar config = {};\nObject.keys(_default).forEach(function (key) {\n Object.defineProperty(config, key, {\n enumerable: true,\n set: function set(val) {\n _config[key] = val;\n\n _onChangeCb.forEach(function (cb) {\n return cb(config);\n });\n },\n get: function get() {\n return _config[key];\n }\n });\n}); // familyPrefix is deprecated as of 6.2.0 and should be removed in 7.0.0\n\nObject.defineProperty(config, 'familyPrefix', {\n enumerable: true,\n set: function set(val) {\n _config.cssPrefix = val;\n\n _onChangeCb.forEach(function (cb) {\n return cb(config);\n });\n },\n get: function get() {\n return _config.cssPrefix;\n }\n});\nWINDOW.FontAwesomeConfig = config;\nvar _onChangeCb = [];\nfunction onChange(cb) {\n _onChangeCb.push(cb);\n\n return function () {\n _onChangeCb.splice(_onChangeCb.indexOf(cb), 1);\n };\n}\n\nvar d = UNITS_IN_GRID;\nvar meaninglessTransform = {\n size: 16,\n x: 0,\n y: 0,\n rotate: 0,\n flipX: false,\n flipY: false\n};\nfunction insertCss(css) {\n if (!css || !IS_DOM) {\n return;\n }\n\n var style = DOCUMENT.createElement('style');\n style.setAttribute('type', 'text/css');\n style.innerHTML = css;\n var headChildren = DOCUMENT.head.childNodes;\n var beforeChild = null;\n\n for (var i = headChildren.length - 1; i > -1; i--) {\n var child = headChildren[i];\n var tagName = (child.tagName || '').toUpperCase();\n\n if (['STYLE', 'LINK'].indexOf(tagName) > -1) {\n beforeChild = child;\n }\n }\n\n DOCUMENT.head.insertBefore(style, beforeChild);\n return css;\n}\nvar idPool = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';\nfunction nextUniqueId() {\n var size = 12;\n var id = '';\n\n while (size-- > 0) {\n id += idPool[Math.random() * 62 | 0];\n }\n\n return id;\n}\nfunction toArray(obj) {\n var array = [];\n\n for (var i = (obj || []).length >>> 0; i--;) {\n array[i] = obj[i];\n }\n\n return array;\n}\nfunction classArray(node) {\n if (node.classList) {\n return toArray(node.classList);\n } else {\n return (node.getAttribute('class') || '').split(' ').filter(function (i) {\n return i;\n });\n }\n}\nfunction htmlEscape(str) {\n return \"\".concat(str).replace(/&/g, '&').replace(/\"/g, '"').replace(/'/g, ''').replace(/