mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-09 06:43:24 +00:00
Adding comparison charts, fixes and tweaks
This commit is contained in:
Colin McLeod
@@ -2,28 +2,27 @@
|
||||
<html ng-app="app" ng-strict-di="true">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<base href="/">
|
||||
<title ng-bind="title">Coriolis</title>
|
||||
<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="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="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="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="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="manifest" href="images/logo/manifest.json">
|
||||
<link rel="shortcut icon" href="images/logo/favicon.ico">
|
||||
<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="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="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="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="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="manifest" href="/images/logo/manifest.json">
|
||||
<link rel="shortcut icon" href="/images/logo/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="msapplication-TileImage" content="images/logo/mstile-144x144.png">
|
||||
<meta name="msapplication-config" content="images/logo/browserconfig.xml">
|
||||
<meta name="msapplication-TileImage" content="/images/logo/mstile-144x144.png">
|
||||
<meta name="msapplication-config" content="/images/logo/browserconfig.xml">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
|
||||
</head>
|
||||
<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>
|
||||
<div id="main" ui-view></div>
|
||||
|
||||
@@ -33,13 +32,13 @@
|
||||
<div class="right">
|
||||
<a href="https://github.com/cmmcleod/coriolis" target="_blank" title="Coriolis Github Project">Version <%= version %> - <%= date %></a>
|
||||
</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.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="lib.js" type="text/javascript"></script>
|
||||
<script src="app.js" type="text/javascript"></script>
|
||||
<script src="/lib.js" type="text/javascript"></script>
|
||||
<script src="/app.js" type="text/javascript"></script>
|
||||
<% if (uaTracking) { %>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
*/
|
||||
angular.module('app').config(['$provide','$stateProvider', '$urlRouterProvider', '$locationProvider', 'ShipsDB', function ($provide, $stateProvider, $urlRouterProvider, $locationProvider, ships) {
|
||||
// Use HTML5 push and replace state if possible
|
||||
$locationProvider.html5Mode(true);
|
||||
$locationProvider.html5Mode({enabled: true, requireBase: false});
|
||||
/**
|
||||
* Set up all states and their routes.
|
||||
*/
|
||||
|
||||
@@ -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.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 orderBy = $filter('orderBy');
|
||||
var buildCount = 0;
|
||||
|
||||
for (var shipId in Persist.builds) {
|
||||
var data = Ships[shipId];
|
||||
for (var buildName in Persist.builds[shipId]) {
|
||||
var code = Persist.builds[shipId][buildName];
|
||||
var ship = new Ship(shipId, data.properties, data.slots); // Create a new Ship instance
|
||||
Serializer.toShip(ship, code); // Populate components from 'code' URL param
|
||||
|
||||
comparison.push({
|
||||
shipId: shipId,
|
||||
buildName: buildName,
|
||||
ship: ship,
|
||||
code: code,
|
||||
pctRetracted: ship.powerRetracted / ship.powerAvailable,
|
||||
pctDeployed: ship.powerDeployed / ship.powerAvailable,
|
||||
});
|
||||
var b = new Ship(shipId, data.properties, data.slots); // Create a new Ship instance
|
||||
Serializer.toShip(b, code); // Populate components from 'code' URL param
|
||||
// Extend ship instance and add properties below
|
||||
b.buildName = buildName;
|
||||
b.code = code;
|
||||
b.pctRetracted = b.powerRetracted / b.powerAvailable;
|
||||
b.pctDeployed = b.powerDeployed / b.powerAvailable;
|
||||
comparison.push(b); // Add ship build to comparison
|
||||
}
|
||||
}
|
||||
|
||||
$scope.chartHeight = 45 + (25 * comparison.length);
|
||||
$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.desc = ($scope.predicate == key)? !$scope.desc : $scope.desc;
|
||||
$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
122
app/js/directives/directive-bar-chart.js
Normal 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
|
||||
})
|
||||
|
||||
}
|
||||
};
|
||||
}]);
|
||||
@@ -13,8 +13,11 @@ angular.module('app').service('Persist', ['lodash', function (_) {
|
||||
this.builds = {};
|
||||
}
|
||||
|
||||
var buildCount = Object.keys(this.builds).length;
|
||||
|
||||
this.state = {
|
||||
hasBuilds: Object.keys(this.builds).length > 0
|
||||
buildCount: buildCount,
|
||||
hasBuilds: buildCount > 0
|
||||
}
|
||||
/**
|
||||
* Persist a ship build in local storage.
|
||||
@@ -28,8 +31,12 @@ angular.module('app').service('Persist', ['lodash', function (_) {
|
||||
this.builds[shipId] = {};
|
||||
}
|
||||
|
||||
if(!this.builds[shipId][name]) {
|
||||
this.state.buildCount++;
|
||||
this.state.hasBuilds = true;
|
||||
}
|
||||
|
||||
this.builds[shipId][name] = code;
|
||||
this.state.hasBuilds = true;
|
||||
// Persist updated build collection to localStorage
|
||||
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];
|
||||
if (Object.keys(this.builds[shipId]).length == 0) {
|
||||
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
|
||||
localStorage.setItem(LS_KEY_BUILDS, angular.toJson(this.builds));
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*
|
||||
* 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'])
|
||||
// Create 'angularized' references to DB.This will aid testing
|
||||
@@ -72,6 +72,78 @@ angular.module('shipyard', ['ngLodash'])
|
||||
'Large',
|
||||
'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
|
||||
*
|
||||
|
||||
@@ -8,16 +8,19 @@
|
||||
@import 'list';
|
||||
@import 'slot';
|
||||
@import 'outfit';
|
||||
@import 'comparison';
|
||||
@import 'table';
|
||||
@import 'select';
|
||||
@import 'modal';
|
||||
@import 'charts';
|
||||
@import 'chart-tooltip';
|
||||
@import 'buttons';
|
||||
@import 'error';
|
||||
|
||||
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -64,11 +67,21 @@ body {
|
||||
h1 {
|
||||
font-family: @fTitle;
|
||||
color: @primary;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
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)
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
button {
|
||||
.border-radius(0);
|
||||
color: @primary;
|
||||
fill: @primary;
|
||||
svg {
|
||||
fill: @primary;
|
||||
}
|
||||
border: 1px solid @primary;
|
||||
font-family: @fStandard;
|
||||
border: 1px solid;
|
||||
@@ -12,14 +14,18 @@ button {
|
||||
|
||||
&.danger {
|
||||
color: red;
|
||||
fill: red;
|
||||
svg {
|
||||
fill: red;
|
||||
}
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
color: @disabled;
|
||||
fill: @disabled;
|
||||
svg {
|
||||
fill: @disabled;
|
||||
}
|
||||
border: 1px solid @disabled;
|
||||
}
|
||||
}
|
||||
63
app/less/chart-tooltip.less
Normal file
63
app/less/chart-tooltip.less
Normal 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%;
|
||||
}
|
||||
@@ -1,8 +1,40 @@
|
||||
|
||||
svg.chart {
|
||||
.chart {
|
||||
.user-select-none();
|
||||
display: block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
//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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
// Background colors
|
||||
@bg: rgba(70,70,70,0.95);
|
||||
@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
|
||||
@warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red
|
||||
|
||||
|
||||
4
app/less/comparison.less
Normal file
4
app/less/comparison.less
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
#comparison {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -28,6 +28,8 @@ header {
|
||||
padding : 0 1em;
|
||||
cursor: pointer;
|
||||
color: @warning;
|
||||
// Less than 600px screen width: hide text
|
||||
|
||||
|
||||
&.disabled {
|
||||
color: @warning-disabled;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
background-color: @bg;
|
||||
border: 1px solid @primary;
|
||||
white-space: nowrap;
|
||||
@@ -78,7 +78,7 @@
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
margin-left: 20px;
|
||||
margin-left: 1.5em;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
@@ -90,7 +90,7 @@
|
||||
padding: 0.1em 0.5em;
|
||||
}
|
||||
ul {
|
||||
margin-left: 1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
|
||||
#shipyard {
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.ship {
|
||||
display: inline-block;
|
||||
width: 22%;
|
||||
margin: 1%;
|
||||
width: 18em;
|
||||
margin: 0.5em;
|
||||
background-color: @bg;
|
||||
padding: 0.5%;
|
||||
padding: 0.5em;
|
||||
text-decoration: none;
|
||||
color: @fg;
|
||||
font-family: @fStandard;
|
||||
@@ -30,6 +31,7 @@ a.ship {
|
||||
font-family: @fTitle;
|
||||
float: left;
|
||||
font-size: 0.8em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
|
||||
@@ -3,7 +3,7 @@ table {
|
||||
margin: 0 auto;
|
||||
background-color: @primary-bg;
|
||||
border-spacing: 0;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.9em;
|
||||
cursor: default;
|
||||
|
||||
a, a:visited {
|
||||
@@ -16,6 +16,7 @@ thead {
|
||||
color: @bgBlack;
|
||||
background-color: @primary-disabled;
|
||||
.user-select-none();
|
||||
font-size: 0.8em;
|
||||
|
||||
.main th {
|
||||
border-left: 1px solid @primary-bg;
|
||||
@@ -26,10 +27,10 @@ thead {
|
||||
}
|
||||
|
||||
th {
|
||||
|
||||
font-weight: normal;
|
||||
padding: 0 0.75em;
|
||||
|
||||
&[ng-click] {
|
||||
&.prop {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: @primary;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<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="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 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>
|
||||
@@ -30,7 +30,7 @@
|
||||
</div>
|
||||
<div class="menu-list" ng-if="openedMenu=='comp'" ng-click="$event.stopPropagation();">
|
||||
<ul>
|
||||
<li>Custom Comarisons</li>
|
||||
<li>Custom Comparisons</li>
|
||||
<li>Coming soon!</li>
|
||||
<!-- TODO: comparison links /-->
|
||||
</ul>
|
||||
@@ -60,6 +60,6 @@
|
||||
</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>
|
||||
@@ -1,63 +1,33 @@
|
||||
<div id="comparison">
|
||||
|
||||
<!-- TODO: Select builds -->
|
||||
<!-- TODO: Save Comparison -->
|
||||
<!-- TODO: Permalink for comparison -->
|
||||
<!-- TODO: Select faceset -->
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<thead ng-click="sortProperty($event)">
|
||||
<tr class="main">
|
||||
<th rowspan="2" ng-click="sort('ship.name')">Ship</th>
|
||||
<th rowspan="2" ng-click="sort('buildName')">Build</th>
|
||||
<!-- <th rowspan="2" ng-click="sort('ship.agility')">Agility</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>
|
||||
<th rowspan="2" class="prop" prop="name">Ship</th>
|
||||
<th rowspan="2" class="prop" prop="buildName">Build</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<!-- Mass /-->
|
||||
<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>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="tr" ng-repeat="b in comparison | orderBy:predicate:desc">
|
||||
<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.shipId, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
|
||||
<!-- <td class="tc" ng-bind="b.ship.agility"></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 class="tr" ng-repeat="b in comparison">
|
||||
<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.id, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
|
||||
<td ng-repeat="f in subFacets">{{f.fmt(b[f.prop])}} <u>{{f.unit}}</u></td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</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>
|
||||
@@ -1,10 +1,10 @@
|
||||
<div id="shipyard">
|
||||
<a ui-sref="outfit({shipId:id})" class="ship" ng-repeat="(id,s) in ships">
|
||||
<h2 ng-bind="s.properties.name"></h2>
|
||||
<small ng-bind="s.properties.manufacturer"></small>
|
||||
<div class="subtitle">
|
||||
<div class="purpose" ng-bind="SP[s.properties.grp]"></div>
|
||||
</div>
|
||||
{{fCrd(s.properties.cost)}} <u>CR</u></span>
|
||||
</a>
|
||||
<a ui-sref="outfit({shipId:id})" class="ship" ng-repeat="(id,s) in ships">
|
||||
<h2 ng-bind="s.properties.name"></h2>
|
||||
<div class="subtitle">
|
||||
<small ng-bind="s.properties.manufacturer"></small>
|
||||
<div class="purpose" ng-bind="SP[s.properties.grp]"></div>
|
||||
</div>
|
||||
{{fCrd(s.properties.cost)}} <u>CR</u></span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -22,7 +22,8 @@
|
||||
"d3": "~3.5.5",
|
||||
"ng-lodash": "~0.2.0",
|
||||
"ui-router-extras": "~0.0.13",
|
||||
"angular-ui-router": "^0.2.14"
|
||||
"angular-ui-router": "^0.2.14",
|
||||
"d3-tip": "~0.6.7"
|
||||
},
|
||||
"overrides": {
|
||||
"ui-router-extras": {
|
||||
|
||||
@@ -90,7 +90,7 @@ gulp.task('js', function() {
|
||||
'app/js/**/*.js'
|
||||
])
|
||||
.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('Line:', e.lineNumber);
|
||||
console.log('Message:', e.message);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "coriolis_shipyard",
|
||||
"version": "0.3.1",
|
||||
"version": "0.4.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/cmmcleod/coriolis"
|
||||
|
||||
Reference in New Issue
Block a user