add basic style

1 files changed, 40 insertions, 3 deletions

diff --git a/main.js b/main.js
index 3ca2f27..a052d74 100644
--- a/main.js
+++ b/main.js
@@ -4,13 +4,32 @@ import { setupLevel, setupLevelUi } from './level.js';
 window.onload = () => {
 
   const root = document.getElementById('root');
+  root.classList.add('center');
+
+  const title = document.createElement('h1');
+  title.innerText = 'GENERAL PRODUCTS';
+  root.appendChild(title);
+
+  const logo = document.createElement('h1');
+  logo.classList.add('logo');
+  logo.innerText = '※';
+  root.appendChild(logo);
+
+  const title2 = document.createElement('h2');
+  title2.innerText = 'AUTOMATED MONOPOLE HARVESTER (AMH) HYPERSPACE NAVIGATIONAL SERVICES';
+  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.';
+  root.appendChild(paragraph);
 
   const start = document.createElement('input');
   start.type = 'button';
-  start.value = 'Start';
+  start.value = 'Connect to AMH';
   start.onclick = () => {
+    root.classList.remove('center');
+    root.innerText = '';
     const audio = new AudioContext();
-    root.removeChild(start);
 
     const musicGain = audio.createGain();
     const addMusic = (music, id) => {
@@ -35,9 +54,27 @@ window.onload = () => {
     )
     musicList[0].element.play();
 
+    const sfx = {};
+    sfx.buttonEnterAudio = document.getElementById('sfx-buttonenter');
+    sfx.buttonClickAudio = document.getElementById('sfx-buttonclick');
+    audio.createMediaElementSource(sfx.buttonEnterAudio).connect(audio.destination);
+    audio.createMediaElementSource(sfx.buttonClickAudio).connect(audio.destination);
+
+    sfx.resourceAudio = document.getElementById('sfx-resource');
+    sfx.resourceSource = audio.createMediaElementSource(sfx.resourceAudio);
+    sfx.resourceSource.connect(audio.destination);
+  
+    sfx.doneAudio = document.getElementById('sfx-done');
+    sfx.doneSource = audio.createMediaElementSource(sfx.doneAudio);
+    sfx.doneSource.connect(audio.destination);
+  
+    sfx.wrongAudio = document.getElementById('sfx-wrong');
+    sfx.wrongSource = audio.createMediaElementSource(sfx.wrongAudio);
+    sfx.wrongSource.connect(audio.destination);
+
     // const level = setupLevel([[2, 2], [3,3]], [7, 7]);
     // const ui = setupLevelUi(level, root, audio);
-    setupLevelSelectUi(root, audio);
+    setupLevelSelectUi(root, sfx);
   };
   root.appendChild(start);
 }