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 // 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);
},
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { // Behaviors
var properties = ko.pureComputed(function () { self.calculateDivStyle = function(timestamp, ability) {
var obj = ko.utils.unwrapObservable(valueAccessor()); var fight_length = self.fight.end_time - self.fight.start_time;
return ko.bindingHandlers.foreachprop.transformObject(obj); console.log("Fight was "+fight_length);
}); var cooldown = window.trackedCooldowns[ability.guid].cooldown;
ko.applyBindingsToNode(element, { foreach: properties }, bindingContext); console.log("Use was at "+timestamp+" and cd is "+cooldown);
return { controlsDescendantBindings: true }; 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;
}; };
},
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 // 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>