add pbar

Author: vangj

html/rps-tf/index.html

@@ -65,28 +65,9 @@ <h1 class="display-4">Rock Paper Scissor++</h1>
             <p>
                 Using artificial intelligence (deep learning) to recognize your hand pose to play RPS
             </p>
-            <div id="loading">
-                <div class="spinner-grow text-primary" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
-                <div class="spinner-grow text-secondary" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
-                <div class="spinner-grow text-success" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
-                <div class="spinner-grow text-danger" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
-                <div class="spinner-grow text-warning" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
-                <div class="spinner-grow text-info" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
-                <div class="spinner-grow text-dark" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
+            <div class="progress" style="height: 5px;">
+                <div id="pBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0"
+                    aria-valuemax="100"></div>
             </div>
         </div>
     </div>

html/rps-tf/index.js

@@ -18,6 +18,9 @@ let comScore = 0;
 let youSymbol = undefined;
 let comSymbol = undefined;
 let shootCount = 0;
+let loaded = false;
+let timer = undefined;
+let pBarWidth = 0;
 
 function drawKeypoints(ctx, keypoints) {
     function drawPoint(ctx, y, x, r) {
@@ -64,7 +67,7 @@ async function setupCamera() {
 
     const video = document.getElementById('video');
     video.onloadeddata = (event) => {
-        document.getElementById('loading').innerHTML = '<div class="spinner-grow text-primary null-spinner" role="status"><span class="sr-only">Loading...</span></div>';
+        loaded = true;
         document.getElementById('gameInfo').style.display = 'block';
     };
     const stream = await navigator.mediaDevices.getUserMedia({
@@ -98,7 +101,7 @@ const main =
         try {
             video = await loadVideo();
         } catch (e) {
-            document.getElementById('loading').innerHTML = '<div class="spinner-grow text-primary null-spinner" role="status"><span class="sr-only">Loading...</span></div>';
+            loaded = true;
             let info = document.getElementById('info');
             info.textContent = e.message;
             info.style.display = 'block';
@@ -147,7 +150,7 @@ const landmarksRealTime = async (video) => {
                 if (r.symbol === 'shoot') {
                     shootCount++;
                 }
-                
+
                 if (r.symbol === 'shoot' && shootCount >= shootThreshold && youSymbol) {
                     comSymbol = getComputerSymbol();
                     const winner = getWinner(youSymbol, comSymbol);
@@ -568,6 +571,27 @@ function updateLastSymbols() {
     }
 }
 
+function startProgressBar() {
+    function doCheck() {
+        const pbar = document.getElementById('pBar');
+
+        if (loaded) {
+            clearInterval(timer);
+            pbar.style = `width: 100%`;
+        } else {
+            pBarWidth += 10;
+            if (pBarWidth > 100) {
+                pBarWidth = 0;
+            }
+            pbar.style = `width: ${pBarWidth}%`;
+        }
+    }
+    
+    timer = setInterval(doCheck, 500);
+}
+
+startProgressBar();
+
 navigator.getUserMedia = navigator.getUserMedia ||
     navigator.webkitGetUserMedia || navigator.mozGetUserMedia;