@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
2,898 lines • 120 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["type"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useEffect, useRef, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ConvertPosition } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
var PulseRingLoader = function PulseRingLoader(_ref) {
var _ref$pulseRingContain = _ref.pulseRingContainerConfigurationSettings,
pulseRingContainerConfigurationSettings = _ref$pulseRingContain === void 0 ? {} : _ref$pulseRingContain,
_ref$pulseRingConfigu = _ref.pulseRingConfigurationSettings,
pulseRingConfigurationSettings = _ref$pulseRingConfigu === void 0 ? {} : _ref$pulseRingConfigu,
_ref$ringCount = _ref.ringCount,
ringCount = _ref$ringCount === void 0 ? 3 : _ref$ringCount,
_ref$ringColor = _ref.ringColor,
ringColor = _ref$ringColor === void 0 ? "#3498db" : _ref$ringColor,
_ref$ringSize = _ref.ringSize,
ringSize = _ref$ringSize === void 0 ? "40px" : _ref$ringSize,
_ref$ringThickness = _ref.ringThickness,
ringThickness = _ref$ringThickness === void 0 ? "4px" : _ref$ringThickness,
_ref$speed = _ref.speed,
speed = _ref$speed === void 0 ? 1 : _ref$speed;
var rings = Array.from({
length: ringCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
position: "absolute",
width: ringSize,
height: ringSize,
border: "".concat(ringThickness, " solid ").concat(ringColor),
borderRadius: "50%"
}, pulseRingConfigurationSettings),
initial: {
scale: 0,
opacity: 1
},
animate: {
scale: [0, 1.5],
opacity: [1, 0]
},
transition: {
duration: speed,
repeat: Infinity,
repeatType: "loop",
delay: index * (speed / ringCount)
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
width: "calc(".concat(ringSize, " * 1.5)"),
height: "calc(".concat(ringSize, " * 1.5)")
}, pulseRingContainerConfigurationSettings)
}, rings);
};
var PulseCircleLoader = function PulseCircleLoader(_ref2) {
var _ref2$pulseCircleCont = _ref2.pulseCircleContainerConfigurationSettings,
pulseCircleContainerConfigurationSettings = _ref2$pulseCircleCont === void 0 ? {} : _ref2$pulseCircleCont,
_ref2$pulseCircleConf = _ref2.pulseCircleConfigurationSettings,
pulseCircleConfigurationSettings = _ref2$pulseCircleConf === void 0 ? {} : _ref2$pulseCircleConf,
_ref2$circleCount = _ref2.circleCount,
circleCount = _ref2$circleCount === void 0 ? 3 : _ref2$circleCount,
_ref2$circleColor = _ref2.circleColor,
circleColor = _ref2$circleColor === void 0 ? "#3498db" : _ref2$circleColor,
_ref2$circleSize = _ref2.circleSize,
circleSize = _ref2$circleSize === void 0 ? "15px" : _ref2$circleSize,
_ref2$speed = _ref2.speed,
speed = _ref2$speed === void 0 ? 1 : _ref2$speed;
var circles = Array.from({
length: circleCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
width: circleSize,
height: circleSize,
margin: "0 5px",
backgroundColor: circleColor,
borderRadius: "50%",
display: "inline-block"
}, pulseCircleConfigurationSettings),
initial: {
opacity: 0.5,
scale: 1
},
animate: {
opacity: [0.5, 1, 0.5],
scale: [1, 1.5, 1]
},
transition: {
duration: speed,
repeat: Infinity,
delay: index * (speed / circleCount)
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center"
}, pulseCircleContainerConfigurationSettings)
}, circles);
};
var DualRingLoader = function DualRingLoader(_ref3) {
var _ref3$dualRingConfigu = _ref3.dualRingConfigurationSettings,
dualRingConfigurationSettings = _ref3$dualRingConfigu === void 0 ? {} : _ref3$dualRingConfigu,
_ref3$outerRingColor = _ref3.outerRingColor,
outerRingColor = _ref3$outerRingColor === void 0 ? "#3498db" : _ref3$outerRingColor,
_ref3$innerRingColor = _ref3.innerRingColor,
innerRingColor = _ref3$innerRingColor === void 0 ? "#e74c3c" : _ref3$innerRingColor,
_ref3$ringSize = _ref3.ringSize,
ringSize = _ref3$ringSize === void 0 ? "50px" : _ref3$ringSize,
_ref3$ringThickness = _ref3.ringThickness,
ringThickness = _ref3$ringThickness === void 0 ? "5px" : _ref3$ringThickness,
_ref3$speed = _ref3.speed,
speed = _ref3$speed === void 0 ? 1 : _ref3$speed;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
width: ringSize,
height: ringSize
}, dualRingConfigurationSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: {
width: ringSize,
height: ringSize,
border: "".concat(ringThickness, " solid ").concat(outerRingColor),
borderRadius: "50%",
position: "absolute",
top: 0,
left: 0
},
animate: {
rotate: 360
},
transition: {
duration: speed,
ease: "linear",
repeat: Infinity
}
}), /*#__PURE__*/React.createElement(motion.div, {
style: {
width: "calc(".concat(ringSize, " - 2 * ").concat(ringThickness, ")"),
height: "calc(".concat(ringSize, " - 2 * ").concat(ringThickness, ")"),
border: "".concat(ringThickness, " solid ").concat(innerRingColor),
borderRadius: "50%",
position: "absolute",
top: "".concat(ringThickness),
left: "".concat(ringThickness)
},
animate: {
rotate: -360
},
transition: {
duration: speed,
ease: "linear",
repeat: Infinity
}
}));
};
var BounceDotLoader = function BounceDotLoader(_ref4) {
var _ref4$bounceDotContai = _ref4.bounceDotContainerConfigurationSettings,
bounceDotContainerConfigurationSettings = _ref4$bounceDotContai === void 0 ? {} : _ref4$bounceDotContai,
_ref4$bounceDotConfig = _ref4.bounceDotConfigurationSettings,
bounceDotConfigurationSettings = _ref4$bounceDotConfig === void 0 ? {} : _ref4$bounceDotConfig,
_ref4$dotCount = _ref4.dotCount,
dotCount = _ref4$dotCount === void 0 ? 3 : _ref4$dotCount,
_ref4$dotColor = _ref4.dotColor,
dotColor = _ref4$dotColor === void 0 ? "#3498db" : _ref4$dotColor,
_ref4$dotSize = _ref4.dotSize,
dotSize = _ref4$dotSize === void 0 ? "10px" : _ref4$dotSize,
_ref4$speed = _ref4.speed,
speed = _ref4$speed === void 0 ? 0.5 : _ref4$speed;
var dots = Array.from({
length: dotCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
width: dotSize,
height: dotSize,
margin: "0 5px",
backgroundColor: dotColor,
borderRadius: "50%",
display: "inline-block"
}, bounceDotConfigurationSettings),
animate: {
y: ["0%", "-100%", "0%"]
},
transition: {
duration: speed,
repeat: Infinity,
delay: index * (speed / dotCount)
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center"
}, bounceDotContainerConfigurationSettings)
}, dots);
};
var BarGraphLoader = function BarGraphLoader(_ref5) {
var _ref5$barGraphContain = _ref5.barGraphContainerConfigurationSettings,
barGraphContainerConfigurationSettings = _ref5$barGraphContain === void 0 ? {} : _ref5$barGraphContain,
_ref5$barConfiguratio = _ref5.barConfigurationSettings,
barConfigurationSettings = _ref5$barConfiguratio === void 0 ? {} : _ref5$barConfiguratio,
_ref5$barCount = _ref5.barCount,
barCount = _ref5$barCount === void 0 ? 5 : _ref5$barCount,
_ref5$barColor = _ref5.barColor,
barColor = _ref5$barColor === void 0 ? "#3498db" : _ref5$barColor,
_ref5$barWidth = _ref5.barWidth,
barWidth = _ref5$barWidth === void 0 ? "10px" : _ref5$barWidth,
_ref5$barSpacing = _ref5.barSpacing,
barSpacing = _ref5$barSpacing === void 0 ? "5px" : _ref5$barSpacing,
_ref5$barHeight = _ref5.barHeight,
barHeight = _ref5$barHeight === void 0 ? "40px" : _ref5$barHeight,
_ref5$speed = _ref5.speed,
speed = _ref5$speed === void 0 ? "0.8s" : _ref5$speed;
var bars = Array.from({
length: barCount
}, function (_, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: _objectSpread({
height: barHeight,
width: barWidth,
marginRight: barSpacing,
backgroundColor: barColor,
display: "inline-block",
animation: "barAnimation ".concat(speed, " ease-in-out infinite"),
animationDelay: "".concat(index / barCount * parseFloat(speed), "s"),
transformOrigin: "bottom"
}, barConfigurationSettings)
});
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, "\n @keyframes barAnimation {\n 0%, 100% { transform: scaleY(0.3); }\n 50% { transform: scaleY(1); }\n }\n "), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center"
}, barGraphContainerConfigurationSettings)
}, bars));
};
var BarLoader = function BarLoader(_ref6) {
var _ref6$barContainerCon = _ref6.barContainerConfigurationSettings,
barContainerConfigurationSettings = _ref6$barContainerCon === void 0 ? {} : _ref6$barContainerCon,
_ref6$barConfiguratio = _ref6.barConfigurationSettings,
barConfigurationSettings = _ref6$barConfiguratio === void 0 ? {} : _ref6$barConfiguratio,
_ref6$barColor = _ref6.barColor,
barColor = _ref6$barColor === void 0 ? "#3498db" : _ref6$barColor,
_ref6$backgroundColor = _ref6.backgroundColor,
backgroundColor = _ref6$backgroundColor === void 0 ? "#1A1B1E" : _ref6$backgroundColor,
_ref6$height = _ref6.height,
height = _ref6$height === void 0 ? "5px" : _ref6$height,
_ref6$speed = _ref6.speed,
speed = _ref6$speed === void 0 ? 2 : _ref6$speed,
_ref6$borderRadius = _ref6.borderRadius,
borderRadius = _ref6$borderRadius === void 0 ? "10px" : _ref6$borderRadius,
_ref6$pingPong = _ref6.pingPong,
pingPong = _ref6$pingPong === void 0 ? true : _ref6$pingPong;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
width: "100%",
height: height,
backgroundColor: backgroundColor,
borderRadius: borderRadius,
overflow: "hidden",
margin: "20px 0"
}, barContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
height: "100%",
backgroundColor: barColor,
borderRadius: borderRadius
}, barConfigurationSettings),
initial: {
width: "0%"
},
animate: {
width: "100%"
},
transition: {
duration: speed,
repeat: Infinity,
repeatType: pingPong ? "reverse" : undefined,
ease: "linear"
}
}));
};
var BlackholeLoader = function BlackholeLoader(_ref7) {
var _ref7$blackHoleContai = _ref7.blackHoleContainerConfigurationSettings,
blackHoleContainerConfigurationSettings = _ref7$blackHoleContai === void 0 ? {} : _ref7$blackHoleContai,
_ref7$blackHoleConfig = _ref7.blackHoleConfigurationSettings,
blackHoleConfigurationSettings = _ref7$blackHoleConfig === void 0 ? {} : _ref7$blackHoleConfig,
_ref7$size = _ref7.size,
size = _ref7$size === void 0 ? 100 : _ref7$size,
_ref7$particleCompone = _ref7.particleComponent,
particleComponent = _ref7$particleCompone === void 0 ? null : _ref7$particleCompone,
_ref7$particleColor = _ref7.particleColor,
particleColor = _ref7$particleColor === void 0 ? "#ffffff" : _ref7$particleColor,
_ref7$particleCount = _ref7.particleCount,
particleCount = _ref7$particleCount === void 0 ? 30 : _ref7$particleCount,
_ref7$particleSize = _ref7.particleSize,
particleSize = _ref7$particleSize === void 0 ? 4 : _ref7$particleSize,
_ref7$swirlSpeed = _ref7.swirlSpeed,
swirlSpeed = _ref7$swirlSpeed === void 0 ? 2 : _ref7$swirlSpeed,
_ref7$pullSpeed = _ref7.pullSpeed,
pullSpeed = _ref7$pullSpeed === void 0 ? 1.5 : _ref7$pullSpeed,
_ref7$matterBorderCol = _ref7.matterBorderColor,
matterBorderColor = _ref7$matterBorderCol === void 0 ? "#ffffff" : _ref7$matterBorderCol,
_ref7$matterBorderSiz = _ref7.matterBorderSize,
matterBorderSize = _ref7$matterBorderSiz === void 0 ? "#ffffff" : _ref7$matterBorderSiz,
_ref7$centerGlow = _ref7.centerGlow,
centerGlow = _ref7$centerGlow === void 0 ? "rgba(0, 0, 0, 0.69)" : _ref7$centerGlow,
_ref7$coreGlow = _ref7.coreGlow,
coreGlow = _ref7$coreGlow === void 0 ? "rgba(0, 0, 0, 1)" : _ref7$coreGlow,
_ref7$coreSize = _ref7.coreSize,
coreSize = _ref7$coreSize === void 0 ? 25 : _ref7$coreSize;
var particles = Array.from({
length: particleCount
}, function (_, index) {
var angle = index / particleCount * Math.PI * 2;
var distance = Math.random() * (size / 2);
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
position: "absolute",
transform: "translate(".concat(distance * Math.cos(angle), "px, ").concat(distance * Math.sin(angle), "px)"),
borderRadius: "50%",
background: particleColor,
height: "".concat(particleSize, "px"),
width: "".concat(particleSize, "px"),
left: "".concat(size / 2, "px"),
top: "".concat(size / 2, "px")
}, blackHoleConfigurationSettings),
animate: {
x: [distance * Math.cos(angle), 0],
y: [distance * Math.sin(angle), 0],
opacity: [1, 0.0],
scale: [1, 0]
},
transition: {
duration: pullSpeed,
repeat: Infinity,
delay: index * 0.05,
ease: "easeInOut"
}
}, particleComponent);
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
overflow: "hidden",
borderRadius: "50%",
background: "radial-gradient(circle, ".concat(centerGlow, " 0%, transparent 70%)"),
height: "".concat(size, "px"),
width: "".concat(size, "px")
}, blackHoleContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "absolute",
border: "".concat(matterBorderSize, "px solid ").concat(matterBorderColor),
borderRadius: "50%",
height: "100%",
width: "100%"
},
animate: {
rotate: [0, 360]
},
transition: {
duration: swirlSpeed,
repeat: Infinity,
ease: "linear"
}
}), /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "50%",
background: "transparent",
height: "100%",
width: "100%",
zIndex: 869
}
}, /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "relative",
display: "flex",
background: "radial-gradient(circle, ".concat(coreGlow, " 12.69%, transparent 57%)"),
height: "".concat(coreSize, "%"),
width: "".concat(coreSize, "%"),
borderRadius: "50%"
},
animate: {
rotate: [0, 360]
},
transition: {
duration: swirlSpeed,
repeat: Infinity,
ease: "linear"
}
})), particles);
};
var BladeLoader = function BladeLoader(_ref8) {
var _ref8$bladeContainerC = _ref8.bladeContainerConfigurationSettings,
bladeContainerConfigurationSettings = _ref8$bladeContainerC === void 0 ? {} : _ref8$bladeContainerC,
_ref8$bladeConfigurat = _ref8.bladeConfigurationSettings,
bladeConfigurationSettings = _ref8$bladeConfigurat === void 0 ? {} : _ref8$bladeConfigurat,
_ref8$bladeColor = _ref8.bladeColor,
bladeColor = _ref8$bladeColor === void 0 ? "#3498db" : _ref8$bladeColor,
_ref8$bladeSize = _ref8.bladeSize,
bladeSize = _ref8$bladeSize === void 0 ? "80px" : _ref8$bladeSize,
_ref8$bladeThickness = _ref8.bladeThickness,
bladeThickness = _ref8$bladeThickness === void 0 ? "8px" : _ref8$bladeThickness,
_ref8$speed = _ref8.speed,
speed = _ref8$speed === void 0 ? 2 : _ref8$speed;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
height: bladeSize,
width: bladeSize,
borderRadius: "50%",
overflow: "hidden"
}, bladeContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
position: "absolute",
mask: "radial-gradient(circle at center, transparent ".concat(bladeThickness, ", black ").concat(bladeThickness, ")"),
borderRadius: "50%",
background: "conic-gradient(".concat(bladeColor, " 25%, transparent 0%)"),
height: bladeSize,
width: bladeSize,
left: "50%",
top: "50%",
marginLeft: "-".concat(parseInt(bladeSize, 10) / 2, "px"),
marginTop: "-".concat(parseInt(bladeSize, 10) / 2, "px")
}, bladeConfigurationSettings),
animate: {
rotate: 360
},
transition: {
duration: speed,
repeat: Infinity,
ease: "linear"
}
}));
};
var ExplosionLoader = function ExplosionLoader(_ref9) {
var _ref9$explosionContai = _ref9.explosionContainerConfigurationSettings,
explosionContainerConfigurationSettings = _ref9$explosionContai === void 0 ? {} : _ref9$explosionContai,
_ref9$explosionPartic = _ref9.explosionParticleConfigurationSettings,
explosionParticleConfigurationSettings = _ref9$explosionPartic === void 0 ? {} : _ref9$explosionPartic,
_ref9$explosionLayerC = _ref9.explosionLayerConfigurationSettings,
explosionLayerConfigurationSettings = _ref9$explosionLayerC === void 0 ? {} : _ref9$explosionLayerC,
_ref9$explosionConfig = _ref9.explosionConfigurationSettings,
explosionConfigurationSettings = _ref9$explosionConfig === void 0 ? {} : _ref9$explosionConfig,
_ref9$massiveExplosio = _ref9.massiveExplosion,
massiveExplosion = _ref9$massiveExplosio === void 0 ? false : _ref9$massiveExplosio,
_ref9$explosionCount = _ref9.explosionCount,
explosionCount = _ref9$explosionCount === void 0 ? 15 : _ref9$explosionCount,
_ref9$coreColor = _ref9.coreColor,
coreColor = _ref9$coreColor === void 0 ? "rgba(255, 100, 50, 1)" : _ref9$coreColor,
_ref9$glowColor = _ref9.glowColor,
glowColor = _ref9$glowColor === void 0 ? "rgba(255, 150, 50, 0.6)" : _ref9$glowColor,
_ref9$sparkColor = _ref9.sparkColor,
sparkColor = _ref9$sparkColor === void 0 ? "rgba(255, 255, 0, 0.5)" : _ref9$sparkColor,
_ref9$outerFadeColor = _ref9.outerFadeColor,
outerFadeColor = _ref9$outerFadeColor === void 0 ? "rgba(255, 69, 0, 0.3)" : _ref9$outerFadeColor,
_ref9$particleColor = _ref9.particleColor,
particleColor = _ref9$particleColor === void 0 ? "rgba(255, 255, 255, 0.8)" : _ref9$particleColor,
_ref9$sizeMultiplier = _ref9.sizeMultiplier,
sizeMultiplier = _ref9$sizeMultiplier === void 0 ? 1 : _ref9$sizeMultiplier,
_ref9$animationDurati = _ref9.animationDuration,
animationDuration = _ref9$animationDurati === void 0 ? 1 : _ref9$animationDurati,
_ref9$particleSpeed = _ref9.particleSpeed,
particleSpeed = _ref9$particleSpeed === void 0 ? 500 : _ref9$particleSpeed,
_ref9$particles = _ref9.particles,
particles = _ref9$particles === void 0 ? 50 : _ref9$particles,
_ref9$backgroundColor = _ref9.backgroundColor,
backgroundColor = _ref9$backgroundColor === void 0 ? "transparent" : _ref9$backgroundColor,
_ref9$explosionSize = _ref9.explosionSize,
explosionSize = _ref9$explosionSize === void 0 ? 300 : _ref9$explosionSize,
_ref9$customParticle = _ref9.customParticle,
customParticle = _ref9$customParticle === void 0 ? null : _ref9$customParticle,
_ref9$hideExplosion = _ref9.hideExplosion,
hideExplosion = _ref9$hideExplosion === void 0 ? false : _ref9$hideExplosion,
_ref9$origin = _ref9.origin,
origin = _ref9$origin === void 0 ? null : _ref9$origin;
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
explosions = _useState2[0],
setExplosions = _useState2[1];
var loaderContainerStyle = _objectSpread({
position: "relative",
overflow: "hidden",
backgroundColor: backgroundColor,
height: "calc(100%)",
width: "calc(100%)"
}, explosionContainerConfigurationSettings);
var explosionLayerStyles = function explosionLayerStyles(x, y, size, opacity, backgroundColor, transformScale) {
return _objectSpread({
position: "absolute",
transform: "scale(".concat(transformScale, ")"),
animation: "explode ".concat(animationDuration, "s ease-out forwards"),
boxShadow: "0 0 ".concat(size / 4, "px ").concat(backgroundColor),
borderRadius: "50%",
backgroundColor: backgroundColor,
opacity: opacity,
height: size,
width: size,
left: x,
top: y
}, explosionLayerConfigurationSettings);
};
var particleStyle = function particleStyle(x, y, size, angle, speed) {
var radians = angle * Math.PI / 180;
var offsetX = Math.cos(radians) * speed;
var offsetY = Math.sin(radians) * speed;
return {
position: "absolute",
transform: "translate(".concat(offsetX, "px, ").concat(offsetY, "px)"),
animation: "particleMove ".concat(animationDuration, "s ease-out forwards"),
height: size,
width: size,
left: x,
top: y
};
};
useEffect(function () {
var explosionOrigin = {
x: origin !== null && origin !== void 0 && origin.x ? ConvertPosition(origin.x, "x") : window.innerWidth / 2,
y: origin !== null && origin !== void 0 && origin.y ? ConvertPosition(origin.y, "y") : window.innerHeight / 2
};
if (massiveExplosion) {
setExplosions([_objectSpread({
id: "massive",
size: explosionSize * sizeMultiplier,
particles: new Array(particles).fill(null).map(function () {
return _objectSpread({
speed: Math.random() * particleSpeed + 100,
angle: Math.random() * 360,
size: Math.random() * 5 + 2
}, explosionParticleConfigurationSettings);
}),
x: explosionOrigin.x - explosionSize / 2,
y: explosionOrigin.y - explosionSize / 2
}, explosionConfigurationSettings)]);
} else {
var interval = setInterval(function () {
var newExplosion = _objectSpread({
id: Math.random().toString(),
size: Math.random() * 100 + 50 * sizeMultiplier,
particles: new Array(particles).fill(null).map(function () {
return _objectSpread({
speed: Math.random() * particleSpeed + 100,
angle: Math.random() * 360,
size: Math.random() * 5 + 2
}, explosionParticleConfigurationSettings);
}),
y: Math.random() * window.innerHeight,
x: Math.random() * window.innerWidth
}, explosionConfigurationSettings);
setExplosions(function (prevExplosions) {
return [].concat(_toConsumableArray(prevExplosions.slice(-explosionCount)), [newExplosion]);
});
}, 500);
return function () {
return clearInterval(interval);
};
}
}, [massiveExplosion, explosionCount, sizeMultiplier, particleSpeed, origin]);
useEffect(function () {
var styleSheet = document.styleSheets[0];
var explodeKeyframes = "\n @keyframes explode {\n 0% {\n transform: scale(0.2);\n opacity: 1;\n }\n 50% {\n transform: scale(1.2);\n opacity: 0.7;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n ";
styleSheet.insertRule(explodeKeyframes, styleSheet.cssRules.length);
var particleMoveKeyframes = "\n @keyframes particleMove {\n 0% {\n transform: translate(0);\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n ";
styleSheet.insertRule(particleMoveKeyframes, styleSheet.cssRules.length);
}, []);
return /*#__PURE__*/React.createElement("div", {
style: loaderContainerStyle
}, explosions.map(function (explosion) {
return /*#__PURE__*/React.createElement("div", {
key: explosion.id,
style: {
position: "relative"
}
}, !hideExplosion && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
style: explosionLayerStyles(explosion.x, explosion.y, explosion.size, 1, coreColor, 1)
}), /*#__PURE__*/React.createElement("div", {
style: explosionLayerStyles(explosion.x - explosion.size / 4, explosion.y - explosion.size / 4, explosion.size * 1.5, 0.8, glowColor, 1)
}), /*#__PURE__*/React.createElement("div", {
style: explosionLayerStyles(explosion.x - explosion.size / 6, explosion.y - explosion.size / 6, explosion.size * 1.3, 0.6, sparkColor, 1.5)
}), /*#__PURE__*/React.createElement("div", {
style: explosionLayerStyles(explosion.x - explosion.size / 2, explosion.y - explosion.size / 2, explosion.size * 2, 0.5, outerFadeColor, 1.8)
})), explosion.particles.map(function (particle, index) {
var ParticleComponent = customParticle ? customParticle : /*#__PURE__*/React.createElement("div", {
style: {
borderRadius: "50%",
backgroundColor: particleColor,
height: particle.size,
width: particle.size
}
});
return /*#__PURE__*/React.createElement("div", {
key: "".concat(explosion.id, "-").concat(index),
style: particleStyle(explosion.x, explosion.y, particle.size, particle.angle, particle.speed)
}, ParticleComponent);
}));
}));
};
var RotatingSquareLoader = function RotatingSquareLoader(_ref10) {
var _ref10$rotatingSquare = _ref10.rotatingSquareConfigurationSettings,
rotatingSquareConfigurationSettings = _ref10$rotatingSquare === void 0 ? {} : _ref10$rotatingSquare,
_ref10$squareColor = _ref10.squareColor,
squareColor = _ref10$squareColor === void 0 ? "#3498db" : _ref10$squareColor,
_ref10$squareSize = _ref10.squareSize,
squareSize = _ref10$squareSize === void 0 ? "20px" : _ref10$squareSize,
_ref10$speed = _ref10.speed,
speed = _ref10$speed === void 0 ? 1 : _ref10$speed;
return /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
width: squareSize,
height: squareSize,
backgroundColor: squareColor,
display: "inline-block"
}, rotatingSquareConfigurationSettings),
animate: {
rotate: 360,
scale: [1, 1.5, 1]
},
transition: {
ease: "linear",
duration: speed,
repeat: Infinity
}
});
};
var RoboticArmLoader = function RoboticArmLoader(_ref11) {
var _ref11$armSegmentConf = _ref11.armSegmentConfigurationSettings,
armSegmentConfigurationSettings = _ref11$armSegmentConf === void 0 ? {} : _ref11$armSegmentConf,
_ref11$containerConfi = _ref11.containerConfigurationSettings,
containerConfigurationSettings = _ref11$containerConfi === void 0 ? {} : _ref11$containerConfi,
_ref11$jointConfigura = _ref11.jointConfigurationSettings,
jointConfigurationSettings = _ref11$jointConfigura === void 0 ? {} : _ref11$jointConfigura,
_ref11$baseConfigurat = _ref11.baseConfigurationSettings,
baseConfigurationSettings = _ref11$baseConfigurat === void 0 ? {} : _ref11$baseConfigurat,
_ref11$clawConfigurat = _ref11.clawConfigurationSettings,
clawConfigurationSettings = _ref11$clawConfigurat === void 0 ? {} : _ref11$clawConfigurat,
_ref11$color = _ref11.color,
color = _ref11$color === void 0 ? "white" : _ref11$color,
_ref11$armLength = _ref11.armLength,
armLength = _ref11$armLength === void 0 ? 150 : _ref11$armLength,
_ref11$baseSize = _ref11.baseSize,
baseSize = _ref11$baseSize === void 0 ? 60 : _ref11$baseSize,
_ref11$size = _ref11.size,
size = _ref11$size === void 0 ? 300 : _ref11$size,
_ref11$speed = _ref11.speed,
speed = _ref11$speed === void 0 ? 2 : _ref11$speed,
_ref11$followCursor = _ref11.followCursor,
followCursor = _ref11$followCursor === void 0 ? false : _ref11$followCursor,
_ref11$autoRotateAngl = _ref11.autoRotateAngles,
autoRotateAngles = _ref11$autoRotateAngl === void 0 ? [0, 40, -69, 0, -12.69, 0] : _ref11$autoRotateAngl,
_ref11$autoSpeed = _ref11.autoSpeed,
autoSpeed = _ref11$autoSpeed === void 0 ? 2 : _ref11$autoSpeed,
_ref11$autoEase = _ref11.autoEase,
autoEase = _ref11$autoEase === void 0 ? "easeInOut" : _ref11$autoEase,
_ref11$clawGripRotati = _ref11.clawGripRotation,
clawGripRotation = _ref11$clawGripRotati === void 0 ? [0, -15, 15, -10, 5, 0] : _ref11$clawGripRotati,
_ref11$clawGripSpeed = _ref11.clawGripSpeed,
clawGripSpeed = _ref11$clawGripSpeed === void 0 ? 1.5 : _ref11$clawGripSpeed,
_ref11$showClawDetail = _ref11.showClawDetails,
showClawDetails = _ref11$showClawDetail === void 0 ? true : _ref11$showClawDetail,
_ref11$grabTargetRef = _ref11.grabTargetRef,
grabTargetRef = _ref11$grabTargetRef === void 0 ? null : _ref11$grabTargetRef,
_ref11$destinationPos = _ref11.destinationPosition,
destinationPosition = _ref11$destinationPos === void 0 ? {
x: 0,
y: 0
} : _ref11$destinationPos,
_ref11$onGrabComplete = _ref11.onGrabComplete,
onGrabComplete = _ref11$onGrabComplete === void 0 ? function () {} : _ref11$onGrabComplete,
_ref11$triggerGrab = _ref11.triggerGrab,
triggerGrab = _ref11$triggerGrab === void 0 ? false : _ref11$triggerGrab;
var segmentWidth = armLength / 4;
var segmentHeight = baseSize / 4;
var _useState3 = useState({
x: 0,
y: 0
}),
_useState4 = _slicedToArray(_useState3, 2),
cursorPosition = _useState4[0],
setCursorPosition = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isGrabbing = _useState6[0],
setIsGrabbing = _useState6[1];
var _useState7 = useState(null),
_useState8 = _slicedToArray(_useState7, 2),
grabbedPosition = _useState8[0],
setGrabbedPosition = _useState8[1];
var baseRef = useRef(null);
var handleMouseMove = function handleMouseMove(event) {
setCursorPosition({
x: event.clientX,
y: event.clientY
});
};
useEffect(function () {
if (followCursor) {
window.addEventListener("mousemove", handleMouseMove);
return function () {
return window.removeEventListener("mousemove", handleMouseMove);
};
}
}, [followCursor]);
useEffect(function () {
if (triggerGrab) {
grabComponent();
}
}, [triggerGrab]);
var calculateRotation = function calculateRotation(baseX, baseY) {
var deltaX = cursorPosition.x - baseX;
var deltaY = cursorPosition.y - baseY;
var angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
return angle;
};
var baseStyle = _objectSpread({
position: "absolute",
width: "".concat(baseSize, "px"),
height: "".concat(baseSize, "px"),
backgroundColor: color,
borderRadius: "10%"
}, baseConfigurationSettings);
var armSegmentStyle = _objectSpread({
position: "absolute",
width: "".concat(segmentWidth, "px"),
height: "".concat(segmentHeight, "px"),
backgroundColor: color,
transformOrigin: "left center",
borderRadius: "5px"
}, armSegmentConfigurationSettings);
var jointStyle = _objectSpread({
position: "absolute",
width: "".concat(segmentHeight, "px"),
height: "".concat(segmentHeight, "px"),
backgroundColor: "#333",
borderRadius: "50%",
top: "50%",
left: "100%",
transform: "translate(-50%, -50%)"
}, jointConfigurationSettings);
var clawStyle = _objectSpread({
position: "absolute",
width: "".concat(segmentHeight * 1.5, "px"),
height: "".concat(segmentHeight * 1.5, "px"),
backgroundColor: color,
borderRadius: "50%",
top: "50%",
left: "100%",
transform: "translate(-50%, -50%)"
}, clawConfigurationSettings);
var armVariants = function armVariants(rotation) {
return {
rotate: followCursor ? rotation : autoRotateAngles,
transition: followCursor ? {
type: "spring",
stiffness: 50,
damping: 10
} : {
duration: autoSpeed,
repeat: Infinity,
ease: autoEase
}
};
};
var clawVariants = {
rest: {
rotate: 0
},
move: {
rotate: clawGripRotation,
transition: {
duration: speed / clawGripSpeed,
repeat: Infinity,
ease: "easeInOut"
}
}
};
var grabComponent = function grabComponent() {
if (grabTargetRef && grabTargetRef.current) {
var targetRect = grabTargetRef.current.getBoundingClientRect();
setIsGrabbing(true);
setGrabbedPosition({
x: targetRect.left,
y: targetRect.top
});
}
};
var moveToDestination = function moveToDestination() {
if (isGrabbing && grabbedPosition) {
var distanceX = destinationPosition.x - grabbedPosition.x;
var distanceY = destinationPosition.y - grabbedPosition.y;
var moveInterval = setInterval(function () {
setGrabbedPosition(function (prevPosition) {
var newPosition = {
x: prevPosition.x + distanceX * 0.1,
y: prevPosition.y + distanceY * 0.1
};
if (Math.abs(newPosition.x - destinationPosition.x) < 5 && Math.abs(newPosition.y - destinationPosition.y) < 5) {
clearInterval(moveInterval);
setIsGrabbing(false);
onGrabComplete();
}
return newPosition;
});
}, 100);
}
};
useEffect(function () {
if (isGrabbing) {
moveToDestination();
}
}, [isGrabbing, grabbedPosition]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
width: "".concat(size, "px"),
height: "".concat(size, "px")
}, containerConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
ref: baseRef,
style: _objectSpread(_objectSpread({}, baseStyle), {}, {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
})
}, baseRef.current && function () {
var baseRect = baseRef.current.getBoundingClientRect();
var baseX = baseRect.left + baseRect.width / 2;
var baseY = baseRect.top + baseRect.height / 2;
var segment1Rotation = followCursor ? calculateRotation(baseX, baseY) : 0;
var segment2Rotation = followCursor ? calculateRotation(baseX + segmentWidth * Math.cos(segment1Rotation), baseY + segmentWidth * Math.sin(segment1Rotation)) : 0;
var segment3Rotation = followCursor ? calculateRotation(baseX + 2 * segmentWidth * Math.cos(segment2Rotation), baseY + 2 * segmentWidth * Math.sin(segment2Rotation)) : 0;
return /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread(_objectSpread({}, armSegmentStyle), {}, {
top: "-20%",
left: "50%",
transform: "translate(-50%, 50%)"
}),
animate: armVariants(segment1Rotation)
}, /*#__PURE__*/React.createElement("div", {
style: jointStyle
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread(_objectSpread({}, armSegmentStyle), {}, {
top: "0",
left: "100%",
transform: "translate(0, 50%)"
}),
animate: armVariants(segment2Rotation)
}, /*#__PURE__*/React.createElement("div", {
style: jointStyle
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread(_objectSpread({}, armSegmentStyle), {}, {
top: "0",
left: "100%",
transform: "translate(0, 50%)"
}),
animate: armVariants(segment3Rotation)
}, /*#__PURE__*/React.createElement("div", {
style: jointStyle
}, /*#__PURE__*/React.createElement(motion.div, {
style: clawStyle,
variants: clawVariants,
initial: "rest",
animate: "move"
}, showClawDetails && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
style: {
position: "absolute",
width: "40%",
height: "10%",
backgroundColor: "#333",
top: "50%",
left: "50%",
transform: "translate(50%, -150%)",
borderRadius: "5px"
}
}), /*#__PURE__*/React.createElement("div", {
style: {
position: "absolute",
width: "40%",
height: "10%",
backgroundColor: "#333",
top: "50%",
left: "50%",
transform: "rotate(90deg) translate(50%, -150%)",
borderRadius: "5px"
}
})))))))));
}()), isGrabbing && grabbedPosition && /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "absolute",
width: "50px",
height: "50px",
backgroundColor: "red",
borderRadius: "50%"
},
animate: {
top: destinationPosition.y,
left: destinationPosition.x,
transition: {
duration: 2,
ease: "easeInOut"
}
}
}));
};
var RadarLoader = function RadarLoader(_ref12) {
var _ref12$size = _ref12.size,
size = _ref12$size === void 0 ? 200 : _ref12$size,
_ref12$radarColor = _ref12.radarColor,
radarColor = _ref12$radarColor === void 0 ? "#00FF00" : _ref12$radarColor,
_ref12$beamThickness = _ref12.beamThickness,
beamThickness = _ref12$beamThickness === void 0 ? 2 : _ref12$beamThickness,
_ref12$rotationSpeed = _ref12.rotationSpeed,
rotationSpeed = _ref12$rotationSpeed === void 0 ? 2 : _ref12$rotationSpeed,
_ref12$radarBackgroun = _ref12.radarBackground,
radarBackground = _ref12$radarBackgroun === void 0 ? "#001200" : _ref12$radarBackgroun,
_ref12$pings = _ref12.pings,
pings = _ref12$pings === void 0 ? [] : _ref12$pings,
_ref12$defaultPingCol = _ref12.defaultPingColor,
defaultPingColor = _ref12$defaultPingCol === void 0 ? "#FF0000" : _ref12$defaultPingCol,
_ref12$pingDecaySpeed = _ref12.pingDecaySpeed,
pingDecaySpeed = _ref12$pingDecaySpeed === void 0 ? 0.0269 : _ref12$pingDecaySpeed,
_ref12$beamWidth = _ref12.beamWidth,
beamWidth = _ref12$beamWidth === void 0 ? 0.1 : _ref12$beamWidth;
var canvasRef = useRef(null);
useEffect(function () {
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
canvas.width = size;
canvas.height = size;
var centerX = size / 2;
var centerY = size / 2;
var radius = size / 2;
var animateRadar = function animateRadar() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = radarBackground;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fill();
var time = Date.now() / 1000;
var angle = time % rotationSpeed / rotationSpeed * 2 * Math.PI;
ctx.strokeStyle = radarColor;
ctx.lineWidth = beamThickness;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, angle, angle + beamWidth);
ctx.stroke();
pings.forEach(function (ping, index) {
if (ping.opacity > 0) {
var pingAngle = ping.angle !== undefined ? ping.angle : index * (2 * Math.PI / pings.length) % (2 * Math.PI);
var pingColor = ping.color || defaultPingColor;
var withinBeam = Math.abs(pingAngle - (angle + beamWidth / 2)) <= beamWidth / 2;
if (withinBeam) {
ping.opacity = Math.min(1, ping.opacity + pingDecaySpeed * 10);
} else {
ping.opacity -= pingDecaySpeed;
}
ctx.fillStyle = "rgba(".concat(parseInt(pingColor.slice(1, 3), 16), ", ").concat(parseInt(pingColor.slice(3, 5), 16), ", ").concat(parseInt(pingColor.slice(5, 7), 16), ", ").concat(ping.opacity, ")");
ctx.beginPath();
ctx.arc(centerX + ping.distance * Math.cos(pingAngle), centerY + ping.distance * Math.sin(pingAngle), ping.size || 5, 0, 2 * Math.PI);
ctx.fill();
}
});
requestAnimationFrame(animateRadar);
};
animateRadar();
}, [size, radarColor, beamThickness, defaultPingColor, rotationSpeed, radarBackground, pings, pingDecaySpeed, beamWidth]);
return /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
style: {
width: size,
height: size,
display: 'block',
margin: '0 auto',
borderRadius: '50%'
}
});
};
var DataPulseLoader = function DataPulseLoader(_ref13) {
var _ref13$size = _ref13.size,
size = _ref13$size === void 0 ? 150 : _ref13$size,
_ref13$color = _ref13.color,
color = _ref13$color === void 0 ? "#00FFCC" : _ref13$color,
_ref13$pulseCount = _ref13.pulseCount,
pulseCount = _ref13$pulseCount === void 0 ? 3 : _ref13$pulseCount,
_ref13$speed = _ref13.speed,
speed = _ref13$speed === void 0 ? 2 : _ref13$speed;
var pulses = Array.from({
length: pulseCount
});
var pulseVariants = {
animate: {
scale: [0.8, 1.2],
opacity: [0.5, 1, 0.5],
transition: {
duration: speed,
repeat: Infinity,
ease: "easeInOut",
staggerChildren: 0.2
}
}
};
var loaderStyle = {
position: "relative",
width: "".concat(size, "px"),
height: "".concat(size, "px"),
display: "flex",
justifyContent: "center",
alignItems: "center"
};
var pulseStyle = {
position: "absolute",
borderRadius: "50%",
border: "2px solid ".concat(color),
width: "100%",
height: "100%"
};
return /*#__PURE__*/React.createElement("div", {
style: loaderStyle
}, pulses.map(function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: pulseStyle,
variants: pulseVariants,
animate: "animate",
initial: {
scale: 0.8,
opacity: 0.5
}
});
}));
};
var WaveformLoader = function WaveformLoader(_ref14) {
var _ref14$barCount = _ref14.barCount,
barCount = _ref14$barCount === void 0 ? 5 : _ref14$barCount,
_ref14$barColor = _ref14.barColor,
barColor = _ref14$barColor === void 0 ? "#ff7a45" : _ref14$barColor,
_ref14$minHeight = _ref14.minHeight,
minHeight = _ref14$minHeight === void 0 ? 8 : _ref14$minHeight,
_ref14$maxHeight = _ref14.maxHeight,
maxHeight = _ref14$maxHeight === void 0 ? 30 : _ref14$maxHeight,
_ref14$animationDurat = _ref14.animationDuration,
animationDuration = _ref14$animationDurat === void 0 ? 1.2 : _ref14$animationDurat,
_ref14$barWidth = _ref14.barWidth,
barWidth = _ref14$barWidth === void 0 ? 4 : _ref14$barWidth,
_ref14$gap = _ref14.gap,
gap = _ref14$gap === void 0 ? 4 : _ref14$gap,
_ref14$borderRadius = _ref14.borderRadius,
borderRadius = _ref14$borderRadius === void 0 ? 4 : _ref14$borderRadius,
_ref14$delayBetween = _ref14.delayBetween,
delayBetween = _ref14$delayBetween === void 0 ? 0.1 : _ref14$delayBetween,
_ref14$label = _ref14.label,
label = _ref14$label === void 0 ? "Transcribing..." : _ref14$label,
_ref14$labelStyle = _ref14.labelStyle,
labelStyle = _ref14$labelStyle === void 0 ? {} : _ref14$labelStyle;
var bars = useMemo(function () {
return Array.from({
length: barCount
});
}, [barCount]);
return /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
alignItems: "center"
}
}, /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
gap: "".concat(gap, "px"),
justifyContent: "center",
alignItems: "end",
height: "".concat(maxHeight, "px"),
margin: "1rem auto"
}
}, bars.map(function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
initial: {
scaleY: 0.3
},
animate: {
scaleY: [0.3, 1, 0.3]
},
transition: {
duration: animationDuration,
repeat: Infinity,
ease: "easeInOut",
delay: index * delayBetween
},
style: {
width: "".concat(barWidth, "px"),
height: "".concat(minHeight, "px"),
background: barColor,
borderRadius: "".concat(borderRadius, "px"),
transformOrigin: "bottom"
}
});
})), label && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
fontSize: "1rem",
color: barColor,
fontWeight: 600,
letterSpacing: "0.5px",
opacity: 0.9
}, labelStyle)
}, label));
};
var WordLoader = function WordLoader(_ref15) {
var _ref15$wordAnimationT = _ref15.wordAnimationTransitionConfigurationSettings,
wordAnimationTransitionConfigurationSettings = _ref15$wordAnimationT === void 0 ? {} : _ref15$wordAnimationT,
_ref15$wordContainerC = _ref15.wordContainerConfigurationSettings,
wordContainerConfigurationSettings = _ref15$wordContainerC === void 0 ? {} : _ref15$wordContainerC,
_ref15$wordContentCon = _ref15.wordContentConfigurationSettings,
wordContentConfigurationSettings = _ref15$wordContentCon === void 0 ? {} : _ref15$wordContentCon,
_ref15$wordConfigurat = _ref15.wordConfigurationSettings,
wordConfigurationSettings = _ref15$wordConfigurat === void 0 ? {} : _ref15$wordConfigurat,
_ref15$wordContainerC2 = _ref15.wordContainerConfigurations,
wordContainerConfigurations = _ref15$wordContainerC2 === void 0 ? {} : _ref15$wordContainerC2,
_ref15$wordContentCon2 = _ref15.wordContentConfigurations,
wordContentConfigurations = _ref15$wordContentCon2 === void 0 ? {} : _ref15$wordContentCon2,
_ref15$word = _ref15.word,
word = _ref15$word === void 0 ? "Loading..." : _ref15$word,
_ref15$wordColor = _ref15.wordColor,
wordColor = _ref15$wordColor === void 0 ? "#3498db" : _ref15$wordColor,
_ref15$wordColors = _ref15.wordColors,
wordColors = _ref15$wordColors === void 0 ? null : _ref15$wordColors,
_ref15$wordStyles = _ref15.wordStyles,
wordStyles = _ref15$wordStyles === void 0 ? null : _ref15$wordStyles,
_ref15$spaceLetterSpa = _ref15.spaceLetterSpacing,
spaceLetterSpacing = _ref15$spaceLetterSpa === void 0 ? "5.069px" : _ref15$spaceLetterSpa,
_ref15$letterSpacing = _ref15.letterSpacing,
letterSpacing = _ref15$letterSpacing === void 0 ? "1px" : _ref15$letterSpacing,
_ref15$fontSize = _ref15.fontSize,
fontSize = _ref15$fontSize === void 0 ? "24px" : _ref15$fontSize,
_ref15$speed = _ref15.speed,
speed = _ref15$speed === void 0 ? 1.5 : _ref15$speed;
var _useState9 = useState(0),
_useState10 = _slicedToArray(_useState9, 2),
textKey = _useState10[0],
setTextKey = _useState10[1];
useEffect(function () {
setTextKey(function (prevKey) {
return prevKey + 1;
});
}, [word]);
return /*#__PURE__*/React.createElement("div", _extends({
key: textKey,
style: _objectSpread({
display: "flex",
flexWrap: "wrap",
justifyContent: "center",
alignItems: "center",
wordBreak: "break-word",
overflowWrap: "break-word",
whiteSpace: "normal",
maxWidth: "100%"
}, wordContainerConfigurationSettings)
}, wordContainerConfigurations), word.split(" ").map(function (wordItem, wordIndex) {
return /*#__PURE__*/React.createElement("span", _extends({
key: wordIndex,
style: _objectSpread({
display: "inline-flex",
flexWrap: "nowrap",
whiteSpace: "nowrap",
marginRight: spaceLetterSpacing
}, wordContentConfigurationSettings)
}, wordContentConfigurations), wordItem.split("").map(function (letter, index) {
return /*#__PURE__*/React.createElement(motion.span, {
key: "word-".concat(wordIndex, "-").concat(index),
style: _objectSpread({
display: "inline-block",
fontSize: fontSize,
color: wordColor,
marginRight: letterSpacing
}, wordConfigurationSettings),
animate: _objectSpread(_objectSpread({
opacity: [0.5, 1, 0.5]
}, wordColors && {
color: wordColors
}), wordStyles && Object.keys(wordStyles).reduce(function (acc, key) {
acc[key] = wordStyles[key];
return acc;
}, {})),
transition: _objectSpread({
duration: speed,
repeat: Infinity,
delay: (wordIndex * 5 + index) * (speed / word.length),
ease: "easeInOut"
}, wordAnimationTransitionConfigurationSettings || {})
}, letter);
}));
}));
};
var TypingLoader = function TypingLoader(_ref16) {
var _ref16$words = _ref16.words,
words = _ref16$words === void 0 ? ["R-Transcription", "R-Legendary", "R-Private", "R-Creative"] : _ref16$words,
_ref16$delay = _ref16.delay,
delay = _ref16$delay === void 0 ? 3000 : _ref16$delay,
_ref16$letterDelay = _ref16.letterDelay,
letterDelay = _ref16$letterDelay === void 0 ? 70 : _ref16$letterDelay,
_ref16$style = _ref16.style,
style = _ref16$style === void 0 ? {} : _ref16$style,
_ref16$letterStyle = _ref16.letterStyle,
letterStyle = _ref16$letterStyle === void 0 ? {} : _ref16$letterStyle,
_ref16$gap = _ref16.gap,
gap = _ref16$gap === void 0 ? 12 : _ref16$gap,
_ref16$fontSize = _ref16.fontSize,
fontSize = _ref16$fontSize === void 0 ? "1.1rem" : _ref16$fontSize,
_ref16$color = _ref16.color,
color = _ref16$color === void 0 ? "#ffb08a" : _ref16$color,
_ref16$fontWeight = _ref16.fontWeight,
fontWeight = _ref16$fontWeight === void 0 ? 600 : _ref16$fontWeight,
_ref16$showCursor = _ref16.showCursor,
showCursor = _ref16$showCursor === void 0 ? true : _ref16$showCursor,
_ref16$cursorColor = _ref16.cursorColor,
cursorColor = _ref16$cursorColor === void 0 ? "#ffb08a" : _ref16$cursorColor,
_ref16$cursorPulse = _ref16.cursorPulse,
cursorPulse = _ref16$cursorPulse === void 0 ? false : _ref16$cursorPulse,
_ref16$cursorHideAfte = _ref16.cursorHideAfterWord,
cursorHideAfterWord = _ref16$cursorHideAfte === void 0 ? false : _ref16$cursorHideAfte,
_ref16$bounceEffect = _ref16.bounceEffect,
bounceEffect = _ref16$bounceEffect === void 0 ? false : _ref16$bounceEffect;
var _useState11 = useState(0),
_useState12 = _slicedToArray(_useState11, 2),
current = _useState12[0],
setCurrent = _useState12[1];
var _useState13 = useState([]),
_useState14 = _slicedToArray(_useState13, 2),
displayLetters = _useState14[0],
setDisplayLetters = _useState14[1];
var _useState15 = useState(0),
_useState16 = _slicedToArray(_useState15, 2),
cursorX = _useState16[0],
setCursorX = _useState16[1];
var _useState17 = useState(true),
_useState18 = _slicedToArray(_useState17, 2),
isTyping = _useState18[0],
setIsTyping = _useState18[1];
var containerRef = useRef(null);
var timeoutRef = useRef();
useEffect(function () {
if (!words.length) {
return;
}
function animateWord(word) {
setDisplayLetters([]);
setIsTyping(true);
word.split("").forEach(function (_char, index) {
setTimeout(function () {
setDisplayLetters(function (prev) {
return [].concat(_toConsumableArray(prev), [{
"char": _char,
id: "".concat(word, "-").concat(index)
}]);
});
setCursorX(index + 1);
if (index === word.length - 1) setIsTyping(false);
}, index * letterDelay);
});
}
;
animateWord(words[current]);
timeoutRef.current = setTimeout(function () {
setCurrent((current + 1) % words.length);
}, delay);
return function () {
return clearTimeout(timeoutRef.current);
};
}, [current, words, delay, letterDelay]);
return /*#__PURE__*/React.createElement("div", {
ref: containerRef,
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "".concat(gap, "px"),
fontWeight: fontWeight,
fontSize: fontSize,
color: color,
minHeight: "32px",
position: "relative"
}, style)
}, /*#__PURE__*/React.createElement(AnimatePresence, {
initial: false
}, displayLetters.map(function (_ref17, i) {
var _char2 = _ref17["char"],
id = _ref17.id;
return /*#__PURE__*/React.createElement(motion.span, {
key: id,
initial: {
opacity: 0,
y: bounceEffect ? -6 : 0
},
animate: {
opacity: 1,
y: 0
},
exit: {
opacity: 0,
y: bounceEffect ? -6 : 0
},
transition: {
delay: i * (letterDelay / 1000),
duration: 0.4
},
style: _objectSpread({}, letterStyle)
}, _char2);
})), showCursor && (!cursorHideAfterWord || isTyping) && /*#__PURE__*/React.createElement(motion.span, {
initial: {
opacity: 0
},
animate: {
opacity: cursorPulse ? [1, 0.1, 1] : [1, 0, 1],
x: "".concat((gap + 8) * cursorX, "px")
},
transition: {
duration: cursorPulse ? 1 : 0.5,
repeat: Infinity,
ease: "easeInOut"
},
style: {
position: "absolute",
left: 0,
width: "1px",
height: "1em",
backgroundColor: cursorColor
}
}));
};
var DownloadLoader = function DownloadLoader(_ref18) {
var _ref18$downloadContai = _ref18.downloadContainerConfigurationSettings,
downloadContainerConfigurationSettings = _ref18$downloadContai === void 0 ? {} : _ref18$downloadContai,
_ref18$downloadConfig = _ref18.downloadConfigurationSettings,
downloadConfigurationSettings = _ref18$downloadConfig === void 0 ? {} : _ref18$downloadConfig,
_ref18$downloadCompon = _ref18.downloadComponent,
downloadComponent = _ref18$downloadCompon === void 0 ? null : _ref18$downloadCompon,
_ref18$size = _ref18.size,
size = _ref18$size === void 0 ? 100 : _ref18$size,
_ref18$downloadColor = _ref18.downloadColor,
downloadColor = _ref18$downloadColor === void 0 ? "#3498db" : _ref18$downloadColor,
_ref18$segmentSpeed = _ref18.segmentSpeed,
segmentSpeed = _ref18$segmentSpeed === void 0 ? 1.5 : _ref18$segmentSpeed,
_ref18$segmentCount = _ref18.segmentCount,
segmentCount = _ref18$segmentCount === void 0 ? 5 : _ref18$segmentCount;
var segments = Array.from({
length: segmentCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "2px",
backgroundColor: downloadColor,
height: "".concat(size / 4, "px"),
width: "".concat(size / 4, "px"),
marginBottom: "2px"
}, downloadConfigurationSettings),
animate: {
y: ["-".concat(size, "px"), "0px", "0px"],
opacity: [0.5, 1, 0.5]
},
transition: {
duration: segmentSpeed,
repeat: Infinity,
delay: index * 0.2,
ease: "easeInOut"
}
}, downloadComponent);
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "".concat(size * 1.5, "px"),
width: "".concat(size, "px")
}, downloadContainerConfigurationSettings)
}, segments);
};
var FadedSpinnerLoader = function FadedSpinnerLoader(_ref19) {
var _ref19$fadedSpinnerCo = _ref19.fadedSpinnerContainerSettings,
fadedSpinnerContainerSettings = _ref19$fadedSpinnerCo === void 0 ? {} : _ref19$fadedSpinnerCo,
_ref19$size = _ref19.size,
size = _ref19$size === void 0 ? "300px" : _ref19$size,
_ref19$color = _ref19.color,
color = _ref19$color === void 0 ? "#ffffff" : _ref19$color,
_ref19$spinnerThickne = _ref19.spinnerThickness,
spinnerThickness = _ref19$spinnerThickne === void 0 ? "2px" : _ref19$spinnerThickne,
_ref19$speed = _ref19.speed,
speed = _ref19$speed === void 0 ? 2 : _ref19$speed;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
width: size,
height: size,
borderRadius: "50%",
overflow: "hidden"
}, fadedSpinnerContainerSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "absolute",
width: "100%",
height: "100%",
borderRadius: "50%",
background: "conic-gradient(from 0deg, ".concat(color, ", transparent)"),
mask: "radial-gradient(farthest-side, transparent calc(100% - ".concat(spinnerThickness, "), black calc(100% - ").concat(spinnerThickness, "))")
},
animate: {
rotate: [0, 360]
},
transition: {
duration: speed,
repeat: Infinity,
ease: "linear"
}
}));
};
var NebulaPulseLoader = function NebulaPulseLoader(_ref20) {
var _ref20$size = _ref20.size,
size = _ref20$size === void 0 ? 200 : _ref20$size,
_ref20$coreColor = _ref20.coreColor,
coreColor = _ref20$coreColor === void 0 ? "#ffffff" : _ref20$coreColor,
_ref20$corePortalScal = _ref20.corePortalScale,
corePortalScale = _ref20$corePortalScal === void 0 ? 5 : _ref20$corePortalScal,
_ref20$coreSize = _ref20.coreSize,
coreSize = _ref20$coreSize === void 0 ? 47 : _ref20$coreSize,
_ref20$ringColors = _ref20.ringColors,
ringColors = _ref20$ringColors === void 0 ? ["#00c6ff", "#0072ff", "#ff00ff"] : _ref20$ringColors,
_ref20$particleColor = _ref20.particleColor,
particleColor = _ref20$particleColor === void 0 ? "#ffffff" : _ref20$particleColor,
_ref20$ringCount = _ref20.ringCount,
ringCount = _ref20$ringCount === void 0 ? 3 : _ref20$ringCount,
_ref20$pulseSpeed = _ref20.pulseSpeed,
pulseSpeed = _ref20$pulseSpeed === void 0 ? 2 : _ref20$pulseSpeed,
_ref20$depthEffect = _ref20.depthEffect,
depthEffect = _ref20$depthEffect === void 0 ? true : _ref20$depthEffect,
_ref20$reverseRings = _ref20.reverseRings,
reverseRings = _ref20$reverseRings === void 0 ? true : _ref20$reverseRings,
_ref20$nebulaPortal = _ref20.nebulaPortal,
nebulaPortal = _ref20$nebulaPortal === void 0 ? false : _ref20$nebulaPortal,
_ref20$tiltIntensity = _ref20.tiltIntensity,
tiltIntensity = _ref20$tiltIntensity === void 0 ? 20 : _ref20$tiltIntensity;
var particlesRef = useRef([]);
var _useState19 = useState({
x: 0,
y: 0
}),
_useState20 = _slicedToArray(_useState19, 2),
tilt = _useState20[0],
setTilt = _useState20[1];
useEffect(function () {
var particles = particlesRef.current;
particles.forEach(function (particle) {
var angle = Math.random() * 2 * Math.PI;
var distance = Math.random() * (size / 2);
var x = Math.cos(angle) * distance;
var y = Math.sin(angle) * distance;
particle.style.transform = "translate(".concat(x, "px, ").concat(y, "px)");
});
}, [size]);
var handleMouseMove = function handleMouseMove(e) {
var _e$nativeEvent = e.nativeEvent,
offsetX = _e$nativeEvent.offsetX,
offsetY = _e$nativeEvent.offsetY,
target = _e$nativeEvent.target;
var centerX = target.offsetWidth / 2;
var centerY = target.offsetHeight / 2;
var x = (offsetY - centerY) / centerY * tiltIntensity;
var y = -((offsetX - centerX) / centerX) * tiltIntensity;
setTilt({
x: x,
y: y
});
};
var handleMouseLeave = function handleMouseLeave() {
setTilt({
x: 0,
y: 0
});
};
var corePulse = {
scale: [1, 1.2, 1],
opacity: [1, 0.7, 1]
};
var rings = Array.from({
length: ringCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: {
position: nebulaPortal ? "relative" : "absolute",
height: nebulaPortal ? "".concat(size / ((index + 5) / 1.269), "px") : "".concat(size, "px"),
width: nebulaPortal ? "".concat(size / ((index + 5) / 1.269), "px") : "".concat(size, "px"),
borderRadius: "50%",
border: "2px solid ".concat(ringColors[index % ringColors.length]),
opacity: 0.569,
mixBlendMode: "screen",
left: nebulaPortal ? undefined : "25%",
top: nebulaPortal ? undefined : "25%",
transform: "translate(-50%, -50%)"
},
animate: {
scale: [1, 1.5, 1],
opacity: [0.5, 0.8, 0.5],
rotate: reverseRings ? [360, 0] : [0, 360]
},
transition: {
duration: pulseSpeed + index * 0.5,
repeat: Infinity,
ease: "easeInOut"
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
height: "".concat(size * 2, "px"),
width: "".concat(size * 2, "px"),
perspective: "1000px"
},
onMouseLeave: handleMouseLeave,
onMouseMove: handleMouseMove
}, /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
transform: "rotateX(".concat(tilt.x, "deg) rotateY(").concat(tilt.y, "deg)"),
transformStyle: "preserve-3d"
}
}, rings, /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "relative",
height: "".concat(nebulaPortal ? coreSize * corePortalScale : coreSize, "px"),
width: "".concat(nebulaPortal ? coreSize * corePortalScale : coreSize, "px"),
backgroundColor: coreColor,
borderRadius: "50%",
boxShadow: "0 0 20px 5px ".concat(coreColor),
marginLeft: nebulaPortal ? "0.69rem" : undefined
},
animate: corePulse,
transition: {
duration: pulseSpeed,
repeat: Infinity,
ease: "easeInOut"
}
})));
};
var CircuitNodeLoader = function CircuitNodeLoader(_ref21) {
var _ref21$containerConfi = _ref21.containerConfigurationSettings,
containerConfigurationSettings = _ref21$containerConfi === void 0 ? {} : _ref21$containerConfi,
_ref21$nodeConfigurat = _ref21.nodeConfigurationSettings,
nodeConfigurationSettings = _ref21$nodeConfigurat === void 0 ? {} : _ref21$nodeConfigurat,
_ref21$size = _ref21.size,
size = _ref21$size === void 0 ? 169 : _ref21$size,
_ref21$color = _ref21.color,
color = _ref21$color === void 0 ? "#FF5733" : _ref21$color,
_ref21$nodeColors = _ref21.nodeColors,
nodeColors = _ref21$nodeColors === void 0 ? [] : _ref21$nodeColors,
_ref21$nodeCount = _ref21.nodeCount,
nodeCount = _ref21$nodeCount === void 0 ? 300 : _ref21$nodeCount,
_ref21$speed = _ref21.speed,
speed = _ref21$speed === void 0 ? 2 : _ref21$speed,
_ref21$shape = _ref21.shape,
shape = _ref21$shape === void 0 ? "circle" : _ref21$shape,
_ref21$direction = _ref21.direction,
direction = _ref21$direction === void 0 ? "clockwise" : _ref21$direction,
_ref21$nodeScale = _ref21.nodeScale,
nodeScale = _ref21$nodeScale === void 0 ? 1 : _ref21$nodeScale,
_ref21$nodeStartOpaci = _ref21.nodeStartOpacity,
nodeStartOpacity = _ref21$nodeStartOpaci === void 0 ? 0.069 : _ref21$nodeStartOpaci,
_ref21$nodeFadeOpacit = _ref21.nodeFadeOpacity,
nodeFadeOpacity = _ref21$nodeFadeOpacit === void 0 ? 0.069 : _ref21$nodeFadeOpacit,
_ref21$positions = _ref21.positions,
positions = _ref21$positions === void 0 ? [] : _ref21$positions;
var nodes = Array.from({
length: nodeCount
});
var nodeVariants = {
initial: {
opacity: nodeStartOpacity,
scale: 0.8
},
animate: function animate(i) {
return {
opacity: [nodeStartOpacity, 1, nodeFadeOpacity],
scale: [0.8, nodeScale, 0.8],
transition: {
duration: speed,
repeat: Infinity,
ease: "easeInOut",
delay: i * (speed / nodeCount) * (direction === "clockwise" ? 1 : -1)
}
};
}
};
var loaderStyle = _objectSpread({
position: "relative",
width: "".concat(size, "px"),
height: "".concat(size, "px")
}, containerConfigurationSettings);
var nodeStyle = _objectSpread({
position: "absolute",
width: "".concat(size / 6, "px"),
height: "".concat(size / 6, "px"),
borderRadius: "50%",
background: nodeColors.length > 0 ? "linear-gradient(".concat(nodeColors.join(", "), ")") : color,
boxShadow: "0 0 15px ".concat(color)
}, nodeConfigurationSettings);
var calculatePosition = function calculatePosition(index, total) {
if (positions[index]) {
return positions[index];
}
var angle, x, y;
var radius = size / 2 - size * 0.15;
switch (shape) {
case "diamond":
angle = index / total * 2 * Math.PI;
x = 50 + radius * Math.cos(angle) * Math.abs(Math.cos(angle));
y = 50 + radius * Math.sin(angle) * Math.abs(Math.sin(angle));
break;
case "cube":
var rows = Math.ceil(Math.sqrt(total));
var cols = Math.ceil(Math.sqrt(total));
x = 50 + (index % cols - cols / 2) * (radius / cols) * 2;
y = 50 + (Math.floor(index / rows) - rows / 2) * (radius / rows) * 2;
break;
case "cloud":
var cloudWidth = radius * 1.2;
var cloudHeight = radius * 0.8;
angle = index / total * Math.PI * 2;
x = 50 + cloudWidth * 0.4 * Math.cos(angle) + Math.random() * 10 - 5;
y = 50 + cloudHeight * 0.6 * Math.sin(angle) + Math.random() * 10 - 5;
break;
case "star":
var spikes = 5;
var outerRadius = radius;
var innerRadius = radius / 2;
var step = Math.PI / spikes;
angle = index % (spikes * 2) * step;
var isEven = index % 2 === 0;
x = 50 + (isEven ? outerRadius : innerRadius) * Math.cos(angle);
y = 50 + (isEven ? outerRadius : innerRadius) * Math.sin(angle);
break;
case "hexagon":
var hexRadius = radius * 0.8;
angle = index % 6 * (Math.PI / 3);
x = 50 + hexRadius * Math.cos(angle);
y = 50 + hexRadius * Math.sin(angle);
break;
case "up":
x = 50;
y = 50 - index * (radius / total) * 2;
break;
case "down":
x = 50;
y = 50 + index * (radius / total) * 2;
break;
case "left":
x = 50 - index * (radius / total) * 2;
y = 50;
break;
case "right":
x = 50 + index * (radius / total) * 2;
y = 50;
break;
case "diagonal":
x = 50 + index * (radius / total) * 2;
y = 50 + index * (radius / total) * 2;
break;
case "zigzag":
x = 50 + (index % 2 === 0 ? -1 : 1) * (index * (radius / total)) * 1.5;
y = 50 + index * (radius / total) * 1.5;
break;
case "circle":
default:
angle = index / total * 2 * Math.PI;
x = 50 + radius * Math.cos(angle);
y = 50 + radius * Math.sin(angle);
}
return {
top: "".concat(y, "%"),
left: "".concat(x, "%"),
transform: "translate(-50%, -50%)"
};
};
return /*#__PURE__*/React.createElement("div", {
style: loaderStyle
}, nodes.map(function (_, i) {
return /*#__PURE__*/React.createElement(motion.div, {
key: i,
style: _objectSpread(_objectSpread({}, nodeStyle), calculatePosition(i, nodeCount)),
custom: i,
variants: nodeVariants,
initial: "initial",
animate: "animate"
});
}));
};
var CircuitLoader = function CircuitLoader(_ref22) {
var _ref22$circuitContain = _ref22.circuitContainerConfigurationSettings,
circuitContainerConfigurationSettings = _ref22$circuitContain === void 0 ? {} : _ref22$circuitContain,
_ref22$componentConfi = _ref22.componentConfigurationSettings,
componentConfigurationSettings = _ref22$componentConfi === void 0 ? {} : _ref22$componentConfi,
_ref22$nodeConfigurat = _ref22.nodeConfigurationSettings,
nodeConfigurationSettings = _ref22$nodeConfigurat === void 0 ? {} : _ref22$nodeConfigurat,
_ref22$pathConfigurat = _ref22.pathConfigurationSettings,
pathConfigurationSettings = _ref22$pathConfigurat === void 0 ? {} : _ref22$pathConfigurat,
_ref22$size = _ref22.size,
size = _ref22$size === void 0 ? 169 : _ref22$size,
_ref22$backgroundColo = _ref22.backgroundColor,
backgroundColor = _ref22$backgroundColo === void 0 ? "#1A1B1E" : _ref22$backgroundColo,
_ref22$backgroundGrad = _ref22.backgroundGradient,
backgroundGradient = _ref22$backgroundGrad === void 0 ? ["#1A1B1E", "#2A2D30"] : _ref22$backgroundGrad,
_ref22$unelectrifiedC = _ref22.unelectrifiedColor,
unelectrifiedColor = _ref22$unelectrifiedC === void 0 ? "#2C2F33" : _ref22$unelectrifiedC,
_ref22$electrifiedCol = _ref22.electrifiedColor,
electrifiedColor = _ref22$electrifiedCol === void 0 ? "#3498db" : _ref22$electrifiedCol,
_ref22$nodeSize = _ref22.nodeSize,
nodeSize = _ref22$nodeSize === void 0 ? 3 : _ref22$nodeSize,
_ref22$glowEffect = _ref22.glowEffect,
glowEffect = _ref22$glowEffect === void 0 ? true : _ref22$glowEffect,
_ref22$speed = _ref22.speed,
speed = _ref22$speed === void 0 ? 1.5 : _ref22$speed,
_ref22$nodePositions = _ref22.nodePositions,
nodePositions = _ref22$nodePositions === void 0 ? [] : _ref22$nodePositions,
_ref22$componentSize = _ref22.componentSize,
componentSize = _ref22$componentSize === void 0 ? 2 : _ref22$componentSize,
_ref22$components = _ref22.components,
components = _ref22$components === void 0 ? ["resistor", "capacitor", "sparkGap", "switch", "thermistor", "general", "OR", "NOR", "NAND", "AND", "XOR", "relay", "coil", "contacts", "dipole", "amplifier", "loop"] : _ref22$components,
_ref22$electrifiedMod = _ref22.electrifiedMode,
electrifiedMode = _ref22$electrifiedMod === void 0 ? true : _ref22$electrifiedMod,
_ref22$complexity = _ref22.complexity,
complexity = _ref22$complexity === void 0 ? 1 : _ref22$complexity,
_ref22$organizationIn = _ref22.organizationIntensity,
organizationIntensity = _ref22$organizationIn === void 0 ? 0.5 : _ref22$organizationIn,
_ref22$temporaryShock = _ref22.temporaryShockEffect,
temporaryShockEffect = _ref22$temporaryShock === void 0 ? true : _ref22$temporaryShock,
_ref22$shockIntensity = _ref22.shockIntensity,
shockIntensity = _ref22$shockIntensity === void 0 ? 0.7 : _ref22$shockIntensity,
_ref22$shockDuration = _ref22.shockDuration,
shockDuration = _ref22$shockDuration === void 0 ? 500 : _ref22$shockDuration;
var canvasRef = useRef(null);
var electrifiedNodes = useRef(new Set());
useEffect(function () {
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
canvas.width = size;
canvas.height = size;
var gradient = ctx.createLinearGradient(0, 0, size, size);
gradient.addColorStop(0, backgroundGradient[0]);
gradient.addColorStop(1, backgroundGradient[1]);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, size, size);
var nodes = nodePositions.length > 0 ? nodePositions : generateRandomNodes(6 * complexity, size);
var paths = generatePaths(nodes, components, componentSize, complexity, organizationIntensity);
var animateCircuit = function animateCircuit() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, size, size);
paths.forEach(function (path) {
drawLine(ctx, path.start, path.end, unelectrifiedColor, 2, pathConfigurationSettings);
if (path.component) {
drawComponent(ctx, path.component, unelectrifiedColor, componentSize, componentConfigurationSettings);
}
});
var currentTime = Date.now() / 1000;
var progress = currentTime % speed / speed;
var currentPathIndex = Math.floor(progress * paths.length);
var currentPath = paths[currentPathIndex];
var segmentProgress = progress * paths.length % 1;
if (currentPath) {
drawLine(ctx, currentPath.start, currentPath.end, electrifiedColor, 3, pathConfigurationSettings, segmentProgress);
if (electrifiedMode) {
shockNode(ctx, currentPath.end, electrifiedColor, nodeSize, glowEffect, shockIntensity, nodeConfigurationSettings);
}
}
nodes.forEach(function (node) {
if (electrifiedNodes.current.has(node)) {
drawNode(ctx, node, electrifiedColor, nodeSize, glowEffect ? electrifiedColor : null, nodeConfigurationSettings);
} else {
drawNode(ctx, node, unelectrifiedColor, nodeSize, glowEffect ? electrifiedColor : null, nodeConfigurationSettings);
}
});
requestAnimationFrame(animateCircuit);
};
animateCircuit();
}, [size, backgroundColor, unelectrifiedColor, electrifiedColor, nodeSize, glowEffect, speed, nodePositions, componentSize, components, electrifiedMode, complexity, organizationIntensity, shockIntensity, shockDuration, circuitContainerConfigurationSettings, nodeConfigurationSettings, pathConfigurationSettings, componentConfigurationSettings]);
var generateRandomNodes = function generateRandomNodes(count, maxSize) {
return Array.from({
length: count
}, function () {
return {
x: Math.random() * (maxSize - nodeSize * 2) + nodeSize,
y: Math.random() * (maxSize - nodeSize * 2) + nodeSize
};
});
};
var generatePaths = function generatePaths(nodes, components, componentSize, complexity, organizationIntensity) {
var paths = [];
for (var i = 0; i < nodes.length - 1; i++) {
var path = {
start: nodes[i],
end: nodes[i + 1]
};
if (Math.random() < 0.5 * complexity * organizationIntensity) {
var componentType = components[Math.floor(Math.random() * components.length)];
var componentPosition = {
x: (path.start.x + path.end.x) / 2,
y: (path.start.y + path.end.y) / 2,
type: componentType
};
path.component = componentPosition;
}
paths.push(path);
}
return paths;
};
var drawLine = function drawLine(ctx, start, end, color, thickness, settings) {
var progress = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1;
ctx.strokeStyle = color;
ctx.lineWidth = thickness;
ctx.beginPath();
ctx.moveTo(start.x, start.y);
var endX = start.x + (end.x - start.x) * progress;
var endY = start.y + (end.y - start.y) * progress;
ctx.lineTo(endX, endY);
ctx.stroke();
if (settings.shadowColor) {
ctx.shadowBlur = settings.shadowBlur || 10;
ctx.shadowColor = settings.shadowColor;
}
};
var drawNode = function drawNode(ctx, node, color, size, glowColor, settings) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
ctx.fill();
if (glowColor || settings.glowColor) {
ctx.shadowBlur = settings.shadowBlur || 20;
ctx.shadowColor = glowColor || settings.glowColor;
}
ctx.shadowBlur = 0;
};
var shockNode = function shockNode(ctx, node, color, size, glowEffect, intensity, settings) {
electrifiedNodes.current.add(node);
drawNode(ctx, node, color, size, glowEffect ? color : null, settings);
if (glowEffect) {
ctx.shadowBlur = settings.shadowBlur || 20 * intensity;
ctx.shadowColor = color;
}
setTimeout(function () {
electrifiedNodes.current["delete"](node);
}, intensity * shockDuration);
};
var drawComponent = function drawComponent(ctx, component, color, size, settings) {
ctx.strokeStyle = color;
ctx.lineWidth = 2;
switch (component.type) {
case "resistor":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y);
ctx.lineTo(component.x + size, component.y);
ctx.stroke();
break;
case "capacitor":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y);
ctx.lineTo(component.x - size / 2, component.y);
ctx.moveTo(component.x + size / 2, component.y);
ctx.lineTo(component.x + size, component.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x - size / 2, component.y - size / 2);
ctx.lineTo(component.x - size / 2, component.y + size / 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x + size / 2, component.y - size / 2);
ctx.lineTo(component.x + size / 2, component.y + size / 2);
ctx.stroke();
break;
case "sparkGap":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y);
ctx.lineTo(component.x - size / 2, component.y - size / 2);
ctx.lineTo(component.x, component.y);
ctx.lineTo(component.x + size / 2, component.y + size / 2);
ctx.lineTo(component.x + size, component.y);
ctx.stroke();
break;
case "switch":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y);
ctx.lineTo(component.x, component.y - size / 2);
ctx.lineTo(component.x + size, component.y);
ctx.stroke();
break;
case "thermistor":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y);
ctx.lineTo(component.x + size, component.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x, component.y - size / 2);
ctx.lineTo(component.x, component.y + size / 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x - size / 2, component.y + size / 2);
ctx.lineTo(component.x + size / 2, component.y - size / 2);
ctx.stroke();
break;
case "general":
ctx.beginPath();
ctx.rect(component.x - size / 2, component.y - size / 2, size, size);
ctx.stroke();
break;
case "OR":
case "NOR":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y + size / 2);
ctx.lineTo(component.x, component.y - size / 2);
ctx.lineTo(component.x + size, component.y + size / 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x - size, component.y + size / 2);
ctx.arc(component.x, component.y + size / 2, size, 0, Math.PI);
ctx.stroke();
if (component.type === "NOR") {
ctx.beginPath();
ctx.arc(component.x + size, component.y + size / 2, size / 4, 0, 2 * Math.PI);
ctx.stroke();
}
break;
case "AND":
case "NAND":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y - size / 2);
ctx.lineTo(component.x - size, component.y + size / 2);
ctx.lineTo(component.x, component.y + size / 2);
ctx.arc(component.x, component.y - size / 2, size / 2, Math.PI / 2, 1.5 * Math.PI);
ctx.stroke();
if (component.type === "NAND") {
ctx.beginPath();
ctx.arc(component.x + size / 2, component.y - size / 2, size / 4, 0, 2 * Math.PI);
ctx.stroke();
}
break;
case "XOR":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y + size / 2);
ctx.lineTo(component.x, component.y - size / 2);
ctx.lineTo(component.x + size, component.y + size / 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x - size - size / 4, component.y + size / 2);
ctx.arc(component.x, component.y + size / 2, size, 0, Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x - size, component.y + size / 2);
ctx.arc(component.x, component.y + size / 2, size, 0, Math.PI);
ctx.stroke();
break;
case "relay":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y);
ctx.lineTo(component.x + size, component.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x, component.y - size / 2);
ctx.lineTo(component.x, component.y + size / 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x - size / 2, component.y - size / 2);
ctx.lineTo(component.x + size / 2, component.y + size / 2);
ctx.stroke();
break;
case "coil":
ctx.beginPath();
ctx.arc(component.x - size / 2, component.y, size / 2, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.arc(component.x + size / 2, component.y, size / 2, 0, Math.PI * 2);
ctx.stroke();
break;
case "contacts":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y);
ctx.lineTo(component.x - size / 2, component.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x + size / 2, component.y);
ctx.lineTo(component.x + size, component.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(component.x - size / 2, component.y - size / 2);
ctx.lineTo(component.x + size / 2, component.y + size / 2);
ctx.stroke();
break;
case "dipole":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y);
ctx.lineTo(component.x + size, component.y);
ctx.stroke();
ctx.beginPath();
ctx.arc(component.x - size / 2, component.y, size / 2, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.arc(component.x + size / 2, component.y, size / 2, 0, Math.PI * 2);
ctx.stroke();
break;
case "amplifier":
ctx.beginPath();
ctx.moveTo(component.x - size, component.y + size / 2);
ctx.lineTo(component.x, component.y - size / 2);
ctx.lineTo(component.x + size, component.y + size / 2);
ctx.closePath();
ctx.stroke();
break;
case "loop":
ctx.beginPath();
ctx.arc(component.x, component.y, size, 0, Math.PI * 2);
ctx.stroke();
break;
default:
ctx.fillRect(component.x - size / 2, component.y - size / 2, size, size);
break;
}
if (settings.shadowColor) {
ctx.shadowBlur = settings.shadowBlur || 10;
ctx.shadowColor = settings.shadowColor;
}
};
return /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
style: _objectSpread({
width: size,
height: size,
display: "block",
borderRadius: "0.69rem",
backgroundColor: backgroundColor
}, circuitContainerConfigurationSettings)
});
};
var ComputationLoader = function ComputationLoader(_ref23) {
var _ref23$computationCon = _ref23.computationContainerConfigurationSettings,
computationContainerConfigurationSettings = _ref23$computationCon === void 0 ? {} : _ref23$computationCon,
_ref23$computationCon2 = _ref23.computationConfigurationSettings,
computationConfigurationSettings = _ref23$computationCon2 === void 0 ? {} : _ref23$computationCon2,
_ref23$size = _ref23.size,
size = _ref23$size === void 0 ? 100 : _ref23$size,
_ref23$columns = _ref23.columns,
columns = _ref23$columns === void 0 ? 5 : _ref23$columns,
_ref23$rows = _ref23.rows,
rows = _ref23$rows === void 0 ? 5 : _ref23$rows,
_ref23$symbolType = _ref23.symbolType,
symbolType = _ref23$symbolType === void 0 ? "numbers" : _ref23$symbolType,
_ref23$scrollSpeed = _ref23.scrollSpeed,
scrollSpeed = _ref23$scrollSpeed === void 0 ? 0.169 : _ref23$scrollSpeed,
_ref23$highlightColor = _ref23.highlightColor,
highlightColor = _ref23$highlightColor === void 0 ? "#00FFDD" : _ref23$highlightColor,
_ref23$normalColor = _ref23.normalColor,
normalColor = _ref23$normalColor === void 0 ? "#007ACC" : _ref23$normalColor,
_ref23$glitchColor = _ref23.glitchColor,
glitchColor = _ref23$glitchColor === void 0 ? "#FF007A" : _ref23$glitchColor,
_ref23$fontSize = _ref23.fontSize,
fontSize = _ref23$fontSize === void 0 ? 16 : _ref23$fontSize,
_ref23$backgroundColo = _ref23.backgroundColor,
backgroundColor = _ref23$backgroundColo === void 0 ? "transparent" : _ref23$backgroundColo,
_ref23$animationType = _ref23.animationType,
animationType = _ref23$animationType === void 0 ? "scroll" : _ref23$animationType,
_ref23$gridLineColor = _ref23.gridLineColor,
gridLineColor = _ref23$gridLineColor === void 0 ? "#333" : _ref23$gridLineColor,
_ref23$gridLines = _ref23.gridLines,
gridLines = _ref23$gridLines === void 0 ? false : _ref23$gridLines,
_ref23$cellSpacing = _ref23.cellSpacing,
cellSpacing = _ref23$cellSpacing === void 0 ? 0 : _ref23$cellSpacing,
_ref23$direction = _ref23.direction,
direction = _ref23$direction === void 0 ? "down" : _ref23$direction;
var canvasRef = useRef(null);
var generateSymbol = function generateSymbol() {
var symbol;
switch (symbolType) {
case "hexadecimal":
symbol = Math.floor(Math.random() * 16).toString(16).toUpperCase();
break;
case "binary":
symbol = Math.floor(Math.random() * 2).toString();
break;
case "numbers":
symbol = Math.floor(Math.random() * 10).toString();
break;
default:
symbol = symbolType[Math.floor(Math.random() * symbolType.length)];
break;
}
return symbol;
};
useEffect(function () {
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
canvas.width = size;
canvas.height = size;
var cellWidth = (size - cellSpacing * (columns - 1)) / columns;
var cellHeight = (size - cellSpacing * (rows - 1)) / rows;
var arrayMatrix = Array.from({
length: rows
}, function () {
return Array.from({
length: columns
}, function () {
return {
symbol: "",
isHighlighted: false,
isGlitched: false,
offsetX: 0,
offsetY: 0,
alpha: 1
};
});
});
var animateArray = function animateArray() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (gridLines) {
ctx.strokeStyle = gridLineColor;
for (var i = 0; i <= columns; i++) {
ctx.beginPath();
ctx.moveTo(i * (cellWidth + cellSpacing), 0);
ctx.lineTo(i * (cellWidth + cellSpacing), size);
ctx.stroke();
}
for (var _i = 0; _i <= rows; _i++) {
ctx.beginPath();
ctx.moveTo(0, _i * (cellHeight + cellSpacing));
ctx.lineTo(size, _i * (cellHeight + cellSpacing));
ctx.stroke();
}
}
arrayMatrix.forEach(function (row, rowIndex) {
row.forEach(function (cell, colIndex) {
if (cell.symbol === "") {
cell.symbol = generateSymbol();
}
if (Math.random() < scrollSpeed) {
cell.isHighlighted = true;
cell.isGlitched = Math.random() < 0.1;
switch (direction) {
case "down":
cell.offsetY += scrollSpeed * fontSize;
break;
case "up":
cell.offsetY -= scrollSpeed * fontSize;
break;
case "right":
cell.offsetX += scrollSpeed * fontSize;
break;
case "left":
cell.offsetX -= scrollSpeed * fontSize;
break;
default:
cell.offsetY -= scrollSpeed * fontSize;
break;
}
}
if (cell.offsetY > cellHeight) {
cell.offsetY = 0;
cell.symbol = generateSymbol();
} else if (cell.offsetY < -cellHeight) {
cell.offsetY = 0;
cell.symbol = generateSymbol();
} else if (cell.offsetX > cellWidth) {
cell.offsetX = 0;
cell.symbol = generateSymbol();
} else if (cell.offsetX < -cellWidth) {
cell.offsetX = 0;
cell.symbol = generateSymbol();
}
switch (animationType) {
case "fade":
cell.alpha = cell.isHighlighted ? 1 : 0.2;
ctx.globalAlpha = cell.alpha;
break;
case "zoom":
ctx.save();
ctx.translate(colIndex * (cellWidth + cellSpacing) + cellWidth / 2 + cell.offsetX, rowIndex * (cellHeight + cellSpacing) + cellHeight / 2 + cell.offsetY);
ctx.scale(cell.isHighlighted ? 1.2 : 1, cell.isHighlighted ? 1.2 : 1);
ctx.fillText(cell.symbol, 0, 0);
ctx.restore();
break;
case "bounce":
var bounce = cell.isHighlighted ? Math.sin(Date.now() / 100) * 5 : 0;
ctx.fillText(cell.symbol, colIndex * (cellWidth + cellSpacing) + cellWidth / 2 + cell.offsetX, rowIndex * (cellHeight + cellSpacing) + cellHeight / 2 + cell.offsetY - bounce);
break;
default:
ctx.fillText(cell.symbol, colIndex * (cellWidth + cellSpacing) + cellWidth / 2 + cell.offsetX, rowIndex * (cellHeight + cellSpacing) + cellHeight / 2 + cell.offsetY);
break;
}
ctx.fillStyle = cell.isHighlighted ? cell.isGlitched ? glitchColor : highlightColor : normalColor;
ctx.font = "".concat(fontSize, "px monospace");
ctx.textAlign = "center";
ctx.textBaseline = "middle";
if (computationConfigurationSettings) {
Object.keys(computationConfigurationSettings).forEach(function (key) {
ctx[key] = computationConfigurationSettings[key];
});
}
ctx.fillText(cell.symbol, colIndex * (cellWidth + cellSpacing) + cellWidth / 2 + cell.offsetX, rowIndex * (cellHeight + cellSpacing) + cellHeight / 2 + cell.offsetY);
if (cell.isHighlighted) {
cell.isHighlighted = false;
}
ctx.globalAlpha = 1;
});
});
requestAnimationFrame(animateArray);
};
animateArray();
}, [size, rows, columns, symbolType, scrollSpeed, highlightColor, normalColor, glitchColor, fontSize, backgroundColor, gridLines, gridLineColor, animationType, cellSpacing, direction, computationConfigurationSettings]);
return /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
style: _objectSpread({
width: size,
height: size,
display: "block",
margin: "0 auto",
backgroundColor: backgroundColor
}, computationContainerConfigurationSettings)
});
};
var CloudDataLoader = function CloudDataLoader(_ref24) {
var _ref24$cloudContainer = _ref24.cloudContainerConfigurationSettings,
cloudContainerConfigurationSettings = _ref24$cloudContainer === void 0 ? {} : _ref24$cloudContainer,
_ref24$cloudDataCompo = _ref24.cloudDataComponent,
cloudDataComponent = _ref24$cloudDataCompo === void 0 ? null : _ref24$cloudDataCompo,
_ref24$size = _ref24.size,
size = _ref24$size === void 0 ? 100 : _ref24$size,
_ref24$cubeColor = _ref24.cubeColor,
cubeColor = _ref24$cubeColor === void 0 ? "#3498db" : _ref24$cubeColor,
_ref24$cubeSize = _ref24.cubeSize,
cubeSize = _ref24$cubeSize === void 0 ? 10 : _ref24$cubeSize,
_ref24$cubeCount = _ref24.cubeCount,
cubeCount = _ref24$cubeCount === void 0 ? 20 : _ref24$cubeCount,
_ref24$shiftSpeedVari = _ref24.shiftSpeedVariance,
shiftSpeedVariance = _ref24$shiftSpeedVari === void 0 ? 0.69 : _ref24$shiftSpeedVari,
_ref24$xShiftRange = _ref24.xShiftRange,
xShiftRange = _ref24$xShiftRange === void 0 ? 200 : _ref24$xShiftRange,
_ref24$yShiftRange = _ref24.yShiftRange,
yShiftRange = _ref24$yShiftRange === void 0 ? 10 : _ref24$yShiftRange,
_ref24$shiftSpeed = _ref24.shiftSpeed,
shiftSpeed = _ref24$shiftSpeed === void 0 ? 2 : _ref24$shiftSpeed,
_ref24$cloudFormation = _ref24.cloudFormationRadius,
cloudFormationRadius = _ref24$cloudFormation === void 0 ? 40 : _ref24$cloudFormation,
_ref24$dataOriginVari = _ref24.dataOriginVarianceFactor,
dataOriginVarianceFactor = _ref24$dataOriginVari === void 0 ? 5.69 : _ref24$dataOriginVari,
_ref24$dataOriginVari2 = _ref24.dataOriginVariance,
dataOriginVariance = _ref24$dataOriginVari2 === void 0 ? true : _ref24$dataOriginVari2,
_ref24$dataOrigin = _ref24.dataOrigin,
dataOrigin = _ref24$dataOrigin === void 0 ? 0 : _ref24$dataOrigin,
_ref24$pulseSize = _ref24.pulseSize,
pulseSize = _ref24$pulseSize === void 0 ? 1.0569 : _ref24$pulseSize,
_ref24$pulseEffect = _ref24.pulseEffect,
pulseEffect = _ref24$pulseEffect === void 0 ? true : _ref24$pulseEffect,
_ref24$opacityRange = _ref24.opacityRange,
opacityRange = _ref24$opacityRange === void 0 ? [0.69, 1] : _ref24$opacityRange;
var cubes = Array.from({
length: cubeCount
}, function (_, index) {
var angle = index / cubeCount * Math.PI * 2;
var x = Math.cos(!dataOriginVariance && dataOrigin !== undefined && dataOrigin !== null && typeof dataOrigin === "number" ? angle + dataOrigin : angle + Math.random() * dataOriginVarianceFactor) * cloudFormationRadius;
var y = Math.sin(!dataOriginVariance && dataOrigin !== undefined && dataOrigin !== null && typeof dataOrigin === "number" ? angle + dataOrigin : angle + Math.random() * dataOriginVarianceFactor) * cloudFormationRadius;
var randomSpeed = shiftSpeed * (0.8 + Math.random() * shiftSpeedVariance);
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: {
height: "".concat(cubeSize, "px"),
width: "".concat(cubeSize, "px"),
background: cubeColor,
borderRadius: "2px",
position: "absolute",
top: "".concat(size / 2, "px"),
left: "".concat(size / 2, "px"),
transform: "translate(".concat(x, "px, ").concat(y, "px)")
},
animate: {
x: [x, x + Math.random() * xShiftRange, x],
y: [y, y - Math.random() * yShiftRange, y],
opacity: opacityRange
},
transition: {
duration: randomSpeed,
repeat: Infinity,
ease: "easeInOut"
}
}, cloudDataComponent);
});
return /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
position: "relative",
borderRadius: "50%",
backgroundColor: "transparent",
height: "".concat(size, "px"),
width: "".concat(size, "px")
}, cloudContainerConfigurationSettings),
animate: pulseEffect ? {
scale: [1, pulseSize, 1]
} : {},
transition: {
duration: shiftSpeed * 2,
repeat: Infinity,
ease: "easeInOut"
}
}, cubes);
};
var ServerRequestLoader = function ServerRequestLoader(_ref25) {
var _ref25$serverContaine = _ref25.serverContainerConfigurationSettings,
serverContainerConfigurationSettings = _ref25$serverContaine === void 0 ? {} : _ref25$serverContaine,
_ref25$cubeConfigurat = _ref25.cubeConfigurationSettings,
cubeConfigurationSettings = _ref25$cubeConfigurat === void 0 ? {} : _ref25$cubeConfigurat,
_ref25$blockConfigura = _ref25.blockConfigurationSettings,
blockConfigurationSettings = _ref25$blockConfigura === void 0 ? {} : _ref25$blockConfigura,
_ref25$serverColor = _ref25.serverColor,
serverColor = _ref25$serverColor === void 0 ? "#e74c3c" : _ref25$serverColor,
_ref25$blockColor = _ref25.blockColor,
blockColor = _ref25$blockColor === void 0 ? "#3498db" : _ref25$blockColor,
_ref25$serverSize = _ref25.serverSize,
serverSize = _ref25$serverSize === void 0 ? "50px" : _ref25$serverSize,
_ref25$blockSize = _ref25.blockSize,
blockSize = _ref25$blockSize === void 0 ? "10px" : _ref25$blockSize,
_ref25$blockCount = _ref25.blockCount,
blockCount = _ref25$blockCount === void 0 ? 5 : _ref25$blockCount,
_ref25$speed = _ref25.speed,
speed = _ref25$speed === void 0 ? 2 : _ref25$speed;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
width: serverSize,
height: serverSize
}, serverContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
width: serverSize,
height: serverSize,
backgroundColor: serverColor,
boxShadow: "0 4px 10px ".concat(serverColor),
transform: "rotateY(45deg) rotateX(45deg)",
position: "relative"
}, cubeConfigurationSettings),
animate: {
rotateY: [0, 360],
rotateX: [0, 360]
},
transition: {
duration: speed,
repeat: Infinity,
ease: "linear"
}
}, Array.from({
length: blockCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
position: "absolute",
width: blockSize,
height: blockSize,
backgroundColor: blockColor,
boxShadow: "0 4px 10px ".concat(blockColor),
bottom: "0",
left: "".concat(index * (serverSize / blockCount), "px")
}, blockConfigurationSettings),
animate: {
y: [-50, -100, -150, 0],
opacity: [0.3, 0.7, 1, 0.3]
},
transition: {
duration: speed,
repeat: Infinity,
delay: index * (speed / blockCount),
ease: "easeInOut"
}
});
})));
};
var SpinnerLoader = function SpinnerLoader(_ref26) {
var _ref26$spinnerConfigu = _ref26.spinnerConfigurationSettings,
spinnerConfigurationSettings = _ref26$spinnerConfigu === void 0 ? {} : _ref26$spinnerConfigu,
_ref26$spinnerColor = _ref26.spinnerColor,
spinnerColor = _ref26$spinnerColor === void 0 ? "#3498db" : _ref26$spinnerColor,
_ref26$backgroundColo = _ref26.backgroundColor,
backgroundColor = _ref26$backgroundColo === void 0 ? "#1A1B1E" : _ref26$backgroundColo,
_ref26$size = _ref26.size,
size = _ref26$size === void 0 ? "40px" : _ref26$size,
_ref26$thickness = _ref26.thickness,
thickness = _ref26$thickness === void 0 ? "4px" : _ref26$thickness,
_ref26$speed = _ref26.speed,
speed = _ref26$speed === void 0 ? 1 : _ref26$speed;
return /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
display: "inline-block",
width: size,
height: size,
border: "".concat(thickness, " solid ").concat(backgroundColor),
borderRadius: "50%",
borderTop: "".concat(thickness, " solid ").concat(spinnerColor),
margin: "20px 0"
}, spinnerConfigurationSettings),
animate: {
rotate: 360
},
transition: {
ease: "linear",
duration: speed,
repeat: Infinity
}
});
};
var SignalLoader = function SignalLoader(_ref27) {
var _ref27$signalContaine = _ref27.signalContainerConfigurationSettings,
signalContainerConfigurationSettings = _ref27$signalContaine === void 0 ? {} : _ref27$signalContaine,
_ref27$signalBarConfi = _ref27.signalBarConfigurationSettings,
signalBarConfigurationSettings = _ref27$signalBarConfi === void 0 ? {} : _ref27$signalBarConfi,
_ref27$barCount = _ref27.barCount,
barCount = _ref27$barCount === void 0 ? 7 : _ref27$barCount,
_ref27$barColor = _ref27.barColor,
barColor = _ref27$barColor === void 0 ? "#3498db" : _ref27$barColor,
_ref27$barWidth = _ref27.barWidth,
barWidth = _ref27$barWidth === void 0 ? 10 : _ref27$barWidth,
_ref27$barSpacing = _ref27.barSpacing,
barSpacing = _ref27$barSpacing === void 0 ? 5 : _ref27$barSpacing,
_ref27$barHeight = _ref27.barHeight,
barHeight = _ref27$barHeight === void 0 ? 40 : _ref27$barHeight,
_ref27$speed = _ref27.speed,
speed = _ref27$speed === void 0 ? 1.2 : _ref27$speed,
_ref27$variance = _ref27.variance,
variance = _ref27$variance === void 0 ? 0.5 : _ref27$variance,
_ref27$mode = _ref27.mode,
mode = _ref27$mode === void 0 ? "incomingSignals" : _ref27$mode;
var bars = Array.from({
length: barCount
}, function (_, index) {
var randomFactor = Math.random() * variance;
var initialHeight = mode === "incomingSignals" ? 1 : barHeight * (0.3 + randomFactor);
var targetHeight = mode === "incomingSignals" ? barHeight * (1 + randomFactor) : barHeight * (0.6 + randomFactor);
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
width: "".concat(barWidth, "px"),
marginRight: "".concat(barSpacing, "px"),
backgroundColor: barColor,
display: "inline-block",
height: "".concat(initialHeight, "px")
}, signalBarConfigurationSettings),
animate: {
height: mode === "incomingSignals" ? ["".concat(initialHeight, "px"), "".concat(targetHeight, "px"), "".concat(initialHeight, "px")] : [initialHeight, targetHeight, initialHeight],
opacity: [0.7, 1, 0.7]
},
transition: {
duration: mode === "incomingSignals" ? speed : speed + randomFactor * speed * 0.5,
repeat: Infinity,
repeatType: mode === "incomingSignals" ? "loop" : "mirror",
delay: index * (speed / barCount),
ease: "easeInOut"
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center"
}, signalContainerConfigurationSettings)
}, bars);
};
var WaveLoader = function WaveLoader(_ref28) {
var _ref28$waveContainerC = _ref28.waveContainerConfigurationSettings,
waveContainerConfigurationSettings = _ref28$waveContainerC === void 0 ? {} : _ref28$waveContainerC,
_ref28$waveBarConfigu = _ref28.waveBarConfigurationSettings,
waveBarConfigurationSettings = _ref28$waveBarConfigu === void 0 ? {} : _ref28$waveBarConfigu,
_ref28$barCount = _ref28.barCount,
barCount = _ref28$barCount === void 0 ? 5 : _ref28$barCount,
_ref28$barColor = _ref28.barColor,
barColor = _ref28$barColor === void 0 ? "#3498db" : _ref28$barColor,
_ref28$barWidth = _ref28.barWidth,
barWidth = _ref28$barWidth === void 0 ? "10px" : _ref28$barWidth,
_ref28$barSpacing = _ref28.barSpacing,
barSpacing = _ref28$barSpacing === void 0 ? "5px" : _ref28$barSpacing,
_ref28$barHeight = _ref28.barHeight,
barHeight = _ref28$barHeight === void 0 ? "40px" : _ref28$barHeight,
_ref28$speed = _ref28.speed,
speed = _ref28$speed === void 0 ? 0.8 : _ref28$speed;
var bars = Array.from({
length: barCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
width: barWidth,
height: barHeight,
marginRight: barSpacing,
backgroundColor: barColor,
display: "inline-block"
}, waveBarConfigurationSettings),
animate: {
scaleY: [0.3, 1, 0.3]
},
transition: {
duration: speed,
repeat: Infinity,
repeatType: "loop",
delay: index * (speed / barCount)
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center"
}, waveContainerConfigurationSettings)
}, bars);
};
var AudioVisualizerLoader = function AudioVisualizerLoader(_ref29) {
var _ref29$size = _ref29.size,
size = _ref29$size === void 0 ? 300 : _ref29$size,
_ref29$color = _ref29.color,
color = _ref29$color === void 0 ? "#ffffff" : _ref29$color,
_ref29$barCount = _ref29.barCount,
barCount = _ref29$barCount === void 0 ? 169 : _ref29$barCount,
_ref29$maxBarHeight = _ref29.maxBarHeight,
maxBarHeight = _ref29$maxBarHeight === void 0 ? 100 : _ref29$maxBarHeight,
_ref29$audioFile = _ref29.audioFile,
audioFile = _ref29$audioFile === void 0 ? null : _ref29$audioFile,
_ref29$useGeneratedBa = _ref29.useGeneratedBars,
useGeneratedBars = _ref29$useGeneratedBa === void 0 ? true : _ref29$useGeneratedBa,
_ref29$spinSpeed = _ref29.spinSpeed,
spinSpeed = _ref29$spinSpeed === void 0 ? 269 : _ref29$spinSpeed,
_ref29$animationSpeed = _ref29.animationSpeed,
animationSpeed = _ref29$animationSpeed === void 0 ? 699 : _ref29$animationSpeed,
_ref29$colorGradient = _ref29.colorGradient,
colorGradient = _ref29$colorGradient === void 0 ? ["#00c6ff", "#0072ff"] : _ref29$colorGradient,
_ref29$dramaticEffect = _ref29.dramaticEffect,
dramaticEffect = _ref29$dramaticEffect === void 0 ? 1.569 : _ref29$dramaticEffect,
_ref29$variance = _ref29.variance,
variance = _ref29$variance === void 0 ? 0.569 : _ref29$variance,
_ref29$barSignalInter = _ref29.barSignalInterruption,
barSignalInterruption = _ref29$barSignalInter === void 0 ? 0.569 : _ref29$barSignalInter,
_ref29$overallHeightR = _ref29.overallHeightReduction,
overallHeightReduction = _ref29$overallHeightR === void 0 ? 1 : _ref29$overallHeightR,
_ref29$fullAudioCircl = _ref29.fullAudioCircleMode,
fullAudioCircleMode = _ref29$fullAudioCircl === void 0 ? false : _ref29$fullAudioCircl;
var canvasRef = useRef(null);
var barHeights = useRef(Array(barCount).fill(0));
var audioContextRef = useRef(null);
var isStartedRef = useRef(false);
var audioElementRef = useRef(null);
var startedGeneration = useRef(false);
var rotationAngle = 0;
useEffect(function () {
if (!canvasRef.current) {
return;
}
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
canvas.width = size;
canvas.height = size;
var centerX = size / 2;
var centerY = size / 2;
var radius = Math.max(0, size / 2 - maxBarHeight);
var startVisualization = function startVisualization(analyser, dataArray) {
var animate = function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
analyser.getByteFrequencyData(dataArray);
updateBarHeights(dataArray);
drawVisualizer(ctx, centerX, centerY, radius, barCount);
rotationAngle += 1 / spinSpeed;
requestAnimationFrame(animate);
};
animate();
};
var initializeAudioContext = function initializeAudioContext() {
if (isStartedRef.current || !audioFile) return;
try {
audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
var audioContext = audioContextRef.current;
var analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
var dataArray = new Uint8Array(analyser.frequencyBinCount);
audioElementRef.current = new Audio();
var audioElement = audioElementRef.current;
audioElement.src = typeof audioFile === "string" ? audioFile : URL.createObjectURL(audioFile);
audioElement.crossOrigin = "anonymous";
audioElement.loop = false;
audioElement.addEventListener("canplay", function () {
var source = audioContext.createMediaElementSource(audioElement);
var gainNode = audioContext.createGain();
source.connect(analyser);
analyser.connect(gainNode);
gainNode.connect(audioContext.destination);
gainNode.gain.setValueAtTime(0, audioContext.currentTime);
audioElement.play().then(function () {
startVisualization(analyser, dataArray);
isStartedRef.current = true;
})["catch"](function (error) {
console.error("Did not play audio: ", error);
});
});
} catch (error) {
console.error("Error setting up audio context or loading audio file:", error);
}
};
var handleUserInteraction = function handleUserInteraction() {
if (!useGeneratedBars) {
initializeAudioContext();
}
window.removeEventListener("click", handleUserInteraction);
window.removeEventListener("keydown", handleUserInteraction);
window.removeEventListener("scroll", handleUserInteraction);
};
if (useGeneratedBars && !startedGeneration.current) {
var animate = function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
updateBarHeights();
drawVisualizer(ctx, centerX, centerY, radius, barCount);
rotationAngle += 1 / spinSpeed;
requestAnimationFrame(animate);
};
startedGeneration.current = true;
animate();
} else {
window.addEventListener("click", handleUserInteraction);
window.addEventListener("keydown", handleUserInteraction);
window.addEventListener("scroll", handleUserInteraction);
}
return function () {
if (audioContextRef.current && audioContextRef.current.state !== "closed") {
audioContextRef.current.close();
}
};
}, [audioFile, useGeneratedBars, size, color, barCount, maxBarHeight, spinSpeed, animationSpeed, colorGradient, dramaticEffect, variance, barSignalInterruption, overallHeightReduction, fullAudioCircleMode]);
var updateBarHeights = function updateBarHeights() {
var dataArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
for (var i = 0; i < barCount; i++) {
var isInterrupted = Math.random() < barSignalInterruption;
var baseHeight = isInterrupted ? maxBarHeight * 0.069 : dataArray.length ? dataArray[fullAudioCircleMode ? i % dataArray.length : i] / 255 * maxBarHeight * overallHeightReduction : Math.random() * maxBarHeight * overallHeightReduction;
var randomFactor = (Math.random() - 0.5) * 2 * variance;
var targetHeight = baseHeight * (1 + randomFactor);
var animationFactor = (Math.random() * variance * 2 + 1) * dramaticEffect;
barHeights.current[i] += (targetHeight - barHeights.current[i]) * (1 / animationSpeed * animationFactor);
}
};
var drawVisualizer = function drawVisualizer(ctx, centerX, centerY, radius, barCount) {
if (!canvasRef.current) {
return;
}
var gradient = ctx.createLinearGradient(0, 0, canvasRef.current.width, 0);
gradient.addColorStop(0, colorGradient[0]);
gradient.addColorStop(1, colorGradient[1]);
for (var i = 0; i < barCount; i++) {
var angle = i / barCount * Math.PI * 2 + rotationAngle;
var barHeight = barHeights.current[i];
var xStart = centerX + Math.cos(angle) * radius;
var yStart = centerY + Math.sin(angle) * radius;
var xEnd = centerX + Math.cos(angle) * (radius + barHeight);
var yEnd = centerY + Math.sin(angle) * (radius + barHeight);
ctx.strokeStyle = gradient;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(xStart, yStart);
ctx.lineTo(xEnd, yEnd);
ctx.stroke();
}
};
return /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
style: {
width: size,
height: size,
display: 'block',
margin: '0 auto'
}
});
};
var AudioRingLoader = function AudioRingLoader(_ref30) {
var _ref30$audioRingConta = _ref30.audioRingContainerConfigurationSettings,
audioRingContainerConfigurationSettings = _ref30$audioRingConta === void 0 ? {} : _ref30$audioRingConta,
_ref30$size = _ref30.size,
size = _ref30$size === void 0 ? "200px" : _ref30$size,
_ref30$colorStart = _ref30.colorStart,
colorStart = _ref30$colorStart === void 0 ? "#ff00ff" : _ref30$colorStart,
_ref30$colorEnd = _ref30.colorEnd,
colorEnd = _ref30$colorEnd === void 0 ? "#00ffff" : _ref30$colorEnd,
_ref30$thickness = _ref30.thickness,
thickness = _ref30$thickness === void 0 ? "8px" : _ref30$thickness,
_ref30$speed = _ref30.speed,
speed = _ref30$speed === void 0 ? 2 : _ref30$speed,
_ref30$intensity = _ref30.intensity,
intensity = _ref30$intensity === void 0 ? 1.2 : _ref30$intensity;
return /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
position: "relative",
width: size,
height: size,
borderRadius: "50%",
background: "conic-gradient(from 0deg, ".concat(colorStart, ", ").concat(colorEnd, ")"),
mask: "radial-gradient(farthest-side, transparent calc(100% - ".concat(thickness, "), black calc(100% - ").concat(thickness, "))"),
overflow: "hidden"
}, audioRingContainerConfigurationSettings),
animate: {
rotate: [0, 360],
scale: [1, intensity, 1]
},
transition: {
duration: speed,
repeat: Infinity,
ease: "linear"
}
}, /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "absolute",
width: "100%",
height: "100%",
borderRadius: "50%",
boxShadow: "0 0 20px 20px ".concat(colorStart),
mixBlendMode: "screen"
},
animate: {
opacity: [0.7, 1, 0.7]
},
transition: {
duration: speed / 2,
repeat: Infinity,
ease: "easeInOut"
}
}));
};
var AudioAILoader = function AudioAILoader(_ref31) {
var _ref31$voiceAIContain = _ref31.voiceAIContainerConfigurationSettings,
voiceAIContainerConfigurationSettings = _ref31$voiceAIContain === void 0 ? {} : _ref31$voiceAIContain,
_ref31$voiceAIDotConf = _ref31.voiceAIDotConfigurationSettings,
voiceAIDotConfigurationSettings = _ref31$voiceAIDotConf === void 0 ? {} : _ref31$voiceAIDotConf,
_ref31$dotCount = _ref31.dotCount,
dotCount = _ref31$dotCount === void 0 ? 5 : _ref31$dotCount,
_ref31$dotColor = _ref31.dotColor,
dotColor = _ref31$dotColor === void 0 ? "#3498db" : _ref31$dotColor,
_ref31$dotSize = _ref31.dotSize,
dotSize = _ref31$dotSize === void 0 ? "10px" : _ref31$dotSize,
_ref31$dotSpacing = _ref31.dotSpacing,
dotSpacing = _ref31$dotSpacing === void 0 ? "8px" : _ref31$dotSpacing,
_ref31$speed = _ref31.speed,
speed = _ref31$speed === void 0 ? 0.8 : _ref31$speed;
var dots = Array.from({
length: dotCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
width: dotSize,
height: dotSize,
marginRight: dotSpacing,
backgroundColor: dotColor,
borderRadius: "50%",
display: "inline-block"
}, voiceAIDotConfigurationSettings),
animate: {
scaleY: [1, 1.5, 1]
},
transition: {
duration: speed,
repeat: Infinity,
repeatType: "loop",
delay: index * (speed / dotCount)
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center"
}, voiceAIContainerConfigurationSettings)
}, dots);
};
var CustomLoader = function CustomLoader(_ref32) {
var _ref32$loaderConfigur = _ref32.loaderConfigurationSettings,
loaderConfigurationSettings = _ref32$loaderConfigur === void 0 ? {} : _ref32$loaderConfigur,
_ref32$backgroundColo = _ref32.backgroundColor,
backgroundColor = _ref32$backgroundColo === void 0 ? "#1A1B1E" : _ref32$backgroundColo,
_ref32$height = _ref32.height,
height = _ref32$height === void 0 ? "100px" : _ref32$height,
_ref32$borderRadius = _ref32.borderRadius,
borderRadius = _ref32$borderRadius === void 0 ? "10px" : _ref32$borderRadius,
children = _ref32.children;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: height,
backgroundColor: backgroundColor,
borderRadius: borderRadius,
margin: "20px 0"
}, loaderConfigurationSettings)
}, children);
};
function HUDLoading(_ref33) {
var type = _ref33.type,
rest = _objectWithoutProperties(_ref33, _excluded);
switch (type) {
case "bouncingDot":
return /*#__PURE__*/React.createElement(BounceDotLoader, rest);
case "blackHole":
return /*#__PURE__*/React.createElement(BlackholeLoader, rest);
case "barGraph":
return /*#__PURE__*/React.createElement(BarGraphLoader, rest);
case "blade":
return /*#__PURE__*/React.createElement(BladeLoader, rest);
case "bar":
return /*#__PURE__*/React.createElement(BarLoader, rest);
case "explosion":
return /*#__PURE__*/React.createElement(ExplosionLoader, rest);
case "rotatingSquare":
return /*#__PURE__*/React.createElement(RotatingSquareLoader, rest);
case "roboticArm":
return /*#__PURE__*/React.createElement(RoboticArmLoader, rest);
case "radar":
return /*#__PURE__*/React.createElement(RadarLoader, rest);
case "fadedSpinner":
return /*#__PURE__*/React.createElement(FadedSpinnerLoader, rest);
case "dataPulse":
return /*#__PURE__*/React.createElement(DataPulseLoader, rest);
case "download":
return /*#__PURE__*/React.createElement(DownloadLoader, rest);
case "computation":
return /*#__PURE__*/React.createElement(ComputationLoader, rest);
case "circuitNode":
return /*#__PURE__*/React.createElement(CircuitNodeLoader, rest);
case "circuit":
return /*#__PURE__*/React.createElement(CircuitLoader, rest);
case "cloud":
return /*#__PURE__*/React.createElement(CloudDataLoader, rest);
case "word":
return /*#__PURE__*/React.createElement(WordLoader, rest);
case "serverRequest":
return /*#__PURE__*/React.createElement(ServerRequestLoader, rest);
case "spinner":
return /*#__PURE__*/React.createElement(SpinnerLoader, rest);
case "signal":
return /*#__PURE__*/React.createElement(SignalLoader, rest);
case "wave":
return /*#__PURE__*/React.createElement(WaveLoader, rest);
case "audioVisualizer":
return /*#__PURE__*/React.createElement(AudioVisualizerLoader, rest);
case "audioRing":
return /*#__PURE__*/React.createElement(AudioRingLoader, rest);
case "audioAI":
return /*#__PURE__*/React.createElement(AudioAILoader, rest);
case "nebulaPulse":
return /*#__PURE__*/React.createElement(NebulaPulseLoader, rest);
case "pulseCircle":
return /*#__PURE__*/React.createElement(PulseCircleLoader, rest);
case "pulseRing":
return /*#__PURE__*/React.createElement(PulseRingLoader, rest);
case "dualRing":
return /*#__PURE__*/React.createElement(DualRingLoader, rest);
case "custom":
return /*#__PURE__*/React.createElement(CustomLoader, rest);
default:
return /*#__PURE__*/React.createElement(WordLoader, rest);
}
}
;
export default HUDLoading;