Fix generation outside of grid, add gap slider

This commit is contained in:
Elizabeth Hunt 2023-02-24 18:17:35 -07:00
parent d49a395dbd
commit 21ea36e370
Signed by: simponic
GPG Key ID: 52B3774857EB24B1
4 changed files with 36 additions and 24 deletions

View File

@ -72,3 +72,10 @@ button {
display: flex;
justify-content: center;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
margin-top: 3px;
}

View File

@ -14,6 +14,10 @@
<button id="solve">Solve</button>
<button id="directions">Directions</button>
</div>
<div class="slider">
<label>Gap</label>
<input type="range" min="15" max="80" id="gap" />
</div>
</div>
<span id="expand-show">↑↑</span>
</div>
@ -68,6 +72,7 @@
<script src="js/cx.js"></script>
<script src="js/json-ds.js"></script>
<script src="js/sol.js"></script>
<script src="js/game.js"></script>
<script src="js/controls.js"></script>
</body>

View File

@ -1,13 +1,10 @@
const directions_modal = new Modal({
el: document.getElementById("directions-modal"),
});
document
.getElementById("controls-container")
.addEventListener("mouseover", () => {
document.getElementById("controls").style.display = "block";
document.getElementById("expand-show").style.display = "none";
});
document
.getElementById("controls-container")
.addEventListener("mouseout", () => {
@ -30,3 +27,7 @@ document.getElementById("solve").addEventListener("click", () => {
document
.getElementById("directions")
.addEventListener("click", () => directions_modal.show());
document.getElementById("gap").addEventListener("input", function () {
state.changes.gap = Number(this.value);
});

View File

@ -4,10 +4,12 @@ const DEFAULTS = {
min_gap: 30,
angle_multiplier: 10e-4,
};
const CANVAS = document.getElementById("canvas");
let state = {
grid_padding: 30,
gap: DEFAULTS.min_gap,
canvas: CANVAS,
ctx: CANVAS.getContext("2d"),
last_render: 0,
@ -87,8 +89,8 @@ const rand_between = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
const rand_target = (rows, cols) => {
const r = Math.floor(rows / 2);
const c = Math.floor(cols / 2);
const r = Math.floor((rows - 1) / 2);
const c = Math.floor((cols - 1) / 2);
const res = new cx(rand_between(-c, c), rand_between(-r, r));
if (!sol(res)) return rand_target(rows, cols);
@ -140,7 +142,7 @@ const handle_input = (state, dt) => {
state = maybe_add_state_angle_move(state);
};
const render = ({ width, height, ctx, rows, cols, target } = state) => {
const render = ({ width, height, ctx, rows, cols, target, gap } = state) => {
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(0, 0, width, height);
@ -172,7 +174,6 @@ const render = ({ width, height, ctx, rows, cols, target } = state) => {
}
const grid_target = complex_to_grid(target, rows, cols);
ctx.cartesian_grid(rows, cols, grid_spec, (x, y) => {
if (x == Math.floor(cols / 2) && y == Math.floor(rows / 2)) {
return {
@ -191,6 +192,9 @@ const render = ({ width, height, ctx, rows, cols, target } = state) => {
};
}
});
// Render gap value in slider
document.getElementById("gap").value = gap;
};
const loop = (now) => {
@ -198,23 +202,17 @@ const loop = (now) => {
state.changes.last_render = now;
if (Object.keys(state.changes).length > 0) {
if (state.changes.width || state.changes.height) {
state.changes.rows = Math.floor(
Math.min(DEFAULTS.max_rows, state.changes.height / DEFAULTS.min_gap)
);
state.changes.cols = Math.floor(
Math.min(DEFAULTS.max_cols, state.changes.width / DEFAULTS.min_gap)
);
}
state = { ...state, ...state.changes };
if (state.changes.width || state.changes.height || state.changes.gap) {
state.rows = Math.floor(state.height / state.gap);
state.cols = Math.floor(state.width / state.gap);
}
state.changes = {};
}
if (!state.target) {
state.target = rand_target(state.rows, state.cols);
}
if (!state.target) state.target = rand_target(state.rows, state.cols);
if (!state.solution) {
handle_input(state, dt);
@ -242,6 +240,10 @@ const reset_state = ({ rows, cols } = state) => ({
});
// DOM
const directions_modal = new Modal({
el: document.getElementById("directions-modal"),
});
const on_resize = () => {
CANVAS.width = document.body.clientWidth;
CANVAS.height = document.body.clientHeight;
@ -266,10 +268,7 @@ on_resize();
state = reset_state(state);
if (!sessionStorage.getItem("seen-instructions")) {
new Modal({
el: document.getElementById("directions-modal"),
}).show();
directions_modal.show();
sessionStorage.setItem("seen-instructions", true);
}