From d6494fd47086a2d6beee71dc48e190a9f4aa39b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henri=20Hyyryl=C3=A4inen?= <henri.hyyrylainen@gmail.com>
Date: Sat, 14 Apr 2018 15:05:11 +0300
Subject: [PATCH] Made some basic boxes for the GUI

---
 scripts/gui/main_menu.js     |  7 +++++++
 scripts/gui/thrive_gui.html  | 24 ++++++++++++++++++++++--
 scripts/gui/thrive_style.css | 17 ++++++++++++++++-
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/scripts/gui/main_menu.js b/scripts/gui/main_menu.js
index fbc9691dc08..bc14d6704b6 100644
--- a/scripts/gui/main_menu.js
+++ b/scripts/gui/main_menu.js
@@ -26,7 +26,14 @@ function runMenuSetup(){
 
         // Background to be black to fix the white text and cursor not showing up well
         document.getElementsByTagName("body")[0].style.background = "black";
+
+
     }
+    
+    //
+    // Use these to immediately test some specific menu
+    //
+    // newGame();
 }
 
 function quitGame(){
diff --git a/scripts/gui/thrive_gui.html b/scripts/gui/thrive_gui.html
index 77950b9c42b..9f52e08d16a 100644
--- a/scripts/gui/thrive_gui.html
+++ b/scripts/gui/thrive_gui.html
@@ -42,13 +42,33 @@
       </div>
 
       <span id="versionNumber" style="position: absolute; right: 0px; bottom: 0px;">
-        Not set
+        JavaScript not loaded...
       </span>
     </div>
 
     <!-- Microbe stage GUI -->
     <div id="topLevelMicrobeStage" style="display: none;">
-      <h1>Microbe stage</h1>
+      <!-- Top left box -->
+      <div id="microbeHealthBox" class="Panel"
+           style="position: absolute; top: 0px: left: 0px; width: 30%; height: 60px;"></div>
+
+      <!-- Bottom bar -->
+      <div id="microbeBottomBar" class="Panel"
+           style="position: absolute; bottom: 0px; left: 0px; width: 100%; height: 60px;">
+        <span class="Centered">Menu</span>
+      </div>
+
+      <!-- Compounds panel -->
+      <div id="compoundsPanel" class="Panel"
+           style="position: absolute; right: 0px; width: 30%; height: 30%; bottom: 60px;">
+        <h1>Compounds</h1>
+      </div>
+
+      <!-- editor button -->
+      <div id="microbeToEditorButton" class="Panel"
+           style="position: absolute; top: 0px; right: 0px; width: 120px; height: 90px;">
+        <span class="Centered">Editor</span>
+      </div>
     </div>
   </body>
 </html>
diff --git a/scripts/gui/thrive_style.css b/scripts/gui/thrive_style.css
index 0ee5adf839f..1407a95680a 100644
--- a/scripts/gui/thrive_style.css
+++ b/scripts/gui/thrive_style.css
@@ -47,10 +47,20 @@ html{
     cursor: url("../../Textures/gui/cursors/default.png"), auto;
 }
 
+body{
+    /* Remove borders around the content */
+    margin: 0px;
+}
+
 button{
     background-color: blue;
 }
 
+/* Common quick classes */
+.Centered{
+    text-align: center;
+    vertical-align: middle;
+}
 
 /* Menu things */
 .MenuContainer{
@@ -73,7 +83,6 @@ button{
     height: 40px;
     /* margin-left:-110px;*/
     margin-bottom:5px;
-    color: white;
     background-color: rgb(0, 125, 125, 0.4);
     text-align: center;
     vertical-align: middle;
@@ -124,6 +133,12 @@ button{
     background-position: center; 
 }
 
+/* Cell stage things */
+/* Any type of panel like the bottom bar and health window */
+.Panel{
+    background-color: rgb(0, 125, 125, 0.4);
+}
+
 
 /* tjwhale's sample