diff --git a/cd.css b/cd.css new file mode 100644 index 0000000..587e5d5 --- /dev/null +++ b/cd.css @@ -0,0 +1,10 @@ +.timeline-container { + width: 100%; + height: 50px; + background-color: green; +} +.timeline-used { + position: absolute; + height: 50px; + background-color: red; +} \ No newline at end of file diff --git a/cd.js b/cd.js index afd6d72..993eea8 100644 --- a/cd.js +++ b/cd.js @@ -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: + '