From b4c0359cd5d9788e229687f80d4df24ecdfe2a5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henri=20Hyyryl=C3=A4inen?= <henri.hyyrylainen@gmail.com>
Date: Sun, 15 Apr 2018 14:11:48 +0300
Subject: [PATCH] Added jquery to GUI to get some nice utilities. The intro
 video now plays

---
 .gitignore                   |  1 +
 CMakeLists.txt               |  4 ++++
 SetupThrive.rb               |  8 ++++++++
 scripts/gui/gui_common.js    | 31 +++++++++++++++++++++++++++++++
 scripts/gui/main_menu.js     | 36 ++++++++++++++++++++++++++++++------
 scripts/gui/thrive_gui.html  | 20 ++++++++++++++++++--
 scripts/gui/thrive_style.css | 18 ++++++++++++++++++
 7 files changed, 110 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index d20612c4782..e09bbfacf3b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ assets/*
 # asset symlinks
 /Fonts
 /Textures
+/jsvendor
 
 
 # ue4 stuff
diff --git a/CMakeLists.txt b/CMakeLists.txt
index 46f3c85e155..d9d48f056db 100644
--- a/CMakeLists.txt
+++ b/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
diff --git a/SetupThrive.rb b/SetupThrive.rb
index 03967bea8cd..3edc772b5a4 100755
--- a/SetupThrive.rb
+++ b/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"
diff --git a/scripts/gui/gui_common.js b/scripts/gui/gui_common.js
index 9aba22f99e9..b0065e2b22b 100644
--- a/scripts/gui/gui_common.js
+++ b/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();
+    });
+}
diff --git a/scripts/gui/main_menu.js b/scripts/gui/main_menu.js
index bc14d6704b6..d1a4d2a8ba7 100644
--- a/scripts/gui/main_menu.js
+++ b/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 {
diff --git a/scripts/gui/thrive_gui.html b/scripts/gui/thrive_gui.html
index 9f52e08d16a..2b2d4f0b96b 100644
--- a/scripts/gui/thrive_gui.html
+++ b/scripts/gui/thrive_gui.html
@@ -6,6 +6,7 @@
     <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>
@@ -13,15 +14,30 @@
     
     <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>
diff --git a/scripts/gui/thrive_style.css b/scripts/gui/thrive_style.css
index 1407a95680a..521e1a3c528 100644
--- a/scripts/gui/thrive_style.css
+++ b/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;