顯示分數資料

index.html

@@ -17,14 +17,16 @@
             </div>
   
             <div id="score-area">
-              <div id="boss-hp">
+              <div id="boss-hp-area">
+                <span class="progressbar" style="width: 100%">&nbsp;</span>
                 <div id="boss-hp-num">
-                    <p>0%</p>
+                  <p><span id="boss-hp-rate">0%</span></p>
-                    <p>1400000000 / 0000000000 </p>
+                  <p><span id="boss-hp">0</span> / <span id="boss-max-hp">1400000000</span> </p>
                 </div>
               </div>
-              <div id="overkill-bonus">
+              <div id="overkill-bonus-area" class="hide">
-                  100
+                <span class="progressbar" style="width: 100%">&nbsp;</span>
+                <div id="overkill-bonus-num"><span id="overkill-bonus">1400000000</span></div>
               </div>
             </div>
           </div>

query.js

@@ -1,5 +1,20 @@
-var baseAPIUrl = "//spreadsheets.google.com/feeds/list/1wr8qbkLGUkmrscj7CPeFml9FlfQCxBKBKzkc2v7lIK8/ohu83m6/public/values?alt=json";
+// 正式用
-var updateFreSec = 60;
+//var baseAPIUrl = "//spreadsheets.google.com/feeds/list/1wr8qbkLGUkmrscj7CPeFml9FlfQCxBKBKzkc2v7lIK8/ohu83m6/public/values?alt=json";
+// 測試用
+var baseAPIUrl = "//spreadsheets.google.com/feeds/list/1bA_RNgWbS8_K_4UJ5wUkzZd98gNHz2zKj8E0NYxVWhY/ohu83m6/public/values?alt=json";
+
+var updateFreSec = 10000;
+
+// set timeout
+queryResult();
+//var tid = setTimeout(queryTimeoutAdp, updateFreSec);
+//function queryTimeoutAdp() {
+//  queryResult();
+//  tid = setTimeout(queryTimeoutAdp, updateFreSec); // repeat myself
+//}
+//function abortTimer() { // to be called when you want to stop the timer
+//  clearTimeout(tid);
+//}
 
 function queryResult() {
   $.ajax({
@@ -10,9 +25,21 @@ function queryResult() {
     beforeSend: function() {
     },
     success: function(data){
-      // 隱藏處理中畫面
+      // 資料擷取
-      alert("OK "+data.feed.entry[0].gsx$boss剩餘血.$t);
+      var bossMaxHp = data.feed.entry[0].gsx$boss總血量.$t;
-      console.log(data);
+      var bossHp = data.feed.entry[0].gsx$boss剩餘血.$t;
+      var bossHpRate = (bossHp / bossMaxHp) * 100;
+      var overKillMaxBonus = data.feed.entry[0].gsx$overkill總分數.$t;
+      var overKillBonus = data.feed.entry[0].gsx$overkill分數.$t;
+      var overKillBonusRate = (overKillBonus / overKillMaxBonus) * 100;
+        
+      // 測試用
+//      alert("OK "+data.feed.entry[0].gsx$boss剩餘血.$t);
+//      console.log(data);
+        
+      // 顯示
+      display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate);
+      
     },
     error: function(data){
       // 隱藏處理中畫面
@@ -21,23 +48,37 @@ function queryResult() {
   });
 }
 
-function display_data() {
+function display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) {
+  // 介面對應
+  var mModeText = document.getElementById('mode-text');
+  var mBossScoreArea = document.getElementById('boss-hp-area');
+  var mBossHpRate = document.getElementById('boss-hp-rate');
+  var mBossMaxHp = document.getElementById('boss-max-hp');
+  var mBossHp = document.getElementById('boss-hp');
+  var mOverkillScoreArea = document.getElementById('overkill-bonus-area');
+  var mOverkillBonus = document.getElementById('overkill-bonus');
+  
+  
+  // 介面顯示數值
+  mBossHpRate.innerHTML = Math.ceil(bossHpRate * 100) / 100 + "%";
+  mBossHp.innerHTML = bossHp;
+  mBossMaxHp.innerHTML = bossMaxHp;
+  $('#boss-hp-area .progressbar').width(bossHpRate+"%");
+  mOverkillBonus.innerHTML = overKillBonus;
+  $('#overkill-bonus-area .progressbar').width(overKillBonusRate+"%");
+  
+  
+  // OverKill
+  if(bossHp == 0) {
+    mModeText.innerHTML = 'OverKill Mode';
+    $(mOverkillScoreArea).removeClass("hide");
+  }
+  else {
+    mModeText.innerHTML = 'BOSS Mode';
+    $(mOverkillScoreArea).addClass("hide");
+  }
 }
 
 function clean_data() {
-  // 顯示出來
-  mSpan_nickname.innerHTML = res_nickname;
-  mSpan_tel.innerHTML = res_tel;
-  mSpan_email.innerHTML = res_email;
-  // mSpan_avatar.innerHTML = res_avatar;
-  mSpan_pay_method.innerHTML = res_pay_method;
-  mSpan_pay_status.innerHTML = res_pay_status;
-}
   
-var form_input = document.getElementById('input-form');
-
-form_input.onsubmit = function(e) {
-  e.preventDefault();
-  queryResult();
-  return 0;
 }

style.css

@@ -33,8 +33,9 @@ body {
     overflow: hidden;
 }
 
-#levinessa-logo {
+#levinessa-logo img{
     color: white;
+    margin-bottom: -1rem;
 /*    float: left;*/
 }
 
@@ -45,19 +46,52 @@ body {
     font-size: 2rem;
 }
 
-#boss-hp, #overkill-bonus {
+#boss-hp-area, #overkill-bonus-area {
+    position: relative;
+    width: 100%;
     padding-top: 0.2rem;
     padding-bottom: 0.2rem;
     margin-bottom: 0.5rem;
+    padding-bottom: 0;
+    padding-top: 0;
+    transition: all 3s ease;
 }
 
-#boss-hp {
+#overkill-bonus-area.hide {
+    height: 0px;
+    overflow: hidden;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 0;
+    transition: all 3s ease;
+}
+
+#boss-hp-area {
     background: rgba(195, 21, 21, 0.35);
 }
+#boss-hp-num {
+  position: relative;
+}
+#boss-hp-area .progressbar {
+  background: rgba(195, 21, 21, 1);
+  position: absolute;
+  line-height: 2em;
+  left: 0px;
+}
 
-#overkill-bonus {
+
+#overkill-bonus-area {
     background: rgba(95, 227, 22, 0.35);
 }
+#overkill-bonus-num {
+  position: relative;
+}
+#overkill-bonus-area .progressbar {
+  background: rgba(95, 227, 22, 1);
+  position: absolute;
+  line-height: 1em;
+  left: 0px;
+}
 
 #score-area {
     
@@ -89,6 +123,7 @@ footer {
 
 #cxd-logo-area {
     float: right;
+    margin-top: -0.5rem;
 }
 #cxd-logo {
     border: 1px soild white;