damage viz

_.md

[ Launch: damage viz ] 8895741 by enoex
[ Launch: damage viz ] 8895607 by enoex

config.json

{"description":"damage viz","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/Y5IQ5cj.png"}

inlet.js

svg = d3.select('svg');
svg.append('text')
.attr({ y: 30, x: 0, 'font-size': '30px'})
	.text('Damage Curve')

var width = 650;
var height = 350;
var chart = svg.append('g').attr({ transform: 'translate(50, 120)'});
var label = svg.append('text').attr({ x: 0, y: 60 });
var dotGroup = chart.append('g');
var axes = chart.append('g');
var annotations = chart.append('g');
annotations.append('text').attr({ 'class': 'yLabel', x: width/2.25, y: -5 }).text('Final Damage')
annotations.append('text').attr({ 'class': 'yLabel', x: width + 20, y: height + 5 }).text('Resist (armor)')


function getMultiplier(factor, resist){
	// This is the main damage calculation function. Change this to change how damage is calculated
  	// take in a factor (0 to 1) and a resist value (e.g., the entity
    // armor or magic resist or elemental resist value).
    //
    // Same formula for armor and resists
    //
    // Returns the multiplier, a number to multiply the original damage
    // by
    
    var multiplier;
    
    if(resist >= 0){
      multiplier = 100 / (100 + (factor * resist) );
    } else {
      multiplier = 2 - (100 / (100 - (factor * resist) ));
    }
    
    return multiplier;
}



function drawCurve(baseDamage, factor){
  var yMax = baseDamage;
  var xMax = 2000;
  
  var xScale = d3.scale.linear()
      .domain([-xMax, xMax])
      .range([0, width]);
  
  var yScale = d3.scale.linear()
      .domain([200, 0])
      .range([0,height]);
  
  var xVals = d3.range(-xMax,xMax,10);
 
  //axes
  axes.append('line')
  	.attr({ x1: xScale(0), x2: xScale(0), y1: 0, y2: height });
  axes.append('line')
 	.attr({ 'class': 'dmg-cutoff', x1: 0, x2: width, y1: yScale(baseDamage), y2: yScale(baseDamage) });
  axes.append('line')
  	.attr({ 'class': 'zero', x1: 0, x2: width, y1: yScale(0), y2: yScale(0) });
  
  
  // dots
  var targetClass = '.damage' + baseDamage + '_' + (factor+'').replace('.', '_');
  var dots = dotGroup.selectAll(targetClass)
      .data(xVals);
  
  dots.enter()
    .append('circle')
  	.attr({ 'class': targetClass })
    .on('mouseenter', function(d){
      label.text('Base damage: ' + baseDamage + ' | Resist (x): ' + d + ' | Final Damage(y): ' + Math.round(((getMultiplier(factor, d) * baseDamage)) * 100)/100 );	
    });
    
  dots.attr({
      cx: function(d){ return xScale(d); },
      cy: function(d){ 
        return yScale(getMultiplier(factor, d)*baseDamage); 
      },
      r: 10
    })

}

drawCurve(100,1)

style.css

circle {
 fill: #dd2222;
 stroke: #aa0000;
  opacity: 1;
}

line {
 stroke: #343434;
 stroke-width: 2px;
}
.dmg-cutoff {
	stroke: #a0a0a0;
  stroke-width: 1px;
  	stroke-dasharray: 4px 5px;
}
.yLabel {
	fill: rgba(0,0,0,0.6);
  text-shadow: 0 1px 0 #FFFFFF;
  font-size: 0.8em;
}