+
+
diff --git a/query.js b/query.js
index 81d1c09..f5b433a 100644
--- a/query.js
+++ b/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){
- // 隱藏處理中畫面
- alert("網路錯誤,請重新整理試試看");
+ location.reload();
}
});
}
-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");
}
}
diff --git a/style.css b/style.css
index 2e459b6..3097f08 100644
--- a/style.css
+++ b/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 {
+ 1400000000
+ 0
+
+
