Add ugly self-made timeline

4 years ago · 8961ab5a89
3 changed files with 49 additions and 23 deletions
--- a/cd.css
+++ 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;
+}
--- 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:
+			'<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);
 	}
--- a/index.html
+++ b/index.html
@ -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>