uielements/ants.html

<!DOCTYPE html>

<head>
    <title>Ants</title>

    <script type="module" src="./uielements.html.js"></script>
    <link rel="stylesheet" href="./uielements.css" />
</head>

<body>

    <script type="module">
        import * as UI from './uielements.js'
        import elements from './antsElements.js'

        // ====== The views2mv code as-is ======

        import Animator from 'https://code.agentscript.org/src/Animator.js'
        import TwoDraw from 'https://code.agentscript.org/src/TwoDraw.js'

        import Model from 'https://code.agentscript.org/models/AntsModel.js'
        import TwoDrawOptions from 'https://code.agentscript.org/views2mv/antsOptions.js'

        const model = new Model()
        model.setup()

        const view = new TwoDraw(model, TwoDrawOptions("modelDiv", model, 8))

        const anim = new Animator(
            () => {
                model.step()
                view.draw()
            },
            500, // how many steps
            30 // at fps steps/second
        )

        // ====== Additional code for uielements usage ======

        anim.stop() // let uielements start/stop animator
        anim.setSteps(-1) // in case you want to run forever

        await UI.setAppState(model, view, anim) // connect model to uielements

        // UI.createElements() // create elements from persistent storage
        UI.createElements(elements, true) // create elements from file
    </script>

    <!-- <div>
        <div id="modelDiv"></div>
        <div id="plotDiv"></div>
    </div> -->
    <div id="modelDiv"></div>


</body>

</html>