Merge pull request #2815 from serge-web/2808-donot-hard-code-force-color

2808 Don't hard-code force colors

client/src/Components/CoreMappingChannel.tsx

@@ -9,8 +9,9 @@ import { usePlayerUiDispatch, usePlayerUiState } from '../Store/PlayerUi'
 
 import { Phase } from 'src/config'
 import CoreMapping from './local/atoms/core-mapping'
+import { forceStyles } from 'src/Helpers'
 
-const CoreMappingChannel: React.FC<{ channelId: string, isCustomChannel?: boolean }> = ({ channelId }) => {
+const CoreMappingChannel: React.FC<{ channelId: string }> = ({ channelId }) => {
   const state = usePlayerUiState()
   const playerUiDispatch = usePlayerUiDispatch()
   const [channelTabClass, setChannelTabClass] = useState<string>('')
@@ -33,14 +34,17 @@ const CoreMappingChannel: React.FC<{ channelId: string, isCustomChannel?: boolea
     sendMappingMessage(state.currentWargame, message)
   }
 
+  // it should be get from database ?
+  const forceStylesArr = forceStyles(state.allForces, false)
+
   return (
     <div className={channelTabClass} data-channel-id={channelId}>
       <CoreMapping
         postBack={messageHandler}
         channel={channel}
         currentPhase={Phase.Planning}
         currentTurn={1}
-        forces={[]}
+        forceStyles={forceStylesArr}
         messages={messages}
         playerForce={selectedForce}
         playerRole={selectedRole}

client/src/Components/local/atoms/core-mapping/index.spec.tsx

@@ -51,7 +51,7 @@ describe('Core Mapping component:', () => {
         channel={channel}
         playerRole={'mgr'}
         currentTurn={1}
-        forces={[]}
+        forceStyles={[]}
         currentPhase={Phase.Planning}
         postBack={noop}
         openPanelAsDefault={false}

client/src/Components/local/atoms/core-mapping/index.stories-inc.tsx

@@ -285,7 +285,7 @@ export const Default: React.FC = () => {
       channel={coreMapChannel}
       playerRole={'mgr'}
       currentTurn={1}
-      forces={[]}
+      forceStyles={[]}
       currentPhase={Phase.Planning}
       postBack={noop}
       openPanelAsDefault={false}
@@ -301,7 +301,7 @@ export const Bulk: React.FC = () => {
       channel={coreMapChannel}
       playerRole={'mgr'}
       currentTurn={1}
-      forces={[]}
+      forceStyles={[]}
       currentPhase={Phase.Planning}
       postBack={noop}
       openPanelAsDefault={false}

client/src/Components/local/atoms/core-mapping/index.tsx

@@ -22,7 +22,7 @@ import { DEFAULT_FONT_SIZE, DEFAULT_PADDING } from './renderers/milsymbol-render
 import styles from './styles.module.scss'
 import PropTypes, { CoreRendererProps } from './types/props'
 
-const CoreMapping: React.FC<PropTypes> = ({ messages, channel, playerForce, playerRole, currentTurn, currentPhase, openPanelAsDefault, postBack }) => {
+const CoreMapping: React.FC<PropTypes> = ({ messages, channel, playerForce, playerRole, currentTurn, currentPhase, openPanelAsDefault, forceStyles, postBack }) => {
   const [featureCollection, setFeatureCollection] = useState<FeatureCollection>()
   const [lastMessage, setLastMessage] = useState<MappingMessage>()
   const [renderers, setRenderers] = useState<React.FunctionComponent<CoreRendererProps>[]>([])
@@ -147,7 +147,8 @@ const CoreMapping: React.FC<PropTypes> = ({ messages, channel, playerForce, play
       turn: currentTurn,
       force: playerForce.uniqid,
       category: 'Civilian',
-      color: playerForce.color
+      color: playerForce.color,
+      _forceStyles: forceStyles
     }
 
     switch (shapeType) {

client/src/Components/local/atoms/core-mapping/renderers/core-renderer.tsx

@@ -3,29 +3,22 @@ import { Feature, Geometry, Point } from 'geojson'
 import L, { LeafletEvent, PathOptions, StyleFunction } from 'leaflet'
 import React from 'react'
 import { GeoJSON } from 'react-leaflet-v4'
+import { ForceStyle } from 'src/Helpers'
 import { CoreProperties, RENDERER_CORE } from 'src/custom-types'
 import { CoreRendererProps } from '../types/props'
 import { DEFAULT_FONT_SIZE, DEFAULT_PADDING } from './milsymbol-renderer'
 
-export const colorFor = (force: string): string => {
-  switch (force) {
-    case 'f-red':
-      return '#F00'
-    case 'f-blue':
-      return '#00F'
-    case 'f-green':
-      return '#0F0'
-    default: 
-      return '#F00'  
-  }
+export const colorFor = (force: string, forceStyles?: ForceStyle[]): string => {
+  const forceStyle = forceStyles?.find(style => style.force === force)
+  return forceStyle ? forceStyle.color : '#F00'
 }
 
 const CoreRenderer: React.FC<CoreRendererProps> = ({ features, onDragged, onRemoved, onEdited, onSelect }) => {
   const filter = (feature: Feature<Geometry, any>): boolean => feature.properties._type === RENDERER_CORE
   const style: StyleFunction<any> = (feature?: Feature<any>): PathOptions => {
     if (feature) {
       const props = feature.properties as CoreProperties
-      const color: string = colorFor(props.force)
+      const color = colorFor(props.force, props._forceStyles)
       const weight = feature.geometry.type === 'Polygon' ? 1 : 3
       return {
         color,
@@ -42,7 +35,7 @@ const CoreRenderer: React.FC<CoreRendererProps> = ({ features, onDragged, onRemo
     const elm = marker.pm['_layer'].pm.getElement() as HTMLTextAreaElement
     elm.style.textAlign = 'center'
     elm.style.padding = '0px'
-    elm.style.backgroundColor = colorFor(props.force)
+    elm.style.backgroundColor = colorFor(props.force, props._forceStyles)
     elm.style.color = props.color
     elm.style.fontSize = (props.fontSize || DEFAULT_FONT_SIZE) + 'px'
   }

client/src/Components/local/atoms/core-mapping/types/props.d.ts

@@ -7,7 +7,7 @@ export default interface PropTypes {
   playerRole: Role['id']
   currentTurn: number
   currentPhase: Phase
-  forces: ForceStyle[]
+  forceStyles: ForceStyle[]
   channel: ChannelMapping 
   messages: CoreMappingMessage[]
   postBack: (message: MappingMessage | MappingMessageDelta) => void

client/src/Helpers/force-styles.ts

@@ -0,0 +1,13 @@
+import { ForceData } from 'src/custom-types'
+import { ForceStyle } from './is-perceived-by'
+
+/** produce an array of force ids & colors
+ * optionally exclude umpire forces
+ */
+export default function forceStyles (allForces: ForceData[], excludeUmpire?: boolean): Array<ForceStyle> {
+  const filtered = excludeUmpire ? allForces.filter((force) => !force.umpire) : allForces
+  const forceColors: Array<ForceStyle> = filtered.map((force: ForceData) => {
+    return { forceId: force.uniqid, force: force.name, color: force.color }
+  })
+  return forceColors
+}

client/src/Helpers/index.ts

@@ -11,6 +11,7 @@ export { default as duplicateThisForce } from './duplicate-force'
 export { default as configDateTimeLocal } from './config-date-time-local'
 export { default as forceIcons } from './force-icons'
 export { default as forceRole } from './force-role'
+export { default as forceStyles } from './force-styles'
 export { default as formatTurn } from './format-turn'
 export { default as getRoleFromName } from './get-role-from-name'
 export { default as getRoleFromId } from './get-role-from-id'

client/src/custom-types/core-mapping.d.ts

@@ -3,6 +3,7 @@
 //
 import { Phase } from 'src/config'
 import { ForceData } from './force-data'
+import { ForceStyle } from 'src/Helpers'
 
 export const RENDERER_CORE = 'CoreRenderer'
 export const RENDERER_MILSYM = 'MilSymRenderer'
@@ -17,6 +18,7 @@ export interface BaseProperties {
     _type: typeof RENDERER_CORE | typeof RENDERER_MILSYM
     label: string
     force?: ForceData['id']
+    _forceStyles?: ForceStyle[]
     turn: number
     phase: Phase
     visibleTo?: [ForceData['id']]