Show player structures

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

@@ -1,11 +1,11 @@
-import { useState } from 'react';
+import { useState } from 'react'
 import useKetchup from 'ketchup-react'
 import { addPlayerAction, loadSampleAction, reducer, removePlayerAction, resetAction } from 'wonders-common'
-import './App.css';
-import Game from '../Game/Game';
-import UserSelector from '../UserSelector/UserSelector';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import Container from 'react-bootstrap/Container';
+import './App.css'
+import Game from '../Game/Game'
+import UserSelector from '../UserSelector/UserSelector'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import Container from 'react-bootstrap/Container'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 

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

@@ -4,6 +4,10 @@
   border: black solid;
 }
 
+.wonder-civ-outer ol {
+  list-style-type: none;
+}
+
 .wonder-civ-struct {
   font-weight: bold;
 }

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

@@ -1,7 +1,10 @@
-import { useMemo } from 'react';
-import { Player, playerStats, Resource, Science, sumMaps } from 'wonders-common';
+import { useMemo } from 'react'
+import { Player, playerStats, Resource, Science, Structure, structureTypes } from 'wonders-common'
 import fill from 'lodash/fill'
 import './Civ.css'
+import Container from 'react-bootstrap/Container'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
 
 const resEmojis = new Map<Resource, string>([
   ['brick', '🧱'],
@@ -19,23 +22,47 @@ const sciEmojis = new Map<Science, string>([
 ])
 const wonderBgExts = ['jpg', 'webp']
 
-export default function Civ({ player, style }: { player: Player, style: 'player' | 'neighbor' | 'compact' }) {
+function structurePeek(struct: Structure): string {
+  switch (struct.type) {
+    case 'science':
+      return [...(struct.sciences ?? [])].map(sci => sciEmojis.get(sci)!).join('/')
+    case 'advanced industry':
+    case 'basic industry':
+      return [...(struct.resources?.entries() ?? [])]
+        .map(([res, num]) => fill(Array(num), resEmojis.get(res)!).join(''))
+        .join('/')
+    case 'military':
+      return fill(Array(struct.shields ?? 0), '🛡️').join('')
+    case 'culture':
+      return `${struct.points}⭐`
+    default:
+      return ''
+  }
+}
+
+export default function Civ({ player, civStyle }: { player: Player, civStyle: 'player' | 'neighbor' | 'compact' }) {
   const pStats = useMemo(() => playerStats(player), [player])
 
   const outerStyle: React.CSSProperties = player.wonder === undefined ? {} : {
     backgroundImage: ['linear-gradient(to left, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.75))', ...wonderBgExts.map(ext => `url("/assets/wonders/${player.wonder}.${ext}")`)].join(', '),
   }
 
-  return <div className='wonder-civ-outer' style={outerStyle}>
-    <div>{player.name}{player.wonder && ` • ${player.wonder}`}</div>
-    <div>{[...pStats.resources].flatMap(([res, n]) => fill(Array(n), resEmojis.get(res)!)).join('')}</div>
-    <div>{pStats.shields}🛡️</div>
-    <div>${player.gold}</div>
-    <div>{pStats.sciences.map(s => [...s].map(sci => sciEmojis.get(sci)!)).map(s =>
-      s.length === 1 ? s[0] : `(${s.join('/')})`
-    )}</div>
-    <div>{[...sumMaps(pStats.structObjs.map(s => new Map([[s.type, 1]])))].map(([type, n]) =>
-      <span className={`wonder-civ-struct wonder-civ-struct-type-${type.replaceAll(' ', '-')}`}>{n}</span>
-    )}</div>
-  </div>
+  return <Container fluid className='wonder-civ-outer' style={outerStyle}>
+    <Row>
+      <Col>{player.name}{player.wonder && ` • ${player.wonder}`}</Col>
+    </Row>
+    <Row>
+      {structureTypes.map(type =>
+        <Col key={type}>
+          <ol>
+            {pStats.structObjs.filter(o => o.type === type).map((s, i) =>
+              <li key={i} className={`wonder-civ-struct wonder-civ-struct-type-${type.replaceAll(' ', '-')}`}>
+                {s.name} {structurePeek(s)}
+              </li>
+            )}
+          </ol>
+        </Col>
+      )}
+    </Row>
+  </Container>
 }

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/style-prop-object */
 import { Dispatch } from 'ketchup-react'
 import { Action, chooseWonderAction, maxPlayers, minPlayers, Player, startGameAction, State, structures, wonders } from 'wonders-common'
 import Civ from '../Civ/Civ'
@@ -18,7 +17,7 @@ function getDistant<T>(arr: T[], idx: number) {
 function DistantCivs({ players }: { players: Player[] }) {
   return <Row>{players.map(p =>
     <Col key={p.name}>
-      <Civ player={p} style='compact' />
+      <Civ player={p} civStyle='compact' />
     </Col>
   )}</Row>
 }
@@ -42,15 +41,15 @@ export default function Game({ state, playerName, dispatch }: { state: State, pl
     return <>
       <DistantCivs players={started.distant} />
       <Row>
-        <Col><Civ player={started.left} style='neighbor' /></Col>
+        <Col><Civ player={started.left} civStyle='neighbor' /></Col>
         <Col>
           <div>{state.age === undefined ? '' : `Age ${state.age + 1} ${state.age % 2 === 0 ? '🔃' : '🔄'}`}</div>
           <div><button>Discards</button></div>
         </Col>
-        <Col><Civ player={started.right} style='neighbor' /></Col>
+        <Col><Civ player={started.right} civStyle='neighbor' /></Col>
       </Row>
       <Row>
-        <Col><Civ player={player} style='player' /></Col>
+        <Col><Civ player={player} civStyle='player' /></Col>
       </Row>
       <Row>{player.hand?.map(s => structures.get(s)!)?.map(s =>
         <Col>