diff options
Diffstat (limited to 'level.js')
| -rw-r--r-- | level.js | 107 |
1 files changed, 59 insertions, 48 deletions
@@ -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; } |