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

Adding comparison charts, fixes and tweaks

Browse Source
This commit is contained in:
Colin McLeod
2015-05-12 22:43:47 -07:00
parent 1cec10432a
commit 02fe76f43b
22 changed files with 446 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/index.html
View File

@@ -2,28 +2,27 @@
<html ng-app="app" ng-strict-di="true"> <html ng-app="app" ng-strict-di="true">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<base href="/">
<title ng-bind="title">Coriolis</title> <title ng-bind="title">Coriolis</title>
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="/app.css">
<link rel="apple-touch-icon" sizes="76x76" href="images/logo/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="/images/logo/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/logo/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="/images/logo/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/logo/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="/images/logo/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/logo/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="/images/logo/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/logo/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="/images/logo/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/logo/apple-touch-icon-180x180.png"> <link rel="apple-touch-icon" sizes="180x180" href="/images/logo/apple-touch-icon-180x180.png">
<link rel="icon" sizes="96x96" type="image/png" href="images/logo/favicon-96x96.png"> <link rel="icon" sizes="96x96" type="image/png" href="/images/logo/favicon-96x96.png">
<link rel="icon" sizes="194x194" type="image/png" href="images/logo/favicon-194x194.png"> <link rel="icon" sizes="194x194" type="image/png" href="/images/logo/favicon-194x194.png">
<link rel="icon" sizes="192x192" type="image/png" href="images/logo/android-chrome-192x192.png"> <link rel="icon" sizes="192x192" type="image/png" href="/images/logo/android-chrome-192x192.png">
<link rel="manifest" href="images/logo/manifest.json"> <link rel="manifest" href="/images/logo/manifest.json">
<link rel="shortcut icon" href="images/logo/favicon.ico"> <link rel="shortcut icon" href="/images/logo/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="images/logo/mstile-144x144.png"> <meta name="msapplication-TileImage" content="/images/logo/mstile-144x144.png">
<meta name="msapplication-config" content="images/logo/browserconfig.xml"> <meta name="msapplication-config" content="/images/logo/browserconfig.xml">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head> </head>
<body ng-class="bodyClass" ng-click="bgClicked($event)"> <body ng-class="bodyClass" ng-click="bgClicked($event)">
<div style="height: 0; width: 0; position: absolute; visibility: hidden"><%= svgContent %></div> <div style="height: 0; width: 0; overflow:hidden"><%= svgContent %></div>
<shipyard-header></shipyard-header> <shipyard-header></shipyard-header>
<div id="main" ui-view></div> <div id="main" ui-view></div>
@@ -33,13 +32,13 @@
<div class="right"> <div class="right">
<a href="https://github.com/cmmcleod/coriolis" target="_blank" title="Coriolis Github Project">Version <%= version %> - <%= date %></a> <a href="https://github.com/cmmcleod/coriolis" target="_blank" title="Coriolis Github Project">Version <%= version %> - <%= date %></a>
</div> </div>
<div class="l"> <div style="max-width:50%" class="l">
Coriolis Shipyard was created for non-commercial purposes. It is not endorsed by nor reflects the views or opinions of Frontier Developments. Coriolis Shipyard was created for non-commercial purposes. It is not endorsed by nor reflects the views or opinions of Frontier Developments.
</div> </div>
</footer> </footer>
<script src="lib.js" type="text/javascript"></script> <script src="/lib.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script> <script src="/app.js" type="text/javascript"></script>
<% if (uaTracking) { %> <% if (uaTracking) { %>
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

2
app/js/config.js
View File

@@ -3,7 +3,7 @@
*/ */
angular.module('app').config(['$provide','$stateProvider', '$urlRouterProvider', '$locationProvider', 'ShipsDB', function ($provide, $stateProvider, $urlRouterProvider, $locationProvider, ships) { angular.module('app').config(['$provide','$stateProvider', '$urlRouterProvider', '$locationProvider', 'ShipsDB', function ($provide, $stateProvider, $urlRouterProvider, $locationProvider, ships) {
// Use HTML5 push and replace state if possible // Use HTML5 push and replace state if possible
$locationProvider.html5Mode(true); $locationProvider.html5Mode({enabled: true, requireBase: false});
/** /**
* Set up all states and their routes. * Set up all states and their routes.
*/ */

64
app/js/controllers/controller-comparison.js
View File

@@ -1,34 +1,66 @@
angular.module('app').controller('ComparisonController', ['$rootScope', '$scope', 'ShipsDB', 'Ship', 'Persist', 'Serializer', function ($rootScope, $scope, Ships, Ship, Persist, Serializer) { angular.module('app').controller('ComparisonController', ['$rootScope', '$filter', '$scope', 'ShipFacets', 'ShipsDB', 'Ship', 'Persist', 'Serializer', function ($rootScope, $filter, $scope, ShipFacets, Ships, Ship, Persist, Serializer) {
$rootScope.title = 'Coriolis - Comparison'; $rootScope.title = 'Coriolis - Comparison';
$rootScope.bodyClass = 'docking-bay'; $rootScope.bodyClass = null;
$scope.facets = ShipFacets;
$scope.subFacets = [];
for (var i = 0, l = $scope.facets.length; i < l; i++) {
var facet = $scope.facets[i];
if(facet.prop) {
$scope.subFacets.push({
prop: facet.prop,
fmt: $rootScope[facet.fmt],
unit: facet.unit
});
} else {
for (var j = 0, pl = facet.props.length; j < pl; j++) {
$scope.subFacets.push({
sub: true,
start: j == 0,
prop: facet.props[j],
label: facet.lbls[j],
fmt: $rootScope[facet.fmt],
unit: facet.unit
});
}
}
}
var comparison = $scope.comparison = []; var comparison = $scope.comparison = [];
var orderBy = $filter('orderBy');
var buildCount = 0;
for (var shipId in Persist.builds) { for (var shipId in Persist.builds) {
var data = Ships[shipId]; var data = Ships[shipId];
for (var buildName in Persist.builds[shipId]) { for (var buildName in Persist.builds[shipId]) {
var code = Persist.builds[shipId][buildName]; var code = Persist.builds[shipId][buildName];
var ship = new Ship(shipId, data.properties, data.slots); // Create a new Ship instance var b = new Ship(shipId, data.properties, data.slots); // Create a new Ship instance
Serializer.toShip(ship, code); // Populate components from 'code' URL param Serializer.toShip(b, code); // Populate components from 'code' URL param
// Extend ship instance and add properties below
comparison.push({ b.buildName = buildName;
shipId: shipId, b.code = code;
buildName: buildName, b.pctRetracted = b.powerRetracted / b.powerAvailable;
ship: ship, b.pctDeployed = b.powerDeployed / b.powerAvailable;
code: code, comparison.push(b); // Add ship build to comparison
pctRetracted: ship.powerRetracted / ship.powerAvailable,
pctDeployed: ship.powerDeployed / ship.powerAvailable,
});
} }
} }
$scope.chartHeight = 45 + (25 * comparison.length);
$scope.predicate = 'ship.name'; $scope.predicate = 'ship.name';
$scope.desc = false; $scope.desc = true;
$scope.sortProperty = function (e) {
var prop = angular.element(e.target).attr('prop'); // Get component ID
if(prop) {
$scope.sort(prop);
}
};
$scope.sort = function (key) { $scope.sort = function (key) {
$scope.desc = ($scope.predicate == key)? !$scope.desc : $scope.desc; $scope.desc = ($scope.predicate == key)? !$scope.desc : $scope.desc;
$scope.predicate = key; $scope.predicate = key;
} $scope.comparison = orderBy($scope.comparison, $scope.predicate, $scope.desc);
};
$scope.sort('name');
}]); }]);

122
app/js/directives/directive-bar-chart.js Normal file
View File

@@ -0,0 +1,122 @@
angular.module('app').directive('barChart', ['$rootScope', function ($rootScope) {
function bName (build) {
return build.buildName + '\n' + build.name;
}
var insertLinebreaks = function (d) {
var el = d3.select(this);
var words = d.split('\n');
el.text('').attr('y', -5);
for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
if (i > 0) {
tspan.attr('x', -9).attr('dy', 10);
}
}
};
return {
restrict: 'A',
scope:{
data: '=',
facet: '=',
height: '=',
width: '='
},
link: function(scope, element) {
var color = d3.scale.ordinal().range([ "#7b6888", "#6b486b", "#3182bd", "#a05d56", "#d0743c"]),
width = scope.width,
height = scope.height,
labels = scope.facet.lbls,
fmt = $rootScope[scope.facet.fmt],
properties = scope.facet.prop? [scope.facet.prop] : scope.facet.props,
unit = scope.facet.unit,
margin = {top: 10, right: 20, bottom: 35, left: 150},
w = width - margin.left - margin.right,
h = height - margin.top - margin.bottom;
// Create chart
var svg = d3.select(element[0]).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create and Add tooltip
var tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(property, propertyIndex, buildIndex) {
return (labels? (labels[propertyIndex] + ": ") : '') + fmt(property.value) + ' ' + unit;
});
svg.call(tip);
// Create Y Axis SVG Elements
svg.append("g").attr("class", "y axis");
svg.selectAll('g.y.axis g text').each(insertLinebreaks);
// Create X Axis SVG Elements
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.append("text")
.attr("y", 30)
.attr("x", w/2)
.attr("dy", ".1em")
.style("text-anchor", "middle")
.text(scope.facet.title + (unit? (' (' + unit + ')') : ''));
/**
* Watch for changes in the comparison array (ships added/removed, sorting)
*/
scope.$watch('data', function() {
var data = scope.data;
var maxVal = d3.max(data, function(d) { return d3.max(properties, function(prop) {return d[prop]; }); });
var y0 = d3.scale.ordinal().domain(data.map(bName)).rangeRoundBands([0, h],0.3);
var y1 = d3.scale.ordinal().domain(properties).rangeRoundBands([0, y0.rangeBand()]);
var x = d3.scale.linear().range([0, w]).domain([0, maxVal]);
var yAxis = d3.svg.axis().scale(y0).outerTickSize(0).orient("left");
var xAxis = d3.svg.axis().scale(x).outerTickSize(0).orient("bottom").tickFormat(d3.format('.2s'));
// Remove existing elements
svg.selectAll('.ship').remove();
svg.selectAll('rect').remove();
// Update X & Y Axis
svg.selectAll(".y.axis").call(yAxis);
svg.selectAll(".x.axis").call(xAxis);
// Update Y-Axis labels
svg.selectAll('g.y.axis g text').each(insertLinebreaks);
var group = svg.selectAll(".ship")
.data(scope.data, bName)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(build) { return "translate(0," + y0(bName(build)) + ")"; });
group.selectAll("rect")
.data(function(build) {
var o = [];
for (var i = 0; i < properties.length; i++) {
o.push({name: properties[i], value:build[properties[i]]});
}
return o;
})
.enter().append("rect")
.attr("height", y1.rangeBand())
.attr("x",0)
.attr("y", function(d) {return y1(d.name); })
.attr("width", function(d) { return x(d.value); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.style("fill", function(d) { return color(d.name); });
});
scope.$on('$destroy', function() {
tip.destroy(); // Remove the tooltip from the DOM
})
}
};
}]);

14
app/js/service-persist.js
View File

@@ -13,8 +13,11 @@ angular.module('app').service('Persist', ['lodash', function (_) {
this.builds = {}; this.builds = {};
} }
var buildCount = Object.keys(this.builds).length;
this.state = { this.state = {
hasBuilds: Object.keys(this.builds).length > 0 buildCount: buildCount,
hasBuilds: buildCount > 0
} }
/** /**
* Persist a ship build in local storage. * Persist a ship build in local storage.
@@ -28,8 +31,12 @@ angular.module('app').service('Persist', ['lodash', function (_) {
this.builds[shipId] = {}; this.builds[shipId] = {};
} }
this.builds[shipId][name] = code; if(!this.builds[shipId][name]) {
this.state.buildCount++;
this.state.hasBuilds = true; this.state.hasBuilds = true;
}
this.builds[shipId][name] = code;
// Persist updated build collection to localStorage // Persist updated build collection to localStorage
localStorage.setItem(LS_KEY_BUILDS, angular.toJson(this.builds)); localStorage.setItem(LS_KEY_BUILDS, angular.toJson(this.builds));
} }
@@ -61,7 +68,8 @@ angular.module('app').service('Persist', ['lodash', function (_) {
delete this.builds[shipId][name]; delete this.builds[shipId][name];
if (Object.keys(this.builds[shipId]).length == 0) { if (Object.keys(this.builds[shipId]).length == 0) {
delete this.builds[shipId]; delete this.builds[shipId];
this.state.hasBuilds = Object.keys(this.builds).length > 0; this.state.buildCount--;
this.state.hasBuilds = this.state.buildCount > 0;
} }
// Persist updated build collection to localStorage // Persist updated build collection to localStorage
localStorage.setItem(LS_KEY_BUILDS, angular.toJson(this.builds)); localStorage.setItem(LS_KEY_BUILDS, angular.toJson(this.builds));

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

@@ -4,7 +4,7 @@
* *
* This file contains values and functions that can be reused across the app. * This file contains values and functions that can be reused across the app.
* *
* @requires ngLodash is a dependency of this module. * @requires ngLodash
*/ */
angular.module('shipyard', ['ngLodash']) angular.module('shipyard', ['ngLodash'])
// Create 'angularized' references to DB.This will aid testing // Create 'angularized' references to DB.This will aid testing
@@ -72,6 +72,78 @@ angular.module('shipyard', ['ngLodash'])
'Large', 'Large',
'Huge' 'Huge'
]) ])
/**
* Array of all Ship properties (facets) organized into groups
* used for ship comparisons.
*
* @type {Array}
*/
.value('ShipFacets', [
{
title: 'Agility',
prop: 'agility',
unit: '',
fmt: 'fCrd'
},
{
title: 'Speed',
props: ['speed', 'boost'],
lbls: ['Thrusters', 'Boost'],
unit: 'M/s',
fmt: 'fRound'
},
{
title: 'Armour',
prop: 'armour',
unit: '',
fmt: 'fCrd'
},
{
title: 'Shields',
prop: 'shieldStrength',
unit: 'Mj',
fmt: 'fRound'
},
{
title: 'Jump Range',
props: ['unladenJumpRange', 'ladenJumpRange'],
lbls: ['Unladen', 'Laden'],
unit: 'LY',
fmt: 'fRound'
},
{
title: 'Mass',
props: ['unladenMass', 'ladenMass'],
lbls: ['Unladen', 'Laden'],
unit: 'T',
fmt: 'fRound'
},
{
title: 'Cargo',
prop: 'cargoCapacity',
unit: 'T',
fmt: 'fRound'
},
{
title: 'Fuel',
prop: 'fuelCapacity',
unit: 'T',
fmt: 'fRound'
},
{
title: 'Power',
props: ['powerRetracted','powerDeployed','powerAvailable'],
lbls: ['Retracted', 'Deployed', 'Available'],
unit: 'MW',
fmt: 'fPwr'
},
{
title: 'Cost',
prop: 'totalCost',
unit: 'CR',
fmt: 'fCrd'
}
])
/** /**
* Calculate the maximum single jump range based on mass and a specific FSD * Calculate the maximum single jump range based on mass and a specific FSD
* *

13
app/less/app.less
View File

@@ -8,16 +8,19 @@
@import 'list'; @import 'list';
@import 'slot'; @import 'slot';
@import 'outfit'; @import 'outfit';
@import 'comparison';
@import 'table'; @import 'table';
@import 'select'; @import 'select';
@import 'modal'; @import 'modal';
@import 'charts'; @import 'charts';
@import 'chart-tooltip';
@import 'buttons'; @import 'buttons';
@import 'error'; @import 'error';
html, body { html, body {
min-height: 100%; min-height: 100%;
text-rendering: optimizeLegibility;
} }
body { body {
@@ -64,11 +67,21 @@ body {
h1 { h1 {
font-family: @fTitle; font-family: @fTitle;
color: @primary; color: @primary;
font-size: 1.6em;
} }
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
font-family: @fTitle; font-family: @fTitle;
font-size: 1.2em;
}
h3 {
text-transform: uppercase;
font-family: @fTitle;
font-size: 1em;
margin: 0.2em 0;
color: @primary;
} }
u { // Unit (Mj, Km, etc) u { // Unit (Mj, Km, etc)

6
app/less/buttons.less
View File

@@ -1,7 +1,9 @@
button { button {
.border-radius(0); .border-radius(0);
color: @primary; color: @primary;
svg {
fill: @primary; fill: @primary;
}
border: 1px solid @primary; border: 1px solid @primary;
font-family: @fStandard; font-family: @fStandard;
border: 1px solid; border: 1px solid;
@@ -12,14 +14,18 @@ button {
&.danger { &.danger {
color: red; color: red;
svg {
fill: red; fill: red;
}
border: 1px solid red; border: 1px solid red;
} }
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
color: @disabled; color: @disabled;
svg {
fill: @disabled; fill: @disabled;
}
border: 1px solid @disabled; border: 1px solid @disabled;
} }
} }

63
app/less/chart-tooltip.less Normal file
View File

@@ -0,0 +1,63 @@
.d3-tip {
font-size: 0.8em;
padding: 0.25em 0.5em;
background: @primary-disabled;
color: @primary-bg;
pointer-events: none;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: @primary-disabled;
position: absolute;
pointer-events: none;
}
/* Northward tooltips */
.d3-tip.n {
margin-top: -7px;
&:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
}
/* Eastward tooltips */
.d3-tip.e {
margin-left: 8px;
&:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
}
/* Southward tooltips */
.d3-tip.s {
margin-top: 8px;
&:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -7px;
left: 0;
text-align: center;
}
}
/* Westward tooltips */
.d3-tip.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}

40
app/less/charts.less
View File

@@ -1,8 +1,40 @@
svg.chart { .chart {
.user-select-none(); .user-select-none();
display: block; display: inline-block;
width:100%; margin: 1em;
height:100%; //width:100%;
//height:100%;
cursor: default;
h3 {
text-align: center;
&[ng-click] {
cursor: pointer;
}
}
svg {
.axis {
line, path {
fill: none;
stroke: @primary-disabled;
}
text {
font-size: 0.75em;
fill: @primary-disabled;
}
&.y {
text tspan:first-child {
fill: @primary;
}
}
}
}
} }

2
app/less/colors.less
View File

@@ -16,7 +16,7 @@
// Background colors // Background colors
@bg: rgba(70,70,70,0.95); @bg: rgba(70,70,70,0.95);
@bgBlack: rgba(0,0,0,0.9); @bgBlack: rgba(0,0,0,0.9);
@primary-bg: fadeout(darken(@primary, 45%), 20%); @primary-bg: fadeout(darken(@primary, 47%), 15%);
@secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background @secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
@warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red @warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red

4
app/less/comparison.less Normal file
View File

@@ -0,0 +1,4 @@
#comparison {
text-align: center;
}

2
app/less/header.less
View File

@@ -28,6 +28,8 @@ header {
padding : 0 1em; padding : 0 1em;
cursor: pointer; cursor: pointer;
color: @warning; color: @warning;
// Less than 600px screen width: hide text
&.disabled { &.disabled {
color: @warning-disabled; color: @warning-disabled;

6
app/less/select.less
View File

@@ -6,7 +6,7 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
max-height: 300px; max-height: 300px;
overflow-y: scroll; overflow-y: auto;
background-color: @bg; background-color: @bg;
border: 1px solid @primary; border: 1px solid @primary;
white-space: nowrap; white-space: nowrap;
@@ -78,7 +78,7 @@
ul { ul {
margin: 0; margin: 0;
margin-left: 20px; margin-left: 1.5em;
padding: 0; padding: 0;
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
@@ -90,7 +90,7 @@
padding: 0.1em 0.5em; padding: 0.1em 0.5em;
} }
ul { ul {
margin-left: 1em; margin-left: 0.5em;
} }
} }

8
app/less/shipyard.less
View File

@@ -1,14 +1,15 @@
#shipyard { #shipyard {
vertical-align: top; vertical-align: top;
text-align: center;
} }
a.ship { a.ship {
display: inline-block; display: inline-block;
width: 22%; width: 18em;
margin: 1%; margin: 0.5em;
background-color: @bg; background-color: @bg;
padding: 0.5%; padding: 0.5em;
text-decoration: none; text-decoration: none;
color: @fg; color: @fg;
font-family: @fStandard; font-family: @fStandard;
@@ -30,6 +31,7 @@ a.ship {
font-family: @fTitle; font-family: @fTitle;
float: left; float: left;
font-size: 0.8em; font-size: 0.8em;
margin-right: 2em;
} }
.subtitle { .subtitle {

7
app/less/table.less
View File

@@ -3,7 +3,7 @@ table {
margin: 0 auto; margin: 0 auto;
background-color: @primary-bg; background-color: @primary-bg;
border-spacing: 0; border-spacing: 0;
font-size: 0.8em; font-size: 0.9em;
cursor: default; cursor: default;
a, a:visited { a, a:visited {
@@ -16,6 +16,7 @@ thead {
color: @bgBlack; color: @bgBlack;
background-color: @primary-disabled; background-color: @primary-disabled;
.user-select-none(); .user-select-none();
font-size: 0.8em;
.main th { .main th {
border-left: 1px solid @primary-bg; border-left: 1px solid @primary-bg;
@@ -26,10 +27,10 @@ thead {
} }
th { th {
font-weight: normal;
padding: 0 0.75em; padding: 0 0.75em;
&[ng-click] { &.prop {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: @primary; color: @primary;

8
app/views/_header.html
View File

@@ -1,9 +1,9 @@
<header> <header>
<a class="l" ui-sref="shipyard" style="margin-right: 1em;" title="Ships"><svg class="icon xl"><use xlink:href="#coriolis"></use></svg></a> <a class="l" ui-sref="shipyard" style="margin-right: 1em;" title="Ships"><svg class="icon xl"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#coriolis"></use></svg></a>
<div class="l menu"> <div class="l menu">
<div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')"> <div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')">
<svg class="icon warning"><use xlink:href="#rocket"></use></svg> Ships <svg class="icon warning"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rocket"></use></svg> Ships
</div> </div>
<div class="menu-list" ng-if="openedMenu=='s'"> <div class="menu-list" ng-if="openedMenu=='s'">
<a class="block" ng-repeat="(shipId,ship) in ships" ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:null, bn:null})">{{::ship.properties.name}}</a> <a class="block" ng-repeat="(shipId,ship) in ships" ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:null, bn:null})">{{::ship.properties.name}}</a>
@@ -30,7 +30,7 @@
</div> </div>
<div class="menu-list" ng-if="openedMenu=='comp'" ng-click="$event.stopPropagation();"> <div class="menu-list" ng-if="openedMenu=='comp'" ng-click="$event.stopPropagation();">
<ul> <ul>
<li>Custom Comarisons</li> <li>Custom Comparisons</li>
<li>Coming soon!</li> <li>Coming soon!</li>
<!-- TODO: comparison links /--> <!-- TODO: comparison links /-->
</ul> </ul>
@@ -60,6 +60,6 @@
</div> </div>
</div> </div>
<a href="#" class="r" target="_blank" title="Reddit Thread"><svg class="icon xl"><use xlink:href="#reddit"></use></svg></a> <!-- <a href="#" class="r" target="_blank" title="Reddit Thread"><svg class="icon xl"><use xlink:href="#reddit"></use></svg></a> -->
</header> </header>

64
app/views/page-comparison.html
View File

@@ -1,63 +1,33 @@
<div id="comparison"> <div id="comparison">
<!-- TODO: Select builds -->
<!-- TODO: Save Comparison -->
<!-- TODO: Permalink for comparison -->
<!-- TODO: Select faceset -->
<table> <table>
<thead> <thead ng-click="sortProperty($event)">
<tr class="main"> <tr class="main">
<th rowspan="2" ng-click="sort('ship.name')">Ship</th> <th rowspan="2" class="prop" prop="name">Ship</th>
<th rowspan="2" ng-click="sort('buildName')">Build</th> <th rowspan="2" class="prop" prop="buildName">Build</th>
<!-- <th rowspan="2" ng-click="sort('ship.agility')">Agility</th> /--> <th ng-repeat="f in facets" rowspan="{{f.prop? 2 : 1}}" colspan="{{f.prop? 1: f.props.length}}" prop="{{f.prop}}" ng-class="{prop: f.prop}" ng-bind="f.title"></th>
<!-- <th rowspan="2" ng-click="sort('ship.speed')">Speed</th> /-->
<!-- <th rowspan="2" ng-click="sort('ship.boost')">Boost</th> -->
<th rowspan="2" ng-click="sort('ship.shieldStrength')">Shields</th>
<th rowspan="2" ng-click="sort('ship.armour')">Armour</th>
<th colspan="2">Mass</th>
<th colspan="3">Power</th>
<!-- <th rowspan="2" ng-click="sort('ship.fuelCapacity')">Fuel</th> -->
<th rowspan="2" ng-click="sort('ship.cargoCapacity')">Cargo</th>
<th colspan="2">Jump Range</th>
<th rowspan="2" ng-click="sort('ship.totalCost')">Cost</th>
</tr> </tr>
<tr> <tr>
<!-- Mass /--> <th ng-repeat="f in subFacets | filter:{sub:true}" class="prop" prop="{{f.prop}}" ng-class="{lft: f.start}" test="{{f.start}}" ng-bind="f.label"></th>
<th class="lft" ng-click="sort('ship.unladenMass')">Unladen</th>
<th class="rgt" ng-click="sort('ship.ladenMass')">Laden</th>
<!-- Power /-->
<th class="lft" ng-click="sort('ship.powerRetracted')">Retracted</th>
<!-- <th ng-click="sort('pctRetracted')">%</th> -->
<th ng-click="sort('ship.powerDeployed')">Deployed</th>
<!-- <th ng-click="sort('pctDeployed')">%</th> -->
<th class="rgt" ng-click="sort('ship.powerAvailable')">Available</th>
<!-- Jump Range /-->
<th class="lft" ng-click="sort('ship.unladenJumpRange')">Unladen</th>
<th class="rgt" ng-click="sort('ship.ladenJumpRange')">Laden</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="tr" ng-repeat="b in comparison | orderBy:predicate:desc"> <tr class="tr" ng-repeat="b in comparison">
<td class="tl"><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.ship.name"></a></td> <td class="tl"><a ui-sref="outfit({shipId: b.id, code: b.code, bn: b.buildName})" ng-bind="b.name"></a></td>
<td class="tl"><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td> <td class="tl"><a ui-sref="outfit({shipId: b.id, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
<!-- <td class="tc" ng-bind="b.ship.agility"></td> --> <td ng-repeat="f in subFacets">{{f.fmt(b[f.prop])}} <u>{{f.unit}}</u></td>
<!-- <td>{{b.ship.speed}} <u>M/s</u></td> -->
<!-- <td>{{b.ship.boost}} <u>M/s</u></td> -->
<td>{{fRound(b.ship.shieldStrength)}} <u>Mj</u></td>
<td ng-bind="b.ship.armourTotal"></td>
<td>{{fRound(b.ship.unladenMass)}} <u>T</u></td>
<td>{{fRound(b.ship.ladenMass)}} <u>T</u></td>
<td>{{fPwr(b.ship.powerRetracted)}} <u>MW</u></td>
<!-- <td>{{fPct(b.pctRetracted)}}</td> -->
<td>{{fPwr(b.ship.powerDeployed)}} <u>MW</u></td>
<!-- <td>{{fPct(b.pctDeployed)}}</td> -->
<td>{{fPwr(b.ship.powerAvailable)}} <u>MW</u></td>
<!-- <td>{{fRound(b.ship.fuelCapacity)}} <u>T</u></td> -->
<td>{{fRound(b.ship.cargoCapacity)}} <u>T</u></td>
<td>{{fRound(b.ship.unladenJumpRange)}} <u>LY</u></td>
<td>{{fRound(b.ship.ladenJumpRange)}} <u>LY</u></td>
<td>{{b.ship.totalCost}} <u>CR</u></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div ng-repeat="f in facets" class="chart" bar-chart width="500" height="chartHeight" facet="f" data="comparison">
<h3 ng-click="sort(f.prop || f.props[0])" >{{f.title}}</h3>
</div>
</div> </div>

6
app/views/page-shipyard.html
View File

@@ -1,10 +1,10 @@
<div id="shipyard"> <div id="shipyard">
<a ui-sref="outfit({shipId:id})" class="ship" ng-repeat="(id,s) in ships"> <a ui-sref="outfit({shipId:id})" class="ship" ng-repeat="(id,s) in ships">
<h2 ng-bind="s.properties.name"></h2> <h2 ng-bind="s.properties.name"></h2>
<small ng-bind="s.properties.manufacturer"></small>
<div class="subtitle"> <div class="subtitle">
<small ng-bind="s.properties.manufacturer"></small>
<div class="purpose" ng-bind="SP[s.properties.grp]"></div> <div class="purpose" ng-bind="SP[s.properties.grp]"></div>
</div> </div>
{{fCrd(s.properties.cost)}} <u>CR</u></span> {{fCrd(s.properties.cost)}} <u>CR</u></span>
</a> </a>
</div> </div>

3
bower.json
View File

@@ -22,7 +22,8 @@
"d3": "~3.5.5", "d3": "~3.5.5",
"ng-lodash": "~0.2.0", "ng-lodash": "~0.2.0",
"ui-router-extras": "~0.0.13", "ui-router-extras": "~0.0.13",
"angular-ui-router": "^0.2.14" "angular-ui-router": "^0.2.14",
"d3-tip": "~0.6.7"
}, },
"overrides": { "overrides": {
"ui-router-extras": { "ui-router-extras": {

2
gulpfile.js
View File

@@ -90,7 +90,7 @@ gulp.task('js', function() {
'app/js/**/*.js' 'app/js/**/*.js'
]) ])
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
.pipe(uglify({mangle: false}).on('error',function(e){ .pipe(uglify({mangle: true}).on('error',function(e){
console.log('File:', e.fileName); console.log('File:', e.fileName);
console.log('Line:', e.lineNumber); console.log('Line:', e.lineNumber);
console.log('Message:', e.message); console.log('Message:', e.message);

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "coriolis_shipyard", "name": "coriolis_shipyard",
"version": "0.3.1", "version": "0.4.0",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/cmmcleod/coriolis" "url": "https://github.com/cmmcleod/coriolis"