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, 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, printRosterList: false }')
     } catch (e) {
-      return { showWoundTrack: false }
+      return { showWoundTrack: true, 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} /> : <></>}
           </Container>
         </Route>
       </Switch>

src/components/Homepage.tsx

@@ -13,6 +13,8 @@ interface Props {
   setSettings: (settings: Settings) => void
 }
 
+const GIT_SHA = process.env.REACT_APP_GIT_SHA ?? ''
+
 function fileDropZone (props: Props): JSX.Element {
   return (
     <Dropzone onDrop={props.onUpload} accept='.ros,.rosz'>
@@ -50,10 +52,10 @@ function Homepage (props: Props): JSX.Element {
                 </ul>
               </Card.Text>
               <Card.Text>
-                <Button variant="outline-secondary" onClick={() => setShowSettings(true)}>Edit Display Settings</Button>
+                <Button variant='outline-secondary' onClick={() => setShowSettings(true)}>Edit Display Settings</Button>
                 <SettingsDialog
-                    show={showSettings} setShowSettings={setShowSettings}
-                    settings={props.settings} setSettings={props.setSettings}
+                  show={showSettings} setShowSettings={setShowSettings}
+                  settings={props.settings} setSettings={props.setSettings}
                 />
               </Card.Text>
             </Card.Body>
@@ -89,7 +91,7 @@ function Homepage (props: Props): JSX.Element {
         Icons courtesy of <a href='https://killteam.app/'>Companion for Kill Team</a>.
         Released as <a href='https://github.com/floppy/dataslate'>Open Source</a>,
         report problems <a href='https://github.com/floppy/dataslate/issues/new'>on GitHub</a>.
-        Version: <em><a {...{ href: `https://github.com/floppy/dataslate/tree/${process.env.REACT_APP_GIT_SHA}` }}>{process.env.REACT_APP_GIT_SHA}</a></em>
+        Version: <em><a {...{ href: `https://github.com/floppy/dataslate/tree/${GIT_SHA}` }}>{GIT_SHA}</a></em>
       </footer>
     </>
   )

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'
@@ -8,6 +8,7 @@ import { PowerList } from './PowerList'
 import hash from 'node-object-hash'
 import _ from 'lodash'
 import { FactionSpecificData } from './FactionSpecificData'
+import { RosterSelection } from './RosterSelection'
 
 interface Props {
   name: string
@@ -16,15 +17,18 @@ interface Props {
   psychicPowers: PsychicPower[]
   fireteams: string[]
   onClose: (event: MouseEvent<HTMLButtonElement>) => void
+  isRoster?: boolean
   showWoundTrack: 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,
-    operativeNames: ops.map((c) => (c.name)).sort()
+    operativeNames: ops.map((op) => (op.name)).sort()
   }))
 }
 
@@ -36,7 +40,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,21 +65,30 @@ export function Roster (props: Props): JSX.Element {
           <CloseButton onClose={props.onClose} />
         </Col>
       </h1>
-      {_.orderBy(datacards, ['leader', 'name'], ['desc', 'asc']).map((datacard: Datacard) => (
-        <Datasheet datacard={datacard} showWoundTrack={props.showWoundTrack} />
+      {(props.isRoster ?? false) && (
+        <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, idx) => (
+        <Datasheet key={idx} datacard={datacard} showWoundTrack={props.showWoundTrack} />
       ))}
       <Card>
         <Card.Header style={{ ...headingStyle, breakBefore: 'always' }} as='h2'>Rules</Card.Header>
         <Card.Body>
           <RuleList rules={_.uniqBy(_.flatten(datacards.map((m) => (m.rules))), 'name')} />
         </Card.Body>
       </Card>
-      {props.psychicPowers.length > 0 && <Card>
-        <Card.Header style={{ ...headingStyle }} as='h2'>Psychic Powers</Card.Header>
-        <Card.Body>
-          <PowerList powers={props.psychicPowers} />
-        </Card.Body>
-      </Card>}
+      {props.psychicPowers.length > 0 &&
+        <Card>
+          <Card.Header style={{ ...headingStyle }} as='h2'>Psychic Powers</Card.Header>
+          <Card.Body>
+            <PowerList powers={props.psychicPowers} />
+          </Card.Body>
+        </Card>}
 
       <FactionSpecificData faction={props.faction} fireteams={props.fireteams} />
     </>

src/components/KillTeam2021/RosterSelection.tsx

@@ -0,0 +1,79 @@
+import { Operative, Weapon } from '../../types/KillTeam2021'
+import { Form, Row, Table } from 'react-bootstrap'
+import React 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 function RosterSelection (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/KillTeam2021/TacOpsList.tsx

@@ -11,7 +11,7 @@ export function TacOpsList (props: Props): JSX.Element {
   return (
     <Row xs={1} sm={2} md={3} className='g-4'>
       {props.tacOps.map((x: TacOp) => (
-        <Col>
+        <Col key={x.id}>
           <Card border='info' bg='light'>
             <Card.Header style={{ background: '#17a2b8', color: 'white', display: 'flex', justifyContent: 'space-between' }} as='h4'>
               <span>Tac Op {x.id}</span>

src/components/SettingsDialog.tsx

@@ -15,7 +15,17 @@ 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)
   }
@@ -43,6 +53,13 @@ function SettingsDialog (props: Props): JSX.Element {
                 onChange={handleWoundTrackChange}
                 checked={props.settings.showWoundTrack}
               />
+              <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

@@ -99,6 +99,7 @@ const parseOperative = (model: Element): Operative => {
   const faction = _.intersection(allKeywords, factionKeywords).pop() || allKeywords.find((k) => (k === k.toUpperCase())) || null
   const keywords = _.remove(allKeywords, (x) => (x !== faction))
   const details = {
+    id: xpSelect('string(@id)', model, true).toString(),
     datacard: xpSelect('string(@name)', model, true).toString(),
     name: xpSelect('string(@customName)', model, true).toString(),
     stats: {
@@ -126,6 +127,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))
   }
@@ -149,12 +152,14 @@ export const parseBattlescribeXML = (doc: Document): Roster => {
       o.name = o.datacard + ' ' + romanNumerals[counts[o.datacard]++]
     }
   }
+  console.log(`Is Roster? ${isRoster}`)
   return {
     system: 'KillTeam2021',
     name,
     faction,
     operatives,
     psychicPowers,
-    fireteams
+    fireteams,
+    isRoster
   }
 }

src/types/KillTeam2021.ts

@@ -54,6 +54,7 @@ export interface Equipment {
 }
 
 export interface Operative {
+  id: string
   datacard: string
   name: string
   stats: Stats
@@ -89,6 +90,7 @@ export interface Roster {
   operatives: Operative[]
   psychicPowers: PsychicPower[]
   fireteams: string[]
+  isRoster?: boolean
 }
 
 export enum Archetype {

src/types/Settings.ts

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