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