Add gold amount to production bar

3 files changed, 48 insertions, 35 deletions

diff --git a/frontend/src/components/game/GameScene.jsx b/frontend/src/components/game/GameScene.jsx
index 18d7ca26..23be5ef1 100644
--- a/frontend/src/components/game/GameScene.jsx
+++ b/frontend/src/components/game/GameScene.jsx
@@ -46,7 +46,7 @@ class GameScenePresenter extends Component<GameSceneProps> {
       <Hand cards={turnInfo.hand}
             wonderUpgradable={turnInfo.wonderBuildability.buildable}
             prepareMove={this.props.prepareMove}/>
-      <ProductionBar production={board.production}/>
+      <ProductionBar gold={board.gold} production={board.production}/>
     </div>
   }
 }
diff --git a/frontend/src/components/game/ProductionBar.css b/frontend/src/components/game/ProductionBar.css
index 35b25137..15893b59 100644
--- a/frontend/src/components/game/ProductionBar.css
+++ b/frontend/src/components/game/ProductionBar.css
@@ -27,23 +27,23 @@
     margin-left: 1.5rem;
 }
 
-.resource-img {
+.choice-separator {
+    font-size: 2rem;
+    vertical-align: middle;
+    margin: 5px;
+    color: #c29929;
+    text-shadow: 0 0 1px black;
+}
+
+.token-img {
     height: 3rem;
     vertical-align: middle;
     width: 3rem;
 }
 
-.resource-count {
+.token-count {
     font-family: fantasy;
     font-size: 1.5rem;
     margin-left: 0.2rem;
     vertical-align: middle;
 }
-
-.choice-separator {
-    font-size: 2rem;
-    vertical-align: middle;
-    margin: 5px;
-    color: #c29929;
-    text-shadow: 0 0 1px black;
-}
diff --git a/frontend/src/components/game/ProductionBar.jsx b/frontend/src/components/game/ProductionBar.jsx
index 623389aa..ec924b31 100644
--- a/frontend/src/components/game/ProductionBar.jsx
+++ b/frontend/src/components/game/ProductionBar.jsx
@@ -3,41 +3,40 @@ import type { ApiCountedResource, ApiProduction, ApiResourceType } from '../../a
 import './ProductionBar.css'
 
 type ProductionBarProps = {
+  gold: number,
   production: ApiProduction,
 }
 
-export const ProductionBar = ({production}: ProductionBarProps) => {
+export const ProductionBar = ({gold, production}: ProductionBarProps) => {
   return <div className='production-bar'>
+    <GoldIndicator amount={gold}/>
     <FixedResources resources={production.fixedResources}/>
     <AlternativeResources resources={production.alternativeResources}/>
   </div>;
 };
 
+type GoldIndicatorProps = {
+  amount: number,
+}
+const GoldIndicator = ({amount}: GoldIndicatorProps) => {
+  return <TokenWithCount tokenName="coin" count={amount} otherClasses="gold-indicator"/>
+};
+
 type FixedResourcesProps = {
   resources: ApiCountedResource[],
 }
-
 const FixedResources = ({resources}: FixedResourcesProps) => {
   return <div className="fixed-resources">
-    {resources.map(r => <ResourceCount key={r.type} resource={r}/>)}
-  </div>
-};
-
-type ResourceCountProps = {
-  resource: ApiCountedResource,
-}
-
-const ResourceCount = ({resource}: ResourceCountProps) => {
-  return <div className="resource-with-count">
-    <ResourceImage type={resource.type}/>
-    <span className="resource-count">× {resource.count}</span>
+    {resources.map(r => <TokenWithCount key={r.type}
+                                        tokenName={getTokenName(r.type)}
+                                        count={r.count}
+                                        otherClasses="resource-with-count"/>)}
   </div>
 };
 
 type AlternativeResourcesProps = {
   resources: ApiResourceType[][],
 }
-
 const AlternativeResources = ({resources}: AlternativeResourcesProps) => {
   return <div className="alternative-resources">
     {resources.map((types, i) => <ResourceChoice key={i} types={types}/>)}
@@ -47,28 +46,42 @@ const AlternativeResources = ({resources}: AlternativeResourcesProps) => {
 type ResourceChoiceProps = {
   types: ApiResourceType[],
 }
-
 const ResourceChoice = ({types}: ResourceChoiceProps) => {
-  let typeImages = types.map(type => <ResourceImage key={type} type={type}/>);
+  let typeImages = types.map(type => <TokenImage key={type} tokenName={getTokenName(type)}/>);
   let separator = <span className="choice-separator">∕</span>;
   return <div className="resource-choice">
     {intersperce(typeImages, separator)}
   </div>
 };
 
-function intersperce(array: T[], separator: T): T[] {
+function intersperce(array, separator) {
   let result = array.reduce((acc, elt) => acc.concat(elt, separator), []);
   return result.slice(0, -1);
 }
 
-type ResourceImageProps = {
-  type: ApiResourceType,
+type TokenWithCountProps = {
+  tokenName: string,
+  count: number,
+  otherClasses?: string,
 }
+const TokenWithCount = ({tokenName, count, otherClasses = ""}: TokenWithCountProps) => {
+  return <div className={`token-with-count ${otherClasses}`}>
+    <TokenImage tokenName={tokenName}/>
+    <span className="token-count">× {count}</span>
+  </div>
+};
 
-const ResourceImage = ({type}: ResourceImageProps) => {
-  return <img src={getImagePath(type)} title={type} alt={type} className="resource-img"/>
+type TokenImageProps = {
+  tokenName: string,
+}
+const TokenImage = ({tokenName}: TokenImageProps) => {
+  return <img src={getTokenImagePath(tokenName)} title={tokenName} alt={tokenName} className="token-img"/>
 };
 
-function getImagePath(resourceType: ApiResourceType): string {
-  return `/images/resources/${resourceType.toLowerCase()}.png`;
+function getTokenImagePath(tokenName: number): string {
+  return `/images/tokens/${tokenName}.png`;
+}
+
+function getTokenName(resourceType: ApiResourceType): string {
+  return `resources/${resourceType.toLowerCase()}`;
 }