<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");
     PoeViewController.attach(elementByID("poeDrawArea"));

        setTimeout(() => {
        PoeViewController.setPosition("20em", "10em");
        }, 3000);
        
    </script>

</html>
