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

顯示資料微調

Browse Source
This commit is contained in:
Yuan Chiu 2016-07-30 01:51:41 +08:00
parent 52b6981bfd
commit 4d03437480
3 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -20,21 +20,22 @@
<div id="boss-hp-area"> <div id="boss-hp-area">
<span class="progressbar" style="width: 100%">&nbsp;</span> <span class="progressbar" style="width: 100%">&nbsp;</span>
<div id="boss-hp-num"> <div id="boss-hp-num">
<p><span id="boss-hp-rate">0%</span></p> <p><span id="boss-hp-rate">100%</span></p>
<p><span id="boss-hp">0</span> / <span id="boss-max-hp">1400000000</span> </p> <p><span id="boss-hp">1400000000</span> / <span id="boss-max-hp">1400000000</span> </p>
</div> </div>
</div> </div>
<div id="overkill-bonus-area" class="hide"> <div id="overkill-bonus-area" class="hide">
<span class="progressbar" style="width: 100%">&nbsp;</span> <span class="progressbar" style="width: 100%">&nbsp;</span>
<div id="overkill-bonus-num"><span id="overkill-bonus">1400000000</span></div> <span class="progress-harf" style="width: 50%">&nbsp;</span>
<div id="overkill-bonus-num"><span id="overkill-bonus">0</span></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<footer> <footer>
<div id="scaedule-area"> <div id="schedule-area">
<p id="scaedule-text">準決賽</p> <p id="schedule-text">瘋雷亞CXD比賽</p>
<p id="mode-text">BOSS Mode</p> <p id="mode-text">BOSS Mode</p>
</div> </div>

24
query.js
View File

@ -7,14 +7,14 @@ var updateFreSec = 10000;
// set timeout // set timeout
queryResult(); queryResult();
//var tid = setTimeout(queryTimeoutAdp, updateFreSec); var tid = setTimeout(queryTimeoutAdp, updateFreSec);
//function queryTimeoutAdp() { function queryTimeoutAdp() {
// queryResult(); queryResult();
// tid = setTimeout(queryTimeoutAdp, updateFreSec); // repeat myself tid = setTimeout(queryTimeoutAdp, updateFreSec); // repeat myself
//} }
//function abortTimer() { // to be called when you want to stop the timer function abortTimer() { // to be called when you want to stop the timer
// clearTimeout(tid); clearTimeout(tid);
//} }
function queryResult() { function queryResult() {
$.ajax({ $.ajax({
@ -32,13 +32,14 @@ function queryResult() {
var overKillMaxBonus = data.feed.entry[0].gsx$overkill總分數.$t; var overKillMaxBonus = data.feed.entry[0].gsx$overkill總分數.$t;
var overKillBonus = data.feed.entry[0].gsx$overkill分數.$t; var overKillBonus = data.feed.entry[0].gsx$overkill分數.$t;
var overKillBonusRate = (overKillBonus / overKillMaxBonus) * 100; var overKillBonusRate = (overKillBonus / overKillMaxBonus) * 100;
var scheduleText = data.feed.entry[0].gsx$狀況一.$t;
// 測試用 // 測試用
// alert("OK "+data.feed.entry[0].gsx$boss剩餘血.$t); // alert("OK "+data.feed.entry[0].gsx$boss剩餘血.$t);
// console.log(data); // console.log(data);
// 顯示 // 顯示
display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate); display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate);
}, },
error: function(data){ error: function(data){
@ -48,8 +49,9 @@ function queryResult() {
}); });
} }
function display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) { function display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) {
// 介面對應 // 介面對應
var mScheduleText = document.getElementById('schedule-text');
var mModeText = document.getElementById('mode-text'); var mModeText = document.getElementById('mode-text');
var mBossScoreArea = document.getElementById('boss-hp-area'); var mBossScoreArea = document.getElementById('boss-hp-area');
var mBossHpRate = document.getElementById('boss-hp-rate'); var mBossHpRate = document.getElementById('boss-hp-rate');
@ -67,7 +69,7 @@ function display_data(bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillB
mOverkillBonus.innerHTML = overKillBonus; mOverkillBonus.innerHTML = overKillBonus;
$('#overkill-bonus-area .progressbar').width(overKillBonusRate+"%"); $('#overkill-bonus-area .progressbar').width(overKillBonusRate+"%");
mScheduleText.innerHTML = scheduleText;
// OverKill // OverKill
if(bossHp == 0) { if(bossHp == 0) {
mModeText.innerHTML = 'OverKill Mode'; mModeText.innerHTML = 'OverKill Mode';

33
style.css
View File

@ -1,3 +1,5 @@
@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);
html, body, #page { html, body, #page {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -7,6 +9,7 @@ html, body { padding: 0; }
body { body {
background-color: #2a2c41; background-color: #2a2c41;
font-family: 'cwTeXHei', sans-serif;
} }
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
@ -30,7 +33,7 @@ body {
position: absolute; position: absolute;
bottom: 0rem; bottom: 0rem;
width: 100%; width: 100%;
overflow: hidden; /* overflow: hidden;*/
} }
#levinessa-logo img{ #levinessa-logo img{
@ -52,8 +55,8 @@ body {
padding-top: 0.2rem; padding-top: 0.2rem;
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
padding-bottom: 0; padding-bottom: 0.25em;
padding-top: 0; padding-top: 0.25em;
transition: all 3s ease; transition: all 3s ease;
} }
@ -72,11 +75,14 @@ body {
#boss-hp-num { #boss-hp-num {
position: relative; position: relative;
} }
#boss-hp-area .progressbar, #overkill-bonus-area .progressbar {
position: absolute;
left: 0px;
top: 0em;
}
#boss-hp-area .progressbar { #boss-hp-area .progressbar {
background: rgba(195, 21, 21, 1); background: rgba(195, 21, 21, 1);
position: absolute; line-height: 2.5em;
line-height: 2em;
left: 0px;
} }
@ -86,11 +92,16 @@ body {
#overkill-bonus-num { #overkill-bonus-num {
position: relative; position: relative;
} }
#overkill-bonus-area .progress-harf {
border-right: 3px solid rgba(95, 227, 22, 1);
position: absolute;
line-height: 2.2em;
left: 0;
top: -0.225em;
}
#overkill-bonus-area .progressbar { #overkill-bonus-area .progressbar {
background: rgba(95, 227, 22, 1); background: rgba(95, 227, 22, 1);
position: absolute; line-height: 1.5em;
line-height: 1em;
left: 0px;
} }
#score-area { #score-area {
@ -107,13 +118,13 @@ footer {
padding-top: 1.2em; padding-top: 1.2em;
} }
#scaedule-area { #schedule-area {
position: absolute; position: absolute;
text-align: center; text-align: center;
width: 92%; width: 92%;
} }
#scaedule-text { #schedule-text {
font-size: 2.3rem; font-size: 2.3rem;
} }
#mode-text { #mode-text {