File examples/poe.js artifact 2c3a9f396c part of check-in 155c7242cf

var Poe = clone(StorkController);

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


var PoeModel = clone(StorkModel);

PoeModel.bodypartNum = 0;

PoeModel.mood = "breathing";


var PoeViewController = clone(StorkHtmlView);

// How much variation there is in Poe's hexes' screen position movement delay (seconds)
PoeViewController.movementDelayVariance = 0.4;
// The minimun amount of time Poe's body parts take to reach their new
// screen position
PoeViewController.movementMinDuration = 0.8;
// The amount of variation to the time Poe's hexes take to reach their new position
// (in seconds)
PoeViewController.movementVariance = 0.9;

PoeViewController.breathingDurationMin = 2;
PoeViewController.breathingDurationVariance = 3;
PoeViewController.breathingDelayVariance = 1.0;

// HTML prototype element for a Poe 
PoeViewController.bodypartProto = null;
PoeViewController.bodyArea = {
    left: 0,
    top: 0,
    width: "100%",
    height: "100%"
};

PoeViewController.bodypartMaxSize = "30%";
PoeViewController.bodypartID = null;
PoeViewController.breathingElements = [];
PoeViewController.locatorElements = [];

PoeViewController.copiedProperty("bodypartElements", []);

PoeViewController.setModel(PoeModel);

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


/**
 * Generate a random transition delay that can be set for each body part
 * to make them feel a bit more organic.
 */

PoeViewController.movementTransitionDelay = function() {
  let delay = Math.random() * this.movementDelayVariance;
  return delay + "s";
}


PoeViewController.breathingTransitionDelay = function() {
  let delay = Math.random() * this.breathingDelayVariance;
  return delay + "s";
}


PoeViewController.setPosition = function(left, top) {
    for (i=0; i < this.locatorElements.length; i++) {
        let el = this.locatorElements[i];
        el.style.left = left;
        el.style.top = top;
    }
};


PoeViewController.attach = function(parent) {
    this.superMethod(PoeViewController.attach, "attach", parent);
    this.breathingElements = [];
    this.locatorElements = [];
    
    if ( (this.model != null) && (this.bodypartProto != null)  &&
         (this.bodyArea != null) ) {
        console.debug(this.model);
        console.debug(this.model.getProperty("bodypartNum"));
        for (i=0; i < this.model.getProperty("bodypartNum"); i++) {
            let locatorElement =
                cloneNodeSetIDs(this.bodypartProto, "PoeBody-", i);

            console.debug(Math.random() * this.movementDelayVariance + "s");

            locatorElement.style.transitionDelay =
                Math.random() * this.movementDelayVariance + "s";
            locatorElement.style.transitionDuration =
                (Math.random() * this.movementVariance +
                 this.movementDurationMin) + "s";
            console.debug(locatorElement);
            console.debug(locatorElement.style.transitionDelay);
            console.debug(locatorElement.style.transitionProperty);
            
            if (!this.bodypartID) {
                throw new Error("Body part sub ID was not set for Poe body.");
            }
            let breathingElement =
                getElementFromStorkID(locatorElement, "PoeBody-",
                                      this.bodypartID,
                                      i);
            //breathingElement.style.top = i * 10 + "px";
            //breathingElement.style.left = i * 10 + "px";
            breathingElement.style.transitionDelay =
                this.breathingTransitionDelay();
            breathingElement.style.transitionDuration =
                (Math.random() * this.breathingDurationVariance +
                 this.breathingDurationMin) + "s";
            parent.appendChild(locatorElement);
            this.locatorElements.push(locatorElement);
            this.breathingElements.push(breathingElement);
            // Set up some initial breath positions
            this.breathBody();
            // This is here to cause some breathing animation more rapidly
            // than the regular interval below it.
            setTimeout(() => {
                this.breathBody();
                setInterval(() => {
                    this.breathBody();
                }, 6000);
            }, 1000);
        }
    }
};


PoeViewController.breathBody = function() {
    console.debug("called");

    for (let i=0; i < this.breathingElements.length; i++) {
        let scale = (Math.random() * 8 + 3) / 20;
        let x = Math.random() * 50-25;
        let y = Math.random() * 50-25;
        
        this.breathingElements[i].style.transform =
            "translate(" + x + "px," + y + "px) scale(" + scale + ")";
    }

    return;
};


PoeViewController.setBodyArea = function(left, top, width, height) {
    this.bodyArea = {
        left: left,
        top: top,
        width: width,
        height: height
    };
};


/*
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>
  );
}

*/