Added jquery to GUI to get some nice utilities. The intro video now p…

…lays

.gitignore

@@ -9,6 +9,7 @@ assets/*
 # asset symlinks
 /Fonts
 /Textures
+/jsvendor
 
 
 # ue4 stuff

CMakeLists.txt

@@ -144,6 +144,10 @@ set_property(DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}" PROPERTY
 file(GLOB THRIVE_SCRIPTS "scripts/*")
 file(COPY ${THRIVE_SCRIPTS} DESTINATION "${PROJECT_BINARY_DIR}/bin/Data/Scripts")
 
+# Copy javascript libraries
+file(GLOB THRIVE_VENDOR_SCRIPTS "assets/jsvendor/*")
+file(COPY ${THRIVE_VENDOR_SCRIPTS} DESTINATION "${PROJECT_BINARY_DIR}/bin/Data/jsvendor")
+
 # Copy other data assets
 file(GLOB THRIVE_LOOKNFEEL "assets/gui/looknfeel/*")
 file(COPY ${THRIVE_LOOKNFEEL} DESTINATION

SetupThrive.rb

@@ -167,6 +167,9 @@ def parseExtraArgs
   runSystemSafe "cmd", "/c", "mklink", "/J",
                 convertPathToWindows(File.join(ProjectDir, "Fonts")),
                 convertPathToWindows(File.join(ProjectDir, "assets", "fonts"))
+  runSystemSafe "cmd", "/c", "mklink", "/J",
+                convertPathToWindows(File.join(ProjectDir, "jsvendor")),
+                convertPathToWindows(File.join(ProjectDir, "assets", "jsvendor"))  
 else
   if !File.exists? File.join(ProjectDir, "Textures")
     FileUtils.ln_sf File.join(ProjectDir, "assets", "textures"),
@@ -177,6 +180,11 @@ def parseExtraArgs
     FileUtils.ln_sf File.join(ProjectDir, "assets", "fonts"),
                     File.join(ProjectDir, "Fonts")
   end
+
+  if !File.exists? File.join(ProjectDir, "jsvendor")
+    FileUtils.ln_sf File.join(ProjectDir, "assets", "jsvendor"),
+                    File.join(ProjectDir, "jsvendor")
+  end
 end
 
 success "Thrive folder and assets are good to go"

scripts/gui/gui_common.js

@@ -13,3 +13,34 @@ function requireEngine(msg){
         alert("This method only works inside Thrive, msg: " + msg);
     }
 }
+
+//! Hides the loading logo
+function hideLoadingLogo(){
+    document.getElementById("loadingLogo").style.display = "none";
+}
+
+//! Shows the loading logo
+function showLoadingLogo(){
+    document.getElementById("loadingLogo").style.display = "flex";
+}
+
+
+//! Plays a video with the video player
+function playVideo(file, ondone){
+
+    document.getElementById("videoPlayer").style.display = "flex";
+    let videoElement = document.getElementById("videoPlayersVideo");
+
+    // Start playing as autoplay is on
+    videoElement.src = file;
+
+    // Set end event
+    $(videoElement).one("ended", function(event){
+        event.stopPropagation();
+
+        // TODO: cool animation
+        document.getElementById("videoPlayer").style.display = "none";
+
+        ondone();
+    });
+}

scripts/gui/main_menu.js

@@ -5,8 +5,14 @@
 //! Setup callbacks for buttons
 function runMenuSetup(){
 
-    document.getElementById("quitButton").addEventListener("click", quitGame, true);
-    document.getElementById("newGameButton").addEventListener("click", newGame, true);
+    document.getElementById("quitButton").addEventListener("click", (event) => {
+        event.stopPropagation();
+        quitGame();
+    }, true);
+    document.getElementById("newGameButton").addEventListener("click", (event) => {
+        event.stopPropagation();
+        newGame();
+    }, true);
 
 
 
@@ -18,8 +24,9 @@ function runMenuSetup(){
 
         }, () => {});
 
-        // TODO: play intro video (this could theoretically work in a
-        // browser but would be a bit annoying to work on)
+        // (this would theoretically work in a browser but would be a bit annoying to work on)
+        // Start intro video
+        playVideo("../../Videos/intro.mkv", onIntroEnded);
 
     } else {
         document.getElementById("versionNumber").textContent = "Thrive GUI in browser";
@@ -33,7 +40,15 @@ function runMenuSetup(){
     //
     // Use these to immediately test some specific menu
     //
-    // newGame();
+    // onMicrobeIntroEnded();
+}
+
+function onIntroEnded(){
+
+    if(isInEngine()){
+
+        // Start the menu music
+    }
 }
 
 function quitGame(){
@@ -43,9 +58,18 @@ function quitGame(){
 
 function newGame(){
 
+    // TODO: show intro
+
+    onMicrobeIntroEnded();
+}
+
+function onMicrobeIntroEnded(){
+
     if(isInEngine()){
+
+        // TODO: make sure no video is playing
+
 
-        // TODO: show intro
         Thrive.start();
 
     } else {

scripts/gui/thrive_gui.html

@@ -6,22 +6,38 @@
     <meta name="description" content="The HTML file with all the thrive GUI stuff in it">
 
     <link rel="stylesheet" href="thrive_style.css">
+    <script src="../../jsvendor/jquery-3.3.1.min.js"></script>
     <script src="gui_common.js"></script>
     <script src="main_menu.js"></script>
   </head>
   <body>
 
     <script>
       // Document.onload doesn't work here
-      window.onload = function(){
+      $(document).ready(function(){
           // Run setups from the individual scripts
           runMenuSetup();
+
+          // Hide the loading logo
+          hideLoadingLogo();
+
           if(!isInEngine()){
               console.log("GUI is not inside Thrive process");
           }
-      }
+      });
     </script>
 
+    <!-- This blocks out everything until javascript has loaded (shows the tasteful thrive logo) -->
+    <div id="loadingLogo" class="FullScreen"
+         style="z-index: 20; background: black;">
+      <div class="Logo"></div>
+    </div>
+
+    <!-- Videoplayer -->
+    <div id="videoPlayer" class="FullScreen" style="display: none; z-index: 10; background: black;">
+      <video id="videoPlayersVideo" autoplay="true"></video>
+    </div>
+
     <!-- All the menus for easy disabling -->
     <div id="topLevelMenuContainer" class="MenuContainer">
       <div class="BackgroundStars"></div>

scripts/gui/thrive_style.css

@@ -56,12 +56,30 @@ button{
     background-color: blue;
 }
 
+/* Videos are centered inside their elements and made to fit */
+video {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
 /* Common quick classes */
 .Centered{
     text-align: center;
     vertical-align: middle;
 }
 
+/* Centered fullscreen container */
+.FullScreen{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 /* Menu things */
 .MenuContainer{
     display: flex;