implement level loading animation

1 files changed, 32 insertions, 14 deletions

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;
 }