start feature programming mode

html5/index.html

@@ -115,26 +115,41 @@
       <div class="starter-template">
         <div class="container" style="margin-bottom: 2%;">
           <div class="row" style="margin-top: 2%;">
-            <div class="row">
+            
+            <div class="row" style="margin-bottom: 1%;">
               <div class="col text-center">
-                <button type="button" id="controlAutoPilotButton" class="btn btn-light" onclick="controlAutoPilot()">Start</button>
+                <button type="button" id="controlAutoPilotButton" class="btn btn-light" onclick="startGameMode()">Game Mode</button>
               </div>
               <div class="col text-center">
-                <input type="range" id="randomFactorInput" name="randomFactorInput" min="0" max="100" value="50" onclick="changeRandomFactor()">
+                <p>KubeInvaders</p>
               </div>
               <div class="col text-center">
-                <label for="randomFactorInput">Random Factor:&nbsp;<span id="currentRandomFactor">50</span></label>
+                <button type="button" id="controlAutoPilotButton" class="btn btn-light" onclick="startProgrammingMode()">Programming Mode</button>
               </div>
             </div>
-            <div class="row" style="margin-top: 1%;">
-              <div class="col text-center">
-                <button type="button" id="buttonShuffle" class="btn btn-light btn-sm" onclick="buttonShuffleHelper()">Disable Shuffle</button>
+
+            <div id="game-buttons" style="display: none;">
+              <div class="row">
+                <div class="col text-center">
+                  <button type="button" id="controlAutoPilotButton" class="btn btn-light" onclick="controlAutoPilot()">Start</button>
+                </div>
+                <div class="col text-center">
+                  <input type="range" id="randomFactorInput" name="randomFactorInput" min="0" max="100" value="50" onclick="changeRandomFactor()">
+                </div>
+                <div class="col text-center">
+                  <label for="randomFactorInput">Random Factor:&nbsp;<span id="currentRandomFactor">50</span></label>
+                </div>
               </div>
-              <div class="col text-center">
-                <button type="button" id="namespacesJumpButton" class="btn btn-light btn-sm" onclick="namespacesJumpControl()">Enable Auto NS Switch</button>
-              </div>
-              <div class="col text-center">
-                <button type="button" id="buttonOnlyPodName" class="btn btn-light btn-sm" onclick="showPodNameControl()">Hide Pods Name</button>
+              <div class="row" style="margin-top: 1%;">
+                <div class="col text-center">
+                  <button type="button" id="buttonShuffle" class="btn btn-light btn-sm" onclick="buttonShuffleHelper()">Disable Shuffle</button>
+                </div>
+                <div class="col text-center">
+                  <button type="button" id="namespacesJumpButton" class="btn btn-light btn-sm" onclick="namespacesJumpControl()">Enable Auto NS Switch</button>
+                </div>
+                <div class="col text-center">
+                  <button type="button" id="buttonOnlyPodName" class="btn btn-light btn-sm" onclick="showPodNameControl()">Hide Pods Name</button>
+                </div>
               </div>
             </div>
           </div>
@@ -148,21 +163,34 @@
             <span style="color: #000000">Latest Replicas State Delay:&nbsp;&nbsp;<span id="latest_fewer_replicas_seconds" style="color: #8f00bb">0</span><font color="#4f4f4f">&nbsp;sec</font>&nbsp;</span>
           </div>
         </div>
-        <div class="row">
-          <canvas id="myCanvas" width="720" height="480"></canvas>
+
+        <div class="row" style="margin-top: 1%;">
+          <form>
+            <div class="form-group">
+              <label for="exampleFormControlTextarea1"></label>
+              <textarea class="form-control" id="exampleFormControlTextarea1" rows="20"></textarea>
+            </div>
+          </form>
         </div>
-        <div class="row">
-          <div class="col text-center">
 
+        <div id="game-screen" style="display: none;">
+          <div class="row">
+            <canvas id="myCanvas" width="720" height="480"></canvas>
           </div>
-          <div class="col text-center">
-            <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput" name="zoomInGameScreenInput" value="+" onclick="zoomIn()">
-            <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput" name="zoomOutGameScreenInput" value="-" onclick="zoomOut()">
-          </div>
-          <div class="col text-center">
+          <div class="row">
+            <div class="col text-center">
 
+            </div>
+            <div class="col text-center">
+              <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput" name="zoomInGameScreenInput" value="+" onclick="zoomIn()">
+              <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput" name="zoomOutGameScreenInput" value="-" onclick="zoomOut()">
+            </div>
+            <div class="col text-center">
+
+            </div>
           </div>
         </div>
+
       </div>
       <div id="alert_placeholder" style="margin-top: 3%;"></div>
     </div>
@@ -211,6 +239,29 @@
         }
       }
       
+      /* TODO: Improve this function... */
+      function startGameMode() {
+        var game_buttons = document.getElementById("game-buttons");
+        var game_screen = document.getElementById("game-screen");
+
+        if (game_mode_switch) {
+          game_mode_switch = false;
+        } else {
+          game_mode_switch = true;
+        }
+
+        if (game_buttons.style.display === "none") {
+          game_buttons.style.display = "block";
+        } else {
+          game_buttons.style.display = "none";
+        }
+        if (game_screen.style.display === "none") {
+          game_screen.style.display = "block";
+        } else {
+          game_screen.style.display = "none";
+        }
+      }
+
       function showSpecialKeys() {
         $('#showSpecialKeysModal').modal('show');
         modal_opened = true;

html5/kubeinvaders.js

@@ -21,6 +21,7 @@ var spaceshipxOld = 0;
 var randomFactor = 10;
 // pods list from kubernetes
 var pods = [];
+var game_mode_switch = false;
 
 // nodes list from kubernetes
 var nodes = [];
@@ -252,13 +253,15 @@ function getNodes() {
     }
 }
 
-window.setInterval(function getKubeItems() { 
-    getNodes();
-    getPods();
+window.setInterval(function getKubeItems() {
+    if (game_mode_switch) {
+        getNodes();
+        getPods();
+    }
 }, 1000)
 
 function keyDownHandler(e) {
-    if (!modal_opened) {
+    if (!modal_opened && game_mode_switch) {
         e.preventDefault();
         if(e.key == "Right" || e.key == "ArrowRight") {
             rightPressed = true;
@@ -682,7 +685,9 @@ window.setInterval(function setAliens() {
 }, 1000)
 
 window.setInterval(function metrics() {
-    getMetrics()
+    if (game_mode_switch) {
+        getMetrics()
+    }
 }, 2000)
 
 getEndpoint();

scripts/programming_mode.lua

@@ -0,0 +1,13 @@
+local https = require "ssl.https"
+local ltn12 = require "ltn12"
+local json = require 'lunajson'
+local redis = require "resty.redis"
+
+if os.getenv("KUBERNETES_SERVICE_HOST") then
+  k8s_url = "https://" .. os.getenv("KUBERNETES_SERVICE_HOST") .. ":" .. os.getenv("KUBERNETES_SERVICE_PORT_HTTPS")
+else
+  k8s_url = os.getenv("ENDPOINT")
+end
+
+local token = os.getenv("TOKEN")
+local arg = ngx.req.get_uri_args()