Adding beginnings of comparison feature

This commit is contained in:
Colin McLeod
2015-05-05 01:05:58 -07:00
parent 748e1261fe
commit f418e7a6ae
15 changed files with 224 additions and 12 deletions

View File

@@ -26,13 +26,14 @@
<shipyard-header></shipyard-header>
<div id="main" ui-view></div>
<div ng-include src="'views/about.html'"></div>
<footer>
<div class="right">
<a href="https://github.com/cmmcleod/ed-shipyard" 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 class="l">
Coriolis Shipyard was created using assets and imagery from Elite: Dangerous, with the permission of Frontier Developments plc, for non-commercial purposes.<br>
It is not endorsed by nor reflects the views or opinions of Frontier Developments and no employee of Frontier Developments was involved in the making of it.
Coriolis Shipyard was created for non-commercial purposes. It is not endorsed by nor reflects the views or opinions of Frontier Developments and no employee of Frontier Developments was involved in the making of it.
</div>
</footer>

View File

@@ -26,6 +26,7 @@ angular.module('app').config(['$provide','$stateProvider', '$urlRouterProvider',
}
})
.state('shipyard', { url: '/', templateUrl: 'views/page-shipyard.html', controller: 'ShipyardController' })
.state('comparison', { url: '/comparison', templateUrl: 'views/page-comparison.html', controller: 'ComparisonController' })
.state('error', { params: {type:null, message:null, details: null }, templateUrl: 'views/page-error.html', controller: 'ErrorController' })
// Redirects

View File

@@ -0,0 +1,24 @@
angular.module('app').controller('ComparisonController', ['$rootScope', '$scope', 'ShipsDB', 'Ship', 'Persist', 'Serializer', function ($rootScope, $scope, Ships, Ship, Persist, Serializer) {
$rootScope.title = 'Coriolis - Comparison';
$rootScope.bodyClass = 'docking-bay';
var comparison = $scope.comparison = [];
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
});
}
}
}]);

View File

@@ -29,6 +29,7 @@ angular.module('app').directive('shipyardHeader', ['lodash','$rootScope', 'Persi
$rootScope.$on('close', function () {
scope.openedMenu = null;
$rootScope.showAbout = false;
});
scope.updateInsurance = function(){
@@ -49,6 +50,17 @@ angular.module('app').directive('shipyardHeader', ['lodash','$rootScope', 'Persi
scope.openedMenu = menu;
};
scope.about = function(e) {
e.preventDefault();
e.stopPropagation();
scope.openedMenu = null;
$rootScope.showAbout = true;
};
$rootScope.hideAbout = function (){
$rootScope.showAbout = false;
}
}
};
}]);

View File

@@ -56,7 +56,7 @@ angular.module('shipyard').factory('Ship', ['Components', 'calcShieldStrength',
if (comps.internal[i] !== 0) {
internal[i].id = comps.internal[i];
internal[i].c = Components.internal(comps.internal[i]);
if (internal[i].c.group == 'sg') {
if (internal[i].c.grp == 'sg') {
this.sgSI = i;
}
} else {

View File

@@ -8,7 +8,9 @@
@import 'list';
@import 'slot';
@import 'outfit';
@import 'table';
@import 'select';
@import 'modal';
@import 'charts';
@import 'error';
@@ -58,6 +60,17 @@ body {
clear: both;
}
h1 {
font-family: @fTitle;
color: @primary;
}
h2 {
text-transform: uppercase;
font-family: @fTitle;
}
a, a:visited {
color: @fg;
}

View File

@@ -7,4 +7,10 @@
small {
color: @primary-disabled;
}
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
}

View File

@@ -46,13 +46,18 @@ header {
width: 25em;
font-family: @fStandard;
position: absolute;
padding: 0 0 1em 1em;
padding: 1em 1em;
overflow: hidden;
background-color: @bgBlack;
font-size: 0.8em;
&.sm {
width: 15em;
width: auto;
}
hr {
border: none;
border-top: 1px solid @disabled;
}
}

36
app/less/modal.less Normal file
View File

@@ -0,0 +1,36 @@
.modal-bg {
z-index: 2;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
}
.modal {
width: 50%;
padding: 3em;
margin: 10em auto 0;
background-color: @bgBlack;
border: 1px solid @primary;
h1 {
margin: 0.2em 0;
}
h2 {
margin: 0;
}
}
.dismiss {
outline: none;
background-color: @primary-bg;
font-family: @fStandard;
color: @primary;
line-height: 1.5em;
border: 1px solid @primary;
}

View File

@@ -6,9 +6,7 @@
#overview {
h1 {
font-family: @fTitle;
margin: 0.2em 0;
color: @primary;
float: left;
}
}

View File

@@ -21,9 +21,7 @@ a.ship {
h2 {
width: 100%;
text-transform: uppercase;
margin: 0;
font-family: @fTitle;
text-align: left;
}

34
app/less/table.less Normal file
View File

@@ -0,0 +1,34 @@
table {
margin: 0 auto;
background-color: @primary-bg;
border-spacing: 0;
font-size: 0.8em;
a {
text-decoration: none;
}
}
thead {
color: @bgBlack;
background-color: @primary-disabled;
}
tbody tr {
&:hover {
color: #000;
background-color: @secondary;
}
}
th {
padding: 0.1em 0.5em;
}
td {
padding-left: 0.5em;
font-size: 0.9em;
}

View File

@@ -20,20 +20,35 @@
</div>
</div>
<div class="l menu">
<div class="menu-header" ng-class="{selected: openedMenu=='comp', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'comp')">Comparison</div>
<div class="menu-list" ng-if="openedMenu=='comp'" ng-click="$event.stopPropagation();">
<ul>
<li>No Comparisons created</li>
<!-- TODO: comparison links /-->
</ul>
<hr />
<a ui-sref="comparison" class="block">Create New</a>
</div>
</div>
<div class="r menu">
<div class="menu-header" ng-class="{selected: openedMenu=='settings'}" ng-click="openMenu($event,'settings')">
<span class="ico ico-cog"></span>
</div>
<div class="menu-list sm" ng-if="openedMenu=='settings'" ng-click="$event.stopPropagation();">
<ul class="">
<ul>
Insurance
<li><select ng-model="insurance.current" ng-options="ins.name for (i,ins) in insurance.opts" ng-change="updateInsurance()"></select></li>
</ul>
<ul class="">
<hr />
<ul>
Builds
<li>Export All</li>
<li>Import</li>
</ul>
<hr />
<a href="#" class="block" ng-click="about($event)">About</a>
</div>
</div>

15
app/views/about.html Normal file
View File

@@ -0,0 +1,15 @@
<div class="modal-bg" ng-if="showAbout" ng-click="hideAbout()">
<div class="modal" ng-click="$event.stopPropagation()">
<h1>Coriolis - About</h1>
<p>The Coriolis project was inspired by <a href="http://www.edshipyard.com/" target="_blank">E:D Shipyard</a> and, of course,
<a href="http://www.elitedangerous.com" target="_blank">Elite Dangerous</a>. </p>
<h2>Github</h2>
<a href="https://github.com/cmmcleod/coriolis" target="_blank" title="Coriolis Github Project">github.com/cmmcleod/coriolis</a>
<p>
Coriolis is an open source project. Checkout the list of upcoming features and to-do list on github.
Any and all contributions and feedback are welcome. If you encounter any bugs please report them and provide as much detail as possible.
</p>
<button class="r dismiss" ng-click="hideAbout()">Close</button>
</div>
</div>

View File

@@ -0,0 +1,54 @@
<div id="comparison">
<table>
<thead>
<tr>
<th rowspan="2">Ship</th>
<th rowspan="2">Build</th>
<th rowspan="2">Agility</th>
<th rowspan="2">Speed</th>
<th rowspan="2">Boost</th>
<th rowspan="2">Shield<br>Strength</th>
<th rowspan="2">Armour</th>
<th colspan="2">Mass</th>
<th colspan="5">Power</th>
<th rowspan="2">Fuel</th>
<th rowspan="2">Cargo</th>
<th colspan="2">Jump Range</th>
<th rowspan="2">Cost</th>
</tr>
<tr>
<th>Unladen</th><th>Laden</th>
<th>Retracted</th><th>%</th><th>Deployed</th><th>%</th><th>Available</th>
<th>Unladen</th><th>Laden</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='b in comparison'>
<td><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.ship.name"></a></td>
<td><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
<td 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.ship.powerRetracted/b.ship.powerAvailable)}}</td>
<td>{{fPwr(b.ship.powerDeployed)}} <u>MW</u></td>
<td>{{fPct(b.ship.powerDeployed/b.ship.powerAvailable)}}</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>
</tbody>
</table>
</div>
</div>