add basic style

1 files changed, 28 insertions, 12 deletions

diff --git a/levelSelect.js b/levelSelect.js
index b1f6073..0fbdbf0 100644
--- a/levelSelect.js
+++ b/levelSelect.js
@@ -3,38 +3,54 @@ 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'], 
+    setupLevel([ 
+      [-4, 4*Math.sin(0)], 
+      [0.5*Math.PI - 4, 4*Math.sin(0.5*Math.PI)], 
+      [1.0*Math.PI - 4, 4*Math.sin(1.0*Math.PI)], 
+      [1.5*Math.PI - 4, 4*Math.sin(1.5*Math.PI)], 
+    ], [2.0*Math.PI - 4, 4*Math.sin(2.0*Math.PI)]),
+  ],
 };
 
-export function setupLevelSelectUi(root, 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);
-
+export function setupLevelSelectUi(root, sfx) {
   const levelList = document.createElement('ol');
   const levelPicker = name => {
     const [ dependencies, level ] = levels[name];
     const allDependenciesSatisfied = dependencies.map(x => levels[x][1].completed).reduce((acc, x) => acc && x, true);
-    if (allDependenciesSatisfied) {
+    // if (allDependenciesSatisfied) {
+    if (true) {
       const button = document.createElement('input');
       button.type = 'button';
       button.value = name;
       button.onmouseenter = () => {
-        buttonEnterAudio.load();
-        buttonEnterAudio.play();
+        sfx.buttonEnterAudio.currentTime = 0;
+        sfx.buttonEnterAudio.play();
       }
       button.onclick = () => {
-        buttonClickAudio.load();
-        buttonClickAudio.play();
+        sfx.buttonClickAudio.currentTime = 0;
+        sfx.buttonClickAudio.play();
         root.innerText = '';
-        setupLevelUi(level, root, audio);
+        setupLevelUi(level, root, sfx);
       }
       const li = document.createElement('li');
       li.appendChild(button);
+      if (level.completed) {
+        li.appendChild(document.createTextNode('[complete]'));
+      }
       levelList.appendChild(li);
     }
   }
 
   [...Object.keys(levels)].forEach(levelPicker);
+  const header = document.createElement('h1');
+  header.classList.add('center');
+  header.innerText = 'AVAILABLE CONTRACTS';
+  root.appendChild(header);
+  const p = document.createElement('p');
+  p.innerText = 'Please select a General Products AMH hyperspace navigation contract from the list below.';
+  root.appendChild(p);
   root.appendChild(levelList);
 }