Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-08 14:33:22 +00:00
Code Issues Projects Releases Wiki Activity

Adding line chart, adding speed function

Browse Source
This commit is contained in:
Colin McLeod
2015-06-19 19:04:45 -07:00
parent 25020293ec
commit 93f92da1df
5 changed files with 251 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/js/controllers/controller-outfit.js
View File

@@ -1,4 +1,4 @@
angular.module('app').controller('OutfitController', ['$window', '$rootScope', '$scope', '$state', '$stateParams', 'ShipsDB', 'Ship', 'Components', 'Serializer', 'Persist', 'calcTotalRange', function($window, $rootScope, $scope, $state, $p, Ships, Ship, Components, Serializer, Persist, calcTotalRange) {
angular.module('app').controller('OutfitController', ['$window', '$rootScope', '$scope', '$state', '$stateParams', 'ShipsDB', 'Ship', 'Components', 'Serializer', 'Persist', 'calcTotalRange', 'calcSpeed', function($window, $rootScope, $scope, $state, $p, Ships, Ship, Components, Serializer, Persist, calcTotalRange, calcSpeed) {
var data = Ships[$p.shipId]; // Retrieve the basic ship properties, slots and defaults
var ship = new Ship($p.shipId, data.properties, data.slots); // Create a new Ship instance
var win = angular.element($window); // Angularized window object for event triggering
@@ -55,8 +55,7 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
title: 'Jump Range',
unit: 'LY'
}
},
watch: $scope.fsd
}
};
$scope.trSeries = {
@@ -78,8 +77,30 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
title: 'Total Range',
unit: 'LY'
}
},
watch: $scope.fsd
}
};
$scope.speedSeries = {
xMin: 0,
xMax: ship.cargoCapacity,
yMax: 500,
yMin: 0,
series: ['speed', 'boost'],
func: function(cargo) { // X Axis is Cargo
return calcSpeed(ship.unladenMass + $scope.fuel + cargo, ship.speed, ship.boost, $scope.th.c);
}
};
$scope.speedChart = {
labels: {
xAxis: {
title: 'Cargo',
unit: 'T'
},
yAxis: {
title: 'Speed',
unit: 'm/s'
}
}
};
/**
@@ -122,8 +143,7 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
ship.useBulkhead(id);
}
$scope.selectedSlot = null;
$scope.code = Serializer.fromShip(ship);
updateState();
updateState(Serializer.fromShip(ship));
}
};
@@ -133,8 +153,7 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
$scope.reloadBuild = function() {
if ($scope.buildName && $scope.savedCode) {
Serializer.toShip(ship, $scope.savedCode); // Repopulate with components from last save
$scope.code = $scope.savedCode;
updateState();
updateState($scope.savedCode);
}
};
@@ -149,8 +168,7 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
ship.hardpoints.forEach(function(slot) { ship.use(slot, null, null); });
ship.internal.forEach(function(slot) { ship.use(slot, null, null); });
ship.useBulkhead(0);
$scope.code = Serializer.fromShip(ship);
updateState();
updateState(Serializer.fromShip(ship));
};
/**
@@ -169,7 +187,7 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
if ($scope.code != $scope.savedCode) {
Persist.saveBuild(ship.id, $scope.buildName, $scope.code);
$scope.savedCode = $scope.code;
updateState();
updateState($scope.code);
}
};
@@ -218,21 +236,18 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
*/
$scope.togglePwr = function(c) {
ship.setSlotEnabled(c, !c.enabled);
$scope.code = Serializer.fromShip(ship);
updateState();
updateState(Serializer.fromShip(ship));
};
$scope.incPriority = function(c) {
if (ship.changePriority(c, c.priority + 1)) {
$scope.code = Serializer.fromShip(ship);
updateState();
updateState(Serializer.fromShip(ship));
}
};
$scope.decPriority = function(c) {
if (ship.changePriority(c, c.priority - 1)) {
$scope.code = Serializer.fromShip(ship);
updateState();
updateState(Serializer.fromShip(ship));
}
};
@@ -251,9 +266,10 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
// Utilify functions
function updateState() {
function updateState(code) {
$scope.code = code;
$state.go('outfit', { shipId: ship.id, code: $scope.code, bn: $scope.buildName }, { location: 'replace', notify: false });
$scope.trSeries.xMax = $scope.jrSeries.xMax = ship.cargoCapacity;
$scope.speedSeries.xMax = $scope.trSeries.xMax = $scope.jrSeries.xMax = ship.cargoCapacity;
$scope.jrSeries.yMax = ship.unladenRange;
$scope.trSeries.yMax = ship.unladenTotalRange;
win.triggerHandler('pwrchange');

190
app/js/directives/directive-line-chart.js Normal file
View File

@@ -0,0 +1,190 @@
angular.module('app').directive('lineChart', ['$window', function($window) {
return {
restrict: 'A',
scope: {
config: '=',
series: '='
},
link: function(scope, element) {
var seriesConfig = scope.series,
series = seriesConfig.series,
color = d3.scale.ordinal().range([ '#ff8c0d', '#1fb0ff', '#a05d56', '#d0743c']),
config = scope.config,
labels = config.labels,
margin = { top: 15, right: 15, bottom: 35, left: 60 },
fmt = d3.format('.3r'),
fmtLong = d3.format('.2f'),
func = seriesConfig.func,
drag = d3.behavior.drag(),
dragging = false,
// Define Scales
x = d3.scale.linear(),
y = d3.scale.linear(),
// Define Axes
xAxis = d3.svg.axis().scale(x).outerTickSize(0).orient('bottom').tickFormat(d3.format('.2r')),
yAxis = d3.svg.axis().scale(y).ticks(6).outerTickSize(0).orient('left').tickFormat(fmt),
data = [];
// Create chart
var svg = d3.select(element[0]).append('svg');
var vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var lines = vis.append('g');
// Define Area
var line = d3.svg.line().y(function(d) { return y(d[1]); });
// Create Y Axis SVG Elements
var yTxt = vis.append('g').attr('class', 'y axis')
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', -50)
.attr('dy', '.1em')
.style('text-anchor', 'middle')
.text(labels.yAxis.title + ' (' + labels.yAxis.unit + ')');
// Create X Axis SVG Elements
var xLbl = vis.append('g').attr('class', 'x axis');
var xTxt = xLbl.append('text')
.attr('y', 30)
.attr('dy', '.1em')
.style('text-anchor', 'middle')
.text(labels.xAxis.title + ' (' + labels.xAxis.unit + ')');
// Create and Add tooltip
var tipWidth = (Math.max(labels.yAxis.unit.length, labels.xAxis.unit.length) * 1.25) + 2;
var tips = vis.append('g').style('display', 'none');
var background = vis.append('rect') // Background to capture hover/drag
.attr('fill-opacity', 0)
.on('mouseover', showTip)
.on('mouseout', hideTip)
.on('mousemove', moveTip)
.call(drag);
drag
.on('dragstart', function() {
dragging = true;
moveTip.call(this);
showTip();
})
.on('dragend', function() {
dragging = false;
hideTip();
})
.on('drag', moveTip);
/**
* Watch for changes in the series data (mass changes, etc)
*/
scope.$watchCollection('series', render);
angular.element($window).bind('orientationchange resize render', render);
function render() {
var width = element[0].parentElement.offsetWidth,
height = width * 0.5,
xMax = seriesConfig.xMax,
xMin = seriesConfig.xMin,
yMax = seriesConfig.yMax,
yMin = seriesConfig.yMin,
w = width - margin.left - margin.right,
h = height - margin.top - margin.bottom,
s, val, yVal, delta;
data.length = 0; // Reset Data array
if (seriesConfig.xMax == seriesConfig.xMin) {
line.x(function(d, i) { return i * w; });
} else {
line.x(function(d) { return x(d[0]); });
}
if (series) {
for (s = 0; s < series.length; s++) {
data.push([]);
}
if (xMax == xMin) {
yVal = func(xMin);
for (s = 0; s < series.length; s++) {
data[s].push( [ xMin, yVal[ series[s] ] ], [ 1, yVal[ series[s] ] ]);
}
} else {
delta = (xMax - xMin) / 30; // Only render 30 points on the graph
for (val = xMin; val <= xMax; val += delta) {
yVal = func(val);
for (s = 0; s < series.length; s++) {
data[s].push([ val, yVal[ series[s] ] ]);
}
}
}
} else {
var seriesData = [];
if (xMax == xMin) {
yVal = func(xMin);
seriesData.push([ xMin, yVal ], [ 1, yVal ]);
} else {
delta = (xMax - xMin) / 30; // Only render 30 points on the graph
for (val = xMin; val <= xMax; val += delta) {
seriesData.push([val, func(val) ]);
}
}
data.push(seriesData);
}
// Update Chart Size
svg.attr('width', width).attr('height', height);
background.attr('height', h).attr('width', w);
// Update domain and scale for axes
x.range([0, w]).domain([xMin, xMax]).clamp(true);
xLbl.attr('transform', 'translate(0,' + h + ')');
xTxt.attr('x', w / 2);
y.range([h, 0]).domain([yMin, yMax]);
yTxt.attr('x', -h / 2);
vis.selectAll('.y.axis').call(yAxis);
vis.selectAll('.x.axis').call(xAxis);
lines.selectAll('path.line')
.data(data)
.attr('d', line) // Update existing series
.enter() // Add new series
.append('path')
.attr('class', 'line')
.attr('stroke', function(d, i) { return color(i); })
.attr('stroke-width', 2)
.attr('d', line);
var tip = tips.selectAll('g.tooltip').data(data).enter().append('g').attr('class', 'tooltip');
tip.append('rect').attr('width', tipWidth + 'em').attr('height', '2em').attr('x', '0.5em').attr('y', '-1em').attr('class', 'tip');
tip.append('circle').attr('class', 'marker').attr('r', 4);
tip.append('text').attr('class', 'label x').attr('y', '-0.25em');
tip.append('text').attr('class', 'label y').attr('y', '0.85em');
}
function showTip() {
tips.style('display', null);
}
function hideTip() {
if (!dragging) {
tips.style('display', 'none');
}
}
function moveTip() {
var xPos = d3.mouse(this)[0], x0 = x.invert(xPos), y0 = func(x0), flip = (x0 / x.domain()[1] > 0.65);
var tip = tips.selectAll('g.tooltip').attr('transform', function(d, i) { return 'translate(' + x(x0) + ',' + y(series ? y0[series[i]] : y0) + ')'; });
tip.selectAll('rect').attr('x', flip ? (-tipWidth - 0.5) + 'em' : '0.5em').style('text-anchor', flip ? 'end' : 'start');
tip.selectAll('text.label').attr('x', flip ? '-1em' : '1em').style('text-anchor', flip ? 'end' : 'start');
tip.selectAll('text.label.x').text(fmtLong(x0) + ' ' + labels.xAxis.unit);
tips.selectAll('text.label.y').text(function(d, i) { return fmtLong(series ? y0[series[i]] : y0) + ' ' + labels.yAxis.unit; });
}
scope.$on('$destroy', function() {
angular.element($window).unbind('orientationchange resize render', render);
});
}
};
}]);

19
app/js/shipyard/module-shipyard.js
View File

@@ -208,9 +208,6 @@ angular.module('shipyard', ['ngLodash'])
* @return {number} Approximate shield strengh in MJ
*/
.value('calcShieldStrength', function(mass, shields, sg, multiplier) {
if (!sg) {
return 0;
}
if (mass <= sg.minmass) {
return shields * multiplier * sg.minmul;
}
@@ -221,4 +218,20 @@ angular.module('shipyard', ['ngLodash'])
return shields * multiplier * (sg.optmul + (mass - sg.optmass) / (sg.maxmass - sg.optmass) * (sg.maxmul - sg.optmul));
}
return shields * multiplier * sg.maxmul;
})
/**
* Calculate the a ships speed based on mass, and thrusters. Currently Innacurate / Incomplete :(
*
* @private
* @param {number} mass Current mass of the ship
* @param {number} baseSpeed Base speed m/s for ship
* @param {number} baseBoost Base boost m/s for ship
* @param {object} thrusters The shield generator used
* @return {object} Approximate speed and boost speed in m/s
*/
.value('calcSpeed', function(mass, baseSpeed, baseBoost) { //, thrusters) {
//var speed = baseSpeed * (1 + ((thrusters.optmass / mass) * 0.1 ) ); // TODO: find thruser coefficient(s)
//var boost = baseBoost * (1 + ((thrusters.optmass / mass) * 0.1 ) );
return { boost: baseSpeed, speed: baseBoost };
});

4
app/less/outfit.less
View File

@@ -167,7 +167,7 @@ table.total {
}
&.semi {
width: 50%;
width: 33%;
.smallTablet({
.axis {
@@ -179,7 +179,7 @@ table.total {
}
});
.medPhone({
.largePhone({
width: 100% !important;
});
}

9
app/views/page-outfit.html
View File

@@ -266,12 +266,17 @@
<div class="group semi">
<h1>Jump Range</h1>
<div area-chart config="jrChart" series="jrSeries"></div>
<div line-chart config="jrChart" series="jrSeries"></div>
</div>
<div class="group semi">
<h1>Total Range</h1>
<div area-chart config="trChart" series="trSeries"></div>
<div line-chart config="trChart" series="trSeries"></div>
</div>
<div class="group semi">
<h1>Thruster Speed</h1>
<div line-chart config="speedChart" series="speedSeries"></div>
</div>
<div class="group dbl">