Skip to content

Instantly share code, notes, and snippets.

@xtuaok

xtuaok/miniparse.css

Last active March 10, 2016 09:53
Show Gist options
  • Save xtuaok/8f63f07085cdd090bb03 to your computer and use it in GitHub Desktop.
Save xtuaok/8f63f07085cdd090bb03 to your computer and use it in GitHub Desktop.
Download ZIP
miniparse
Raw
miniparse.css
* {
font-family: "Meiryo";
font-size: 12px;
font-weight: normal;
box-sizing: border-box;
}
html {
height: 100%;
overflow: hidden;
background-color: transparent;
}
body {
margin: 0;
padding: 0;
}
th { text-align: center; }
td { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.t11 { font-size: 11px; }
.t12 { font-size: 12px; }
.t13 { font-size: 13px; }
.t14 { font-size: 14px; }
.t15 { font-size: 15px; }
.t16 { font-size: 16px; }
.blue {
color: #E2EBF5;
text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
}
.gold {
color: #DED7BE;
text-shadow: -1px 0 2px #795516, 0 1px 2px #795516, 1px 0 2px #795516, 0 -1px 2px #795516;
}
.resize-handle {
background-image: url(handle.png);
background-position: bottom right;
background-repeat: no-repeat;
box-sizing: border-box;
}
#miniparse .outer {
height: 100%;
padding: 10px;
}
#miniparse .inner {
position: relative;
padding: 10px;
}
#miniparse .inner .background {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-filter: blur(5px);
z-index: -1;
}
#toggle-collapse {
cursor: pointer;
float: right;
}
#combatants {
table-layout: auto;
width: 100%;
border-collapse: collapse;
}
#encounter,
#combatants th {
white-space: nowrap;
}
#combatants td {
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 20ex;
}
#combatants thead {
border-bottom: 1px solid #DED7BE;
}
#combatants tr.you {
/* background-color: rgba(255,255,255,0.2);*/
color: #FFFFFF;
text-shadow: 0px 0px 0px rgba(255,255,255,0.75),
0px 0px 0px #696969,
0px 0px 1px #696969, 0px 0px 1px #696969, 0px 0px 1px #696969, 0px 0px 1px #696969, 0px 0px 1px #696969,
0px 0px 1px #696969, 0px 0px 1px #696969, 0px 0px 1px #696969, 0px 0px 1px #696969, 0px 0px 1px #696969,
0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969,
0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969,
0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969,
0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969, 0px 0px 1.5px #696969 !important;
white-space: nowrap;
}
/* header */
span.time {
display: inline-block;
background-image: url(i_time.png);
margin-left: -0px;
margin-right: 2px;
margin-top: -0px;
margin-bottom: -6px;
background-repeat: no-repeat;
height: 24px;
width: 24px;
border-width: 0;
padding: 0;
background-color: transparent;
}
span.battle {
display: inline-block;
background-image: url(i_battle.png);
margin-left: -0px;
margin-right: 2px;
margin-top: -0px;
margin-bottom: -6px;
background-repeat: no-repeat;
height: 24px;
width: 24px;
border-width: 0;
padding: 0;
background-color: transparent;
}
/* job icons */
.icons {
float: left;
display: inline-block;
background-image: url(icons.png);
margin-left: -0px;
margin-right: 3px;
margin-top: -2px;
background-repeat: no-repeat;
height: 20px;
width: 20px;
border-width: 0;
padding: 0;
background-color: transparent;
}
.i_pld {background-position: -120px 0px;}
.i_blm {background-position: -150px 0px;}
.i_war {background-position: -180px 0px;}
.i_mnk {background-position: -210px 0px;}
.i_drg {background-position: -240px 0px;}
.i_brd {background-position: -270px 0px;}
.i_whm {background-position: -300px 0px;}
.i_smn {background-position: -330px 0px;}
.i_sch {background-position: -360px 0px;}
.i_min {background-position: -390px 0px;}
.i_bot {background-position: -420px 0px;}
.i_fsh {background-position: -450px 0px;}
.i_crp {background-position: -480px 0px;}
.i_bsm {background-position: -510px 0px;}
.i_arm {background-position: -540px 0px;}
.i_gsm {background-position: -570px 0px;}
.i_ltm {background-position: -600px 0px;}
.i_wvr {background-position: -630px 0px;}
.i_alc {background-position: -660px 0px;}
.i_cul {background-position: -690px 0px;}
.i_gld {background-position: -720px 0px;}
.i_pgl {background-position: -750px 0px;}
.i_mrd {background-position: -780px 0px;}
.i_lnc {background-position: -810px 0px;}
.i_arc {background-position: -840px 0px;}
.i_cnj {background-position: -870px 0px;}
.i_thm {background-position: -900px 0px;}
.i_acn {background-position: -930px 0px;}
.i_rog {background-position: -960px 0px;}
.i_nin {background-position: -990px 0px;}
.i_drk {background-position: -1020px 0px;}
.i_mch {background-position: -1050px 0px;}
.i_ast {background-position: -1080px 0px;}
.i_unknown {background-position: 0px 0px;}
/* title */
.title, .title * {
font-size: 15px;
color: #FFBDBF !important;
text-shadow: 0px 0px 0px rgba(255,189,191,0.75),
0px 0px 0px #750301,
0px 0px 1px #750301, 0px 0px 1px #750301, 0px 0px 1px #750301, 0px 0px 1px #750301, 0px 0px 1px #750301,
0px 0px 1px #750301, 0px 0px 1px #750301, 0px 0px 1px #750301, 0px 0px 1px #750301, 0px 0px 1px #750301,
0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301,
0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301,
0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301,
0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301, 0px 0px 1.5px #750301 !important;
}
/* row */
.e_character {
float: left;
}
.e_dps {
float: right;
}
/* gauge */
.box {
position: relative;
margin-right: 3px;
}
.gauge {
position: absolute;
display: block;
margin-left: 7px;
/* margin-top: -5px;*/
bottom: -12px;
margin-bottom: -4px;
height: 5px;
background-color: rgba(101, 50, 50, 0.75); /* dps */
z-index: -1;
}
.g_pld,.g_war,.g_mrd,.g_gld,.g_drk {
background-color: rgba(52,67,150,0.75);
}
.g_cnj,.g_whm,.g_sch,.g_ast {
background-color: rgba(57,101,39,0.75);
}
.g_pet {
background-color: rgba(150,147,52,0.75);
}
Raw
miniparse.html
<html>
<head>
<meta charset="utf-8">
<title>miniparse</title>
<link rel="stylesheet" href="miniparse.css">
</head>
<body id="miniparse" v-class="resize-handle: !locked">
<div class="outer">
<div class="inner">
<div class="background"></div>
<div v-if="!updated" class="gold">
<span>No data to show.</span>
</div>
<div v-if="updated">
<div id="encounter" class="gold">
<span class="title t16">{{encounter.title}}</span><span class="time"></span><span class="blue t15">{{encounter.duration}}</span>
<span class="battle"></span><span class="blue t15">{{encounter.encdps}}</span>
<span id="toggle-collapse" v-on:click="toggleCollapse()">{{collapsed ? "▲" : "▼"}}</span>
</div>
<div>
<span class="gold">Zone: </span> <span class="blue">{{encounter.CurrentZoneName}}</span>
</div>
<table id="combatants" v-show="!collapsed">
<tbody class="blue">
<tr v-for="combatant in combatants" v-combatant="combatant">
<td style="width: 70%; max-width: 70%;">
<div class="box">
<span class="icons i_{{ combatant.job }}"></span>
<span class="e_character">{{combatant.name}}</span>
<span class="e_dps dex">{{combatant.encdps}}</span>
<div class="gauge g_{{ combatant.job }}"
style="width: {{ combatant.rate }}%;"></div>
</div>
</td>
<td style="width: 10%; max-width: 10%;">
<span class="gold">Swg:</span> {{combatant.swings}}
</td>
<td style="width: 10%; max-width: 10%;">
<span class="gold">Crt:</span> {{combatant['crithit%']}}
</td>
<td style="width: 10%; max-width: 10%;">
<template v-if="combatant.tohit < 100.00">
<span class="gold">Acc:</span> {{combatant.tohit}}%
</template>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
<script src="miniparse.js"></script>
</body>
</html>
Raw
miniparse.js
var ActXiv = {"Encounter": {"n":"\n","t":"\t","title":"木人","duration":"00:07","DURATION":"7","damage":"3722","damage-m":"0.00","DAMAGE-k":"4","DAMAGE-m":"0","dps":"531.71","DPS":"532","DPS-k":"1","encdps":"531.71","ENCDPS":"532","ENCDPS-k":"1","hits":"6","crithits":"0","crithit%":"0%","misses":"0","hitfailed":"0","swings":"6","tohit":"100.00","TOHIT":"100","maxhit":"YOU-シュトルムブレハ-1112","MAXHIT":"YOU-1112","healed":"0","enchps":"0.00","ENCHPS":"0","ENCHPS-k":"0","critheals":"0","critheal%":"---","heals":"0","cures":"0","maxheal":"","MAXHEAL":"","maxhealward":"","MAXHEALWARD":"","damagetaken":"0","healstaken":"0","powerdrain":"0","powerheal":"0","kills":"0","deaths":"0","CurrentZoneName":"The Goblet","Last10DPS":"532","Last30DPS":"532","Last60DPS":"532"},"Combatant": {"YOU": {"n":"\n","t":"\t","name":"YOU","duration":"00:07","DURATION":"7","damage":"3722","damage-m":"0.00","DAMAGE-k":"4","DAMAGE-m":"0","damage%":"100%","dps":"531.71","DPS":"532","DPS-k":"1","encdps":"531.71","ENCDPS":"532","ENCDPS-k":"1","hits":"6","crithits":"0","crithit%":"0%","misses":"0","hitfailed":"0","swings":"6","tohit":"100.00","TOHIT":"100","maxhit":"シュトルムブレハ-1112","MAXHIT":"1112","healed":"0","healed%":"--","enchps":"0.00","ENCHPS":"0","ENCHPS-k":"0","critheals":"0","critheal%":"0%","heals":"0","cures":"0","maxheal":"","MAXHEAL":"","maxhealward":"","MAXHEALWARD":"","damagetaken":"0","healstaken":"0","powerdrain":"0","powerheal":"0","kills":"0","deaths":"0","threatstr":"+(0)0/-(0)0","threatdelta":"0","NAME3":"YOU","NAME4":"YOU","NAME5":"YOU","NAME6":"YOU","NAME7":"YOU","NAME8":"YOU","NAME9":"YOU","NAME10":"YOU","NAME11":"YOU","NAME12":"YOU","NAME13":"YOU","NAME14":"YOU","NAME15":"YOU","Last10DPS":"0","Last30DPS":"0","Last60DPS":"0","Job":"War","ParryPct":"0%","BlockPct":"0%","IncToHit":"---","OverHealPct":"0%"}},"isActive": false};
Vue.directive('combatant', {
update: function(value) {
if (value.name === 'YOU' || value.name === 'Echobelly Rudel') {
this.el.classList.add('you');
}
var ds = this.el.dataset;
ds.deaths = value.deaths;
}
});
var miniparse = new Vue({
el: '#miniparse',
data: {
updated: false,
locked: false,
collapsed: false,
encounter: null,
combatants: null
},
attached: function() {
document.addEventListener('onOverlayDataUpdate', this.update);
document.addEventListener('onOverlayStateUpdate', this.updateState);
},
detached: function() {
document.removeEventListener('onOverlayStateUpdate', this.updateState);
document.removeEventListener('onOverlayDataUpdate', this.update);
},
methods: {
update: function(e) {
var Encounter = e.detail.Encounter;
var Combatant = e.detail.Combatant;
//var Encounter = ActXiv.Encounter;
//var Combatant = ActXiv.Combatant;
var topDps = 0;
this.updated = true;
this.encounter = Encounter;
this.combatants = [];
for (var name in Combatant) {
var combatant = Combatant[name];
if (this.combatants.length == 0) {
topDps = combatant.encdps;
}
combatant.name = name;
combatant.job = combatant.Job.toLowerCase();
combatant.rate = (combatant.encdps / topDps) * 100;
this.combatants.push(combatant);
}
},
updateState: function(e) {
this.locked = e.detail.isLocked;
},
toggleCollapse: function() {
this.collapsed = !this.collapsed;
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment