From 03528a25215330d3b00cabdb1bbe7ce701e1bfeb Mon Sep 17 00:00:00 2001 From: sanine Date: Sat, 6 Jul 2024 20:16:48 -0500 Subject: implement level loading animation --- index.html | 3 ++- level.js | 46 ++++++++++++++++++++++++++++++++-------------- levelSelect.js | 20 ++++++++++++++------ main.js | 10 ++++++---- render.js | 10 +++++++++- style.css | 4 ++++ 6 files changed, 67 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index fba6177..485a79e 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - robotic + Hyperspace Navigator @@ -23,6 +23,7 @@ +
diff --git a/level.js b/level.js index 5a20ef5..637694f 100644 --- a/level.js +++ b/level.js @@ -37,7 +37,7 @@ export function setupLevelUi(level, root, sfx) { root.classList.add('center'); ui.launchButton = document.createElement('input'); ui.launchButton.type = 'button'; - ui.launchButton.value = 'Launch'; + ui.launchButton.value = 'launch'; ui.launchButton.onmouseenter = () => { sfx.buttonEnterAudio.currentTime = 0; sfx.buttonEnterAudio.play(); @@ -88,18 +88,29 @@ export function setupLevelUi(level, root, sfx) { ui.message = document.createElement('div'); ui.id = "level-message"; - 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); + const appearSound = () => { sfx.listAppearAudio.currentTime = 0; sfx.listAppearAudio.play(); }; + setTimeout(() => { + root.appendChild(ui.xeqLabel); + root.appendChild(ui.xeq); + root.appendChild(document.createElement('br')); + appearSound(); + }, 100); + setTimeout(() => { + root.appendChild(ui.yeqLabel); + root.appendChild(ui.yeq); + root.appendChild(document.createElement('br')); + appearSound(); + }, 200); + setTimeout(() => { + root.appendChild(ui.launchButton); + root.appendChild(ui.message); + appearSound(); + }, 300); ui.canvas = document.createElement('canvas'); + ui.canvas.classList.add('bordered'); const setCanvasSize = () => { - const size = Math.min(0.7*window.innerHeight, 0.9*root.offsetWidth); + const size = Math.min(0.8*window.innerHeight, 0.9*root.offsetWidth); ui.canvas.width = size; ui.canvas.height = size; ui.ctx = ui.canvas.getContext('2d'); @@ -109,12 +120,16 @@ export function setupLevelUi(level, root, sfx) { } setCanvasSize(); window.onresize = setCanvasSize; - root.appendChild(ui.canvas); - root.appendChild(document.createElement('br')); + setTimeout(() => { + root.appendChild(ui.canvas); + root.appendChild(document.createElement('br')); + appearSound(); + }, 400); + ui.returnBtn = document.createElement('input'); ui.returnBtn.type = 'button'; - ui.returnBtn.value = '↲ Return'; + ui.returnBtn.value = '↲ return'; ui.returnBtn.onmouseenter = () => { sfx.buttonEnterAudio.currentTime = 0; sfx.buttonEnterAudio.play(); @@ -127,7 +142,10 @@ export function setupLevelUi(level, root, sfx) { window.onresize = () => {}; setupLevelSelectUi(root, sfx); } - root.appendChild(ui.returnBtn); + setTimeout(() => { + root.appendChild(ui.returnBtn); + appearSound(); + }, 500); return ui; } diff --git a/levelSelect.js b/levelSelect.js index 0fbdbf0..2fe3d52 100644 --- a/levelSelect.js +++ b/levelSelect.js @@ -1,11 +1,11 @@ import{ setupLevel, setupLevelUi } from './level.js'; const levels = { - 'Initial Jump': [ [], setupLevel([], [8, 0]) ], - 'Monopole Mining': [ ['Initial Jump'], setupLevel([[3, 3]], [8,8]) ], - 'Parabolic': [ ['Initial Jump', 'Monopole Mining'], setupLevel([[-2, 4], [0,0], [2, 4]], [3,9]) ], - 'Sinusoidal': [ - ['Initial Jump', 'Monopole Mining'], + 'initial jump': [ [], setupLevel([], [8, 0]) ], + 'monopole harvesting': [ ['initial jump'], setupLevel([[3, 3]], [8,8]) ], + 'parabolic': [ ['initial jump', 'monopole harvesting'], setupLevel([[-2, 4], [0,0], [2, 4]], [3,9]) ], + 'sinusoidal': [ + ['initial jump', 'monopole harvesting'], setupLevel([ [-4, 4*Math.sin(0)], [0.5*Math.PI - 4, 4*Math.sin(0.5*Math.PI)], @@ -44,7 +44,15 @@ export function setupLevelSelectUi(root, sfx) { } } - [...Object.keys(levels)].forEach(levelPicker); + let time = 0; + [...Object.keys(levels)].forEach(name => { + setTimeout(() => { + sfx.listAppearAudio.currentTime = 0; + sfx.listAppearAudio.play(); + levelPicker(name); + }, 100 * time + 100) + time += 1; + }); const header = document.createElement('h1'); header.classList.add('center'); header.innerText = 'AVAILABLE CONTRACTS'; diff --git a/main.js b/main.js index a052d74..0415b29 100644 --- a/main.js +++ b/main.js @@ -20,12 +20,12 @@ window.onload = () => { root.appendChild(title2); const paragraph = document.createElement('p'); - paragraph.innerText = 'Greetings, navigator! Thank you for helping us to program the hyperspace engines of our Automated Monopole Harvester (AMH) platforms. By doing so, you help ensure stable antimatter production throughout the Nine Worlds.'; + paragraph.innerText = 'greetings, navigator! thank you for helping us to program the hyperspace engines of our automated monopole harvester (AMH) platforms. by doing so, you help ensure stable antimatter production throughout the eight worlds.'; root.appendChild(paragraph); const start = document.createElement('input'); start.type = 'button'; - start.value = 'Connect to AMH'; + start.value = 'connect to AMH'; start.onclick = () => { root.classList.remove('center'); root.innerText = ''; @@ -40,11 +40,11 @@ window.onload = () => { } musicGain.gain.value = 0.5; const musicList = [ + 'music-aeroplane', 'music-minute', 'music-starboard', - 'music-cribwhistling', 'music-swish', - 'music-aeroplane', + 'music-cribwhistling', ].reduce(addMusic, []); musicList.forEach( ({ element }, i) => element.addEventListener( @@ -57,8 +57,10 @@ window.onload = () => { const sfx = {}; sfx.buttonEnterAudio = document.getElementById('sfx-buttonenter'); sfx.buttonClickAudio = document.getElementById('sfx-buttonclick'); + sfx.listAppearAudio = document.getElementById('sfx-listappear'); audio.createMediaElementSource(sfx.buttonEnterAudio).connect(audio.destination); audio.createMediaElementSource(sfx.buttonClickAudio).connect(audio.destination); + audio.createMediaElementSource(sfx.listAppearAudio).connect(audio.destination); sfx.resourceAudio = document.getElementById('sfx-resource'); sfx.resourceSource = audio.createMediaElementSource(sfx.resourceAudio); diff --git a/render.js b/render.js index 5fde9d1..126d6be 100644 --- a/render.js +++ b/render.js @@ -99,7 +99,15 @@ export function drawMark(ctx, mark, x, y) { ctx.lineWidth = 0.1; ctx.beginPath(); - ctx.arc(x, y, 0.4, 0, 2*Math.PI); + if (mark === '+') { + ctx.arc(x, y, 0.4, 0, 2*Math.PI); + } else { + ctx.moveTo(x+0.4, y); + ctx.lineTo(x, y+0.4); + ctx.lineTo(x-0.4, y); + ctx.lineTo(x, y-0.4); + ctx.closePath(); + } ctx.stroke(); ctx.textAlign = 'center'; diff --git a/style.css b/style.css index fb4fec7..41f7ffd 100644 --- a/style.css +++ b/style.css @@ -58,6 +58,10 @@ body { font-size: 24px; } +.bordered { + border: 2px solid white; +} + h1 { font-size: 32px; } -- cgit v1.2.1