<html>
<head>
<script type="text/javascript" src="../storkCore.js">
</script>
<script type="text/javascript" src="poe.js">
</script>
</head>
<body>
<div id="poeDrawArea" style="max-width: 100%; height: 50em; border: solid red 1px; position: relative;">
</div>
<div style="display: none">
<div id="bodypartLocator"
style="position: absolute; border: solid
orange 2px; width: 20em; height: 20em; left: 0; top: 0;
transition: left 1s ease-in-out, top 1s ease-in-out;">
<svg id="bodypart"
style="display: block; opacity: 0.5;
position: absolute; width: 100%; height: 100%;
border: solid green 1px;
transition: transform 4s ease-in-out;
fill: black;"
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> <!-- bodypartLocator -->
</div>
</body>
<script type="text/javascript">
// With storkCore there are no classes. Objects can be used
// themselves, and cloned as needed. In the below example we
// configure the prototype of Poe directly. As 'poeTwo' is a clone
// of PoeViewController, it shares the same model (PoeModel is
// the default model of PoeViewController).
// We show that by setting the body part number of PoeModel, and
// then changing it. Both renditions change accordingly.
// The position of one Poe (within its container) is set. That is
// set in the PoeViewController, and is not considered a property
// of the model.
PoeModel.setProperty("bodypartNum", "3");
PoeViewController.setBodypartProto(elementByID("bodypartLocator"),
"bodypart");
let poeTwo = clone(PoeViewController);
poeTwo.setPosition("40em", "15em");
PoeViewController.attach(elementByID("poeDrawArea"));
poeTwo.attach(elementByID("poeDrawArea"));
setTimeout(() => {
PoeModel.setProperty("bodypartNum", "10");
}, 3000);
setTimeout(() => {
PoeViewController.setPosition("20em", "10em");
PoeModel.setProperty("bodypartNum", "10");
}, 5000);
</script>
</html>