2 files changed, 69 insertions, 14 deletions

diff --git a/level.js b/level.js
index ba1032f..5a20ef5 100644
--- a/level.js
+++ b/level.js
@@ -32,7 +32,7 @@ export function setupLevel(resources, home) {
 
 
 export function setupLevelUi(level, root, sfx) {
-  const ui = { sfx };
+  const ui = { root, sfx };
 
   root.classList.add('center');
   ui.launchButton = document.createElement('input');
@@ -187,16 +187,48 @@ function finishLevel(ui, level, fail) {
   if (fail) {
     ui.sfx.wrongAudio.currentTime = 0;
     ui.sfx.wrongAudio.play();
-    ui.message.innerText = 'did not arrive at destination';
+    showAlert(ui, 'trajectory does not reach AMH processor');
+    // 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!';
+    showAlert(ui, 'monopole harvesting failure');
+    // ui.message.innerText = 'resources remaining!';
   } else {
     ui.sfx.doneAudio.currentTime = 0;
     ui.sfx.doneAudio.play();
-    ui.message.innerText = 'mission complete!';
+    showAlert(ui, 'navigation successful: contract complete');
+    // ui.message.innerText = 'mission complete!';
     level.completed = true;
   }
   level.resources.forEach(x => x.collected = false);
 }
+
+
+function showAlert(ui, text) {
+  const div = document.createElement('div');
+  div.classList.add('center-screen-container');
+  const div2 = document.createElement('div');
+  div2.classList.add('center-screen');
+  div.appendChild(div2);
+  const p = document.createElement('p');
+  p.classList.add('alert-box');
+  p.innerText = text;
+  div2.appendChild(p);
+  ui.root.appendChild(div);
+
+  const button = document.createElement('input');
+  button.type = 'button';
+  button.value = 'OK';
+  button.onmouseenter = () => {
+    ui.sfx.buttonEnterAudio.currentTime = 0;
+    ui.sfx.buttonEnterAudio.play();
+  }
+  button.onclick = () => {
+    ui.sfx.buttonClickAudio.currentTime = 0;
+    ui.sfx.buttonClickAudio.play();
+    ui.root.removeChild(div);
+  }
+  p.appendChild(document.createElement('br'));
+  p.appendChild(button);
+}
diff --git a/style.css b/style.css
index 69e4d75..fb4fec7 100644
--- a/style.css
+++ b/style.css
@@ -26,23 +26,47 @@ body {
 }
 
 #root {
-  width: min(90vw, 50em);
+  width: min(90vw, 800px);
   margin: auto;
   border-left: 1px solid white;
   border-right: 1px solid white;
-  padding: 0.5em;
+  padding: 8px;
   min-height: 95vh;
 }
 
+.center-screen-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+}
+
+.center-screen {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 95vh;
+}
+
+.alert-box {
+  border: 2px solid white;
+  background-color: black;
+  padding: 16px;
+  max-width: min(80vw, 600px);
+  font-size: 24px;
+}
+
 h1 {
-  font-size: 4em;
+  font-size: 32px;
 }
 h2 {
-  font-size: 3em;
+  font-size: 24px;
 }
 
 p {
-  font-size: 2em;
+  font-size: 16px;
   padding: 1em;
 }
 
@@ -56,15 +80,14 @@ input {
   font-variant-caps: small-caps;
   color: white;
   background-color: black;
-  font-size: 1em;
-  padding: 0.5em;
-  margin: 0.5em;
+  font-size: 16px;
+  padding: 8px;
+  margin: 8px;
   font-weight: bold;
   border: 2px solid;
 }
 input[type=button] {
-  padding: 0.6em;
-  font-size: 1.3em;
+  font-size: 20px;
 }
 input[type=button]:hover {
   color: black;