From 8050a399dfdf92692ffe2bec1b980b8988551fa0 Mon Sep 17 00:00:00 2001 From: Simponic Date: Fri, 24 Feb 2023 15:00:30 -0700 Subject: [PATCH] Finish euler golf --- euler-golf/css/styles.css | 36 +++++++++- euler-golf/index.html | 59 ++++++++++++++- euler-golf/js/controls.js | 32 +++++++++ euler-golf/js/game.js | 111 ++++++++++++++++++++--------- euler-golf/js/modal-vanilla.min.js | 1 + euler-golf/js/sol.js | 4 +- index.html | 14 ++++ 7 files changed, 215 insertions(+), 42 deletions(-) create mode 100644 euler-golf/js/controls.js create mode 100644 euler-golf/js/modal-vanilla.min.js diff --git a/euler-golf/css/styles.css b/euler-golf/css/styles.css index 05f2f9f..e9885c5 100644 --- a/euler-golf/css/styles.css +++ b/euler-golf/css/styles.css @@ -24,21 +24,51 @@ body { height: 100vw; } -.button { - border: 1px solid black; +button { border-radius: 5px; padding: 5px; cursor: pointer; + margin-left: 5px; } .controls { + cursor: pointer; padding: 12px; position: fixed; bottom: 0; right: 0; - background-color: rgba(255, 255, 255, 0.5); + background-color: rgba(255, 255, 255, 0.8); border: 1px solid white; border-radius: 8px; margin-right: 6px; margin-bottom: 6px; } + +.buttons { + display: flex; + justify-content: space-around; + align-items: center; +} + +.modal { + display: flex; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + width: 80vw; + max-width: 500px; + min-height: 200px; + + padding: 12px; + + background-color: rgba(255, 255, 255, 0.8); + border: 1px solid black; + border-radius: 15px; +} + +.modal-body { + display: flex; + justify-content: center; +} diff --git a/euler-golf/index.html b/euler-golf/index.html index fb31d41..7679a34 100644 --- a/euler-golf/index.html +++ b/euler-golf/index.html @@ -7,13 +7,68 @@ -
- +
+ + ↑↑
+ + + + + diff --git a/euler-golf/js/controls.js b/euler-golf/js/controls.js new file mode 100644 index 0000000..d89c53d --- /dev/null +++ b/euler-golf/js/controls.js @@ -0,0 +1,32 @@ +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", () => { + document.getElementById("controls").style.display = "none"; + document.getElementById("expand-show").style.display = "inline"; + }); + +document.getElementById("reset").addEventListener("click", () => { + state = reset_state(state); + + state.target = rand_target(state.rows, state.cols); +}); + +document.getElementById("solve").addEventListener("click", () => { + if (!cx.eq(state.path.at(-2), new cx(0, 0))) state = reset_state(state); + + state.solution = sol(state.target); +}); + +document + .getElementById("directions") + .addEventListener("click", () => directions_modal.show()); diff --git a/euler-golf/js/game.js b/euler-golf/js/game.js index 0f76f17..68fca94 100644 --- a/euler-golf/js/game.js +++ b/euler-golf/js/game.js @@ -1,18 +1,16 @@ const DEFAULTS = { max_rows: 80, max_cols: 80, - min_gap: 40, + min_gap: 30, angle_multiplier: 10e-4, }; const CANVAS = document.getElementById("canvas"); let state = { - grid_padding: 10, + grid_padding: 30, canvas: CANVAS, ctx: CANVAS.getContext("2d"), last_render: 0, - path: [new cx(0, 0), new cx(1, 0)], - angle: new cx(0, 0), keys: {}, changes: {}, }; @@ -59,7 +57,7 @@ CanvasRenderingContext2D.prototype.draw_cartesian_path = function ( CanvasRenderingContext2D.prototype.do_grid = function ( rows, cols, - draw_at_grid_pos = (ctx, x, y) => ctx.circle(x, y, 10, "#00ff00") + draw_at_grid_pos = (ctx, x, y) => ctx.circle(x, y, 10, "#44ff44") ) { for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { @@ -88,9 +86,11 @@ const move = (prev, curr, c) => cx.add(prev, cx.mult(c, cx.sub(curr, prev))); const rand_between = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; -const rand_target = (cols, rows) => { - const res = new cx(rand_between(0, cols), rand_between(0, rows)); - if (res.re % 2 || res.im % 2) return rand_target(cols, rows); +const rand_target = (rows, cols) => { + const r = Math.floor(rows / 2); + const c = Math.floor(cols / 2); + const res = new cx(rand_between(-c, c), rand_between(-r, r)); + if (!sol(res)) return rand_target(rows, cols); return res; }; @@ -121,21 +121,26 @@ const complex_to_grid = (c, rows, cols) => { }; // Game loop + +const maybe_add_state_angle_move = ({ angle } = state) => { + if (angle.im <= -1 || angle.im >= 1) { + angle.im = angle.im <= -1 ? -1 : 1; + state.path.push(move(state.path.at(-2), state.path.at(-1), angle)); + state.angle = new cx(0, 0); + } + return state; +}; + const handle_input = (state, dt) => { if (state.keys.ArrowLeft) { state.angle.im += DEFAULTS.angle_multiplier * dt; } else if (state.keys.ArrowRight) { state.angle.im -= DEFAULTS.angle_multiplier * dt; } - - if (state.angle.im <= -1 || state.angle.im >= 1) { - state.angle.im = state.angle.im <= -1 ? -1 : 1; - state.path.push(move(state.path.at(-2), state.path.at(-1), state.angle)); - state.angle = new cx(0, 0); - } + state = maybe_add_state_angle_move(state); }; -const render = ({ width, height, ctx, rows, cols } = state) => { +const render = ({ width, height, ctx, rows, cols, target } = state) => { ctx.clearRect(0, 0, width, height); ctx.fillStyle = "rgba(0, 0, 0, 0)"; ctx.fillRect(0, 0, width, height); @@ -156,19 +161,17 @@ const render = ({ width, height, ctx, rows, cols } = state) => { complex_to_grid(cx.add(new cx(angle_re, angle_im), prev), rows, cols), ]); - ctx.line( - grid_to_canvas(complex_to_grid(curr, rows, cols), grid_spec), - grid_to_canvas( - complex_to_grid( - move(prev, curr, new cx(0, state.angle.im < 0 ? -1 : 1)), - rows, - cols - ), - grid_spec - ), - 6, - "#aaa" - ); + if (!(state.angle.im == state.angle.re && state.angle.re == 0)) { + // Draw path to next player's target + const [a, b] = [ + curr, + move(prev, curr, new cx(0, state.angle.im < 0 ? -1 : 1)), + ].map((c) => grid_to_canvas(complex_to_grid(c, rows, cols), grid_spec)); + + ctx.line(a, b, 6, "#aaa"); + } + + 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)) { @@ -176,6 +179,11 @@ const render = ({ width, height, ctx, rows, cols } = state) => { radius: 7, color: "#2f9c94", }; + } else if (x == grid_target.x && y == grid_target.y) { + return { + radius: 8, + color: "#00ff00", + }; } else { return { radius: 3, @@ -191,25 +199,48 @@ const loop = (now) => { if (Object.keys(state.changes).length > 0) { if (state.changes.width || state.changes.height) { - state.changes.rows = Math.min( - DEFAULTS.max_rows, - state.changes.height / DEFAULTS.min_gap + state.changes.rows = Math.floor( + Math.min(DEFAULTS.max_rows, state.changes.height / DEFAULTS.min_gap) ); - state.changes.cols = Math.min( - DEFAULTS.max_cols, - state.changes.width / DEFAULTS.min_gap + state.changes.cols = Math.floor( + Math.min(DEFAULTS.max_cols, state.changes.width / DEFAULTS.min_gap) ); } state = { ...state, ...state.changes }; + state.changes = {}; } - handle_input(state, dt); + if (!state.target) { + state.target = rand_target(state.rows, state.cols); + } + + if (!state.solution) { + handle_input(state, dt); + } else { + if (!state?.solution.length) { + delete state.solution; + } else { + state.angle.im += + (state.solution[0] === "-" ? 1 : -1) * DEFAULTS.angle_multiplier * dt; + + state = maybe_add_state_angle_move(state); + + if (cx.eq(state.angle, new cx(0, 0))) state.solution.shift(); + } + } render(state); requestAnimationFrame(loop); }; +const reset_state = ({ rows, cols } = state) => ({ + ...state, + solution: null, + path: [new cx(0, 0), new cx(1, 0)], + angle: new cx(0, 0), +}); + // DOM const on_resize = () => { CANVAS.width = document.body.clientWidth; @@ -232,4 +263,14 @@ window.addEventListener("keyup", on_keyup); // main on_resize(); +state = reset_state(state); + +if (!sessionStorage.getItem("seen-instructions")) { + new Modal({ + el: document.getElementById("directions-modal"), + }).show(); + + sessionStorage.setItem("seen-instructions", true); +} + requestAnimationFrame(loop); diff --git a/euler-golf/js/modal-vanilla.min.js b/euler-golf/js/modal-vanilla.min.js new file mode 100644 index 0000000..0d314c7 --- /dev/null +++ b/euler-golf/js/modal-vanilla.min.js @@ -0,0 +1 @@ +var Modal=function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){e.exports=n(1).default},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function r(e){for(var t in e)Array.isArray(e[t])?e[t].forEach(function(e){r(e)}):null!==e[t]&&"object"===p(e[t])&&Object.freeze(e[t]);return Object.freeze(e)}function a(){return(65536*(1+Math.random())|0).toString(16)+(65536*(1+Math.random())|0).toString(16)}function l(e,t,n){var i=e.data||{};if(void 0===n){if(e.data&&e.data[t])return e.data[t];var o=e.getAttribute("data-"+t);return void 0!==o?o:null}return i[t]=n,e.data=i,e}function d(e,t){return e.nodeName?e:(e=e.replace(/(\t|\n$)/g,""),_||(_=document.createElement("div")),_.innerHTML="",_.innerHTML=e,!0===t?_.childNodes:_.childNodes[0])}function c(){var e=void 0,t=void 0,n=void 0,i=document.createElement("div");return v(i.style,{visibility:"hidden",width:"100px"}),document.body.appendChild(i),n=i.offsetWidth,i.style.overflow="scroll",e=document.createElement("div"),e.style.width="100%",i.appendChild(e),t=n-e.offsetWidth,document.body.removeChild(i),t}function h(e){for(var t=[e];e.parentNode;)e=e.parentNode,t.push(e);return t}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n
',dialog:'
',content:'
',header:'
',headerClose:'',body:'
',footer:'
',backdrop:'
'},k=function(e){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));if(n.id=a(),n.el=null,n._html={},n._events={},n._visible=!1,n._pointerInContent=!1,n._options=v({},t.options,e),n._templates=v({},t.templates,e.templates||{}),n._html.appendTo=document.querySelector(n._options.appendTo),n._scrollbarWidth=c(),null===n._options.buttons&&(n._options.buttons=t.buttons.dialog),n._options.el){var s=n._options.el;if("string"==typeof n._options.el&&!(s=document.querySelector(n._options.el)))throw new Error("Selector: DOM Element "+n._options.el+" not found.");l(s,"modal",n),n.el=s}else n._options.construct=!0;return n._options.construct?n._render():n._mapDom(),n}return s(t,e),u(t,null,[{key:"alert",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new t(v({},y,{title:e,content:!1,construct:!0,headerClose:!1,buttons:t.buttons.alert},n))}},{key:"confirm",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new t(v({},y,{title:e,content:!1,construct:!0,headerClose:!1,buttons:t.buttons.confirm},n))}},{key:"templates",set:function(e){this._baseTemplates=e},get:function(){return v({},g,t._baseTemplates||{})}},{key:"buttons",set:function(e){this._baseButtons=e},get:function(){return v({},b,t._baseButtons||{})}},{key:"options",set:function(e){this._baseOptions=e},get:function(){return v({},y,t._baseOptions||{})}},{key:"version",get:function(){return"0.12.0"}}]),u(t,[{key:"_render",value:function(){var e=this._html,t=this._options,n=this._templates,i=!!t.animate&&t.animateClass;return e.container=d(n.container),e.dialog=d(n.dialog),e.content=d(n.content),e.header=d(n.header),e.headerClose=d(n.headerClose),e.body=d(n.body),e.footer=d(n.footer),i&&e.container.classList.add(i),this._setHeader(),this._setContent(),this._setFooter(),this.el=e.container,e.dialog.appendChild(e.content),e.container.appendChild(e.dialog),this}},{key:"_mapDom",value:function(){var e=this._html,t=this._options;return this.el.classList.contains(t.animateClass)&&(t.animate=!0),e.container=this.el,e.dialog=this.el.querySelector(".modal-dialog"),e.content=this.el.querySelector(".modal-content"),e.header=this.el.querySelector(".modal-header"),e.headerClose=this.el.querySelector(".modal-header .close"),e.body=this.el.querySelector(".modal-body"),e.footer=this.el.querySelector(".modal-footer"),this._setHeader(),this._setContent(),this._setFooter(),this}},{key:"_setHeader",value:function(){var e=this._html,t=this._options;t.header&&e.header&&(t.title.nodeName?e.header.innerHTML=t.title.outerHTML:"string"==typeof t.title&&(e.header.innerHTML='

'+t.title+"

"),null===this.el&&e.headerClose&&t.headerClose&&e.header.appendChild(e.headerClose),t.construct&&e.content.appendChild(e.header))}},{key:"_setContent",value:function(){var e=this._html,t=this._options;t.content&&e.body&&("string"==typeof t.content?e.body.innerHTML=t.content:e.body.innerHTML=t.content.outerHTML,t.construct&&e.content.appendChild(e.body))}},{key:"_setFooter",value:function(){var e=this._html,t=this._options;t.footer&&e.footer&&(t.footer.nodeName?e.footer.ineerHTML=t.footer.outerHTML:"string"==typeof t.footer?e.footer.innerHTML=t.footer:e.footer.children.length||t.buttons.forEach(function(t){var n=document.createElement("button");l(n,"button",t),n.innerHTML=t.text,n.setAttribute("type","button");for(var i in t.attr)n.setAttribute(i,t.attr[i]);e.footer.appendChild(n)}),t.construct&&e.content.appendChild(e.footer))}},{key:"_setEvents",value:function(){var e=(this._options,this._html);this._events.keydownHandler=this._handleKeydownEvent.bind(this),document.body.addEventListener("keydown",this._events.keydownHandler),this._events.mousedownHandler=this._handleMousedownEvent.bind(this),e.container.addEventListener("mousedown",this._events.mousedownHandler),this._events.clickHandler=this._handleClickEvent.bind(this),e.container.addEventListener("click",this._events.clickHandler),this._events.resizeHandler=this._handleResizeEvent.bind(this),window.addEventListener("resize",this._events.resizeHandler)}},{key:"_handleMousedownEvent",value:function(e){var t=this;this._pointerInContent=!1,h(e.target).every(function(e){return!e.classList||!e.classList.contains("modal-content")||(t._pointerInContent=!0,!1)})}},{key:"_handleClickEvent",value:function(e){var t=this;h(e.target).every(function(n){return!("HTML"===n.tagName||!0!==t._options.backdrop&&n.classList.contains("modal")||n.classList.contains("modal-content")||("modal"===n.getAttribute("data-dismiss")?(t.emit("dismiss",t,e,l(e.target,"button")),t.hide(),1):!t._pointerInContent&&n.classList.contains("modal")&&(t.emit("dismiss",t,e,null),t.hide(),1)))}),this._pointerInContent=!1}},{key:"_handleKeydownEvent",value:function(e){27===e.which&&this._options.keyboard&&(this.emit("dismiss",this,e,null),this.hide())}},{key:"_handleResizeEvent",value:function(e){this._resize()}},{key:"show",value:function(){var e=this,t=this._options,n=this._html;return this.emit("show",this),this._checkScrollbar(),this._setScrollbar(),document.body.classList.add("modal-open"),t.construct&&n.appendTo.appendChild(n.container),n.container.style.display="block",n.container.scrollTop=0,!1!==t.backdrop?(this.once("showBackdrop",function(){e._setEvents(),t.animate&&n.container.offsetWidth,n.container.classList.add(t.animateInClass),setTimeout(function(){e._visible=!0,e.emit("shown",e)},t.transition)}),this._backdrop()):(this._setEvents(),t.animate&&n.container.offsetWidth,n.container.classList.add(t.animateInClass),setTimeout(function(){e._visible=!0,e.emit("shown",e)},t.transition)),this._resize(),this}},{key:"toggle",value:function(){this._visible?this.hide():this.show()}},{key:"_resize",value:function(){var e=this._html.container.scrollHeight>document.documentElement.clientHeight;this._html.container.style.paddingLeft=!this.bodyIsOverflowing&&e?this._scrollbarWidth+"px":"",this._html.container.style.paddingRight=this.bodyIsOverflowing&&!e?this._scrollbarWidth+"px":""}},{key:"_backdrop",value:function(){var e=this,t=this._html,n=this._templates,i=this._options,o=!!i.animate&&i.animateClass;t.backdrop=d(n.backdrop),o&&t.backdrop.classList.add(o),t.appendTo.appendChild(t.backdrop),o&&t.backdrop.offsetWidth,t.backdrop.classList.add(i.animateInClass),setTimeout(function(){e.emit("showBackdrop",e)},this._options.backdropTransition)}},{key:"hide",value:function(){var e=this,t=this._html,n=this._options,i=t.container.classList;if(this.emit("hide",this),i.remove(n.animateInClass),n.backdrop){t.backdrop.classList.remove(n.animateInClass)}return this._removeEvents(),setTimeout(function(){document.body.classList.remove("modal-open"),document.body.style.paddingRight=e.originalBodyPad},n.backdropTransition),setTimeout(function(){n.backdrop&&t.backdrop.parentNode.removeChild(t.backdrop),t.container.style.display="none",n.construct&&t.container.parentNode.removeChild(t.container),e._visible=!1,e.emit("hidden",e)},n.transition),this}},{key:"_removeEvents",value:function(){this._events.keydownHandler&&document.body.removeEventListener("keydown",this._events.keydownHandler),this._html.container.removeEventListener("mousedown",this._events.mousedownHandler),this._html.container.removeEventListener("click",this._events.clickHandler),window.removeEventListener("resize",this._events.resizeHandler)}},{key:"_checkScrollbar",value:function(){this.bodyIsOverflowing=document.body.clientWidth0&&this._events[e].length>o&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),"function"==typeof console.trace&&console.trace()),this},n.prototype.on=n.prototype.addListener,n.prototype.once=function(e,t){function n(){this.removeListener(e,n),o||(o=!0,t.apply(this,arguments))}if(!i(t))throw TypeError("listener must be a function");var o=!1;return n.listener=t,this.on(e,n),this},n.prototype.removeListener=function(e,t){var n,o,r,a;if(!i(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(n=this._events[e],r=n.length,o=-1,n===t||i(n.listener)&&n.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(s(n)){for(a=r;a-- >0;)if(n[a]===t||n[a].listener&&n[a].listener===t){o=a;break}if(o<0)return this;1===n.length?(n.length=0,delete this._events[e]):n.splice(o,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},n.prototype.removeAllListeners=function(e){var t,n;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0===arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(n=this._events[e],i(n))this.removeListener(e,n);else if(n)for(;n.length;)this.removeListener(e,n[n.length-1]);return delete this._events[e],this},n.prototype.listeners=function(e){return this._events&&this._events[e]?i(this._events[e])?[this._events[e]]:this._events[e].slice():[]},n.prototype.listenerCount=function(e){if(this._events){var t=this._events[e];if(i(t))return 1;if(t)return t.length}return 0},n.listenerCount=function(e,t){return e.listenerCount(t)}}]); diff --git a/euler-golf/js/sol.js b/euler-golf/js/sol.js index 5747178..bc403fc 100644 --- a/euler-golf/js/sol.js +++ b/euler-golf/js/sol.js @@ -1,4 +1,4 @@ -const DEPTH = 22; +const DEPTH = 15; const DIRECTION = { 0: new cx(0, 1), @@ -13,7 +13,7 @@ const backtrack = (local_index, depth) => .toString(2) .padStart(depth, "0") .split("") - .map((direction) => (Number(direction) ? "-" : "+")); + .map((direction) => (Number(direction) ? "+" : "-")); const sol = (target, start_from = new cx(0, 0), start_to = new cx(1, 0)) => { let moves = [start_to, ...construct_moves(start_from, start_to)]; diff --git a/index.html b/index.html index 758b4e0..0381a91 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,20 @@ simponic.xyz.
+
+
+ +
+ +
+

Euler Golf 2

+

+ A puzzle game (with solver) to explore rotations in the complex + plane. +

+
+
+