Made some basic boxes for the GUI

yowshi · Apr 14, 2018 · d6494fd · d6494fd
1 parent 2419e14
commit d6494fd
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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