beginning to add iframe execution

dispatch.js

@@ -100,16 +100,26 @@ const ACTIONS = {
  included[asset.name] = asset.data;
  })
 
+ document.querySelector("iframe").contentWindow.postMessage({ 
+ prog: string, 
+ assets: state.assets, 
+ show: state.show 
+ }, '*');
+
+
  try { // TODO can we run this in an iframe?
  new Function(...Object.keys(included), string)(
  ...Object.values(included)
  );
+
+
  } catch (e) {
  console.log(e);
  state.error = true;
  const str = e.stack;
  state.logs.push(str);
  }
+
  dispatch("RENDER");
  document.querySelector(".game-canvas").focus();
  }

init.js

@@ -58,13 +58,96 @@ function initVert() {
  }
 }
 
+function setGameIframe() {
+ const iframe = document.querySelector(".game-iframe");
+ const string = `
+ <style>
+ html, body {
+ margin: 0px;
+ }
+
+ .game-canvas-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: blue;
+ }
+ </style>
+ <script defer type="module">
+ import { Engine } from "https://localhost:8080/Engine.js";
+ import { playTune, loopTune } from "https://localhost:8080/tunePlayers.js";
+
+ let currentEngine = null;
+ let tunePlayers = [];
+
+ window.onmessage = function(e) {
+ const { data } = e;
+ const { assets, prog, show } = data;
+
+ if (tunePlayers.length > 0) {
+ tunePlayers.forEach(x => x.end()); 
+ tunePlayers = [];
+ }
+
+ const gameCanvas = document.querySelector(".game-canvas");
+
+ Engine.show = show;
+
+ const included = {
+ playTune() {
+ const tunePlayer = playTune(...arguments);
+ tunePlayers.push(tunePlayer);
+
+ return tunePlayer;
+ },
+ 
+ loopTune() {
+ const tunePlayer = loopTune(...arguments);
+ tunePlayers.push(tunePlayer);
+
+ return tunePlayer;
+ },
+ gameCanvas,
+ createEngine(...args) {
+ if (currentEngine) cancelAnimationFrame(currentEngine._animId);
+ currentEngine = new Engine(...args);
+ return currentEngine;
+ },
+ };
+
+ assets.forEach(asset => {
+ included[asset.name] = asset.data;
+ })
+
+ try {
+ new Function(...Object.keys(included), prog)(
+ ...Object.values(included)
+ );
+ } catch (err) {
+ e.source.postMessage(err, e.origin);
+ }
+
+ };
+ </script>
+ <div class="game-canvas-container">
+ <canvas class="game-canvas" width="1" height="1"></canvas>
+ </div>
+ `
+ var blob = new Blob([string], { type: 'text/html' });
+ iframe.src = URL.createObjectURL(blob);
+}
+
 export async function init(state) {
  initVert()
 
  dispatch("RENDER");
  state.codemirror = document.querySelector("#code-editor");
  events(state);
 
+ setGameIframe();
+
  const saved = await loadFromAirtable() ||
  await loadFromS3() ||
  await loadFromStorage() ||

pixel-editor/pixel-editor.js

@@ -20,8 +20,6 @@ function RGBA_to_hex([r, g, b, a]) {
  return "#" + r + g + b + a;
 }
 
-
-
 export function createPixelEditor(target) {
  const state = {
  canvas: null,

view.js

@@ -26,6 +26,61 @@ const toggleHide = (className) =>
 // <button class="menu-option" @click=${() => toggleHide("examples")}>examples</button>
 // <button class="menu-option" @click=${() => toggleHide("options")}>options</button>
 
+const gameOutput = state => html`
+ <div class="game-output">
+ <div class="game-container">
+ <canvas
+ @mousemove=${(e) => {
+ dispatch("CANVAS_MOUSE_MOVE", {
+ content: { mouseX: e.offsetX, mouseY: e.offsetY },
+ });
+ }}
+ class="game-canvas"
+ >
+ </canvas>
+ <div class="text-container"></div>
+ </div>
+ <p
+ @click=${(e) => {
+ state.show.origin = !state.show.origin;
+ dispatch("RUN");
+ }}
+ class="output-overlay toggle-show-origin"
+ >
+ ${state.show.origin ? "[x]" : "[ ]"} show origin
+ </p>
+ <p
+ @click=${(e) => {
+ state.show.hitbox = !state.show.hitbox;
+ dispatch("RUN");
+ }}
+ class="output-overlay toggle-show-hitbox"
+ >
+ ${state.show.hitbox ? "[x]" : "[ ]"} show hitbox
+ </p>
+ <pre class="output-overlay mouse-display">
+ ${(() => {
+ const canv = document.querySelector(".game-canvas") ?? {
+ width: 100,
+ height: 100,
+ };
+ const widthChars = ("" + canv.width).length;
+ const heightChars = ("" + canv.height).length;
+ return (
+ "mouse: " +
+ ("" + state.mouseX).padStart(widthChars) +
+ " x, " +
+ ("" + state.mouseY).padStart(heightChars) +
+ " y"
+ );
+ })()}
+ </pre>
+
+ <iframe class="game-iframe"></iframe>
+
+ </div>
+`
+
 export function view(state) {
  return html`
  <style>
@@ -191,6 +246,11 @@ export function view(state) {
  align-items: center;
  color: var(--text-color);
  }
+
+ .game-iframe {
+ width: 100%;
+ height: 100%;
+ }
  </style>
  <div class="left-pane">
  <codemirror-js id="code-editor"></codemirror-js>
@@ -219,61 +279,12 @@ export function view(state) {
  </div>
  </div>
  <div class="right-pane">
- <div class="game-output">
- <div class="game-container">
- <canvas
- @mousemove=${(e) => {
- dispatch("CANVAS_MOUSE_MOVE", {
- content: { mouseX: e.offsetX, mouseY: e.offsetY },
- });
- }}
- class="game-canvas"
- >
- </canvas>
- <div class="text-container"></div>
- </div>
- <p
- @click=${(e) => {
- state.show.origin = !state.show.origin;
- dispatch("RENDER");
- }}
- class="output-overlay toggle-show-origin"
- >
- ${state.show.origin ? "[x]" : "[ ]"} show origin
- </p>
- <p
- @click=${(e) => {
- state.show.hitbox = !state.show.hitbox;
- dispatch("RENDER");
- }}
- class="output-overlay toggle-show-hitbox"
- >
- ${state.show.hitbox ? "[x]" : "[ ]"} show hitbox
- </p>
- <pre class="output-overlay mouse-display">
- ${(() => {
- const canv = document.querySelector(".game-canvas") ?? {
- width: 100,
- height: 100,
- };
- const widthChars = ("" + canv.width).length;
- const heightChars = ("" + canv.height).length;
- return (
- "mouse: " +
- ("" + state.mouseX).padStart(widthChars) +
- " x, " +
- ("" + state.mouseY).padStart(heightChars) +
- " y"
- );
- })()}
- </pre
- >
- </div>
+ ${gameOutput(state)}
  <div class="pixel-editor-container">
  <div class="list-of-sprites">
  ${state.assets.map(
  (x, i) => {
- return html.for(x)`
+ return html`
  <div
  class=${[
  "sprite-entry",