Combo動畫效果+細部微調

index.html

@@ -12,6 +12,12 @@
 
         <div id="main-area">
           <div class="inner">
+
+            <div id="score-combo-area" class="hide">
+              <span class="boss-hp-text">1400000000</span>
+              <span class="overkill-bonus-text">0</span>
+            </div>
+            
             <div id="levinessa-area">
                 <span id="levinessa-logo"><img src="images/%E7%B4%A0%E6%9D%90_levinessa_%E5%AD%97.png" style="height: 9em; object-fit: contain;"></span>
             </div>

query.js

@@ -4,6 +4,8 @@
 var baseAPIUrl = "//spreadsheets.google.com/feeds/list/1bA_RNgWbS8_K_4UJ5wUkzZd98gNHz2zKj8E0NYxVWhY/ohu83m6/public/values?alt=json";
 
 var updateFreSec = 10000;
+var current_bossHp;
+var current_overKillBonus;
 
 // set timeout
 queryResult();
@@ -33,23 +35,67 @@ function queryResult() {
       var overKillBonus = data.feed.entry[0].gsx$overkill分數.$t;
       var overKillBonusRate = (overKillBonus / overKillMaxBonus) * 100;
       var scheduleText = data.feed.entry[0].gsx$狀況一.$t;
-        
+      var modeText = data.feed.entry[0].gsx$狀況二.$t;
+      
       // 測試用
 //      alert("OK "+data.feed.entry[0].gsx$boss剩餘血.$t);
 //      console.log(data);
         
       // 顯示
-      display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate);
+      display_data(scheduleText, modeText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate);
-      
+      setAshowCombo(bossHp, overKillBonus)
     },
     error: function(data){
-      // 隱藏處理中畫面
+      location.reload();
-      alert("網路錯誤，請重新整理試試看");
     }
   });
 }
 
-function display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) {
+function setAshowCombo(bossHp, overKillBonus) {
+  // 介面對應
+  var comboArea = $('#score-combo-area');
+  var combo_bossHp = $('#score-combo-area .boss-hp-text');
+  var combo_overKillBonus = $('#score-combo-area .overkill-bonus-text');
+  combo_bossHp.html(bossHp);
+  combo_overKillBonus.html(overKillBonus);
+  function hideCombo() {comboArea.removeClass("show");}
+  
+  // BOSS Mode
+  if(current_bossHp != 0) {
+    combo_bossHp.css('display', 'inherit');
+    combo_overKillBonus.css('display', 'none');
+    
+    if(current_bossHp != bossHp) {
+      comboArea.addClass('show');
+      window.setTimeout( hideCombo, 4000 );
+//      comboArea.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
+//        function() {
+//            comboArea.removeClass("show");
+//        }
+//      );
+    }
+  }
+  // Overkill Mode
+  else {
+    combo_bossHp.css('display', 'none');
+    combo_overKillBonus.css('display', 'inherit');
+    
+    if(current_overKillBonus != overKillBonus) {
+      comboArea.addClass('show');
+      window.setTimeout( hideCombo, 4000 );
+//      comboArea.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
+//        function() {
+//            comboArea.removeClass("show");
+//        }
+//      );
+    }
+  }
+  
+  current_bossHp = bossHp;
+  current_overKillBonus = overKillBonus;
+}
+
+function display_data(scheduleText, modeText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) {
   // 介面對應
   var mScheduleText = document.getElementById('schedule-text');
   var mModeText = document.getElementById('mode-text');
@@ -70,13 +116,12 @@ function display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBo
   $('#overkill-bonus-area .progressbar').width(overKillBonusRate+"%");
   
   mScheduleText.innerHTML = scheduleText;
+  mModeText.innerHTML = modeText;
   // OverKill
   if(bossHp == 0) {
-    mModeText.innerHTML = 'OverKill Mode';
     $(mOverkillScoreArea).removeClass("hide");
   }
   else {
-    mModeText.innerHTML = 'BOSS Mode';
     $(mOverkillScoreArea).addClass("hide");
   }
 }

style.css

@@ -42,6 +42,45 @@ body {
 /*    float: left;*/
 }
 
+@keyframes combo-ani {
+  from {
+    font-size: 6rem;
+    opacity: 0;
+  }
+  
+  25% {
+    font-size: 6rem;
+    opacity: 1;
+    margin-top: inherit;
+  }
+
+  to {
+    font-size: 18rem;
+    opacity: 0;
+    margin-top: -4rem;
+  }
+}
+
+#score-combo-area {
+  position: fixed;
+  color: rgba(236, 246, 255, 0.75);
+  top: 28%;
+  width: 200%;
+  left: -50%;
+/*  overflow: hidden;*/
+  text-align: center;
+  font-size: 6rem;
+  text-shadow: 0 0 30px black;
+  transition: all 0.3s ease;
+}
+#score-combo-area.show {
+  animation-duration: 3s;
+  animation-name: combo-ani;
+}
+#score-combo-area.hide {
+  opacity: 0;
+}
+
 #score-area {
     text-align: center;
     color: white;
@@ -54,7 +93,7 @@ body {
     width: 100%;
     padding-top: 0.2rem;
     padding-bottom: 0.2rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
     padding-bottom: 0.25em;
     padding-top: 0.25em;
     transition: all 3s ease;
@@ -78,7 +117,8 @@ body {
 #boss-hp-area .progressbar, #overkill-bonus-area .progressbar {
   position: absolute;
   left: 0px;
-top: 0em;
+  top: 0em;
+  max-width: 100%;
 }
 #boss-hp-area .progressbar {
   background: rgba(195, 21, 21, 1);
@@ -104,10 +144,6 @@ top: 0em;
   line-height: 1.5em;
 }
 
-#score-area {
-    
-}
-
 /* ------------------------------------------------------------------------- */
 
 footer {
@@ -115,7 +151,7 @@ footer {
     width: 92%;
     color: white;
     text-shadow: 2px 2px 8px rgb(218, 220, 255);
-    padding-top: 1.2em;
+    padding-top: 0.6em;
 }
 
 #schedule-area {