Added planet details to starmap

plainblack · Apr 25, 2016 · c835fad · c835fad
1 parent ae44659
commit c835fad
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 26 deletions.
diff --git a/app/js/components/window/planetPanel.jsx b/app/js/components/window/planetPanel.jsx
@@ -19,7 +19,7 @@ var PlanetPanel = React.createClass({
         options : {
             title   : 'Planet Details',
             width   : 700,
-            height  : 420
+            height  : 450
         }
     },
     mixins : [

diff --git a/app/js/components/window/planetPanel/line.jsx b/app/js/components/window/planetPanel/line.jsx
@@ -0,0 +1,39 @@
+'use strict';
+
+var React                       = require('react');
+var Reflux                      = require('reflux');
+var _                           = require('lodash');
+
+var BodyRPCGetBodyStatusStore   = require('js/stores/rpc/body/getBodyStatus');
+
+var PlanetPanelLine             = require('js/components/window/planetPanel/line');
+
+var util                        = require('js/util');
+var constants                   = require('js/constants');
+var vex                         = require('js/vex');
+
+var PlanetDetails = React.createClass({
+
+    mixins : [
+        Reflux.connect(BodyRPCGetBodyStatusStore, 'bodyRPCGetBodyStatusStore')
+    ],
+
+    render : function() {
+        var bodyStatus = this.state.bodyRPCGetBodyStatusStore;
+
+        return (
+            <div>
+              {this.props.title}:
+              <span
+                style={{
+                  float : 'right',
+                }}
+              >
+                {this.props.value}
+              </span>
+            </div>
+        );
+    }
+});
+
+module.exports = PlanetDetails;
diff --git a/app/js/components/window/planetPanel/planetDetails.jsx b/app/js/components/window/planetPanel/planetDetails.jsx
@@ -4,29 +4,39 @@ var React                       = require('react');
 var Reflux                      = require('reflux');
 var _                           = require('lodash');
 
-var BodyRPCStore                = require('js/stores/rpc/body');
-var GenericBuildingRPCActions   = require('js/actions/rpc/genericBuilding');
+var BodyRPCGetBodyStatusStore   = require('js/stores/rpc/body/getBodyStatus');
 
-var ActionButton                = require('js/components/window/building/actionButton');
-var ResourceProduction          = require('js/components/window/building/resourceProduction');
-var ResourceCost                = require('js/components/window/building/resourceCost');
-var ResourceLine                = require('js/components/window/building/resourceLine');
+var PlanetPanelLine             = require('js/components/window/planetPanel/line');
 
 var util                        = require('js/util');
+var constants                   = require('js/constants');
 var vex                         = require('js/vex');
 
 var PlanetDetails = React.createClass({
 
     mixins : [
-        Reflux.connect(BodyRPCStore, 'bodyRPCStore'),
+        Reflux.connect(BodyRPCGetBodyStatusStore, 'bodyRPCGetBodyStatusStore')
     ],
 
     render : function() {
-
+        var bodyStatus = this.state.bodyRPCGetBodyStatusStore;
+        var location = bodyStatus.x+"x : "+bodyStatus.y+"y";
         return (
             <div className="ui grid">
-              <div className="eight wide column">
-                To Be Defined
+              <div className="five wide column">
+                <img src={constants.ASSETS_URL+"star_system/"+bodyStatus.image+'.png'} style={{ width:100, height:100 }}/> 
+              </div>
+              <div className="eleven wide column">
+                <PlanetPanelLine title={'Name'} value={bodyStatus.name} />
+                <PlanetPanelLine title={'Type'} value={bodyStatus.type} />
+                <PlanetPanelLine title={'Empire'} value={''} />
+                <PlanetPanelLine title={'Water'} value={bodyStatus.water} />
+                <PlanetPanelLine title={'Planet Size'} value={bodyStatus.size} />
+                <PlanetPanelLine title={'Location'} value={location} />
+                <PlanetPanelLine title={'Zone'} value={bodyStatus.zone} />
+                <PlanetPanelLine title={'Body ID'} value={bodyStatus.id} />
+                <PlanetPanelLine title={'Star'} value={bodyStatus.star_name+"(ID: "+bodyStatus.star_id+")"} />
+                <PlanetPanelLine title={'Orbit'} value={bodyStatus.orbit} />
               </div>
             </div>
         );

diff --git a/app/js/components/window/planetPanel/planetDetailsTab.jsx b/app/js/components/window/planetPanel/planetDetailsTab.jsx
@@ -25,15 +25,15 @@ var PlanetDetailsTab = React.createClass({
             <div className="ui grid">
 
                 <div className="ui centered row">
-                    <div className="eight wide column">
+                    <div className="nine wide column">
                         <div style={{
                             textAlign  : 'center',
                             fontWeight : 'bold'
                         }}>
                             Planet Details
                         </div>
                     </div>
-                    <div className="eight wide column">
+                    <div className="seven wide column">
                         <div style={{
                             textAlign  : 'center',
                             fontWeight : 'bold'
@@ -44,10 +44,10 @@ var PlanetDetailsTab = React.createClass({
                 </div>
 
                 <div className="ui centered row">
-                    <div className="eight wide column">
+                    <div className="nine wide column">
                         <PlanetDetails />
                     </div>
-                    <div className="eight wide column">
+                    <div className="seven wide column">
                         <PlanetOre />
                     </div>
                 </div>

diff --git a/app/js/components/window/planetPanel/planetOre.jsx b/app/js/components/window/planetPanel/planetOre.jsx
@@ -5,28 +5,37 @@ var Reflux                      = require('reflux');
 var _                           = require('lodash');
 
 var BodyRPCStore                = require('js/stores/rpc/body');
+var BodyRPCGetBodyStatusStore   = require('js/stores/rpc/body/getBodyStatus');
+
 var GenericBuildingRPCActions   = require('js/actions/rpc/genericBuilding');
 
-var ActionButton                = require('js/components/window/building/actionButton');
-var ResourceProduction          = require('js/components/window/building/resourceProduction');
-var ResourceCost                = require('js/components/window/building/resourceCost');
-var ResourceLine                = require('js/components/window/building/resourceLine');
+var PlanetDetailLine            = require('js/components/window/planetPanel/line');
 
 var util                        = require('js/util');
 var vex                         = require('js/vex');
+var constants                   = require('js/constants');
 
 var PlanetOre = React.createClass({
 
     mixins : [
-        Reflux.connect(BodyRPCStore, 'bodyRPCStore'),
+        Reflux.connect(BodyRPCGetBodyStatusStore, 'bodyRPCGetBodyStatusStore')
     ],
 
     render : function() {
+        var ores = constants.ORES;
+        var bodyOre = this.state.bodyRPCGetBodyStatusStore.ore;
+
+        var renderOres = [];
+        for (var prop in ores) {
+            if (ores.hasOwnProperty(prop)) {
+                renderOres.push( <PlanetDetailLine title={ores[prop]} value={bodyOre[prop]} /> );
+            }
+        }
 
         return (
             <div className="ui grid">
-              <div className="eight wide column">
-                ORE To Be Defined
+              <div className="sixteen wide column">
+                {renderOres}
               </div>
             </div>
         );

diff --git a/app/js/components/window/shipyard/buildFleet/item.jsx b/app/js/components/window/shipyard/buildFleet/item.jsx
@@ -8,6 +8,7 @@ var ResourceAttribute       = require('js/components/window/shipyard/resourceAtt
 var BuildButton             = require('js/components/window/shipyard/buildFleet/button');
 
 var util                    = require('js/util');
+var constants               = require('js/constants');
 
 var BuildFleetItem = React.createClass({
 
@@ -25,10 +26,10 @@ var BuildFleetItem = React.createClass({
         var starfieldStyle = {
             width:  100,
             height: 100,
-            background: "transparent url(//d16cbq0l6kkf21.cloudfront.net/assets/star_system/field.png) no-repeat center",
+            background: "transparent url("+constants.ASSETS_URL+"star_system/field.png) no-repeat center",
         };
         var obj = this.props.obj
-        var shipImage = "//d16cbq0l6kkf21.cloudfront.net/assets/ships/"+this.props.fleetType+".png";
+        var shipImage = constants.ASSETS_URL+"ships/"+this.props.fleetType+".png";
         var reason = '';
         var canBuild = 1;
         if (obj.reason) {

diff --git a/app/js/components/window/shipyard/buildQueue/item.jsx b/app/js/components/window/shipyard/buildQueue/item.jsx
@@ -9,6 +9,7 @@ var SubsidizeButton         = require('js/components/window/shipyard/buildQueue/
 var CountdownTimer          = require('js/components/countdownTimer');
 
 var util                    = require('js/util');
+var constants               = require('js/constants');
 
 var BuildQueueItem = React.createClass({
 
@@ -21,10 +22,10 @@ var BuildQueueItem = React.createClass({
         var starfieldStyle = {
             width:  100,
             height: 100,
-            background: "transparent url(//d16cbq0l6kkf21.cloudfront.net/assets/star_system/field.png) no-repeat center",
+            background: "transparent url("+constants.ASSETS_URL+"star_system/field.png) no-repeat center",
         };
         var obj = this.props.obj
-        var shipImage = "//d16cbq0l6kkf21.cloudfront.net/assets/ships/"+this.props.obj.type+".png";
+        var shipImage = constants.ASSETS_URL+"ships/"+this.props.obj.type+".png";
 
         return (
           <div>

diff --git a/app/js/constants.js b/app/js/constants.js
@@ -1,3 +1,26 @@
 'use strict';
 
 module.exports.ASSETS_URL = window.lacuna_s3_base_url + 'assets/';
+
+module.exports.ORES = {
+    anthracite   : 'Anthracite',
+    bauxite      : 'Bauxite',
+    beryl        : 'Beryl',
+    chromite     : 'Chromite',
+    chalcopyrite : 'Chalcopyrite',
+    fluorite     : 'Fluorite',
+    galena       : 'Galena',
+    goethite     : 'Goethite',
+    gold         : 'Gold',
+    gypsum       : 'Gypsum',
+    halite       : 'Halite',
+    kerogen      : 'Kerogen',
+    magnetite    : 'Magnetite',
+    methane      : 'Methane',
+    monazite     : 'Monazite',
+    rutile       : 'Rutile',
+    sulfur       : 'Sulfur',
+    trona        : 'Trona',
+    uraninite    : 'Uraninite',
+    zircon       : 'Zircon'
+};