@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDPlacementPillars.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 * as React from "react";
import { useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from "react";
import { motion, AnimatePresence } from "framer-motion";
var HUDPlacementPillars = /*#__PURE__*/forwardRef(function HUDPlacementPillars(_ref, ref) {
  var _ref$pillarShellAnima = _ref.pillarShellAnimationTransitionConfigurationSettings,
    pillarShellAnimationTransitionConfigurationSettings = _ref$pillarShellAnima === void 0 ? {} : _ref$pillarShellAnima,
    _ref$pillarShellIniti = _ref.pillarShellInitialAnimationConfigurationSettings,
    pillarShellInitialAnimationConfigurationSettings = _ref$pillarShellIniti === void 0 ? {} : _ref$pillarShellIniti,
    _ref$pillarAnimationT = _ref.pillarAnimationTransitionConfigurationSettings,
    pillarAnimationTransitionConfigurationSettings = _ref$pillarAnimationT === void 0 ? {} : _ref$pillarAnimationT,
    _ref$abovePillarSlotC = _ref.abovePillarSlotContainerConfigurationSettings,
    abovePillarSlotContainerConfigurationSettings = _ref$abovePillarSlotC === void 0 ? {} : _ref$abovePillarSlotC,
    _ref$belowPillarSlotC = _ref.belowPillarSlotContainerConfigurationSettings,
    belowPillarSlotContainerConfigurationSettings = _ref$belowPillarSlotC === void 0 ? {} : _ref$belowPillarSlotC,
    _ref$pillarContentCon = _ref.pillarContentContainerConfigurationSettings,
    pillarContentContainerConfigurationSettings = _ref$pillarContentCon === void 0 ? {} : _ref$pillarContentCon,
    _ref$pillarInitialAni = _ref.pillarInitialAnimationConfigurationSettings,
    pillarInitialAnimationConfigurationSettings = _ref$pillarInitialAni === void 0 ? {} : _ref$pillarInitialAni,
    _ref$pillarShellAnima2 = _ref.pillarShellAnimationConfigurationSettings,
    pillarShellAnimationConfigurationSettings = _ref$pillarShellAnima2 === void 0 ? {} : _ref$pillarShellAnima2,
    _ref$pillarHoverAnima = _ref.pillarHoverAnimationConfigurationSettings,
    pillarHoverAnimationConfigurationSettings = _ref$pillarHoverAnima === void 0 ? {} : _ref$pillarHoverAnima,
    _ref$pillarTapAnimati = _ref.pillarTapAnimationConfigurationSettings,
    pillarTapAnimationConfigurationSettings = _ref$pillarTapAnimati === void 0 ? {} : _ref$pillarTapAnimati,
    _ref$pillarAnimationC = _ref.pillarAnimationConfigurationSettings,
    pillarAnimationConfigurationSettings = _ref$pillarAnimationC === void 0 ? {} : _ref$pillarAnimationC,
    _ref$pillarHighlightC = _ref.pillarHighlightConfigurationSettings,
    pillarHighlightConfigurationSettings = _ref$pillarHighlightC === void 0 ? {} : _ref$pillarHighlightC,
    _ref$pillarBaselineCo = _ref.pillarBaselineConfigurationSettings,
    pillarBaselineConfigurationSettings = _ref$pillarBaselineCo === void 0 ? {} : _ref$pillarBaselineCo,
    _ref$pillarShellConfi = _ref.pillarShellConfigurationSettings,
    pillarShellConfigurationSettings = _ref$pillarShellConfi === void 0 ? {} : _ref$pillarShellConfi,
    _ref$pillarWrapConfig = _ref.pillarWrapConfigurationSettings,
    pillarWrapConfigurationSettings = _ref$pillarWrapConfig === void 0 ? {} : _ref$pillarWrapConfig,
    _ref$pillarBarConfigu = _ref.pillarBarConfigurationSettings,
    pillarBarConfigurationSettings = _ref$pillarBarConfigu === void 0 ? {} : _ref$pillarBarConfigu,
    _ref$sideSlotConfigur = _ref.sideSlotConfigurationSettings,
    sideSlotConfigurationSettings = _ref$sideSlotConfigur === void 0 ? {} : _ref$sideSlotConfigur,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    _ref$abovePillarSlotC2 = _ref.abovePillarSlotContainerConfigurations,
    abovePillarSlotContainerConfigurations = _ref$abovePillarSlotC2 === void 0 ? {} : _ref$abovePillarSlotC2,
    _ref$belowPillarSlotC2 = _ref.belowPillarSlotContainerConfigurations,
    belowPillarSlotContainerConfigurations = _ref$belowPillarSlotC2 === void 0 ? {} : _ref$belowPillarSlotC2,
    _ref$rightPillarSlotC = _ref.rightPillarSlotContainerConfigurations,
    rightPillarSlotContainerConfigurations = _ref$rightPillarSlotC === void 0 ? {} : _ref$rightPillarSlotC,
    _ref$leftPillarSlotCo = _ref.leftPillarSlotContainerConfigurations,
    leftPillarSlotContainerConfigurations = _ref$leftPillarSlotCo === void 0 ? {} : _ref$leftPillarSlotCo,
    _ref$pillarContentCon2 = _ref.pillarContentContainerConfigurations,
    pillarContentContainerConfigurations = _ref$pillarContentCon2 === void 0 ? {} : _ref$pillarContentCon2,
    _ref$pillarContainerC = _ref.pillarContainerConfigurations,
    pillarContainerConfigurations = _ref$pillarContainerC === void 0 ? {} : _ref$pillarContainerC,
    _ref$pillarBaselineCo2 = _ref.pillarBaselineConfigurations,
    pillarBaselineConfigurations = _ref$pillarBaselineCo2 === void 0 ? {} : _ref$pillarBaselineCo2,
    _ref$pillarShellConfi2 = _ref.pillarShellConfigurations,
    pillarShellConfigurations = _ref$pillarShellConfi2 === void 0 ? {} : _ref$pillarShellConfi2,
    _ref$pillarWrapConfig2 = _ref.pillarWrapConfigurations,
    pillarWrapConfigurations = _ref$pillarWrapConfig2 === void 0 ? {} : _ref$pillarWrapConfig2,
    _ref$pillarBarConfigu2 = _ref.pillarBarConfigurations,
    pillarBarConfigurations = _ref$pillarBarConfigu2 === void 0 ? {} : _ref$pillarBarConfigu2,
    onPillarClick = _ref.onPillarClick,
    onPillarHover = _ref.onPillarHover,
    onRanksComputed = _ref.onRanksComputed,
    _onAnimationStart = _ref.onAnimationStart,
    _onAnimationComplete = _ref.onAnimationComplete,
    onValueChange = _ref.onValueChange,
    renderInside = _ref.renderInside,
    renderBelow = _ref.renderBelow,
    renderAbove = _ref.renderAbove,
    renderRight = _ref.renderRight,
    renderLeft = _ref.renderLeft,
    triggerKey = _ref.triggerKey,
    _ref$autoSort = _ref.autoSort,
    autoSort = _ref$autoSort === void 0 ? true : _ref$autoSort,
    _ref$places = _ref.places,
    places = _ref$places === void 0 ? 3 : _ref$places,
    values = _ref.values,
    _ref$iconicLayout = _ref.iconicLayout,
    iconicLayout = _ref$iconicLayout === void 0 ? true : _ref$iconicLayout,
    _ref$podiumMode = _ref.podiumMode,
    podiumMode = _ref$podiumMode === void 0 ? "classic" : _ref$podiumMode,
    _ref$classicRatios = _ref.classicRatios,
    classicRatios = _ref$classicRatios === void 0 ? {
      1: 1.0,
      2: 0.77,
      3: 0.62
    } : _ref$classicRatios,
    _ref$classicFalloffSt = _ref.classicFalloffStart,
    classicFalloffStart = _ref$classicFalloffSt === void 0 ? 0.50 : _ref$classicFalloffSt,
    _ref$classicFalloffSt2 = _ref.classicFalloffStep,
    classicFalloffStep = _ref$classicFalloffSt2 === void 0 ? 0.08 : _ref$classicFalloffSt2,
    _ref$classicMinFactor = _ref.classicMinFactor,
    classicMinFactor = _ref$classicMinFactor === void 0 ? 0.22 : _ref$classicMinFactor,
    _ref$orientation = _ref.orientation,
    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? "100%" : _ref$width,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? 260 : _ref$height,
    _ref$pillarWidth = _ref.pillarWidth,
    pillarWidth = _ref$pillarWidth === void 0 ? 62.69 : _ref$pillarWidth,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? 16 : _ref$gap,
    _ref$borderRadius = _ref.borderRadius,
    borderRadius = _ref$borderRadius === void 0 ? 10 : _ref$borderRadius,
    _ref$animate = _ref.animate,
    animate = _ref$animate === void 0 ? true : _ref$animate,
    _ref$animationMs = _ref.animationMs,
    animationMs = _ref$animationMs === void 0 ? 600 : _ref$animationMs,
    _ref$animationEasing = _ref.animationEasing,
    animationEasing = _ref$animationEasing === void 0 ? [0.2, 0.8, 0.2, 1] : _ref$animationEasing,
    _ref$enterStagger = _ref.enterStagger,
    enterStagger = _ref$enterStagger === void 0 ? 0.06 : _ref$enterStagger,
    _ref$hoverScale = _ref.hoverScale,
    hoverScale = _ref$hoverScale === void 0 ? 1.04 : _ref$hoverScale,
    _ref$tapScale = _ref.tapScale,
    tapScale = _ref$tapScale === void 0 ? 0.98 : _ref$tapScale,
    _ref$showShadow = _ref.showShadow,
    showShadow = _ref$showShadow === void 0 ? true : _ref$showShadow,
    _ref$shadow = _ref.shadow,
    shadow = _ref$shadow === void 0 ? "0 8px 20px rgba(0, 0, 0, 0.15)" : _ref$shadow,
    _ref$border = _ref.border,
    border = _ref$border === void 0 ? "1px solid rgba(0, 0, 0, 0.08)" : _ref$border,
    _ref$background = _ref.background,
    background = _ref$background === void 0 ? "transparent" : _ref$background,
    _ref$showBaseline = _ref.showBaseline,
    showBaseline = _ref$showBaseline === void 0 ? true : _ref$showBaseline,
    _ref$baselineColor = _ref.baselineColor,
    baselineColor = _ref$baselineColor === void 0 ? "rgba(0, 0, 0, 0.1)" : _ref$baselineColor,
    _ref$baselineThicknes = _ref.baselineThickness,
    baselineThickness = _ref$baselineThicknes === void 0 ? 2 : _ref$baselineThicknes,
    colorForRank = _ref.colorForRank,
    colorForValue = _ref.colorForValue,
    gradientForRank = _ref.gradientForRank,
    gradientForValue = _ref.gradientForValue,
    _ref$defaultColors = _ref.defaultColors,
    defaultColors = _ref$defaultColors === void 0 ? {
      1: "#FFD700",
      2: "#C0C0C0",
      3: "#CD7F32"
    } : _ref$defaultColors,
    _ref$fallbackColor = _ref.fallbackColor,
    fallbackColor = _ref$fallbackColor === void 0 ? "#4F8BFF" : _ref$fallbackColor,
    _ref$minPillarHeight = _ref.minPillarHeight,
    minPillarHeight = _ref$minPillarHeight === void 0 ? 8 : _ref$minPillarHeight,
    _ref$topPadding = _ref.topPadding,
    topPadding = _ref$topPadding === void 0 ? 18 : _ref$topPadding,
    _ref$bottomPadding = _ref.bottomPadding,
    bottomPadding = _ref$bottomPadding === void 0 ? 28 : _ref$bottomPadding,
    _ref$stableSort = _ref.stableSort,
    stableSort = _ref$stableSort === void 0 ? true : _ref$stableSort,
    _ref$ariaLabel = _ref.ariaLabel,
    ariaLabel = _ref$ariaLabel === void 0 ? "Leaderboard placement pillars" : _ref$ariaLabel,
    _ref$formatLabel = _ref.formatLabel,
    formatLabel = _ref$formatLabel === void 0 ? function (rank, value) {
      return "#".concat(rank, " \u2014 ").concat(value);
    } : _ref$formatLabel;
  var highlightMapRef = useRef(new Map());
  var previousValuesRef = useRef(values);
  var pulseMapRef = useRef(new Map());
  var shakeMapRef = useRef(new Map());
  var rerenderKey = useRef(0);
  var rawValues = useMemo(function () {
    if (Array.isArray(values) && values.length > 0) {
      return values.slice();
    }
    return Array.from({
      length: places
    }, function (_, i) {
      return places - i;
    });
  }, [values, places]);
  var rankedItems = useMemo(function () {
    var mapped = rawValues.map(function (v, i) {
      return {
        value: Number(v) || 0,
        index: i
      };
    });
    if (!autoSort) {
      return mapped.map(function (m, i) {
        return _objectSpread(_objectSpread({}, m), {}, {
          rank: i + 1
        });
      });
    }
    return mapped.map(function (m, i) {
      return _objectSpread(_objectSpread({}, m), {}, {
        orig: i
      });
    }).sort(function (a, b) {
      return b.value !== a.value ? b.value - a.value : stableSort ? a.orig - b.orig : 0;
    }).map(function (m, i) {
      return {
        value: m.value,
        index: m.index,
        rank: i + 1
      };
    });
  }, [rawValues, autoSort, stableSort]);
  var maxValue = useMemo(function () {
    return rankedItems.reduce(function (m, x) {
      return Math.max(m, x.value);
    }, 0) || 1;
  }, [rankedItems]);
  var items = useMemo(function () {
    if (!iconicLayout) {
      return rankedItems;
    }
    var copy = rankedItems.slice();
    var order = [];
    order.push(0);
    for (var r = 2; r <= copy.length; r++) {
      var idx = r - 1;
      if (r % 2 === 0) {
        order.unshift(idx);
      } else {
        order.push(idx);
      }
    }
    return order.map(function (i) {
      return copy[i];
    });
  }, [rankedItems, iconicLayout]);
  var usableRoom = Math.max(0, (typeof height === "number" ? height : 260) - topPadding - bottomPadding);
  var numericWidth = typeof width === "number" ? width : null;
  var count = items.length;
  var containerWidthPx = numericWidth !== null && numericWidth !== void 0 ? numericWidth : count * pillarWidth + (count - 1) * gap;
  var containerStyle = _objectSpread({
    position: "relative",
    display: "flex",
    justifyContent: "center",
    alignItems: "flex-end",
    overflow: "visible",
    background: background,
    height: typeof height === "number" ? "".concat(height, "px") : height,
    width: typeof width === "number" ? "".concat(containerWidthPx, "px") : width,
    gap: "".concat(gap, "px"),
    paddingBottom: "".concat(bottomPadding, "px"),
    paddingTop: "".concat(topPadding, "px")
  }, style);
  var baselineStyle = _objectSpread({
    position: "absolute",
    pointerEvents: "none",
    background: baselineColor,
    height: "".concat(baselineThickness, "px"),
    bottom: "".concat(bottomPadding - baselineThickness / 2, "px"),
    right: 0,
    left: 0
  }, pillarBaselineConfigurationSettings !== null && pillarBaselineConfigurationSettings !== void 0 ? pillarBaselineConfigurationSettings : {});
  var pillarWrapStyle = _objectSpread({
    position: "relative",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-end",
    alignItems: "stretch"
  }, pillarWrapConfigurationSettings !== null && pillarWrapConfigurationSettings !== void 0 ? pillarWrapConfigurationSettings : {});
  var sideSlotStyle = function sideSlotStyle(side) {
    return _objectSpread(_defineProperty(_defineProperty(_defineProperty({
      position: "absolute",
      display: "flex",
      alignItems: "center"
    }, side, "".concat(gap / 2, "px")), "bottom", "".concat(bottomPadding, "px")), "top", 0), sideSlotConfigurationSettings !== null && sideSlotConfigurationSettings !== void 0 ? sideSlotConfigurationSettings : {});
  };
  var resolveFill = function resolveFill(value, rank, index) {
    var _gradientForValue, _ref2, _ref3, _colorForValue;
    var g = (_gradientForValue = gradientForValue === null || gradientForValue === void 0 ? void 0 : gradientForValue(value, rank, index)) !== null && _gradientForValue !== void 0 ? _gradientForValue : gradientForRank === null || gradientForRank === void 0 ? void 0 : gradientForRank(rank);
    if (g && g.from && g.to) {
      var _g$angle;
      var angle = (_g$angle = g.angle) !== null && _g$angle !== void 0 ? _g$angle : 180;
      return {
        type: "gradient",
        css: "linear-gradient(".concat(angle, "deg, ").concat(g.from, ", ").concat(g.to, ")")
      };
    }
    var c = (_ref2 = (_ref3 = (_colorForValue = colorForValue === null || colorForValue === void 0 ? void 0 : colorForValue(value, rank, index)) !== null && _colorForValue !== void 0 ? _colorForValue : colorForRank === null || colorForRank === void 0 ? void 0 : colorForRank(rank)) !== null && _ref3 !== void 0 ? _ref3 : defaultColors[rank]) !== null && _ref2 !== void 0 ? _ref2 : fallbackColor;
    return {
      type: "color",
      css: c
    };
  };
  var valueHeightFor = function valueHeightFor(value) {
    var h = (maxValue === 0 ? 0 : value / maxValue) * usableRoom;
    return Math.max(minPillarHeight, Math.round(h));
  };
  var classicFactorForRank = function classicFactorForRank(rank) {
    if (classicRatios[rank] != null) {
      return classicRatios[rank];
    }
    var stepsBeyond = Math.max(0, rank - 3);
    var f = classicFalloffStart - (stepsBeyond - 1) * classicFalloffStep;
    return Math.max(classicMinFactor, f);
  };
  var classicHeightFor = function classicHeightFor(rank) {
    var h = classicFactorForRank(rank) * usableRoom;
    return Math.max(minPillarHeight, Math.round(h));
  };
  var barHeightFor = function barHeightFor(rank, value) {
    return podiumMode === "classic" ? classicHeightFor(rank) : valueHeightFor(value);
  };
  var forceRerender = function forceRerender() {
    rerenderKey.current++;
  };
  var isHighlighted = function isHighlighted(rank) {
    var until = highlightMapRef.current.get(rank);
    return !!until && Date.now() < until;
  };
  var takePulse = function takePulse(rank) {
    var n = pulseMapRef.current.get(rank) || 0;
    if (n > 0) {
      pulseMapRef.current.set(rank, n - 1);
    }
    return n > 0;
  };
  var takeShake = function takeShake(rank) {
    var n = shakeMapRef.current.get(rank) || 0;
    if (n > 0) {
      shakeMapRef.current.set(rank, n - 1);
    }
    return n > 0;
  };
  var listVariants = {
    hidden: {
      opacity: 0
    },
    show: {
      transition: animate ? {
        staggerChildren: enterStagger
      } : undefined,
      opacity: 1
    }
  };
  var itemVariants = {
    hidden: {
      opacity: 0,
      y: 16
    },
    show: {
      transition: animate ? {
        duration: animationMs / 1000,
        ease: animationEasing
      } : undefined,
      opacity: 1,
      y: 0
    }
  };
  useImperativeHandle(ref, function () {
    return {
      pulse: function pulse(rank) {
        var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
        var cur = (pulseMapRef.current.get(rank) || 0) + Math.max(1, times);
        pulseMapRef.current.set(rank, cur);
        forceRerender();
      },
      highlight: function highlight(rank) {
        var ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1200;
        var until = Date.now() + Math.max(200, ms);
        highlightMapRef.current.set(rank, until);
        forceRerender();
      },
      shake: function shake(rank) {
        var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
        var cur = (shakeMapRef.current.get(rank) || 0) + Math.max(1, times);
        shakeMapRef.current.set(rank, cur);
        forceRerender();
      },
      animateTo: function animateTo() {}
    };
  }, []);
  useEffect(function () {
    if (typeof onRanksComputed === "function") {
      onRanksComputed({
        items: items,
        maxValue: maxValue
      });
    }
  }, [items, maxValue, onRanksComputed]);
  useEffect(function () {
    if (!previousValuesRef.current || !values) {
      previousValuesRef.current = values;
      return;
    }
    var prev = previousValuesRef.current;
    if (Array.isArray(prev) && Array.isArray(values)) {
      var len = Math.max(prev.length, values.length);
      for (var i = 0; i < len; i++) {
        var newValue = values[i];
        var oldValue = prev[i];
        if (oldValue !== newValue && typeof onValueChange === "function") {
          onValueChange({
            index: i,
            oldValue: oldValue,
            newValue: newValue
          });
        }
      }
    }
    previousValuesRef.current = values;
  }, [values, onValueChange]);
  return /*#__PURE__*/React.createElement(motion.div, _extends({
    key: "container-".concat(triggerKey !== null && triggerKey !== void 0 ? triggerKey : "steady", "-").concat(rerenderKey.current),
    initial: "hidden",
    animate: "show",
    variants: listVariants,
    style: containerStyle,
    onAnimationComplete: function onAnimationComplete() {
      if (_onAnimationComplete) _onAnimationComplete();
    },
    onAnimationStart: function onAnimationStart() {
      if (_onAnimationStart) _onAnimationStart();
    },
    "aria-label": ariaLabel,
    role: "list"
  }, pillarContainerConfigurations !== null && pillarContainerConfigurations !== void 0 ? pillarContainerConfigurations : {}), showBaseline && /*#__PURE__*/React.createElement("div", _extends({
    style: baselineStyle
  }, pillarBaselineConfigurations !== null && pillarBaselineConfigurations !== void 0 ? pillarBaselineConfigurations : {})), /*#__PURE__*/React.createElement(AnimatePresence, {
    initial: false
  }, items.map(function (it) {
    var value = it.value,
      rank = it.rank,
      index = it.index;
    var isTop = rank === 1;
    var fill = resolveFill(value, rank, index);
    var barHeight = barHeightFor(rank, value);
    var label = formatLabel(rank, value);
    var baseShellStyle = _objectSpread({
      position: "relative",
      display: "flex",
      justifyContent: "stretch",
      alignItems: "flex-end",
      overflow: "hidden",
      cursor: onPillarClick ? "pointer" : "default",
      userSelect: "none",
      border: border,
      borderRadius: "".concat(borderRadius, "px"),
      boxShadow: showShadow ? shadow : undefined,
      background: "transparent",
      width: "".concat(pillarWidth, "px")
    }, typeof pillarShellConfigurationSettings === "function" ? pillarShellConfigurationSettings === null || pillarShellConfigurationSettings === void 0 ? void 0 : pillarShellConfigurationSettings(it) : pillarShellConfigurationSettings !== null && pillarShellConfigurationSettings !== void 0 ? pillarShellConfigurationSettings : {});
    var innerBarStyle = _objectSpread({
      transformOrigin: "bottom center",
      background: fill.css,
      height: "100%",
      width: "100%"
    }, typeof pillarBarConfigurationSettings === "function" ? pillarBarConfigurationSettings === null || pillarBarConfigurationSettings === void 0 ? void 0 : pillarBarConfigurationSettings(it) : pillarBarConfigurationSettings !== null && pillarBarConfigurationSettings !== void 0 ? pillarBarConfigurationSettings : {});
    var highlightStyle = isHighlighted(rank) ? _objectSpread({
      outline: "3px solid rgba(255, 255, 255, 0.9)",
      boxShadow: "0 0 0 4px rgba(0, 0, 0, 0.18)"
    }, typeof pillarHighlightConfigurationSettings === "function" ? pillarHighlightConfigurationSettings === null || pillarHighlightConfigurationSettings === void 0 ? void 0 : pillarHighlightConfigurationSettings(it) : pillarHighlightConfigurationSettings !== null && pillarHighlightConfigurationSettings !== void 0 ? pillarHighlightConfigurationSettings : {}) : null;
    var doPulse = takePulse(rank);
    var doShake = takeShake(rank);
    var handleMouseLeave = function handleMouseLeave() {
      if (onPillarHover) onPillarHover({
        rank: rank,
        index: index,
        value: value,
        isTop: isTop,
        entering: false
      });
    };
    var handleMouseEnter = function handleMouseEnter() {
      if (onPillarHover) onPillarHover({
        rank: rank,
        index: index,
        value: value,
        isTop: isTop,
        entering: true
      });
    };
    var handleClick = function handleClick() {
      if (onPillarClick) onPillarClick({
        rank: rank,
        index: index,
        value: value,
        isTop: isTop
      });
    };
    return /*#__PURE__*/React.createElement(motion.div, _extends({
      key: "wrap-r".concat(rank, "-i").concat(index),
      initial: "hidden",
      animate: "show",
      exit: {
        transition: {
          duration: 0.15
        },
        opacity: 0,
        y: 8
      },
      variants: itemVariants,
      style: pillarWrapStyle,
      "aria-label": label,
      role: "listitem"
    }, typeof pillarWrapConfigurations === "function" ? pillarWrapConfigurations === null || pillarWrapConfigurations === void 0 ? void 0 : pillarWrapConfigurations(it) : pillarWrapConfigurations !== null && pillarWrapConfigurations !== void 0 ? pillarWrapConfigurations : {}), renderLeft && /*#__PURE__*/React.createElement("div", _extends({
      style: sideSlotStyle("left")
    }, typeof leftPillarSlotContainerConfigurations === "function" ? leftPillarSlotContainerConfigurations === null || leftPillarSlotContainerConfigurations === void 0 ? void 0 : leftPillarSlotContainerConfigurations(it) : leftPillarSlotContainerConfigurations !== null && leftPillarSlotContainerConfigurations !== void 0 ? leftPillarSlotContainerConfigurations : {}), renderLeft({
      rank: rank,
      index: index,
      value: value,
      isTop: isTop
    })), renderRight && /*#__PURE__*/React.createElement("div", _extends({
      style: sideSlotStyle("right")
    }, typeof rightPillarSlotContainerConfigurations === "function" ? rightPillarSlotContainerConfigurations === null || rightPillarSlotContainerConfigurations === void 0 ? void 0 : rightPillarSlotContainerConfigurations(it) : rightPillarSlotContainerConfigurations !== null && rightPillarSlotContainerConfigurations !== void 0 ? rightPillarSlotContainerConfigurations : {}), renderRight({
      rank: rank,
      index: index,
      value: value,
      isTop: isTop
    })), renderAbove && /*#__PURE__*/React.createElement("div", _extends({
      style: _objectSpread({
        display: "flex",
        justifyContent: "center",
        marginBottom: 8
      }, typeof abovePillarSlotContainerConfigurationSettings === "function" ? abovePillarSlotContainerConfigurationSettings === null || abovePillarSlotContainerConfigurationSettings === void 0 ? void 0 : abovePillarSlotContainerConfigurationSettings(it) : abovePillarSlotContainerConfigurationSettings !== null && abovePillarSlotContainerConfigurationSettings !== void 0 ? abovePillarSlotContainerConfigurationSettings : {})
    }, typeof abovePillarSlotContainerConfigurations === "function" ? abovePillarSlotContainerConfigurations === null || abovePillarSlotContainerConfigurations === void 0 ? void 0 : abovePillarSlotContainerConfigurations(it) : abovePillarSlotContainerConfigurations !== null && abovePillarSlotContainerConfigurations !== void 0 ? abovePillarSlotContainerConfigurations : {}), renderAbove({
      rank: rank,
      index: index,
      value: value,
      isTop: isTop
    })), /*#__PURE__*/React.createElement(motion.div, _extends({
      initial: _objectSpread({
        height: minPillarHeight
      }, typeof pillarShellInitialAnimationConfigurationSettings === "function" ? pillarShellInitialAnimationConfigurationSettings === null || pillarShellInitialAnimationConfigurationSettings === void 0 ? void 0 : pillarShellInitialAnimationConfigurationSettings(it) : pillarShellInitialAnimationConfigurationSettings !== null && pillarShellInitialAnimationConfigurationSettings !== void 0 ? pillarShellInitialAnimationConfigurationSettings : {}),
      animate: _objectSpread({
        height: barHeight
      }, typeof pillarShellAnimationConfigurationSettings === "function" ? pillarShellAnimationConfigurationSettings === null || pillarShellAnimationConfigurationSettings === void 0 ? void 0 : pillarShellAnimationConfigurationSettings(it) : pillarShellAnimationConfigurationSettings !== null && pillarShellAnimationConfigurationSettings !== void 0 ? pillarShellAnimationConfigurationSettings : {}),
      transition: _objectSpread({
        height: animate ? {
          duration: animationMs / 1000,
          ease: animationEasing
        } : {
          duration: 0
        }
      }, typeof pillarShellAnimationTransitionConfigurationSettings === "function" ? pillarShellAnimationTransitionConfigurationSettings === null || pillarShellAnimationTransitionConfigurationSettings === void 0 ? void 0 : pillarShellAnimationTransitionConfigurationSettings(it) : pillarShellAnimationTransitionConfigurationSettings !== null && pillarShellAnimationTransitionConfigurationSettings !== void 0 ? pillarShellAnimationTransitionConfigurationSettings : {}),
      style: _objectSpread(_objectSpread({}, baseShellStyle), highlightStyle),
      onKeyDown: function onKeyDown(e) {
        if (e.key === "Enter" || e.key === " ") {
          handleClick();
        }
      },
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      onClick: handleClick,
      "aria-label": label,
      tabIndex: 0,
      role: "button"
    }, typeof pillarShellConfigurations === "function" ? pillarShellConfigurations === null || pillarShellConfigurations === void 0 ? void 0 : pillarShellConfigurations(it) : pillarShellConfigurations !== null && pillarShellConfigurations !== void 0 ? pillarShellConfigurations : {}), /*#__PURE__*/React.createElement(motion.div, _extends({
      initial: _objectSpread({
        scaleY: 0,
        x: 0
      }, typeof pillarInitialAnimationConfigurationSettings === "function" ? pillarInitialAnimationConfigurationSettings === null || pillarInitialAnimationConfigurationSettings === void 0 ? void 0 : pillarInitialAnimationConfigurationSettings(it) : pillarInitialAnimationConfigurationSettings !== null && pillarInitialAnimationConfigurationSettings !== void 0 ? pillarInitialAnimationConfigurationSettings : {}),
      animate: _objectSpread({
        scaleY: 1,
        scale: doPulse ? 1.06 : 1,
        x: doShake ? [0, -4, 4, -3, 3, -2, 2, 0] : 0
      }, typeof pillarAnimationConfigurationSettings === "function" ? pillarAnimationConfigurationSettings === null || pillarAnimationConfigurationSettings === void 0 ? void 0 : pillarAnimationConfigurationSettings(it) : pillarAnimationConfigurationSettings !== null && pillarAnimationConfigurationSettings !== void 0 ? pillarAnimationConfigurationSettings : {}),
      transition: _objectSpread({
        scaleY: animate ? {
          duration: Math.max(0.30, animationMs / 1200),
          ease: animationEasing
        } : {
          duration: 0
        },
        scale: {
          type: "spring",
          stiffness: 380,
          damping: 18
        },
        x: {
          duration: 0.35
        }
      }, typeof pillarAnimationTransitionConfigurationSettings === "function" ? pillarAnimationTransitionConfigurationSettings === null || pillarAnimationTransitionConfigurationSettings === void 0 ? void 0 : pillarAnimationTransitionConfigurationSettings(it) : pillarAnimationTransitionConfigurationSettings !== null && pillarAnimationTransitionConfigurationSettings !== void 0 ? pillarAnimationTransitionConfigurationSettings : {}),
      whileHover: _objectSpread({
        scale: hoverScale
      }, typeof pillarHoverAnimationConfigurationSettings === "function" ? pillarHoverAnimationConfigurationSettings === null || pillarHoverAnimationConfigurationSettings === void 0 ? void 0 : pillarHoverAnimationConfigurationSettings(it) : pillarHoverAnimationConfigurationSettings !== null && pillarHoverAnimationConfigurationSettings !== void 0 ? pillarHoverAnimationConfigurationSettings : {}),
      whileTap: _objectSpread({
        scale: tapScale
      }, typeof pillarTapAnimationConfigurationSettings === "function" ? pillarTapAnimationConfigurationSettings === null || pillarTapAnimationConfigurationSettings === void 0 ? void 0 : pillarTapAnimationConfigurationSettings(it) : pillarTapAnimationConfigurationSettings !== null && pillarTapAnimationConfigurationSettings !== void 0 ? pillarTapAnimationConfigurationSettings : {}),
      style: innerBarStyle
    }, typeof pillarBarConfigurations === "function" ? pillarBarConfigurations === null || pillarBarConfigurations === void 0 ? void 0 : pillarBarConfigurations(it) : pillarBarConfigurations !== null && pillarBarConfigurations !== void 0 ? pillarBarConfigurations : {}), renderInside && /*#__PURE__*/React.createElement("div", _extends({
      style: _objectSpread({
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        pointerEvents: "none",
        height: "100%",
        width: "100%"
      }, typeof pillarContentContainerConfigurationSettings === "function" ? pillarContentContainerConfigurationSettings === null || pillarContentContainerConfigurationSettings === void 0 ? void 0 : pillarContentContainerConfigurationSettings(it) : pillarContentContainerConfigurationSettings !== null && pillarContentContainerConfigurationSettings !== void 0 ? pillarContentContainerConfigurationSettings : {})
    }, typeof pillarContentContainerConfigurations === "function" ? pillarContentContainerConfigurations === null || pillarContentContainerConfigurations === void 0 ? void 0 : pillarContentContainerConfigurations(it) : pillarContentContainerConfigurations !== null && pillarContentContainerConfigurations !== void 0 ? pillarContentContainerConfigurations : {}), renderInside({
      rank: rank,
      index: index,
      value: value,
      isTop: isTop,
      heightPx: barHeight
    })))), renderBelow && /*#__PURE__*/React.createElement("div", _extends({
      style: _objectSpread({
        display: "flex",
        justifyContent: "center",
        marginTop: 8
      }, typeof belowPillarSlotContainerConfigurationSettings === "function" ? belowPillarSlotContainerConfigurationSettings === null || belowPillarSlotContainerConfigurationSettings === void 0 ? void 0 : belowPillarSlotContainerConfigurationSettings(it) : belowPillarSlotContainerConfigurationSettings !== null && belowPillarSlotContainerConfigurationSettings !== void 0 ? belowPillarSlotContainerConfigurationSettings : {})
    }, typeof belowPillarSlotContainerConfigurations === "function" ? belowPillarSlotContainerConfigurations === null || belowPillarSlotContainerConfigurations === void 0 ? void 0 : belowPillarSlotContainerConfigurations(it) : belowPillarSlotContainerConfigurations !== null && belowPillarSlotContainerConfigurations !== void 0 ? belowPillarSlotContainerConfigurations : {}), renderBelow({
      rank: rank,
      index: index,
      value: value,
      isTop: isTop
    })));
  })));
});
export default HUDPlacementPillars;