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

Add ugly self-made timeline

Browse Source
This commit is contained in:
amki 2020-07-27 15:54:26 +02:00
parent 0b4e6ae03d
commit 8961ab5a89
3 changed files with 49 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
cd.css Normal file
View File

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

56
cd.js
View File

@ -33,23 +33,34 @@ var trackedCooldowns = {
// Do stuff when HTML parsing is ready
$(() => {
ko.bindingHandlers.foreachprop = {
transformObject: function (obj) {
var properties = [];
ko.utils.objectForEach(obj, function (key, value) {
properties.push({ key: key, value: value });
});
return properties;
ko.components.register('fight-timeline', {
viewModel: function(params) {
var self = this;
// Data: value is either null, 'like', or 'dislike'
this.fight = params.value.fight();
this.actors = params.value.actors;
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) {
var properties = ko.pureComputed(function () {
var obj = ko.utils.unwrapObservable(valueAccessor());
return ko.bindingHandlers.foreachprop.transformObject(obj);
});
ko.applyBindingsToNode(element, { foreach: properties }, bindingContext);
return { controlsDescendantBindings: true };
}
};
template:
'<div class="timeline-container" data-bind="foreach: actors">\
<!-- ko foreach: trackedEvents -->\
<span class="timeline-used" data-bind="style: $component.calculateDivStyle(timestamp, ability)"><span data-bind="text: ability.name"></span></span>\
<!-- /ko -->\
</div>'
});
// Document is ready
function IndexViewModel() {
var self = this;
@ -71,8 +82,12 @@ $(() => {
self.displayFightPicker(true);
};
self.formatTime = function(fight) {
let secs = (fight.end_time - fight.start_time)/1000;
self.formatFightTime = function(fight) {
return self.formatTime(fight.end_time - fight.start_time);
};
self.formatTime = function(time) {
let secs = time/1000;
let mins = Math.floor(secs / 60);
let rest = Math.floor(secs % 60);
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
self.trackedActors([]);
self.trackedActors(actors);
for(var actor of self.trackedActors()) {
console.log("tracked: ",actor.trackedEvents());
}
console.log("trackedActors: ",self.trackedActors());
};
self.textColor = function(job) {
@ -167,6 +180,7 @@ async function filterEvents(fight, events) {
actor.trackedEvents = ko.observableArray();
result.push(actor);
}
event.timestamp = event.timestamp - fight.start_time;
actor.trackedEvents.push(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://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="cd.css"/>
</head>
<body class="bg-jet mx-2 my-2">
<div class="container-fluid">
@ -23,7 +24,7 @@
<div class="input-group">
<select id="bossname" class="form-control col-md-4 mx-1" data-bind="visible: displayFightPicker, options: fights,
optionsText: function(item) {
return item.name + ' ('+ formatTime(item) + ')'
return item.name + ' ('+ formatFightTime(item) + ')'
},
value: selectedFight,
optionsCaption: 'Pick a fight...',
@ -44,8 +45,9 @@
<div class="col-sm" data-bind="foreach: trackedActors">
<details>
<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">
<span data-bind="text: timestamp+' '+ability.name"></span>
<span data-bind="text: $root.formatTime(timestamp)+' '+ability.name"></span>
</div>
</details>
</div>