Skip to content

Commit

Permalink
#304 Improved DPS bars, created maps for remaining raid bosses, added…
Browse files Browse the repository at this point in the history 
… class icons
  • Loading branch information
@immortius
immortius committed Sep 5, 2018
1 parent bfec4c3 commit 97bcb75
Show file tree
Hide file tree
Showing 26 changed files with 26,349 additions and 33 deletions.
2 changes: 1 addition & 1 deletion continuumsplit/cairn.json
View file

Large diffs are not rendered by default.

247 changes: 245 additions & 2 deletions continuumsplit/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,12 +117,31 @@ textarea {
display: flex;
}

.replay-details {
width: 100%;
margin-left: 4px;
}

.replay-detail-table {
display: table;
width: 100%;
}

.replay-detail-name-column {
width: 50%;
}

.replay-detail-cleave-dps-column {
width: 25%;
}

.replay-detail-boss-dps-column {
width: 25%;
}

.replay-detail-player-rows {
display: table-row-group;
height: 20px;
}

.replay-detail-header-row {
Expand All @@ -135,17 +154,241 @@ textarea {

.replay-detail-item {
display: table-cell;
vertical-align: middle;
padding-right: 5px;
}

.replay-bar-background {
background-color: #DDDDDD;
border-radius: 10px;
border: solid black 1px;
line-height: 20px;
}

.replay-bar {
background-color: #caffcc;
text-align: left;
line-height: 26px;
color: black;
color: #00000000;
border-radius: 10px;
clip-path: inset(0% 0% 0% 0%);
line-height: 18px;
}

.replay-bar-label {
position: absolute;
margin-top: -19px;
line-height: 20px;
margin-left: 10px;
}

.replay-class-necromancer {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: 0px -32px;
}

.replay-class-reaper {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: 0px -52px;
}

.replay-class-scourge {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: 0px -72px;
}

.replay-class-ranger {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -20px -32px;
}

.replay-class-druid {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -20px -52px;
}

.replay-class-soulbeast {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -20px -72px;
}

.replay-class-engineer {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -40px -32px;
}

.replay-class-scrapper {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -40px -52px;
}

.replay-class-holosmith {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -40px -72px;
}

.replay-class-thief {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -60px -32px;
}

.replay-class-daredevil {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -60px -52px;
}

.replay-class-deadeye {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -60px -72px;
}

.replay-class-mesmer {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -80px -32px;
}

.replay-class-chrono {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -80px -52px;
}

.replay-class-mirage {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -80px -72px;
}

.replay-class-mesmer {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -100px -32px;
}

.replay-class-chronomancer {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -100px -52px;
}

.replay-class-mirage {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -100px -72px;
}

.replay-class-elementalist {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -120px -32px;
}

.replay-class-tempest {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -120px -52px;
}

.replay-class-weaver {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -120px -72px;
}

.replay-class-revenant {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -140px -32px;
}

.replay-class-herald {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -140px -52px;
}

.replay-class-renegade {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -140px -72px;
}

.replay-class-warrior {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -160px -32px;
}

.replay-class-berserker {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -160px -52px;
}

.replay-class-spellbreaker {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -160px -72px;
}

.replay-class-guardian {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -180px -32px;
}

.replay-class-dragonhunter {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -180px -52px;
}

.replay-class-firebrand {
width: 20px;
height: 20px;
background-image: url('../img/icons.png');
background-position: -180px -72px;
}

/* ==========================================================================
Expand Down
2 changes: 1 addition & 1 deletion continuumsplit/deimos.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion continuumsplit/gorse.json
View file

Large diffs are not rendered by default.

Binary file removed continuumsplit/img/Hall_of_Chains_map.jpg
View file
Binary file not shown.
Binary file removed continuumsplit/img/Spirit_Vale_map.jpg
View file
Binary file not shown.
Binary file added continuumsplit/img/dhuum_arena.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3,197 changes: 3,197 additions & 0 deletions continuumsplit/img/dhuum_arena.pdn
View file

Large diffs are not rendered by default.

Binary file modified continuumsplit/img/icons.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added continuumsplit/img/kc_arena.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7,501 changes: 7,501 additions & 0 deletions continuumsplit/img/kc_arena.pdn
View file

Large diffs are not rendered by default.

Binary file modified continuumsplit/img/matt_arena.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6,309 changes: 6,309 additions & 0 deletions continuumsplit/img/matt_arena.pdn
View file

Large diffs are not rendered by default.

Binary file modified continuumsplit/img/sloth_arena.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7,136 changes: 7,136 additions & 0 deletions continuumsplit/img/sloth_arena.pdn
View file

Large diffs are not rendered by default.

Binary file added continuumsplit/img/xera_arena.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1,913 changes: 1,913 additions & 0 deletions continuumsplit/img/xera_arena.pdn
View file

Large diffs are not rendered by default.

43 changes: 28 additions & 15 deletions continuumsplit/js/continuumsplit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,11 @@ TODO:
Display:
- Class icons
- Improve selection display
- Improve selection display
Metrics
- Focus selection
- Buffs
- Boss health
- Incoming Damage
- Phase
- Single target detail pane
- Skill log
Expand Down Expand Up @@ -207,7 +205,7 @@ class Replay {
+ "<div class='replay-details'>"
+ "<div class='replay-detail-bossinfo'><div class='replay-boss-name'></div><div class='replay-boss-health'></div></div>"
+ "<div class='replay-detail-player-section'>"
+ "<div class='replay-detail-table'><div class='replay-detail-header-row'><div class='replay-detail-item'>Player</div><div class='replay-detail-item'>Boss DPS</div><div class='replay-detail-item'>Cleave DPS</div></div>"
+ "<div class='replay-detail-table'><div class='replay-detail-header-row'><div class='replay-detail-item'></div><div class='replay-detail-item replay-detail-player-column'>Player</div><div class='replay-detail-item replay-detail-boss-dps-column'>Boss DPS</div><div class='replay-detail-item replay-detail-cleave-dps-column'>Cleave DPS</div></div>"
+ "<div class='replay-detail-player-rows'></div></div></div></div></div>"
+ "<div class='replay-controls'>"
+ "<button type='button' class='replay-play'><img src='img/play.png'/></button>"
Expand Down Expand Up @@ -279,6 +277,7 @@ class Replay {
replay.loadReplayData(replay.replayData)
}
});

}

updateDetails() {
Expand Down Expand Up @@ -376,22 +375,31 @@ class Replay {
if (data["type"] == "Player") {
let row = $(document.createElement('div'))
row.addClass('replay-detail-row')
let classIcon = $(document.createElement('div'))
classIcon.addClass('replay-class-' + data["class"].toLowerCase())
row.append(classIcon)
let nameDisplay = $(document.createElement('div'))
nameDisplay.addClass('replay-detail-item')
nameDisplay.text(data["name"])
row.append(nameDisplay)
data.bossdpsDisplay = replay.createDisplayBar(50000)
data.bossdpsDisplay.addClass('replay-detail-item')
row.append(data.bossdpsDisplay)
let dpsItem = $(document.createElement('div'))
dpsItem.addClass('replay-detail-item')
dpsItem.append(data.bossdpsDisplay)
row.append(dpsItem)
data.cleavedpsDisplay = replay.createDisplayBar(50000)
data.cleavedpsDisplay.addClass('replay-detail-item')
row.append(data.cleavedpsDisplay)
let cleaveItem = $(document.createElement('div'))
cleaveItem.addClass('replay-detail-item')
cleaveItem.append(data.cleavedpsDisplay)
row.append(cleaveItem)
replay.playerDetails.append(row)
} else if (data["type"] == "Boss") {
let bossHealthDisplay = replay.createDisplayBar(100)
bossHealthDisplay.setValue(100)
replay.rootElement.find('.replay-boss-health').append(bossHealthDisplay);
data.healthDisplay = bossHealthDisplay
if (data["health"] != null) {
let bossHealthDisplay = replay.createDisplayBar(100)
bossHealthDisplay.setValue(100)
replay.rootElement.find('.replay-boss-health').append(bossHealthDisplay);
data.healthDisplay = bossHealthDisplay
}
}
})
}
Expand All @@ -401,11 +409,16 @@ class Replay {
barRoot.addClass('replay-bar-background')
let barFill = $(document.createElement('div'))
barFill.addClass('replay-bar')
let barLabel = $(document.createElement('div'))
barLabel.addClass('replay-bar-label')

barRoot.append(barFill)
barRoot.append(barLabel)
barRoot.setValue = function(value) {
barFill.value = value
barFill.text(value)
barFill.css('width', Math.trunc(100 * value / maxValue) + '%')
barFill.css('clip-path', "inset(0% " + (100 - 100 * value / maxValue) + '% 0% 0%)')
barLabel.text(value)
}

return barRoot;
Expand Down Expand Up @@ -463,7 +476,7 @@ class Replay {
$.each(this.maps, function(index, map) {
map.imageDst = replay.calcDstBox(map, index, replay.maps.length)
});
this.renderFrame(this.frameTime)
this.setFrame(this.frameTime)
} else {

let replayRoot = this.rootElement[0]
Expand All @@ -487,7 +500,7 @@ class Replay {
map.imageDst = replay.calcDstBox(map, index, replay.maps.length)
});

this.renderFrame(this.frameTime)
this.setFrame(this.frameTime)
}
}

Expand Down
Loading

0 comments on commit 97bcb75

Please sign in to comment.