Playground
Interactive versions of the ideas in the posts. Each one runs live in your browser, with a short description, a few scenarios to try, and a link to the full write-up. Pick a simulation to load it.
Interactive versions of the ideas in the posts. Each one runs live in your browser, with a short description, a few scenarios to try, and a link to the full write-up. Pick a simulation to load it.
viewof chosenId = Inputs.select(
new Map(sims.map(s => [s.title, s.id])),
{ label: "Simulation", value: sims[0].id }
)// What it is + what it does (and doesn't).
md`### ${chosen.title}\n\n${chosen.blurb}\n\n${chosen.what}`// Scenarios to try.
html`<div class="sim-scenarios">
<div class="sim-scenarios-title">Try this</div>
<ol>${chosen.scenarios.map(s => html`<li><strong>${s.label}.</strong> ${s.do}</li>`)}</ol>
</div>`// Mount the chosen sim's widget. Expression cell (not a named assignment) so OJS
// displays the DOM node exactly once; it re-runs when `chosen` changes (the
// dropdown), re-mounting the selected simulation. A separate bare display cell
// would re-inspect the adopted node and print "HTMLDivElement {}".
{
const sel = chosen; // depend on the dropdown
const [simMod, widgetMod] = await Promise.all([sel.sim(), sel.widget()]);
const container = html`<div class="sim-mount"></div>`;
widgetMod.renderRefusalToy(container, { Inputs, Plot, html, sim: simMod });
return container;
}