@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
406 lines • 20.7 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 from "react";
import { useState, useEffect, useRef, useCallback, useMemo } from "react";
import { Delay } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
function HUDAnimatedBackground(hudAnimatedBackgroundConfigurationSettings) {
var _hudAnimatedBackgroun = hudAnimatedBackgroundConfigurationSettings.animatedBackgroundConfigurationSettings,
animatedBackgroundConfigurationSettings = _hudAnimatedBackgroun === void 0 ? {} : _hudAnimatedBackgroun,
_hudAnimatedBackgroun2 = hudAnimatedBackgroundConfigurationSettings.animatedComponentConfigurationSettings,
animatedComponentConfigurationSettings = _hudAnimatedBackgroun2 === void 0 ? {} : _hudAnimatedBackgroun2,
_hudAnimatedBackgroun3 = hudAnimatedBackgroundConfigurationSettings.nAnimatedComponents,
nAnimatedComponents = _hudAnimatedBackgroun3 === void 0 ? 10 : _hudAnimatedBackgroun3,
addedComponentAction = hudAnimatedBackgroundConfigurationSettings.addedComponentAction,
_hudAnimatedBackgroun4 = hudAnimatedBackgroundConfigurationSettings.focalPoint,
focalPoint = _hudAnimatedBackgroun4 === void 0 ? {
x: "50vw",
y: "50vh",
radialFocal: false,
noAbsorption: false,
diameter: 100,
gravitationStrength: 1.269,
continuousGravitation: false
} : _hudAnimatedBackgroun4,
_hudAnimatedBackgroun5 = hudAnimatedBackgroundConfigurationSettings.mutatingContentProperties,
mutatingContentProperties = _hudAnimatedBackgroun5 === void 0 ? {} : _hudAnimatedBackgroun5,
_hudAnimatedBackgroun6 = hudAnimatedBackgroundConfigurationSettings.mutatingContentIndexes,
mutatingContentIndexes = _hudAnimatedBackgroun6 === void 0 ? [] : _hudAnimatedBackgroun6,
_hudAnimatedBackgroun7 = hudAnimatedBackgroundConfigurationSettings.content,
content = _hudAnimatedBackgroun7 === void 0 ? [] : _hudAnimatedBackgroun7,
_hudAnimatedBackgroun8 = hudAnimatedBackgroundConfigurationSettings.preservePositions,
preservePositions = _hudAnimatedBackgroun8 === void 0 ? true : _hudAnimatedBackgroun8,
_hudAnimatedBackgroun9 = hudAnimatedBackgroundConfigurationSettings.cycleContent,
cycleContent = _hudAnimatedBackgroun9 === void 0 ? false : _hudAnimatedBackgroun9,
_hudAnimatedBackgroun10 = hudAnimatedBackgroundConfigurationSettings.cycleDelay,
cycleDelay = _hudAnimatedBackgroun10 === void 0 ? 3000 : _hudAnimatedBackgroun10,
_hudAnimatedBackgroun11 = hudAnimatedBackgroundConfigurationSettings.animations,
animations = _hudAnimatedBackgroun11 === void 0 ? [] : _hudAnimatedBackgroun11,
_hudAnimatedBackgroun12 = hudAnimatedBackgroundConfigurationSettings.animationMode,
animationMode = _hudAnimatedBackgroun12 === void 0 ? "default" : _hudAnimatedBackgroun12;
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
animatedComponentConfigurations = _useState2[0],
setAnimatedComponentConfigurations = _useState2[1];
var initialConfigurations = useRef([]);
var initialContent = useRef(content);
var animationName = useRef("animation".concat(Math.random().toString(36).substr(2, 9)));
var animationCache = useRef(new Set());
var contentIndex = useRef(0);
var convertToPixels = useCallback(function (input) {
var pixels = 0;
var numericPart = parseFloat(input);
if (!isNaN(numericPart)) {
if (typeof input === "string" && input.includes("vw")) {
pixels = numericPart / 100 * window.innerWidth;
} else if (typeof input === "string" && input.includes("vh")) {
pixels = numericPart / 100 * window.innerHeight;
} else {
pixels = numericPart;
}
}
return pixels;
}, []);
var convertedFocalPoint = useMemo(function () {
var resolve = function resolve(value) {
if (typeof value === "number") {
return value;
}
if (typeof value === "string") {
if (value.includes("vw") || value.includes("vh") || value.includes("px") || value.includes("rem")) {
return parseFloat(value);
}
return convertToPixels(value);
}
return value;
};
return {
focalRadius: convertToPixels(focalPoint.diameter || 10) / 2,
focalX: resolve(focalPoint.x),
focalY: resolve(focalPoint.y)
};
}, [focalPoint, convertToPixels]);
var checkWithinFocalDiameter = useCallback(function (x, y, focalX, focalY, focalRadius) {
var dx = x - focalX;
var dy = y - focalY;
return Math.sqrt(dx * dx + dy * dy) <= focalRadius;
}, []);
var getKeyframes = function getKeyframes(config) {
var frames;
switch (animationMode) {
case "hyperSpeed":
frames = "\n 0% { transform : translateZ(0) scale(1); }\n 100% { transform : translateZ(1000px) scale(10); opacity : 0; }\n ";
break;
case "meteorShower":
frames = "\n 0% { transform : translateX(0) translateY(0) rotate(45deg); opacity : 1; }\n 100% { transform : translateX(100vw) translateY(100vh) rotate(45deg); opacity : 0; }\n ";
break;
case "popUp":
frames = "\n 0% { transform : scale(0); opacity : 0; }\n 80% { transform : scale(1.2); opacity : 1; }\n 100% { transform : scale(1); }\n ";
break;
case "flyAway":
frames = "\n 0% { transform : translate3d(0, 0, 0) scale(1); opacity : 1; }\n 100% { transform : translate3d(0, 0, -1000px) scale(0); opacity : 0; }\n ";
break;
case "blackHole":
var targetX = typeof focalPoint.x === "string" ? focalPoint.x : "".concat(focalPoint.x, "px");
var targetY = typeof focalPoint.y === "string" ? focalPoint.y : "".concat(focalPoint.y, "px");
var endX = "calc(".concat(focalPoint.x, " - ").concat(config.x, "px)");
var endY = "calc(".concat(focalPoint.y, " - ").concat(config.y, "px)");
if (focalPoint.radialFocal) {
var rotation = "rotate(".concat(Math.random() * 360, "deg)");
frames = "\n 0% { transform : translate3d(0, 0, 0) scale(1); opacity : 1; }\n 100% { transform : translate3d(".concat(endX, ", ").concat(endY, ", 0) ").concat(rotation, " scale(0); opacity : 0; }\n ");
break;
} else {
frames = "\n 0% { transform : translate3d(0, 0, 0) scale(1); opacity : 1; }\n 100% { transform : translate3d(".concat(endX, ", ").concat(endY, ", 0) scale(0); opacity : 0; }\n ");
break;
}
case "orbit":
var radius = config.radius;
frames = focalPoint.centralGravitation ? "\n 0% { transform: rotateY(0deg) rotateX(".concat(config.initialAngleX, "deg) rotateZ(").concat(config.z, "deg) translate3d(").concat(config.radius, "px, 0, 0); }\n 100% { transform: rotateY(360deg) rotateX(").concat(config.initialAngleX, "deg) rotateZ(").concat(config.z, "deg) translate3d(").concat(config.radius, "px, 0, 0); }\n ") : "\n 0% { transform: rotateY(0deg) translateX(".concat(radius, "px); }\n 100% { transform: rotateY(360deg) translateX(").concat(radius, "px); }\n ");
break;
case "custom":
frames = animations.length > 0 ? animations[0].keyframes : "";
break;
default:
frames = "from { opacity : 0; } to { opacity : 1; }";
}
return "@keyframes ".concat(animationName.current, " { ").concat(frames, " }");
};
var getAnimatedContentComponentGravitationalCoords = function getAnimatedContentComponentGravitationalCoords() {
var focalX = convertedFocalPoint.focalX,
focalY = convertedFocalPoint.focalY,
focalRadius = convertedFocalPoint.focalRadius;
var focalR = Math.random();
var minRadius = focalRadius + (focalPoint.maxDistance || 269);
var radius = minRadius + Math.random() * 200;
var angle = focalR * 2 * Math.PI;
var initialAngleX = (Math.random() * 45 - 22.5) * angle;
var initialAngleY = Math.random() * 360;
var distance = 1.269 * (focalPoint.maxDistance || 100);
var x = focalX + distance * Math.cos(angle);
var y = focalY + distance * Math.sin(angle);
var translateX = x + (Math.random() * 200 - 100);
var translateY = y + (Math.random() * 100 - 50);
return {
x: x,
y: y,
initialAngleX: initialAngleX,
initialAngleY: initialAngleY,
startTime: Date.now(),
distance: distance,
radius: radius,
angle: angle,
animationDuration: "".concat(Math.random() * 5 + 5, "s"),
animationTimingFunction: "ease-in-out"
};
};
var spawnAnimatedComponent = function spawnAnimatedComponent() {
if ((animationMode === "blackHole" || animationMode === "orbit") && focalPoint.radialFocal) {
return getAnimatedContentComponentGravitationalCoords();
} else if (animationMode === "orbit") {
var focalX = convertedFocalPoint.focalX,
focalY = convertedFocalPoint.focalY,
focalRadius = convertedFocalPoint.focalRadius;
var focalR = Math.random();
var minRadius = focalRadius + (focalPoint.maxDistance || 69);
var radius = minRadius + Math.random() * 200;
var angle = focalR * 2 * Math.PI;
var initialAngleX = Math.random() * 180 - 90;
var initialAngleY = Math.random() * 360;
var distance = 1.269 * (focalPoint.maxDistance || 100);
var x = focalX + distance * Math.cos(angle);
var y = focalX + distance * Math.sin(angle);
var z = Math.random() * 360;
var translateX = Math.random() * 200 - 100;
var translateY = Math.random() * 100 - 50;
return {
x: x,
y: y,
z: z,
initialAngleX: initialAngleX,
initialAngleY: initialAngleY,
startTime: Date.now(),
distance: distance,
radius: radius,
angle: angle,
animationDuration: "".concat(Math.random() * (focalPoint.orbitSpeed || 5) + 5, "s"),
animationTimingFunction: "ease-in-out"
};
} else if (animationMode === "gravitation") {
var _focalX = convertedFocalPoint.focalX,
_focalY = convertedFocalPoint.focalY,
_focalRadius = convertedFocalPoint.focalRadius;
var _focalR = Math.random();
var _minRadius = _focalRadius + (focalPoint.maxDistance || 69);
var _radius = _minRadius + Math.random() * 200;
var _angle = _focalR * 2 * Math.PI;
var _initialAngleX = Math.random() * 180 - 90;
var _initialAngleY = Math.random() * 360;
var _distance = 1.269 * (focalPoint.maxDistance || 100);
var _translateX = Math.random() * 200 - 100;
var _translateY = Math.random() * 100 - 50;
return _objectSpread(_objectSpread({}, randomPosition(_focalRadius)), {}, {
initialAngleX: _initialAngleX,
initialAngleY: _initialAngleY,
startTime: Date.now(),
distance: _distance,
radius: _radius,
angle: _angle,
animationDuration: "".concat(Math.random() * (focalPoint.orbitSpeed || 5) + 5, "s"),
animationTimingFunction: "ease-in-out"
});
}
return {
y: Math.random() * window.innerHeight,
x: Math.random() * window.innerWidth,
animationDuration: "".concat(Math.random() * 5 + 5, "s"),
animationTimingFunction: "linear"
};
};
var generateAnimatedComponentConfigurations = function generateAnimatedComponentConfigurations() {
if (preservePositions && initialConfigurations.current.length === nAnimatedComponents) {
return initialConfigurations.current;
}
var configs = Array.from({
length: nAnimatedComponents
}).map(function () {
return spawnAnimatedComponent();
});
initialConfigurations.current = configs.map(function (config) {
return _objectSpread({}, config);
});
return configs;
};
var applyMutatingAnimatedComponentProperties = function applyMutatingAnimatedComponentProperties(index) {
if (mutatingContentIndexes.includes(index)) {
setAnimatedComponentConfigurations(function (prevConfigs) {
return prevConfigs.map(function (config, i) {
if (i === index) {
return _objectSpread(_objectSpread({}, initialConfigurations.current[i]), _objectSpread(_objectSpread({}, mutatingContentProperties), {}, {
mutatingDuration: getAnimatedComponentAnimationDuration(config)
}));
}
return config;
});
});
}
};
var getAnimatedComponentAnimationDuration = useCallback(function (config) {
var durationMatch = config.animationDuration.match(/(\d+\.?\d*)s/);
return durationMatch ? parseFloat(durationMatch[1]) * 1000 : 0;
}, []);
var getAnimationKey = useCallback(function (mode, config) {
return "".concat(mode, "-").concat(Math.round(config.x), "-").concat(Math.round(config.y), "-").concat(Math.round(config.radius));
}, []);
var randomPosition = useCallback(function (spread) {
return {
x: "".concat((Math.random() * 5 - 1) * spread, "vw"),
y: "".concat((Math.random() * 5 - 1) * spread, "vh"),
scale: Math.random() + 1
};
}, []);
var injectAnimationKeyframes = useCallback(function (name, keyframes) {
if (animationCache.current.has(name)) {
return;
}
var style = document.createElement("style");
style.type = "text/css";
style.innerText = keyframes;
document.head.appendChild(style);
animationCache.current.add(name);
}, [animationCache.current]);
var clearKeyframeCache = useCallback(function () {
animationCache.current.forEach(function (styleEl) {
if (styleEl && styleEl.parentNode) {
styleEl.parentNode.removeChild(styleEl);
}
});
animationCache.current.clear();
}, [animationCache.current]);
var gravityConfigStyle = useCallback(function (config) {
return {
position: "absolute",
transition: "all 3s ease-in-out",
transform: "translate(".concat(config.x, ", ").concat(config.y, ") scale(").concat(config.scale, ")"),
backgroundColor: "transparent",
borderRadius: "50%"
};
}, []);
useEffect(function () {
clearKeyframeCache();
var updatedConfigs = generateAnimatedComponentConfigurations();
var focalX = convertedFocalPoint.focalX,
focalY = convertedFocalPoint.focalY,
focalRadius = convertedFocalPoint.focalRadius;
if (animationMode === "blackHole" && focalPoint.radialFocal) {
updatedConfigs.forEach(function (config) {
var rotation = config.angle + (focalPoint.gravitationStrength || 1.269) * 369;
var endX = focalX - config.x;
var endY = focalY - config.y;
var keyframes = "\n @keyframes ".concat(animationName.current, " {\n 0% {\n transform : translate3d(0px, 0px, 0) rotate(0deg);\n opacity : 1;\n scale : 1.69;\n transform-origin : center;\n }\n 100% {\n transform : translate3d(").concat(-config.distance, "px, 0px, 0) rotate(").concat(rotation, "deg);\n opacity : 0;\n scale : 0;\n transform-origin : ").concat(config.distance, "px ").concat(config.distance, "px;\n }\n }");
var key = getAnimationKey(animationMode, config);
injectAnimationKeyframes(key, keyframes);
});
} else {
updatedConfigs.forEach(function (config) {
var key = getAnimationKey(animationMode, config);
injectAnimationKeyframes(key, getKeyframes(config));
});
}
initialConfigurations.current = updatedConfigs.map(function (config) {
return _objectSpread({}, config);
});
setAnimatedComponentConfigurations(updatedConfigs);
if (addedComponentAction) {
addedComponentAction();
}
return function () {};
}, [nAnimatedComponents, animationMode, animations, focalPoint, preservePositions, convertedFocalPoint]);
useEffect(function () {
var focalX = convertedFocalPoint.focalX,
focalY = convertedFocalPoint.focalY,
focalRadius = convertedFocalPoint.focalRadius;
var intervalId = setInterval(function () {
setAnimatedComponentConfigurations(function (currentComponents) {
return currentComponents.map(function (comp) {
var dx = focalX - comp.x;
var dy = focalY - comp.y;
var withinFocal = checkWithinFocalDiameter(comp.x, comp.y, focalX, focalY, focalRadius);
var distance = Math.sqrt(dx * dx + dy * dy);
if (!withinFocal) {
return comp;
}
return null;
}).filter(function (comp) {
return comp !== null;
});
});
}, 47);
return function () {
return clearInterval(intervalId);
};
}, [focalPoint, nAnimatedComponents, convertedFocalPoint]);
useEffect(function () {
if (animationMode !== "gravitation") {
return function () {};
}
var focalX = convertedFocalPoint.focalX,
focalY = convertedFocalPoint.focalY,
focalRadius = convertedFocalPoint.focalRadius;
var interval = setInterval(function () {
setAnimatedComponentConfigurations(function (currentConfigs) {
return currentConfigs.map(function (config) {
return _objectSpread(_objectSpread({}, config), {}, {
x: focalPoint.x,
y: focalPoint.y,
scale: focalPoint.noAbsorption ? Math.max(0, config.scale - 0.1) : 0
});
});
});
setTimeout(function () {
setAnimatedComponentConfigurations(function (currentConfigs) {
return currentConfigs.map(function () {
return randomPosition(focalRadius);
});
});
}, focalPoint.gravitationalAttraction !== undefined ? focalPoint.gravitationalAttraction : 3000);
}, focalPoint.gravitationSpeed !== undefined ? focalPoint.gravitationSpeed : 6000);
return function () {
return clearInterval(interval);
};
}, [focalPoint, convertedFocalPoint]);
useEffect(function () {
if (cycleContent && content.length > 1) {
var interval = setInterval(function () {
contentIndex.current = (contentIndex.current + 1) % content.length;
}, cycleDelay);
return function () {
return clearInterval(interval);
};
}
}, [content.length, cycleContent, cycleDelay]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
width: "100%",
height: "100%",
position: "relative",
overflow: "hidden"
}, animatedBackgroundConfigurationSettings)
}, animatedComponentConfigurations.map(function (config, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: animationMode !== "gravitation" ? _objectSpread({
position: "absolute",
transition: 'left 0.1s, top 0.1s',
left: "".concat(config.x, "px"),
top: "".concat(config.y, "px"),
transformOrigin: focalPoint.centralGravitation ? "".concat(-config.radius, "px ").concat(-convertedFocalPoint.focalRadius, "px") : "center",
animation: "".concat(animationName.current, " ").concat(config.animationDuration, " ").concat(config.animationTimingFunction, " infinite")
}, animatedComponentConfigurationSettings) : _objectSpread(_objectSpread({}, gravityConfigStyle(config)), animatedComponentConfigurationSettings),
onAnimationStart: function onAnimationStart() {
applyMutatingAnimatedComponentProperties(index);
}
}, content.length > 0 ? /*#__PURE__*/React.cloneElement(content[cycleContent ? contentIndex.current : index % content.length], config) : null);
}));
}
export default HUDAnimatedBackground;