Artifact 8027e4517230b6c0b60d0544c7e84152b9e07f24:

• File examples/poe.js — part of check-in [b758ca1f93] at 2022-01-25 09:41:31 on branch poe — Started new example with Attractive.ai's Poe character (user: setok size: 5271)

const animationTime = 6;
const animationVarianceTime = 4;
const animationDelayVariance = 1;
// How much variation there is in Poe's hexes' screen position movement delay (seconds)
const MovementDelayVariation = 0.4;
// The minimun amount of time Poe's hexes take to reach their new screen position
const MinMovementTime = 0.8;
// The amount of variation to the time Poe's hexes take to reach their new position
// (in seconds)
const MovementVariation = 0.9;
const colors = ["#db2923", "#eb7436", "#e3c815"];
const opacities = ["0.3", "0.2", "0.1"];

function getRandomTransform() {
  const scale = (Math.random() * 8 + 3) / 20;
  const x = Math.random() * 50 - 25;
  const y = Math.random() * 50 - 25;

  return `translate(${x}%, ${y}%) scale(${scale})`;
}

function getTransition() {
  const variation = Math.random() * animationVarianceTime;
  const time = animationTime + variation;
  const delay = Math.random() * animationDelayVariance;
  return "transform " + time + "s ease-in-out" + " " + delay + "s";
}

function movementTransitionDelay() {
  const delay = Math.random() * MovementDelayVariation;
  return delay + "s";
}

function movementTransitionDuration() {
  const time = Math.random() * MovementVariation + MinMovementTime;
  return time + "s";
}

/*
type Props = {
  size?: number;
  hexOffsets?: { top: number; right: number };
}; */


//type Hex = { fill: string; opacity: string; transition: string; transform: string; i: number };

function generateHexes(size) {
  return Array.from({ length: size }, (x, i) => i).map((i) => {
    const fill = colors[Math.floor((i / size) * colors.length)];
    const opacity = opacities[i % opacities.length];
    //const transition = `transform ${animationTime}s ease-in-out`;
    const transition = getTransition();
    const transform = getRandomTransform();
    return { fill, opacity, transition, transform, i };
  });
}

function transformHexes(hexes) {
  const newHexes = [];
  for (let i = 0; i < hexes.length; i++) {
    newHexes.push({
      fill: hexes[i].fill,
      transition: hexes[i].transition,
      opacity: opacities[i % opacities.length],
      transform: getRandomTransform(),
      i: i,
    });
  }
  return newHexes;
}

function getHexStyles(hexOffsets) {
  const defaultStyles = {
    transitionDelay: movementTransitionDelay(),
    transitionDuration: movementTransitionDuration(),
  };
  if (hexOffsets === undefined) {
    return defaultStyles;
  } else {
    return { ...defaultStyles, right: `${hexOffsets.right}%`, top: `${hexOffsets.top}%` };
  }
}


var Poe = clone(StorkController);

Poe.organs = clone(ListController);
Poe.organNum = 0;


var PoeModel = clone(StorkModel);

PoeModel.bodypartNum = 0;


var PoeViewController = clone(StorkHtmlView);


// HTML prototype element for a Poe 
PoeViewController.bodypartProto = null;
PoeViewController.copiedProperty("bodypartElements", []);

PoeViewController.setModel(PoeModel);

PoeViewController.setBodypartProto = function(element) {
    this.bodypartProto = element;
};


PoeViewController.attach = function(parent) {
    this.superMethod(PoeViewController.attach, "attach", parent);

    if ( (this.model != null) && (this.bodypartProto != null) ) {
        console.debug("has model and bodypart proto");
        console.debug(this.model);
        console.debug(this.model.getProperty("bodypartNum"));
        for (i=0; i < this.model.getProperty("bodypartNum"); i++) {
            let el = cloneNodeSetIDs(this.bodypartProto, "PoeBody-", i);
            el.style.opacity = "0.5";
            el.style.top = i * 10 + "px";
            el.style.left = i * 10 + "px";
            console.debug(parent);
            console.debug(el);
            console.debug(el.parentElement);
            parent.appendChild(el);
        }
    }
};

/*
export default function Poe(props: Props): ReactElement {
  const size = props.size ?? 18;
  const [hexes, setHexes] = useState(generateHexes(size));
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);

    setTimeout(() => {
      setHexes(generateHexes(size));
    }, 1000);

    const interval = setInterval(() => {
      setHexes(transformHexes(hexes));
    }, (animationTime + animationVarianceTime) * 1000);
    return () => clearInterval(interval);
  }, []);

  if (!mounted) {
    return <div></div>;
  }
  return (
    <div className="poe">
      {hexes.map(({ fill, opacity, transition, transform, i }) => {
        return (
          <div key={i} className="poehex" style={getHexStyles(props.hexOffsets)}>
            <div style={{ paddingTop: "100%", height: 0, zIndex: 1000 }}>
              <svg
                style={{
                  fill,
                  opacity,
                  transition,
                  transform,
                  marginTop: "-100%",
                  marginRight: 0,
                  marginBottom: 0,
                  marginLeft: 0,
                  display: "block",
                }}
                xmlns="http://www.w3.org/2000/svg"
                viewBox="-2 -2 4 4"
              >
                <polygon className="hexpoly" id="hex" points="-2,0 -1,1.732 1,1.732 2,0 1,-1.732 -1,-1.732" />
              </svg>
            </div>
          </div>
        );
      })}
    </div>
  );
}

*/