amki
/
timeline-trigger
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add ugly self-made timeline

master
amki 5 years ago
parent
0b4e6ae03d
commit
8961ab5a89
3 changed files with 49 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      cd.css
  2. 54
      cd.js
  3. 6
      index.html

10
cd.css
View File

@ -0,0 +1,10 @@
.timeline-container {
width: 100%;
height: 50px;
background-color: green;
}
.timeline-used {
position: absolute;
height: 50px;
background-color: red;
}

54
cd.js
View File

@ -33,23 +33,34 @@ var trackedCooldowns = {
// Do stuff when HTML parsing is ready // Do stuff when HTML parsing is ready
$(() => { $(() => {
ko.bindingHandlers.foreachprop = { ko.components.register('fight-timeline', {
transformObject: function (obj) { viewModel: function(params) {
var properties = []; var self = this;
ko.utils.objectForEach(obj, function (key, value) { // Data: value is either null, 'like', or 'dislike'
properties.push({ key: key, value: value }); this.fight = params.value.fight();
}); this.actors = params.value.actors;
return properties; console.log("fight-timeline: Got ",params.value);
// Behaviors
self.calculateDivStyle = function(timestamp, ability) {
var fight_length = self.fight.end_time - self.fight.start_time;
console.log("Fight was "+fight_length);
var cooldown = window.trackedCooldowns[ability.guid].cooldown;
console.log("Use was at "+timestamp+" and cd is "+cooldown);
var startpct = timestamp / fight_length * 100;
var widthpct = cooldown / fight_length * 100;
console.log("Cooldown started at "+startpct+"% and endured "+widthpct+"%");
var res = {color: "teal", "margin-left": startpct+"%", width:widthpct+"%"};
return res;
};
}, },
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { template:
var properties = ko.pureComputed(function () { '<div class="timeline-container" data-bind="foreach: actors">\
var obj = ko.utils.unwrapObservable(valueAccessor()); <!-- ko foreach: trackedEvents -->\
return ko.bindingHandlers.foreachprop.transformObject(obj); <span class="timeline-used" data-bind="style: $component.calculateDivStyle(timestamp, ability)"><span data-bind="text: ability.name"></span></span>\
<!-- /ko -->\
</div>'
}); });
ko.applyBindingsToNode(element, { foreach: properties }, bindingContext);
return { controlsDescendantBindings: true };
}
};
// Document is ready // Document is ready
function IndexViewModel() { function IndexViewModel() {
var self = this; var self = this;
@ -71,8 +82,12 @@ $(() => {
self.displayFightPicker(true); self.displayFightPicker(true);
}; };
self.formatTime = function(fight) { self.formatFightTime = function(fight) {
let secs = (fight.end_time - fight.start_time)/1000; return self.formatTime(fight.end_time - fight.start_time);
};
self.formatTime = function(time) {
let secs = time/1000;
let mins = Math.floor(secs / 60); let mins = Math.floor(secs / 60);
let rest = Math.floor(secs % 60); let rest = Math.floor(secs % 60);
return mins+"m"+rest+"s"; return mins+"m"+rest+"s";
@ -106,9 +121,7 @@ $(() => {
//FIXME: This is a hack, we should instead somehow update the trackedEvents observable so only this part is rerendered //FIXME: This is a hack, we should instead somehow update the trackedEvents observable so only this part is rerendered
self.trackedActors([]); self.trackedActors([]);
self.trackedActors(actors); self.trackedActors(actors);
for(var actor of self.trackedActors()) { console.log("trackedActors: ",self.trackedActors());
console.log("tracked: ",actor.trackedEvents());
}
}; };
self.textColor = function(job) { self.textColor = function(job) {
@ -167,6 +180,7 @@ async function filterEvents(fight, events) {
actor.trackedEvents = ko.observableArray(); actor.trackedEvents = ko.observableArray();
result.push(actor); result.push(actor);
} }
event.timestamp = event.timestamp - fight.start_time;
actor.trackedEvents.push(event); actor.trackedEvents.push(event);
console.log(event); console.log(event);
} }

6
index.html
View File

@ -7,6 +7,7 @@
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link type="text/css" rel="stylesheet" href="ffxiv.css"/> <link type="text/css" rel="stylesheet" href="ffxiv.css"/>
<link type="text/css" rel="stylesheet" href="cd.css"/>
</head> </head>
<body class="bg-jet mx-2 my-2"> <body class="bg-jet mx-2 my-2">
<div class="container-fluid"> <div class="container-fluid">
@ -23,7 +24,7 @@
<div class="input-group"> <div class="input-group">
<select id="bossname" class="form-control col-md-4 mx-1" data-bind="visible: displayFightPicker, options: fights, <select id="bossname" class="form-control col-md-4 mx-1" data-bind="visible: displayFightPicker, options: fights,
optionsText: function(item) { optionsText: function(item) {
return item.name + ' ('+ formatTime(item) + ')' return item.name + ' ('+ formatFightTime(item) + ')'
}, },
value: selectedFight, value: selectedFight,
optionsCaption: 'Pick a fight...', optionsCaption: 'Pick a fight...',
@ -44,8 +45,9 @@
<div class="col-sm" data-bind="foreach: trackedActors"> <div class="col-sm" data-bind="foreach: trackedActors">
<details> <details>
<summary><span data-bind="text: type, text: name, style: {color: $parent.textColor($data)}"></span></summary> <summary><span data-bind="text: type, text: name, style: {color: $parent.textColor($data)}"></span></summary>
<fight-timeline params="value: {fight: $root.selectedFight, actors: $parent.trackedActors.splice($index,1)}"></fight-timeline>
<div data-bind="foreach: trackedEvents"> <div data-bind="foreach: trackedEvents">
<span data-bind="text: timestamp+' '+ability.name"></span> <span data-bind="text: $root.formatTime(timestamp)+' '+ability.name"></span>
</div> </div>
</details> </details>
</div> </div>

Write Preview
Loading…
Cancel
Save