energy and planet nitpicks

projectsophon · Oct 13, 2020 · 7609715 · 7609715
1 parent ece0923
commit 7609715
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/client/src/app/GameWindowPanes/EnergyDexPane.tsx b/client/src/app/GameWindowPanes/EnergyDexPane.tsx
@@ -11,6 +11,7 @@ import { Planet, PlanetResource } from '../../_types/global/GlobalTypes';
 import UIEmitter, { UIEmitterEvent } from '../../utils/UIEmitter';
 import { Sub, Space } from '../../components/Text';
 import {
+  getPlayerShortHash,
   getPlanetShortHash,
   formatNumber,
   getPlanetRank,
@@ -20,6 +21,9 @@ import dfstyles from '../../styles/dfstyles.bs.js';
 import { getPlanetName, getPlanetCosmetic } from '../../utils/ProcgenUtils';
 import { SelectedContext } from '../GameWindow';
 import { SilverIcon, RankIcon } from '../Icons';
+import {
+  emptyAddress,
+} from '../../utils/CheckedTypeUtils';
 
 const DexWrapper = styled.div`
   height: 12.2em; // exact size so a row is cut off
@@ -48,26 +52,31 @@ const DexRow = styled.div`
     &:nth-child(2) {
       margin-right: 0.5em;
     }
-    // planet name
+    // player owner
     &:nth-child(3) {
+      // short hash
+      margin-right: 0.5em;
+    }
+    // planet name
+    &:nth-child(4) {
       flex-grow: 1;
     }
     // planet level
-    &:nth-child(4) {
+    &:nth-child(5) {
       width: 3em;
       text-align: center;
     }
     // rank
-    &:nth-child(5) {
+    &:nth-child(6) {
       width: 3em;
       text-align: center;
     }
     // energy
-    &:nth-child(6) {
+    &:nth-child(7) {
       width: 6.5em;
     }
     // silver
-    &:nth-child(7) {
+    &:nth-child(8) {
       width: 6.5em;
     }
   }
@@ -247,8 +256,14 @@ export function EnergyDexPane({ hook }: { hook: ModalHook; }): JSX.Element {
 
     for (const [i, planet] of planets.sort(levelSort).entries()) {
 
+      let owner = '      ';
+      if (planet.owner !== emptyAddress) {
+        owner = getPlayerShortHash(planet.owner);
+      };
+
       dexes.push(<DexEntry
         key={i}
+        owner={owner}
         planet={planet}
         className={
           selected?.locationId === planet.locationId ? 'selected' : ''
@@ -293,6 +308,9 @@ export function EnergyDexPane({ hook }: { hook: ModalHook; }): JSX.Element {
           <span>
             <Space length={5} />
           </span>{' '}
+          <span>
+            Owner
+          </span>
           <span>
             Planet Name
           </span>

diff --git a/client/src/app/GameWindowPanes/PlanetDexPane.tsx b/client/src/app/GameWindowPanes/PlanetDexPane.tsx
@@ -46,6 +46,7 @@ const DexRow = styled.div`
   height: 30px; // 5 + 3 * 7 + 4px
 
   & > span {
+    // planet ranking
     &:nth-child(1) {
       width: 2em;
     }
@@ -57,10 +58,12 @@ const DexRow = styled.div`
       width: 3em;
       position: relative; // for planetcircle
     }
+    // planet owner
     &:nth-child(3) {
       // short hash
       margin-right: 0.5em;
     }
+    // planet name
     &:nth-child(4) {
       flex-grow: 1;
     }
@@ -69,7 +72,7 @@ const DexRow = styled.div`
       width: 3em;
       text-align: center;
     }
-    // rank
+    // planet rank
     &:nth-child(6) {
       width: 3em;
       text-align: center;
@@ -517,7 +520,10 @@ export function PlanetDexPane({ hook }: { hook: ModalHook; }): JSX.Element {
       </ButtonRow>
       <DexWrapper>
         <DexRow className='title-row'>
-          <span>#</span>
+          <span
+            className={sortBy === Columns.Points ? 'selected' : ''}
+            onClick={() => setSortBy(Columns.Points)}
+          >#</span>
           <span></span> {/* empty icon cell */}
           <span>
             <Space length={5} />