From d77df1c7bf4a159f5ee876a83f889f53c470c4f6 Mon Sep 17 00:00:00 2001
From: Nathan McCallum <hey@nathan-mccallum.com>
Date: Sat, 18 Jun 2022 10:48:15 +1000
Subject: [PATCH] Show planet icons in right sidebar

---
 .../menu/rightSidebar/accordionItem.tsx       |  5 ++-
 .../menu/rightSidebar/planetListItem.tsx      | 13 +++++-
 app/css/bonus-styles.css                      |  4 ++
 app/interfaces.ts                             |  8 ++--
 app/interfaces/empire.ts                      | 11 +++++
 stubs/src/empire.js                           | 40 ++++++++++++-------
 6 files changed, 60 insertions(+), 21 deletions(-)
 create mode 100644 app/interfaces/empire.ts

diff --git a/app/components/menu/rightSidebar/accordionItem.tsx b/app/components/menu/rightSidebar/accordionItem.tsx
index 6680876b..ded34a20 100644
--- a/app/components/menu/rightSidebar/accordionItem.tsx
+++ b/app/components/menu/rightSidebar/accordionItem.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import _ from 'lodash';
 import PlanetListItem from 'app/components/menu/rightSidebar/planetListItem';
+import { BodiesList } from 'app/interfaces/empire';
 
 type Props = {
-  list: any;
+  list: BodiesList[];
   currentBody: number;
   title: string;
 };
@@ -59,6 +60,8 @@ class AccordionItem extends React.Component<Props, State> {
                 name={planet.name}
                 id={planet.id}
                 zone={planet.zone}
+                type={planet.type}
+                orbit={planet.orbit}
                 currentBody={this.props.currentBody}
               />
             );
diff --git a/app/components/menu/rightSidebar/planetListItem.tsx b/app/components/menu/rightSidebar/planetListItem.tsx
index 654226be..9e0badcf 100644
--- a/app/components/menu/rightSidebar/planetListItem.tsx
+++ b/app/components/menu/rightSidebar/planetListItem.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import MenuStore from 'app/stores/menu';
 import classNames from 'classnames';
+import environment from 'app/environment';
 
 declare const YAHOO: any;
 
@@ -9,6 +10,8 @@ type Props = {
   id: number;
   currentBody: number;
   zone: string;
+  type: string;
+  orbit: number;
 };
 
 class PlanetListItem extends React.Component<Props> {
@@ -31,7 +34,7 @@ class PlanetListItem extends React.Component<Props> {
     return (
       <a
         className={classNames({
-          'ui large teal label': this.isCurrentWorld(),
+          'ui large teal label full-width': this.isCurrentWorld(),
           item: !this.isCurrentWorld(),
         })}
         onClick={() => this.handleClick()}
@@ -41,6 +44,14 @@ class PlanetListItem extends React.Component<Props> {
           textDecoration: 'none',
         }}
       >
+        <img
+          alt={`${this.props.name} Planet Image`}
+          className='ui image'
+          style={{ height: '2em', display: 'inline', marginRight: 5 }}
+          src={`${environment.getAssetsUrl()}star_system/${this.props.type}-${
+            this.props.orbit
+          }.png`}
+        />{' '}
         {this.props.name} ({this.props.zone})
       </a>
     );
diff --git a/app/css/bonus-styles.css b/app/css/bonus-styles.css
index 63dcbda5..cfbf0b39 100644
--- a/app/css/bonus-styles.css
+++ b/app/css/bonus-styles.css
@@ -71,3 +71,7 @@ a:hover {
 a.item {
   cursor: pointer;
 }
+
+.full-width {
+  width: 100%;
+}
diff --git a/app/interfaces.ts b/app/interfaces.ts
index 74a75960..8b66345d 100644
--- a/app/interfaces.ts
+++ b/app/interfaces.ts
@@ -1,4 +1,5 @@
 import React from 'react';
+import { BodiesList } from 'app/interfaces/empire';
 
 export interface BodyGetBuildingsParams {
   0: number;
@@ -188,10 +189,9 @@ export interface EmpireGetStatusParams {}
 
 export interface EmpireGetStatusResponse {
   empire: {
-    bodies: any;
-    colonies: any;
-    stations: any;
-    planets: any;
+    colonies: BodiesList[];
+    stations: BodiesList[];
+    babies: any;
     essentia: number;
     has_new_messages: number;
     home_planet_id: number;
diff --git a/app/interfaces/empire.ts b/app/interfaces/empire.ts
new file mode 100644
index 00000000..0e8da4c8
--- /dev/null
+++ b/app/interfaces/empire.ts
@@ -0,0 +1,11 @@
+export interface BodiesList {
+  empire_id: number;
+  empire_name: string;
+  id: number;
+  name: string;
+  orbit: number;
+  x: number;
+  y: number;
+  zone: string;
+  type: string;
+}
diff --git a/stubs/src/empire.js b/stubs/src/empire.js
index 1d5bac0e..31d919b4 100644
--- a/stubs/src/empire.js
+++ b/stubs/src/empire.js
@@ -55,24 +55,29 @@ const Empire = {
   },
 
   status_block() {
+    const colonies = [];
+
+    for (let i = 1; i <= 40; i++) {
+      colonies.push({
+        id: i,
+        name: `Planet #${i}`,
+        x: 0,
+        y: 0,
+        orbit: 1,
+        type: `p${i}`,
+        empire_name: 'Rome',
+        empire_id: 1,
+        zone: '0|0',
+      });
+    }
+
     return {
       id: 1,
       bodies: {
-        colonies: [
-          {
-            id: 1,
-            name: 'Earth',
-            x: 0,
-            y: 0,
-            orbit: 1,
-            empire_name: 'Rome',
-            empire_id: 1,
-            zone: '0|0',
-          },
-        ],
+        colonies,
         mystations: [
           {
-            id: 2,
+            id: 200,
             name: 'Death Star',
             x: 100,
             y: -50,
@@ -80,11 +85,12 @@ const Empire = {
             empire_name: 'Rome',
             empire_id: 1,
             zone: '0|0',
+            type: 'station',
           },
         ],
         ourstations: [
           {
-            id: 3,
+            id: 300,
             name: 'Hubble',
             x: 150,
             y: 500,
@@ -92,13 +98,14 @@ const Empire = {
             empire_name: 'Star Explorers',
             empire_id: 2,
             zone: '0|1',
+            type: 'station',
           },
         ],
         babies: {
           'Taylor Swift': {
             planets: [
               {
-                id: 5,
+                id: 500,
                 name: 'Red',
                 x: 15,
                 y: -27,
@@ -106,6 +113,7 @@ const Empire = {
                 empire_name: 'Taylor Swift',
                 empire_id: 3,
                 zone: '0|-1',
+                type: 'p5',
               },
             ],
           },
@@ -113,6 +121,7 @@ const Empire = {
       },
       colonies: {
         1: 'Earth',
+        3: 'Mars',
       },
       rpc_count: 250,
       insurrect_value: 100000,
@@ -128,6 +137,7 @@ const Empire = {
       planets: {
         1: 'Earth',
         2: 'Death Star',
+        3: 'Mars',
       },
       tech_level: 30,
       self_destruct_active: 0,
-- 
2.51.2