Improve player struct display

packages/wonders-client/src/components/Civ/Civ.css

@@ -18,8 +18,10 @@
 .wonder-civ-struct-group {
   list-style-type: none;
   padding-left: 0;
+  margin-top: 0.4em;
+  margin-bottom: 0.4em;
   font-size: 0.8em;
-  width: 12em;
+  width: 13em;
 }
 .wonder-civ-struct {
   border: thin black solid;
@@ -32,3 +34,10 @@
 .wonder-civ-struct-type-advanced-industry { background-color: lightgray; color: black; }
 .wonder-civ-struct-type-guild { background-color: purple; color: white; }
 .wonder-civ-struct-type-military { background-color: red; color: white; }
+.wonder-civ-struct-age {
+  float: right;
+  font-size: 0.6em;
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+  font-family: serif;
+}

packages/wonders-client/src/components/Civ/Civ.tsx

@@ -3,6 +3,7 @@ import { Player, playerStats, Resource, Science, Structure, StructureType, wonde
 import fill from 'lodash/fill'
 import './Civ.css'
 import classNames from 'classnames'
+import { toRoman } from 'roman-numerals'
 
 type DisplayStyle = 'player' | 'neighbor' | 'distant'
 
@@ -55,6 +56,27 @@ function structurePeek(struct: Structure): string {
   }
 }
 
+function StructGroup({ pStats, displayStyle, type }: { pStats: ReturnType<typeof playerStats>, displayStyle: DisplayStyle, type: StructureType }) {
+  const structs = pStats.structObjs.filter(o => o.structure.type === type).sort((a, b) =>
+    a.age === b.age ? a.structure.name.localeCompare(b.structure.name) : a.age - b.age
+  )
+
+  if (displayStyle === 'distant') {
+    return <div className={classNames({ 'wonder-civ-struct': true, [`wonder-civ-struct-type-${type.replaceAll(' ', '-')}`]: true })}>
+      {structs.length}
+    </div>
+  }
+
+  return <ol key={type} className='wonder-civ-struct-group'>
+    {structs.map((s, i) =>
+      <li key={i} className={classNames({ 'wonder-civ-struct': true, [`wonder-civ-struct-type-${type.replaceAll(' ', '-')}`]: true })}>
+        {s.structure.name} {structurePeek(s.structure)}
+        <div className='wonder-civ-struct-age'>{toRoman(s.age + 1)}</div>
+      </li>
+    )}
+  </ol>
+}
+
 export default function Civ({ player, displayStyle }: { player: Player, displayStyle: DisplayStyle }) {
   const pStats = useMemo(() => playerStats(player), [player])
 
@@ -70,14 +92,8 @@ export default function Civ({ player, displayStyle }: { player: Player, displayS
     <div className='wonder-civ-structs'>
       {structTypeLayout.get(displayStyle)!.map((col, i) =>
         <div key={i} className='wonder-civ-struct-col'>
-          {col.filter(type => pStats.structObjs.some(s => s.type === type)).map(type =>
+          {col.filter(type => pStats.structObjs.some(s => s.structure.type === type)).map((type, i) =>
-            <ol key={type} className='wonder-civ-struct-group'>
+            <StructGroup key={i} pStats={pStats} displayStyle={displayStyle} type={type} />
-              {pStats.structObjs.filter(o => o.type === type).map((s, i) =>
-                <li key={i} className={classNames({ 'wonder-civ-struct': true, [`wonder-civ-struct-type-${type.replaceAll(' ', '-')}`]: true })}>
-                  {s.name} {structurePeek(s)}
-                </li>
-              )}
-            </ol>
           )}
         </div>
       )}

packages/wonders-common/src/util.ts

@@ -39,12 +39,12 @@ export function sumMaps<V>(ms?: (Map<V, number> | undefined)[]) {
 }
 
 export function playerStats(p: Player) {
-  const structObjs = compact(p.structures.map(({ structure }) => structures.get(structure)))
+  const structObjs = compact(p.structures.map(s => ({ ...s, structure: structures.get(s.structure)! })))
   return {
     structObjs,
-    resources: sumMaps(structObjs.map(s => s.resources)),
+    resources: sumMaps(structObjs.map(s => s.structure?.resources)),
-    shields: sum(structObjs.map(s => s.shields)) ?? 0,
+    shields: sum(structObjs.map(s => s.structure?.shields)) ?? 0,
-    sciences: compact(structObjs.map(s => s.sciences)),
+    sciences: compact(structObjs.map(s => s.structure?.sciences)),
   }
 }