lib/pairing_matrix/server/public/matrix.js in pairing_matrix-0.1.2 vs lib/pairing_matrix/server/public/matrix.js in pairing_matrix-1.0

@@ -46,16 +46,13 @@
                     toCoordinates = playground.getPlayerCoordinates(toIndex);
                 return "M " + fromCoordinates.x + " " + fromCoordinates.y + " Q 400 350 " +
                     toCoordinates.x + " " + toCoordinates.y;
             })
             .attr("id", function(d) {return d.join('_')})
-            .attr("fill", "none")
-            .attr("stroke", "#DD1031")
             .attr("stroke-width", function (d) {
                 return playground.connectionScale(d[2])
             })
-            .attr("stroke-opacity", 0.75)
             .attr("data-from", function (d) {
                 return d[0]
             })
             .attr("data-to", function (d) {
                 return d[1]
@@ -81,19 +78,14 @@
                 return playground.getPlayerCoordinates(i).x
             })
             .attr("cy", function (d, i) {
                 return playground.getPlayerCoordinates(i).y
             })
-            .attr("r", 20)
             .attr("fill", colors)
-            .attr("fill-opacity", 0.75)
-            .attr("stroke", "#EE1031")
-            .attr("stroke-opacity", 0.75)
             .attr("stroke-width", function (d) {
                 return playground.connectionScale(playground.getSoloContribution(d))
             })
-            .attr("z-index", 10)
             .attr("class", "player")
             .attr("id", function (d) {
                 return d
             })
             .on('mouseover', this.mouseOver)
@@ -116,55 +108,40 @@
         return _.filter(this.validPairsData, function(pair) {
             return pair.indexOf(name) >= 0
         });
     };
 
+    this.toggleClass = function toggleClass(newClass, pair) {
+        for(ii = 0; ii < 2; ii++) {
+            d3.selectAll($("#" + pair[ii]))
+                .attr("class", newClass)    
+        }
+    }
+
     this.mouseOut = function(id) {
         var connectedPairs = playground.getAllPairsContaining(id);
         connectedPairs.forEach(function(pair) {
-            var firstPerson = pair[0];
-            var secondPerson = pair[1];
-            d3.selectAll($("#" + firstPerson))
-                .style("fill", function(d) {return d.color})
-                .style("stroke", "#EE1031")
-            d3.selectAll($("#" + secondPerson))
-                .style("fill", function(d) {return d.color})
-                .style("stroke", "#EE1031")
+            playground.toggleClass("player", pair);
             var pairId = pair.join('_');
             d3.selectAll($("#" + pairId))
-            .style("fill", "none")
-            .style("stroke", "red")
-            .style("stroke-width", function(d) {return d.color})
+            .attr("class", "connect")
+            .style("stroke-width", function(d) {return playground.connectionScale(d[2])})
         })
         d3.selectAll($("#" + id))
-        .style("fill", function(d) {return d.color})
-        .style("stroke", "#EE1031")
-        .attr("stroke-opacity", 0.75)
-        .attr("stroke-width", function (d) {
-            return playground.connectionScale(playground.getSoloContribution(d))
-        });
+        .attr("class", "player")
     }
 
     this.mouseOver = function (id) {
         var connectedPairs = playground.getAllPairsContaining(id);
         connectedPairs.forEach(function(pair) {
-            var firstPerson = pair[0];
-            var secondPerson = pair[1];
-            d3.selectAll($("#" + firstPerson))
-                .style("fill", "red")
-                .style("stroke", "blue");
-            d3.selectAll($("#" + secondPerson))
-                .style("fill", "red")
-                .style("stroke", "blue");
+            playground.toggleClass("playerLarge", pair)
             var pairId = pair.join('_');
             d3.selectAll($("#" + pairId))
-            .style("fill", "none")
-            .style("stroke", "black")
-            .style("stroke-width", "2px")
+            .attr("class", "connectLarge")
+            .style("stroke-width", function(d) {return playground.connectionScale(d[2]) * 3})
         })
         d3.selectAll($("#" + id))
-        .style("fill", "red")
-        .style("stroke", "blue");
+        .attr("class", "playerLarge")
     };
 
     this.updateConnectorsPath = function (playerId, newPoint) {
         playground.el
             .selectAll(".connect[data-from='" + playerId + "']")