Merge branch 'main' of https://github.com/BigJIU/MarioWeb

2023-04-06 14:37:12 +08:00 · 2023-04-06 14:37:12 +08:00 · 8d3b99ad69
commit 8d3b99ad69
parent 158e717437 71f67c44a5
10 changed files with 118 additions and 67 deletions
--- a/.idea/.name
+++ b/.idea/.name
@ -0,0 +1 @@
+main.py
--- a/.idea/MarioWeb.iml
+++ b/.idea/MarioWeb.iml
@ -5,7 +5,7 @@
  </component>
  <component name="NewModuleRootManager">
    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
+    <orderEntry type="jdk" jdkName="VisMOO" jdkType="Python SDK" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
  <component name="TemplatesService">
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9" project-jdk-type="Python SDK" />
+  <component name="ProjectRootManager" version="2" project-jdk-name="VisMOO" project-jdk-type="Python SDK" />
 </project>
--- a/main.py
+++ b/main.py
@ -193,21 +193,27 @@ def gameannoresult2(id):
            return redirect(url_for("gameplay2", id=id))


-@app.route("/gameover")
+@app.route("/gameover",methods=['POST','GET'])
 def over():
    finish = idm.getTimes(getId())
-    return render_template("GameOver.html", finish=1, stage=1)
-
-
-@app.route("/gameover/<id>/feedback", methods=['POST'])
-def overa():
    if request.method == 'POST':
        resultList = list(request.form)[0].split(",")
        idm.write_csv(feedbackPath,
                      [getId(), resultList[0],
                       ""])

+    return render_template("GameOver.html", finish=1, stage=1)

+
+# @app.route('/feedback', methods=['POST'])
+# def overa():
+#     if request.method == 'POST':
+#         resultList = list(request.form)[0].split(",")
+#         idm.write_csv(feedbackPath,
+#                       [getId(), resultList[0],
+#                        ""])
+
+    # return redirect(url_for("over", id=id))
 def saveFile(path, filename, content):
    cp = list(map(int, content))
    file_dir = os.path.join(os.getcwd(), path)
--- a/templates/GameOver.html
+++ b/templates/GameOver.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="../templates/Web/jquery.min.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>
@ -189,9 +189,10 @@

        <br>
        <br>
-        <h3>Do you have any feedback?</h3>
+
+        <form id="ajaxform">
+             <h3>Do you have any feedback?</h3>
        <br>
-        <form method="POST" action="feedback">
              <textarea
            id="message"
            cols="60"
@ -200,7 +201,7 @@

          ></textarea>
            <br><br>
-            <input type="submit" value="Submit" class="cirButton">
+            <input type="submit" value="Submit" class="cirButton" onclick="submit_it()">
        </form>
      <script>
        document.getElementById("hideButton").addEventListener("click", function () {
@ -217,6 +218,32 @@
        //   var newWindow = window.open("", "_self");
        //     newWindow.close();
        // });
+
+        function submit_it() {
+             $("#ajaxform").hide()
+        $("#ajaxform").submit(function(e)
+    {
+
+        var postData = JSON.stringify($("#message").val());
+        {#var formURL = $(this).attr("action");#}
+        $.ajax(
+        {
+            url : "gameover",
+            type: "POST",
+            data : postData,
+            success:function(data) 
+            {
+
+                //data: return data from server
+            }
+
+        });
+        e.preventDefault(); //STOP default action
+        {#e.unbind(); //unbind. to stop multiple form submit.#}
+    });
+
+}
+
      </script>

    </div>
@ -229,7 +256,7 @@

  </section>

- <div class="col-xl-7 justify-content-between align-content-center" style="margin: auto">This page is created by <a href="https://github.com/BigJIU">Haocheng Du</a>, <a href="doveliyuchen.github.io">Yuchen Li</a>; game content is generated by <a href="https://github.com/PneuC">Ziqi Wang</a>. This project is supported by <a href="http://www.liujialin.tech/">Dr. Liu</a> and <a href="https://yannakakis.net/">Prof. Yannakakis</a>.</div>
+<div class="col-xl-7 justify-content-between align-content-center" style="margin: auto">This page is created by <a href="https://github.com/BigJIU">Haocheng Du</a>, <a href="https://doveliyuchen.github.io">Yuchen Li</a>; game content is generated by <b>procedural content generator (PCG) </b>designed by<a href="https://github.com/PneuC"> Ziqi Wang</a>.<br> This project is supported by <a href="http://www.liujialin.tech/">Dr. Liu</a> and <a href="https://yannakakis.net/">Prof. Yannakakis</a>.</div>

 <br><br>

@ -250,7 +277,7 @@
  </footer>

  <!-- Bootstrap core JavaScript -->
-  <script src="../templates/Web/jquery.min.js"></script>
+
  <script src="../templates/Web/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
--- a/templates/GameTutorial.html
+++ b/templates/GameTutorial.html
@ -217,18 +217,19 @@
    <div class="container" style="font-weight: 600
   ;">

-      <div class="row clearfix" >
+      <div class="row clearfix">
        <!-- <style=" background-color: rgba(255,255,255);height: 130vh;
      margin-top: -90px;"> -->

-        <div class="col-md-12" style=" background-color: rgba(255,255,255);" >
+        <div class="col-md-12" style=" background-color: rgba(255,255,255);">
          <div align="center">

            <h3>Super Mario Bros Tutorial</h3>
-            <p >  Before proceeding to the main part of the experiment please familiarize yourself with the game.<br>
-            You may proceed to the next phase of this survey once you are ready!</p>
- 
-            <b  onclick="replay()" style="cursor: pointer;">Click <u style="color:blue; ">ME</u> to show the instruction page again.</b>
+            <p> Before proceeding to the main part of the experiment please familiarize yourself with the game.<br>
+              You may proceed to the next phase of this survey once you are ready!</p>
+
+            <b onclick="replay()" style="cursor: pointer;">Click <u style="color:blue; ">ME</u> to show the instruction
+              page again.</b>

            <p class="alert">If the game is not responding to your keyboard, please click on the game screen.</p>
          </div>
@ -245,7 +246,7 @@

          </div>

-            </div>
+        </div>

        <div class="col-md-6" align="center" style="visibility: hidden;" id="next">
          <br>
@ -254,7 +255,7 @@
            document.getElementById("game").style.visibility = "hidden";
            document.getElementById("next").style.visibility = "hidden";
            
-
+             var control = ("{{control}}" == "1");
          //var divElement = document.getElementById("GameWindow");
          tutorialId = tutorialId+1
          var level = "t"+tutorialId;
@ -266,7 +267,7 @@
              document.getElementById("loading").style.visibility = "hidden";
              $("#mask").hide();
          })
-               var control = ("{{control}}" == "1");
+

        PlayLevel(level,control)
          .then(function (){
@ -289,59 +290,64 @@
          </button>
        </div>

-        <div id="countdown"
-          style="z-index:999; position:absolute; left:50px; bottom: 20px; color: #ffffff; font-size: xx-large; ">
-        </div>
+
        <img style=" height: 90vh;bottom: 3.5vh; left: 0vw;
            position: absolute;z-index: 900; visibility: visible; width: 100%;" src="../templates/Web/pic.png"
          id="windowshow">
+        <img style=" height: 90vh;bottom: 3.5vh; left: 0vw;
+            position: absolute;z-index: 902; visibility: visible; width: 100%;" src="../templates/Web/top.png" id="top">
+        <img style=" height: 90vh;bottom: 3.5vh; left: 0vw;
+            position: absolute;z-index: 902; visibility: visible; width: 100%;" src="../templates/Web/bot.png" id="bot">
        <script>
-          function countdown() {
-            // var count = 10; // 设置倒计时秒数
-            // var timer = setInterval(function () {
-            //   count--;
-            //   if (count <= 0) {
-            //     clearInterval(timer);
-            //     $("#countdown").hide();
-            //     $("#windowshow:visible").hide(); // 倒计时结束后隐藏倒计时容器

-            //   } else {
-                $("#countdown").html("Click to close."); // 更新倒计时容器内容
-                $("#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}}";
          var img = document.getElementById("windowshow");
+          var control = ("{{control}}" == "1");
+
+
+
+
+          if (control) {
+            $("#top:visible").hide();
+            console.log("1")
+          } else {
+            $("#bot:visible").hide();
+              console.log("2")
+          }
+
+          $("#windowshow").click(function () {
+            $("#windowshow:visible").hide();
+
+          });
+          $("#bot").click(function () {
+
+            $("#bot:visible").hide();
+
+          });
+          $("#top").click(function () {
+            $("#top:visible").hide();
+          });
+
+
+

          cheerpjCreateDisplay(500, 500, divElement);
          cheerpjRunMain("Play", "/app/Mario-AI-Interface.jar", "0", "f_l");

          GameLoad().then(function () {
-            console.log("Cheerpj Initialize Succeed!");

            $("#windowshow:visible").hide();
-            $("#countdown").hide();
+            {#console.log("Cheerpj Initialize Succeed!", control);#}
+
+
+
            document.getElementById("loading").style.visibility = 'hidden';
          })

-          var control = ("{{control}}" == "1");
+

          PlayLevel(level, control)
            .then(function () {
@ -350,9 +356,24 @@
                document.getElementById("next").style.visibility = "visible";
              }
              document.getElementById("game").style.visibility = "visible";
+
+
              $("#mask").hide();

            });
+          function replay() {
+
+            $("#windowshow:hidden").show();
+            if(control){
+                $("#bot:hidden").show();
+
+            }else {
+                   $("#top:hidden").show();
+            }
+
+
+
+          }

        </script>
      </div>
@ -366,19 +387,11 @@

      </div>

-      <!-- <p>more icon-more</p> -->
+

    </div>


-    <script>
-      function replay() {
-
-        $("#windowshow:hidden").show();
-
-
-      }
-    </script>


  </section>
@ -388,7 +401,7 @@
  <!-- Footer mx-auto -->
  <footer class="py-5 bg-dark">
    <div class="container">
-      <div class="row clearfix" >
+      <div class="row clearfix">
        <!-- <div class="col-md-2 column">
          <img class="img-fluid" alt="" src="../templates/Web/Wechat.png" style="width: 100px;">
      </div> -->
--- a/templates/GameWelcome.html
+++ b/templates/GameWelcome.html
@ -289,6 +289,10 @@
    </div>
  </section>

+ <div class="col-xl-7 justify-content-between align-content-center" style="margin: auto">This page is created by <a href="https://github.com/BigJIU">Haocheng Du</a>, <a href="https://doveliyuchen.github.io">Yuchen Li</a>; game content is generated by <b>procedural content generator (PCG) </b>designed by<a href="https://github.com/PneuC"> Ziqi Wang</a>.<br> This project is supported by <a href="http://www.liujialin.tech/">Dr. Liu</a> and <a href="https://yannakakis.net/">Prof. Yannakakis</a>.</div>
+
+<br><br>
+
  <!-- Footer mx-auto -->
  <footer class="py-5 bg-dark">
    <div class="container">
@ -321,4 +325,4 @@

 </body>

-</html>
+</html>
--- a/templates/Web/bot.png
+++ b/templates/Web/bot.png
--- a/templates/Web/pic.png
+++ b/templates/Web/pic.png
--- a/templates/Web/top.png
+++ b/templates/Web/top.png