<html>
<head>
<script type="text/javascript" src="../storkCore.js">
</script>
<script type="text/javascript" src="../bean.js">
</script>
<script type="text/javascript" src="../list.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 className="poe">
<div key={i} class="poehex">
<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>
</div>
</div>
</body>
<script type="text/javascript">
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>