| 33 | }; |
| 34 | |
| 35 | const start = (show) => { |
| 36 | // TODO: support canvases of different sizes. just for provided ones? or all? |
| 37 | if (show.canvas === undefined) { |
| 38 | document.body.style["margin"] = "0px"; |
| 39 | document.body.style["overflow"] = "hidden"; |
| 40 | document.body.style.setProperty("position", "fixed"); |
| 41 | document.body.style.setProperty("width", "100vw"); |
| 42 | document.body.style.setProperty("height", "100vh"); |
| 43 | document.body.style.setProperty("pointer-events", "all"); |
| 44 | document.body.style.setProperty("touch-action", "none"); |
| 45 | |
| 46 | show.canvas = document.createElement("canvas"); |
| 47 | // show.canvas.style["background-color"] = Colour.Void; |
| 48 | show.canvas.style["background-color"] = Colour.Black; |
| 49 | show.canvas.style["image-rendering"] = "pixelated"; |
| 50 | document.body.appendChild(show.canvas); |
| 51 | } |
| 52 | |
| 53 | if (show.context === undefined) { |
| 54 | show.context = show.canvas.getContext("2d"); |
| 55 | } |
| 56 | |
| 57 | const resize = () => { |
| 58 | show.canvas.width = Math.round(innerWidth * show.scale); |
| 59 | show.canvas.height = Math.round(innerHeight * show.scale); |
| 60 | show.canvas.style["width"] = show.canvas.width; |
| 61 | show.canvas.style["height"] = show.canvas.height; |
| 62 | show.resize(show.context, show.canvas); |
| 63 | }; |
| 64 | |
| 65 | let t = 0; |
| 66 | const tick = () => { |
| 67 | t += show.speed; |
| 68 | while (t > 0) { |
| 69 | if (!show.paused) show.tick(show.context, show.canvas); |
| 70 | show.supertick(show.context, show.canvas); |
| 71 | t--; |
| 72 | } |
| 73 | |
| 74 | requestAnimationFrame(tick); |
| 75 | }; |
| 76 | |
| 77 | addEventListener("resize", resize); |
| 78 | addEventListener("keydown", (e) => { |
| 79 | if (e.key === " ") show.paused = !show.paused; |
| 80 | }); |
| 81 | |
| 82 | resize(); |
| 83 | requestAnimationFrame(tick); |
| 84 | }; |
| 85 | } |