yuan/rayark-cxd-score-screen
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Combo動畫效果+細部微調

Browse Source
This commit is contained in:
Yuan Chiu 2016-07-30 04:29:25 +08:00
parent 4d03437480
commit 51ea3647ca
3 changed files with 102 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -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>

59
query.js
View File

@ -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");
}
}

50
style.css
View File

@ -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 {