add basic style

1 files changed, 59 insertions, 48 deletions

diff --git a/level.js b/level.js
index 5671c4c..ba1032f 100644
--- a/level.js
+++ b/level.js
@@ -20,7 +20,9 @@ export function setupLevel(resources, home) {
     completed: false,
     index: 0,
     equations: {
+      xStr: X_START,
       x: math.compile(X_START),
+      yStr: Y_START,
       y: math.compile(Y_START),
     },
   };
@@ -29,45 +31,31 @@ export function setupLevel(resources, home) {
 }
 
 
-export function setupLevelUi(level, root, audio) {
-  const ui = { audio };
-
-  const buttonEnterAudio = document.getElementById('sfx-buttonenter');
-  const buttonClickAudio = document.getElementById('sfx-buttonclick');
-  audio.createMediaElementSource(buttonEnterAudio).connect(audio.destination);
-  audio.createMediaElementSource(buttonClickAudio).connect(audio.destination);
-
-  ui.resourceAudio = document.getElementById('sfx-resource');
-  ui.resourceSource = audio.createMediaElementSource(ui.resourceAudio);
-  ui.resourceSource.connect(audio.destination);
-
-  ui.doneAudio = document.getElementById('sfx-done');
-  ui.doneSource = audio.createMediaElementSource(ui.doneAudio);
-  ui.doneSource.connect(audio.destination);
-
-  ui.wrongAudio = document.getElementById('sfx-wrong');
-  ui.wrongSource = audio.createMediaElementSource(ui.wrongAudio);
-  ui.wrongSource.connect(audio.destination);
+export function setupLevelUi(level, root, sfx) {
+  const ui = { sfx };
 
+  root.classList.add('center');
   ui.launchButton = document.createElement('input');
   ui.launchButton.type = 'button';
   ui.launchButton.value = 'Launch';
   ui.launchButton.onmouseenter = () => {
-    buttonEnterAudio.load();
-    buttonEnterAudio.play();
+    sfx.buttonEnterAudio.currentTime = 0;
+    sfx.buttonEnterAudio.play();
   }
   ui.launchButton.onclick = () => {
-    buttonClickAudio.load();
-    buttonClickAudio.play();
+    sfx.buttonClickAudio.currentTime = 0;
+    sfx.buttonClickAudio.play();
     ui.message.innerText = '';
     level.running = false;
     setTimeout(() => { level.running=true; stepLevel(ui, level, 0); }, 20);
   }
 
   ui.xeq = document.createElement('input');
-  ui.xeq.value = X_START;
+  ui.xeq.id = 'xeq';
+  ui.xeq.value = level.equations.xStr;
   ui.xeq.onchange = (e) => {
     try {
+      level.equations.xStr = e.target.value;
       level.equations.x = math.compile(e.target.value);
     } catch(err) { }
     level.running = false;
@@ -76,11 +64,15 @@ export function setupLevelUi(level, root, audio) {
   };
   ui.xeq.onkeydown = ui.xeq.onchange;
   ui.xeq.onkeyup = ui.xeq.onchange;
+  ui.xeqLabel = document.createElement('label');
+  ui.xeqLabel.htmlFor = 'xeq';
+  ui.xeqLabel.innerText = 'x(t) = ';
 
   ui.yeq = document.createElement('input');
-  ui.yeq.value = Y_START;
+  ui.yeq.value = level.equations.yStr;
   ui.yeq.onchange = (e) => {
     try {
+      level.equations.yStr = e.target.value;
       level.equations.y = math.compile(e.target.value);
     } catch(err) { }
     level.running = false;
@@ -89,40 +81,54 @@ export function setupLevelUi(level, root, audio) {
   };
   ui.yeq.onkeydown = ui.yeq.onchange;
   ui.yeq.onkeyup = ui.yeq.onchange;
+  ui.yeqLabel = document.createElement('label');
+  ui.yeqLabel.htmlFor = 'yeq';
+  ui.yeqLabel.innerText = 'y(t) = ';
 
   ui.message = document.createElement('div');
   ui.id = "level-message";
 
-  root.appendChild(ui.launchButton);
+  root.appendChild(ui.xeqLabel);
   root.appendChild(ui.xeq);
+  root.appendChild(document.createElement('br'));
+  root.appendChild(ui.yeqLabel);
   root.appendChild(ui.yeq);
+  root.appendChild(document.createElement('br'));
+  root.appendChild(ui.launchButton);
   root.appendChild(ui.message);
 
   ui.canvas = document.createElement('canvas');
-  ui.canvas.width = 600;
-  ui.canvas.height = 600;
+  const setCanvasSize = () => {
+    const size = Math.min(0.7*window.innerHeight, 0.9*root.offsetWidth);
+    ui.canvas.width = size;
+    ui.canvas.height = size;
+    ui.ctx = ui.canvas.getContext('2d');
+    ui.ctx.translate(ui.canvas.width/2, ui.canvas.height/2)
+    ui.ctx.scale(ui.canvas.width/20, -ui.canvas.height/20);
+    render(ui.ctx, level, 0);
+  }
+  setCanvasSize();
+  window.onresize = setCanvasSize;
   root.appendChild(ui.canvas);
+  root.appendChild(document.createElement('br'));
 
   ui.returnBtn = document.createElement('input');
   ui.returnBtn.type = 'button';
-  ui.returnBtn.value = 'Return';
+  ui.returnBtn.value = '↲ Return';
   ui.returnBtn.onmouseenter = () => {
-    buttonEnterAudio.load();
-    buttonEnterAudio.play();
+    sfx.buttonEnterAudio.currentTime = 0;
+    sfx.buttonEnterAudio.play();
   }
   ui.returnBtn.onclick = () => {
-    buttonClickAudio.load();
-    buttonClickAudio.play();
+    sfx.buttonClickAudio.currentTime = 0;
+    sfx.buttonClickAudio.play();
     root.innerText = '';
-    setupLevelSelectUi(root, audio);
+    root.classList.remove('center');
+    window.onresize = () => {};
+    setupLevelSelectUi(root, sfx);
   }
   root.appendChild(ui.returnBtn);
 
-  ui.ctx = ui.canvas.getContext('2d');
-  ui.ctx.translate(ui.canvas.width/2, ui.canvas.height/2)
-  ui.ctx.scale(ui.canvas.width/20, -ui.canvas.height/20);
-
-  render(ui.ctx, level, 0);
   return ui;
 }
 
@@ -137,8 +143,8 @@ function stepLevel(ui, level, index) {
     .map(([x, i]) => [ distance(pos, x.position), i ])
     .forEach(([d, i]) => {
       if (d < 0.4) { 
-        ui.resourceAudio.load();
-        ui.resourceAudio.play();
+        ui.sfx.resourceAudio.currentTime = 0;
+        ui.sfx.resourceAudio.play();
         level.resources[i].collected = true; 
       }
     });
@@ -147,11 +153,12 @@ function stepLevel(ui, level, index) {
 
   if (distance(pos, level.home) < 0.4) {
     level.running = false;
-    finishLevel(ui, level);
+    finishLevel(ui, level, false);
     render(ui.ctx, level, 0);
   } else if (level.running && index < level.path.length-1) {
     setTimeout(() => stepLevel(ui, level, index+1), 1);
   } else {
+    finishLevel(ui, level, true);
     level.running = false;
     render(ui.ctx, level, 0);
   }
@@ -175,15 +182,19 @@ function distance(p1, p2) {
 }
 
 
-function finishLevel(ui, level) {
+function finishLevel(ui, level, fail) {
   const uncollected = level.resources.reduce((acc, { collected }) => acc + (collected ? 0 : 1), 0);
-  if (uncollected > 0) {
-    ui.wrongAudio.load();
-    ui.wrongAudio.play();
+  if (fail) {
+    ui.sfx.wrongAudio.currentTime = 0;
+    ui.sfx.wrongAudio.play();
+    ui.message.innerText = 'did not arrive at destination';
+  } else if (uncollected > 0) {
+    ui.sfx.wrongAudio.currentTime = 0;
+    ui.sfx.wrongAudio.play();
     ui.message.innerText = 'resources remaining!';
   } else {
-    ui.doneAudio.load();
-    ui.doneAudio.play();
+    ui.sfx.doneAudio.currentTime = 0;
+    ui.sfx.doneAudio.play();
     ui.message.innerText = 'mission complete!';
     level.completed = true;
   }