trimill.xyz/flaskr/templates/projects/mazemaker/index.html
2022-06-23 02:23:38 -04:00

50 lines
No EOL
2.4 KiB
HTML

{% set meta={"title": "Maze maker", "desc": "Generate mazes", "pagewidth": "1400px"} %}
{% extends "/_base.html"%}
{% block head %}
<style>
.side { padding-left: 20px; float: left; }
</style>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<script src="dom.js"></script>
<script src="main.js"></script>
<script src="bool-x-64.js"></script>
{% endblock %}
{% block content %}
<div id="canvas-wrapper" style="float: left;"></div>
<div class="side">
Maze width (pixels): <input type="number" id="width" value="720" onchange="prop('w');"><br>
Maze height (pixels): <input type="number" id="height" value="720" onchange="prop('h');"><br>
Cells wide: <input type="number" id="maze-width" value="18" onchange="prop('mw');"><br>
Cells high: <input type="number" id="maze-height" value="18" onchange="prop('mh');"><br>
Proportional: <input type="checkbox" id="proportional"><br>
Chance to shift instead of pop: <input type="text" id="shiftpop" value="0">%<br>
Bias: <select id="bias">
<option value="0" selected>No bias</option>
<option value="1">Horizontal</option>
<option value="-1">Vertical</option>
</select><br>
<input type="button" id="new-maze" value="New Maze" onclick="newMaze();"><br><br>
Foreground color: <select id="selectfg" onchange="updateFG()"></select>
<input type="text" id="colorfg" value="0, 0, 0"
onchange="colorfg = color(elem('colorfg').value.split(', ')); redraw();"><br>
Background color: <select id="selectbg" onchange="updateBG()"></select>
<input type="text" id="colorbg" value="255, 255, 255"
onchange="colorbg = color(elem('colorbg').value.split(', ')); redraw();"><br>
Border weight: <input type="number" id="bwait" value="2"
onchange="borderWeight = elem('bwait').value; redraw();"><br><br>
Speed (fps): <input type="number" id="speed" value="30">
<input type="button" id="set-speed" value="Set Speed"
onclick="frameRate(int(elem('speed').value));"><br>
Show current cell: <input type="checkbox" id="current" checked
onclick="showCurrent = elem('current').checked;"><br>
Show colored overlay: <input type="checkbox" id="overlay" checked
onclick="showOverlay = elem('overlay').checked;"><br><br>
<input type="button" value="Open permalink"
onclick="window.open(getPermalinkURL());"><br><br>
<div id="status">Generating...</div>
</div>
{% endblock %}