Roster selection

src/App.tsx

@@ -14,7 +14,7 @@ import { Settings } from './types/Settings'
 export function App (): JSX.Element {
   const [roster, setRoster] = useState<Roster2018|Roster2021|null>(null)
 
-  const [settings, setSettings] = useState({ showWoundTrack: true })
+  const [settings, setSettings] = useState({ showWoundTrack: true, rosterSelection: false, printRosterList: false })
 
   useEffect(() => {
     setSettings(loadSettingsFromLocalStorage())
@@ -31,9 +31,9 @@ export function App (): JSX.Element {
 
   const loadSettingsFromLocalStorage = (): Settings => {
     try {
-      return JSON.parse(localStorage.getItem('settings') ?? '{ showWoundTrack: true, touchscreenMode: false, dropboxSelector: false }')
+      return JSON.parse(localStorage.getItem('settings') ?? '{ showWoundTrack: true, rosterSelection: false, printRosterList: false }')
     } catch (e) {
-      return { showWoundTrack: false }
+      return { showWoundTrack: true, rosterSelection: false, printRosterList: false }
     }
   }
 
@@ -76,7 +76,7 @@ export function App (): JSX.Element {
           <Container fluid='lg'>
             {roster === null ? <Homepage onUpload={handleUpload} settings={settings} setSettings={setAndSaveSettings} /> : <></>}
             {(roster != null) && isRosterKT18(roster) ? <RosterView2018 name={roster.name} models={roster.models} onClose={handleClose} forceRules={roster.forceRules} onSelectionChanged={handleSelectionChanged} /> : <></>}
-            {(roster != null) && isRosterKT21(roster) ? <RosterView2021 name={roster.name} operatives={roster.operatives} psychicPowers={roster.psychicPowers} faction={roster.faction} fireteams={roster.fireteams} onClose={handleClose} showWoundTrack={settings.showWoundTrack} /> : <></>}
+            {(roster != null) && isRosterKT21(roster) ? <RosterView2021 name={roster.name} operatives={roster.operatives} psychicPowers={roster.psychicPowers} faction={roster.faction} fireteams={roster.fireteams} isRoster={roster.isRoster} onClose={handleClose} showWoundTrack={settings.showWoundTrack} printRosterList={settings.printRosterList} rosterSelection={settings.rosterSelection} /> : <></>}
           </Container>
         </Route>
       </Switch>

src/components/KillTeam2021/Roster.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react'
+import React, { MouseEvent, useEffect, useState } from 'react'
 import { Col, Card } from 'react-bootstrap'
 import { CloseButton } from '../CloseButton'
 import { Operative, Datacard, PsychicPower } from '../../types/KillTeam2021'
@@ -7,7 +7,9 @@ import { RuleList } from './RuleList'
 import { PowerList } from './PowerList'
 import hash from 'node-object-hash'
 import _ from 'lodash'
+
 import { FactionSpecificData } from './FactionSpecificData/FactionSpecificData'
+import { RosterSelection } from './RosterSelection'
 
 interface Props {
   name: string
@@ -16,11 +18,15 @@ interface Props {
   psychicPowers: PsychicPower[]
   fireteams: string[]
   onClose: (event: MouseEvent<HTMLButtonElement>) => void
+  isRoster?: boolean
   showWoundTrack: boolean
+  rosterSelection: boolean
+  printRosterList: boolean
 }
 
-const groupByDatacard = (operatives: Operative[]): Datacard[] => {
-  const groupedOperatives = _.groupBy(operatives, (o) => (hash().hash({ datacard: o.datacard, weapons: o.weapons, equipment: o.equipment })))
+const groupByDatacard = (operatives: Operative[], selectedOperatives: string[]): Datacard[] => {
+  const filteredOperatives = operatives.filter((op) => { return selectedOperatives.includes(op.id) })
+  const groupedOperatives = _.groupBy(filteredOperatives, (o) => (hash().hash({ datacard: o.datacard, weapons: o.weapons, equipment: o.equipment })))
   return _.map(groupedOperatives, (ops, hash) => ({
     ...ops[0],
     name: ops[0].datacard,
@@ -36,7 +42,20 @@ export function Roster (props: Props): JSX.Element {
     width: '100%',
     display: 'flex'
   }
-  const datacards = groupByDatacard(props.operatives)
+
+  const [selectedOperatives, setSelectedOperatives] = useState(props.operatives.map((operative, index) => { return operative.id }))
+  const [datacards, setDataCards] = useState<Datacard[] | []>([])
+
+  const updateSelectedOperatives = (operativeIds: string[]): void => {
+    setSelectedOperatives(operativeIds)
+    setDataCards(groupByDatacard(props.operatives, selectedOperatives))
+  }
+
+  useEffect(() => {
+    setDataCards(groupByDatacard(props.operatives, selectedOperatives))
+  }, [props.operatives, selectedOperatives])
+
+  const rosterClassName = props.printRosterList ? '' : 'noprint'
 
   return (
     <>
@@ -48,8 +67,16 @@ export function Roster (props: Props): JSX.Element {
           <CloseButton onClose={props.onClose} />
         </Col>
       </h1>
+      {(props.isRoster ?? false) && (props.rosterSelection) && (
+        <Card className={rosterClassName}>
+          <Card.Header style={{ ...headingStyle, breakBefore: 'always' }} as='h2'>Roster</Card.Header>
+          <Card.Body>
+            <RosterSelection operatives={props.operatives} selectedOperatives={selectedOperatives} setSelectedOperatives={updateSelectedOperatives} />
+          </Card.Body>
+        </Card>
+      )}
       {_.orderBy(datacards, ['leader', 'name'], ['desc', 'asc']).map((datacard: Datacard) => (
-        <Datasheet key={datacard.name} datacard={datacard} showWoundTrack={props.showWoundTrack} />
+        <Datasheet key={datacard.operativeNames.toString()} datacard={datacard} showWoundTrack={props.showWoundTrack} />
       ))}
       <Card>
         <Card.Header style={{ ...headingStyle, breakBefore: 'always' }} as='h2'>Rules</Card.Header>

src/components/KillTeam2021/RosterSelection.tsx

@@ -0,0 +1,79 @@
+import { Operative, Weapon } from '../../types/KillTeam2021'
+import { Form, Row, Table } from 'react-bootstrap'
+import React, { FC } from 'react'
+
+interface Props {
+  operatives: Operative[]
+  selectedOperatives: string[]
+  setSelectedOperatives: (opIds: string[]) => void
+}
+
+const weaponNames = (weapons: Weapon[]): JSX.Element[] => {
+  return weapons.map((weapon, index) => {
+    return <Row key={weapon.name}>{weapon.name}</Row>
+  })
+}
+
+const operativeName = (operative: Operative): JSX.Element => {
+  // TODO: Hasn't been tested with a roster with actual names for units, I think this is only supported if you pay for battlescribe
+  const name = operative.name.includes(operative.datacard) ? operative.name : `${operative.name} [${operative.datacard}]`
+  return <span>{name}</span>
+}
+
+const flipSelection = (selectedOperatives: string[], opId: string): string[] => {
+  return selectionChanged(selectedOperatives, opId, !selectedOperatives.includes(opId))
+}
+
+const selectionChanged = (selectedOperatives: string[], opId: string, selected: boolean): string[] => {
+  let selectedOps = []
+  if (selected) {
+    selectedOps = [
+      opId,
+      ...selectedOperatives
+    ]
+  } else {
+    const idx = selectedOperatives.indexOf(opId)
+    if (idx > -1) {
+      selectedOperatives.splice(idx, 1)
+    }
+    selectedOps = selectedOperatives
+  }
+  return selectedOps
+}
+
+export const RosterSelection: FC<Props> = (props: Props) => {
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th>Operative</th>
+          <th>Weapons</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {props.operatives.map((op) => {
+          const selected = props.selectedOperatives.includes(op.id)
+          const className = selected ? '' : 'unselected'
+          return (
+            <tr
+              key={op.id} onClick={(event) => { props.setSelectedOperatives(flipSelection(props.selectedOperatives, op.id)) }}
+              className={className}
+            >
+              <td>{operativeName(op)}</td>
+              <td>{weaponNames(op.weapons)}</td>
+              <td>
+                <Form.Check
+                  type='checkbox'
+                  id='operative'
+                  label=''
+                  checked={selected}
+                />
+              </td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </Table>
+  )
+}

src/components/SettingsDialog.tsx

@@ -15,7 +15,27 @@ function SettingsDialog (props: Props): JSX.Element {
     const showWoundTrack: boolean = target.checked
     const newSettings = {
       ...props.settings,
-      showWoundTrack: showWoundTrack
+      showWoundTrack
+    }
+    props.setSettings(newSettings)
+  }
+
+  const handlePrintRosterChange = (event: any): void => {
+    const target = event.target
+    const printRosterList: boolean = target.checked
+    const newSettings = {
+      ...props.settings,
+      printRosterList
+    }
+    props.setSettings(newSettings)
+  }
+
+  const handleRosterSelectionChange = (event: any): void => {
+    const target = event.target
+    const rosterSelection: boolean = target.checked
+    const newSettings = {
+      ...props.settings,
+      rosterSelection
     }
     props.setSettings(newSettings)
   }
@@ -43,6 +63,20 @@ function SettingsDialog (props: Props): JSX.Element {
                 onChange={handleWoundTrackChange}
                 checked={props.settings.showWoundTrack}
               />
+              <Form.Check
+                type='checkbox'
+                id='rosterSelection'
+                label='Roster Selection WIP'
+                onChange={handleRosterSelectionChange}
+                checked={props.settings.rosterSelection}
+              />
+              <Form.Check
+                type='checkbox'
+                id='printRosterList'
+                label='Print Roster List'
+                onChange={handlePrintRosterChange}
+                checked={props.settings.printRosterList}
+              />
             </Form>
           </Row>
         </Col>

src/index.scss

@@ -41,6 +41,16 @@ h1, h2, h3, h4, h5 {
   }
 }
 
+.unselected {
+  opacity: 0.25;
+}
+
+.noprint {
+  @media print {
+    display: none;
+  }
+}
+
 .card {
   margin-bottom: 1em;
   break-inside: avoid;

src/parsers/KillTeam2021/BattlescribeParser.ts

@@ -136,6 +136,8 @@ export const parseBattlescribeXML = (doc: Document): Roster => {
   const operatives = []
   const name = xpSelect('string(/bs:roster/@name)', doc, true).toString()
   const faction = xpSelect('string(//bs:force/@catalogueName)', doc, true).toString()
+  const isRoster = xpSelect('string(//bs:force/@name)', doc, true).toString() === 'Roster'
+
   for (const model of xpSelect('//bs:selection[@type=\'model\']', doc) as Element[]) {
     operatives.push(parseOperative(model))
   }
@@ -159,12 +161,14 @@ export const parseBattlescribeXML = (doc: Document): Roster => {
       o.name = o.datacard + ' ' + romanNumerals[counts[o.datacard]++]
     }
   }
+
   return {
     system: 'KillTeam2021',
     name,
     faction,
     operatives,
     psychicPowers,
-    fireteams
+    fireteams,
+    isRoster
   }
 }

src/types/KillTeam2021.ts

@@ -95,6 +95,7 @@ export interface Roster {
   operatives: Operative[]
   psychicPowers: PsychicPower[]
   fireteams: string[]
+  isRoster?: boolean
 }
 
 export enum Archetype {

src/types/Settings.ts

@@ -1,3 +1,5 @@
 export interface Settings {
   showWoundTrack: boolean
+  printRosterList: boolean
+  rosterSelection: boolean
 }