diff --git a/src/ui/components/svg/alpha-strike-card-svg.scss b/src/ui/components/svg/alpha-strike-card-svg.scss index 7e3f080..4b37b7d 100644 --- a/src/ui/components/svg/alpha-strike-card-svg.scss +++ b/src/ui/components/svg/alpha-strike-card-svg.scss @@ -125,31 +125,4 @@ svg.alpha-strike-card { .description { font-size: 48px; } - - .pilot-ability { - display: flex; - flex-flow: row wrap; - align-items: baseline; - justify-content: space-between; - .ability-name { - font-size: 2.8rem; - font-weight: 600; - } - .ability-cost { - font-size: 2rem; - color: #666; - } - p { - flex-basis: 100%; - font-size: 2.2rem; - line-height: 2.6rem; - margin: 0; - } - &+.pilot-ability { - margin: 14px 0; - padding-top: 8px; - border-top: 1px solid #aaa; - } - } - } \ No newline at end of file diff --git a/src/ui/components/svg/alpha-strike-pilot-card-svg.tsx b/src/ui/components/svg/alpha-strike-pilot-card-svg.tsx deleted file mode 100644 index 3282708..0000000 --- a/src/ui/components/svg/alpha-strike-pilot-card-svg.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React from 'react'; -import { IAppGlobals } from '../../app-router'; -import BattleTechLogo from '../battletech-logo'; -import './alpha-strike-card-svg.scss'; - -export default class AlphaStrikePilotCardSVG extends React.Component { - - render = (): JSX.Element => { - if( !this.props.pilotAbilities || this.props.pilotAbilities.length < 1 ) { - return <> - } - - return ( - - <> - - - - - - - {this.props.unitVariant} - {this.props.unitClass} - - - - - - - Cost: {this.props.totalCost} - - - - - {this.props.pilotAbilities.map( (ability, abilityIndex) => { - if (!ability) { - return null; - } - return ( - - -
-
{ability.ability.toString()}
Cost: {ability.cost}
-

{ability.summary.toString()}

-
- - ) - })} - - - - - {/* {this.props.pilotAbility.ability.toUpperCase()} - -

{this.props.pilotAbility.summary.toString()}

- */} - - - - - - - - - - PILOT ABILITIES - - - - - - - ) - } -} - -interface IAlphaStrikePilotCardSVGProps { - pilotAbilities: any[]; - totalCost: number; - unitVariant: string; - unitClass: string; - inPlay?: boolean; - appGlobals: IAppGlobals; - className?: string; - forPrint?: boolean; - showExtreme?: boolean; - measurementsInHexes: boolean; -} - -interface IAlphaStrikePilotCardSVGState { - showTakeDamage: boolean; -} \ No newline at end of file diff --git a/src/ui/components/svg/alpha-strike-unit-token.scss b/src/ui/components/svg/alpha-strike-unit-token.scss index a96dc89..5def46d 100644 --- a/src/ui/components/svg/alpha-strike-unit-token.scss +++ b/src/ui/components/svg/alpha-strike-unit-token.scss @@ -1,8 +1,4 @@ -.tokens { - display: flex; - flex-flow: row wrap; - justify-content: left; -} + .alpha-strike-unit-token { border: 1px solid black; box-sizing: border-box; @@ -13,6 +9,8 @@ text-align: center; position: relative; overflow: hidden; + grid-column-end: span 1; + order: 1000; > * { width: 50%; box-sizing: border-box; @@ -61,7 +59,8 @@ &.bm, &.im { width: 4in; - order: 1000; + grid-column-end: span 2; + order: 1; img { left: 30px; top: -14px; @@ -71,7 +70,8 @@ &.superheavy { width: 6in; height: 1.5in; - order: 2000; + grid-column-end: span 3; + order: 2; img { left: 50px; top: -20px; @@ -82,7 +82,7 @@ &.pm { height: 1in; width: 2in; - order: 3000; + order: 1000; img { left: 12px; top: 0; @@ -92,6 +92,7 @@ } &.ba, &.ci { + order: 1000; img { left: 12px; top: 10px; diff --git a/src/ui/pages/alpha-strike/roster/print.scss b/src/ui/pages/alpha-strike/roster/print.scss index db271b5..c47e321 100644 --- a/src/ui/pages/alpha-strike/roster/print.scss +++ b/src/ui/pages/alpha-strike/roster/print.scss @@ -5,7 +5,7 @@ header { color: #0f0; } } -.print-footer { +.print-footer { display: none; position: fixed; bottom: 0; @@ -32,6 +32,9 @@ header { padding-top: 32px; width: 100%; display: block; + z-index: 10; + position: relative; + background: #fff; &:first-child { border-top: none; } @@ -44,26 +47,37 @@ header { font-size: 1rem; } } + .lance-bonus { + font-size: 14px; + } .section-content { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: 1fr 1fr 1fr; padding: 0 !important; - &:not(.tokens) { - gap: 20%; - } - .lance-bonus { - font-size: 14px; - } + gap: 14px; .unit-card, .ability-card { - flex-basis: 40%; - padding: 5px; + flex-basis: 32%; } - .ability-card { - flex-basis: 33.333%; + .pilot-ability { + font-size: 0.8rem; + line-height: 1.1rem; + margin: 8px 0; + .ability-name { + font-weight: 800; + } } - .pilot-abilities { - fill: #666; + } + .section-content + .section-header { + margin-top: 2rem; + } + &.tokens { + page: tokens; + .section-content { + max-width: 10in; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-auto-flow: dense; + gap: 0; } } } @@ -86,11 +100,17 @@ header { margin: 0; } } - .section-content { - .lance-bonus { - font-size: 11px; - line-height: 14px; - } + .section-content .pilot-ability, + .lance-bonus { + font-size: 10px; + line-height: 12px; + margin: 0; + } + .section-content .pilot-ability + .pilot-ability { + margin-top: 4px; + } + .section-content + .section-header { + margin-top: .5rem; } } .print-footer { @@ -100,5 +120,10 @@ header { } @page { - margin: .25in; -} \ No newline at end of file + margin: 0.25in; + size: landscape; + page-orientation: upright; + tokens { + size: 10in 7.7in; + } +} diff --git a/src/ui/pages/alpha-strike/roster/print.tsx b/src/ui/pages/alpha-strike/roster/print.tsx index 4a4a70e..3a7403e 100644 --- a/src/ui/pages/alpha-strike/roster/print.tsx +++ b/src/ui/pages/alpha-strike/roster/print.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import { FaArrowCircleLeft, FaBan, FaCheckCircle, FaPrint } from "react-icons/fa"; +import { FaArrowCircleLeft, FaBan, FaCheckCircle, FaPrint, FaUser, FaUserSlash } from "react-icons/fa"; import { Link } from 'react-router-dom'; import { CONST_BATTLETECH_URL } from '../../../../configVars'; import { IAppGlobals } from '../../../app-router'; import BattleTechLogo from '../../../components/battletech-logo'; -import AlphaStrikePilotCardSVG from '../../../components/svg/alpha-strike-pilot-card-svg'; import AlphaStrikePrintUnitSVG from '../../../components/svg/alpha-strike-print-unit'; import './print.scss'; import AlphaStrikeToggleRulerHexes from "./_toggleRulerHexes"; @@ -17,6 +16,7 @@ export default class AlphaStrikeRosterPrint extends React.Component { + this.setState({ + showAbilities: !this.state.showAbilities + }); + } + render = (): JSX.Element => { - // Create a running list of pilot ability cards to render on the last page. - let forceSPAs: any[] = []; - let formationBonus: any[] = []; let pages: PrintPage[] = []; pages.push({ @@ -48,10 +51,11 @@ export default class AlphaStrikeRosterPrint extends React.Component this._toggleTokens()} className="current" > {this.state.tokens ? () : } +
  • this._toggleAbilities()} className="current" > + {this.state.showAbilities ? () : ()} +
  • - {pages.map( (page) => { + {pages.map( (page, pageIndex) => { if( page.groups.length === 0) { return (<>); } - return
    + return
    {page.groups.map( (group, groupIndex) => { if( group.members.length === 0) { return (<>); } + return (

    {group.getName(groupIndex + 1)}

    - {group.formationBonus!.Name!=="None"?( + {group.formationBonus!.Name!=="None" && !this.state.showAbilities ? (
    Bonus:  {group.formationBonus!.Name} @@ -125,20 +129,17 @@ export default class AlphaStrikeRosterPrint extends React.Component
    + {group.formationBonus?.Name !== 'None' && this.state.showAbilities ? ( +
    + Bonus:  + {group.formationBonus?.Name} - {group.formationBonus?.BonusDescription} +
    + ) : null } +
    - {group.members.map( (unit, unitIndex) => { - // Add the pilot's abilities to the cards we need to print at the end. - if (unit.getPilotAbilityList().length > 0) { - forceSPAs.push( - { - abilities: unit.getPilotAbilities(), - totalCost: unit.getTotalPilotAbilityPoints(), - variant: unit.customName ? unit.customName : unit.variant, - class: unit.class ? unit.class : unit.name.replace(unit.variant, " ").trim(), - } - ); - } + {group.members.map( (unit, unitIndex) => { + return ( @@ -150,13 +151,24 @@ export default class AlphaStrikeRosterPrint extends React.Component + {this.state.showAbilities ? unit.getPilotAbilities().map( (ability, abilityIndex) => { + if (!ability) { + return null; + } + return ( + + +
    + {ability.ability.toString()} {ability.summary.toString()} +
    +     + ) + }) : null }
    - ) - })} - + )})} -
    +
    ) @@ -165,50 +177,10 @@ export default class AlphaStrikeRosterPrint extends React.Component })} - {/* Print out the SPAs for the units in this force. */} - {forceSPAs.length > 0 || formationBonus.length > 0 ? ( -
    -
    -

    Formation Bonuses and Special Pilot Abilities

    -
    -
    - {formationBonus.map( (bonus, bonusIndex) => { - return
    - -
    - Bonus:  - {bonus.Name} - {bonus.BonusDescription} -
    - -
    ; - - })} - {forceSPAs.map( (unit, unitIndex) => { - return ( -
    - -
    - ) - })} -
    -
    - ) : null} - {/* Print out unit tokens for each unit in the force */} {this.state.tokens ? ( -
    -
    -

    Unit Tokens

    -
    -
    +
    +
    {this.props.appGlobals.currentASForce.groups.map( (group, groupIndex) => { if( group.members.length === 0) { return (<>); @@ -269,4 +241,5 @@ interface PrintPage { interface IPrintState { updated: boolean; tokens: boolean; + showAbilities: boolean; } \ No newline at end of file