Changeset 132 for pycodeshooter/trunk/index.html

Timestamp:

05/05/12 05:39:04 (13 years ago)

Author:

atzm

Message:

• add score board

File:

• pycodeshooter/trunk/index.html (modified) (5 diffs)

pycodeshooter/trunk/index.html

@@ -13 +13 @@
     <script type="text/javascript" charset="UTF-8" src="shooter/system.js"></script>
     <script type="text/javascript">
+    function updateHighScore(highscore) {
+        var table = "<tr><th>Rank</th><th>Name</th><th>Score</th><th>Time</th></tr>";
+
+        for (var i = 0; i < highscore.length; i++) {
+            var name  = highscore[i].name;
+            var score = highscore[i].value;
+            var stime = highscore[i].stime;
+            var etime = highscore[i].etime;
+            var time  = etime - stime;
+            var min   = Math.floor(time / 60);
+            var sec   = time % 60;
+
+            table += "<tr><td>" + (i+1) + "</td><td>" + name + "</td><td>" +
+                score + "</td><td>" + min + ":" + sec + "</td></tr>";
+        }
+
+        document.getElementById("highscore").innerHTML =
+            "<table style=\"text-align:center;\">" + table + "</table>";
+    }
+
     window.onload = function () {
         var req = new XMLHttpRequest();
+        req.open("GET", document.getElementById("api_score").value, false);
+        req.send(null);
+        updateHighScore(JSON.parse(req.responseText));
+
+        req = new XMLHttpRequest();
         req.open("GET", document.getElementById("api").value, false);
         req.send(null);
@@ -86 +111 @@
             };
 
+            if (20 < player.name.length) {
+                setMessage(msg, "Name is too long");
+                return;
+            }
+
             for (var n in player) {
                 if (n == "name" || n == "image")
@@ -103 +133 @@
 
             setTimeout(function() {
-                initGame(document.getElementById("screen"), msg, player);
+                var stime = ~~(new Date() / 1000);
+
+                initGame(document.getElementById("screen"), msg, player, function (name, value) {
+                    var etime = ~~(new Date() / 1000);
+                    var url   = document.getElementById("api_score").value;
+                    var req   = new XMLHttpRequest();
+                    req.open("GET", url + "?name=" + encodeURIComponent(name) + "&value=" +
+                                    value + "&stime=" + stime + "&etime=" + etime , false);
+                    req.send(null);
+                    updateHighScore(JSON.parse(req.responseText));
+                });
 
                 // auto enemy encounter
@@ -150 +190 @@
                 <input type="hidden" value="1"  id="shotlevel" />
                 <input type="hidden" value="/etc/pycodebattler/?mode=json" id="api" />
+                <input type="hidden" value="score/score.cgi" id="api_score" />
                 <img src="images/logo.png" style="visibility: hidden;" id="logoimg" />
 
@@ -239 +280 @@
         </dl>
 
+        <p>ハむスコア</p>
+        <span id="highscore" style="font-size: small;">Now loading...</span>
+
         <p>システムメッセヌゞ</p>
         <span id="message" style="font-size: small;">Now loading...</span>