Update pic and interaction of it

2023-03-07 19:03:10 +08:00 · 2023-03-07 19:03:10 +08:00 · 2137d787d6
commit 2137d787d6
parent b81f121665
3 changed files with 31 additions and 19 deletions
--- a/templates/GameTutorial.html
+++ b/templates/GameTutorial.html
@ -3,7 +3,7 @@
 <html lang="en">
 <script
  id="allow-copy_script">(function t() { var t = !1; document.addEventListener("allow_copy", (function (n) { t = n.detail.unlock })); var n = ["copy", "cut", "contextmenu", "selectstart", "mousedown", "mouseup", "mousemove", "keydown", "keypress", "keyup"], e = function (n) { t && (n.stopPropagation(), n.stopImmediatePropagation && n.stopImmediatePropagation()) }; n.forEach((function (t) { document.documentElement.addEventListener(t, e, { capture: !0 }) })) })()</script>
-
+  <script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
@ -199,7 +199,6 @@
  <section id="news">

    <div class="container">
-      <br>

      <div class="row clearfix">

@ -213,14 +212,14 @@
          </div>


-          <img style=" width: 80%; height: 90vh;top: 5vh; left: 10vw;
+          <img style=" width: 80%; height: 90vh;top: 62px; left: 10vw;
            position: fixed;z-index: 900; visibility: visible; " src="../templates/Web/pic.png" id="windowshow">

          <div align="center" id="GameWindow">

            <div class="loading-container" id="loading" style="visibility: visible">
              <div class="loader"></div>
-              <div class="loading-text">Loading</div>e
+              <div class="loading-text">Loading</div>
            </div>

          </div>
@ -256,10 +255,7 @@
            }
              document.getElementById("game").style.visibility = "visible";

-          });
-
-
-          ' class="cirButton">
+          });' class="cirButton">
            <h3>Repeat Tutorial</h3>
          </button>
        </div>
@ -271,11 +267,37 @@
            <h3>Play Game</h3>
          </button>
        </div>
+        <div class="col-md-6" id="countdown" style="z-index:999; position:fixed; left:11vw; bottom: 5vh; color: #000; font-size: xx-large;"></div>
+        <script>
+          function countdown() {
+            var count = 15; // 设置倒计时秒数
+            var timer = setInterval(function () {
+              count--;
+              if (count <= 0) {
+                clearInterval(timer);
+                $("#countdown").hide();
+                $("#windowshow:visible").hide(); // 倒计时结束后隐藏倒计时容器
+                
+              } else {
+                $("#countdown").html("This instruction will close in "+ count +"s"); // 更新倒计时容器内容
+                $("#windowshow").click(function(){
+                  $("#windowshow").hide();
+                  $("#countdown").hide();
+                  });
+              }
+            }, 1000);
+          }
+
+          $(document).ready(function () {
+            countdown();
+          });
+        </script>

        <script>
          //Init Cheerpj Framework
          cheerpjInit();
          
+
          var divElement = document.getElementById("GameWindow");
          var tutorialId = parseInt("{{tutorial}}")
          var level = "t" + "{{tutorial}}";
--- a/templates/GameWelcome.html
+++ b/templates/GameWelcome.html
@ -261,8 +261,7 @@
        width: fit-content;
        display: flex;
        justify-content: center;
-        min-width: fit-content;
-">
+        min-width: fit-content;">
          <img src="../img/frameworkAD.gif">
        </div>

@ -293,19 +292,10 @@

          <button onclick="window.location.href = '/question';" class="cirButton"><b> Start!</b> </button>
        </div>
-
-
      </div>
    </div>
-
-
  </section>

-
-
-
-
-
  <!-- Footer mx-auto -->
  <footer class="py-5 bg-dark">
    <div class="container">
--- a/templates/Web/pic.png
+++ b/templates/Web/pic.png