/* Pacific Command - Mission Builder */ const { useState, useMemo, useEffect, useRef } = React; const uid = () => Math.random().toString(36).slice(2, 9); const ScifiCtx = React.createContext(false); const useScifi = () => React.useContext(ScifiCtx); const LiteralNamesCtx = React.createContext(false); const useLiteralNames = () => React.useContext(LiteralNamesCtx); // Terminology map const T = (scifi) => ({ aircraft: scifi ? 'Aerospace Craft' : 'Aircraft', aircraftCapacity: scifi ? 'Capacity' : 'Aircraft Capacity', submarine: scifi ? 'Stealth Frigate' : 'Submarine', depthCharges: scifi ? 'De-Stealth Charges' : 'Depth Charges', seaplaneTender: scifi ? 'Scout Ship Tender' : 'Seaplane Tender', air: scifi ? 'Aero' : 'Air', }); // Display unit name with scifi swaps function scifiUnitName(id, name, terms) { if (id === 'submarine') return terms.submarine; if (id === 'seaplane-tender') return terms.seaplaneTender; return name; } const STORE_KEY = 'pacific-command:v6'; const classMap = () => Object.fromEntries(window.SHIP_CLASSES.map(c => [c.id, c])); const modMap = () => Object.fromEntries(window.MODIFICATIONS.map(m => [m.id, m])); // Each black/red rank maps to one modification; Aces are wildcards. // classPick entries may be drawn more than once (applied to a different class). const CAMPAIGN_CARDS = [ { card: 'Black 2', id: 'aircraft-shortage' }, { card: 'Black 3', id: 'coordinated-strikes' }, { card: 'Black 4', id: 'daring-commander' }, { card: 'Black 5', id: 'enemy-codes' }, { card: 'Black 6', id: 'enemy-plans' }, { card: 'Black 7', id: 'escort-carriers' }, { card: 'Black 8', id: 'extended-craft-range' }, { card: 'Black 9', id: 'false-codes' }, { card: 'Black 10', id: 'improved-armour', classPick: true }, { card: 'Black Jack', id: 'increased-aircraft', classPick: true }, { card: 'Black Queen',id: 'ineffective-aa' }, { card: 'Black King', id: 'long-range-radar' }, { card: 'Black Ace', wild: true }, { card: 'Red 2', id: 'mobile-force-doctrine' }, { card: 'Red 3', id: 'near-range-radar' }, { card: 'Red 4', id: 'overconfident-commander' }, { card: 'Red 5', id: 'overcomplicated-plans' }, { card: 'Red 6', id: 'overwhelming-air-patrols' }, { card: 'Red 7', id: 'rookie-pilots' }, { card: 'Red 8', id: 'seasoned-pilots' }, { card: 'Red 9', id: 'superior-fighters' }, { card: 'Red 10', id: 'torpedo-belts', classPick: true }, { card: 'Red Jack', id: 'unrefined-fuel' }, { card: 'Red Queen', id: 'unreliable-torpedoes' }, { card: 'Red King', id: 'wily-commander' }, { card: 'Red Ace', wild: true }, ]; // ─── Icons ───────────────────────────────────────────── const S = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' }; const Icon = { Add: (p) => , Subtract: (p) => , Check: (p) => , Close: (p) => , Print: (p) => , Delete: (p) => , Warning: (p) => , Restart: (p) => , Document: (p) => , ShipCarrier: (p) => , ShipBattleship: (p) => , ShipCruiser: (p) => , ShipSub: (p) => , Aerospace: (p) => , Sparkle: (p) => , Flag: (p) => , History: (p) => , Remove: (p) => , Sliders: (p) => , Reroll: (p) => , Dice: (p) => , Help: (p) => , Cost: (p) => , Aircraft: (p) => , Guns: (p) => , Strike: (p) => , AA: (p) => , CAP: (p) => , }; const STAT_META = (scifi) => { const terms = T(scifi); return [ { key: 'aircraft', label: terms.aircraftCapacity, icon: Icon.Aircraft, iconScifi: Icon.Aerospace, tip: `${terms.aircraft} capacity. Total embarked squadrons may not exceed this value.` }, { key: 'guns', label: 'Guns', icon: Icon.Guns, tip: 'Total Guns dice the task force rolls in a Gun Battle.' }, { key: 'strike', label: 'Strike', icon: Icon.Strike, tip: `Strike dice this task force can amass on an ${terms.air} Group card during a Strike.` }, { key: 'cap', label: 'CAP', icon: Icon.CAP, tip: `Combat ${terms.air} Patrol. Dice rolled during the Interception Step to discard incoming Strike dice.` }, { key: 'aa', label: 'AA', icon: Icon.AA, tip: `Anti-${scifi ? 'Aerospace' : 'Aircraft'} dice rolled during the AA Step of an ${terms.air} Action targeting this task force.` }, { key: 'cost', label: 'Cost', icon: Icon.Cost, accent: true, tip: 'Sum of the points cost of every unit in this task force.' }, ]; }; // ─── Effects engine ──────────────────────────────────── function applyModEffects(activeMods, baseTotals, units, cm) { let { cost, guns, aircraft, aa, strike, cap } = baseTotals; const carrierBonus = activeMods.reduce((s, m) => s + (m.effect?.kind === 'aircraftCarrierBonus' ? (m.effect.amount || 0) : 0), 0); const halve = activeMods.some(m => m.effect?.kind === 'aircraftHalveCeil'); // Aircraft is resolved per ship: carriers gain the bonus, then each ship's // value is halved (rounding up) under a shortage, before summing. let aircraftAfter = 0; for (const u of units) { const c = cm[u.classId]; if (!c) continue; let per = c.stats.aircraft || 0; if (per > 0) { if (c.isCarrier) per += carrierBonus; if (halve) per = Math.ceil(per / 2); } aircraftAfter += per * u.qty; } return { cost, guns, aircraft: aircraftAfter, aa, strike, cap, aircraftBase: aircraft, aircraftDelta: aircraftAfter - aircraft, }; } function computeTotals(units, cm) { let cost=0, guns=0, aircraft=0, aa=0, strike=0, cap=0, squadronCount = 0; for (const u of units) { const c = cm[u.classId]; if (!c) continue; cost += c.cost * u.qty; guns += c.stats.guns * u.qty; aircraft += c.stats.aircraft * u.qty; aa += c.stats.aa * u.qty; strike += c.stats.strike * u.qty; cap += c.stats.cap * u.qty; if (c.kind === 'squadron') squadronCount += u.qty; } return { cost, guns, aircraft, aa, strike, cap, squadronCount }; } // Render mod text with a leading "Disadvantageous." set in italics function renderModText(text) { if (text && text.startsWith('Disadvantageous.')) { return <>Disadvantageous.{text.slice('Disadvantageous.'.length)}; } return text; } // Effective special rules for a class, applying class-targeted armour mods. // Improved Armour and Torpedo Belts are situational (+1 Armoured in Gun // Battles / Strikes respectively), so we annotate rather than rewrite the value. function effectiveSpecial(cls, fleet) { let special = cls.special || ''; const mods = fleet?.mods || []; const sel = fleet?.armourSel || {}; const notes = []; if (mods.includes('improved-armour') && sel['improved-armour'] === cls.id) notes.push('Armoured +1 vs Guns'); if (mods.includes('torpedo-belts') && sel['torpedo-belts'] === cls.id) notes.push('Armoured +1 vs Strikes'); if (notes.length) special = special ? special + ', ' + notes.join(', ') : notes.join(', '); return special; } // ─── Tooltip helpers ─────────────────────────────────── // Build the full rule-text tooltip for a special rules string like "High Value, Armoured (2)" function specialTip(special) { if (!special) return null; const parts = special.split(',').map(s => s.trim()).filter(Boolean); return parts.map(p => { const key = window.ruleKey(p); const rule = window.SPECIAL_RULES[key]; return rule ? `${p}\n${rule.text}` : p; }).join('\n\n'); } function shipClassTip(cls) { const lines = []; lines.push(`${cls.name}, ${cls.cost} pts`); if (cls.role) lines.push(cls.role); const special = specialTip(cls.special); if (special) { lines.push(''); lines.push(special); } return lines.join('\n'); } // ─── Historical names ────────────────────────────────── let HISTORICAL_ONLY = (typeof localStorage !== 'undefined' && localStorage.getItem('pc2-histonly') === '1'); function setHistFlag(v) { HISTORICAL_ONLY = !!v; } function namePool(faction, era, classId) { const real = window.HISTORICAL_NAMES?.[faction]?.[era]?.[classId] || []; if (HISTORICAL_ONLY) return real; const paper = window.PAPER_NAMES?.[faction]?.[era]?.[classId] || []; if (!paper.length) return real; const seen = new Set(real.map(s => s.toLowerCase())); return real.concat(paper.filter(s => !seen.has(s.toLowerCase()))); } // Pick a random entry from a pool, preferring names not already taken in the TF. function pickFromPool(pool, takenSet) { if (!pool || !pool.length) return ''; const fresh = takenSet ? pool.filter(n => !takenSet.has(n)) : pool; const choice = fresh.length ? fresh : pool; return choice[Math.floor(Math.random() * choice.length)]; } function suggestPennantFor(classId, faction, era, takenSet) { return pickFromPool(namePool(faction, era, classId), takenSet); } function autoFillEmpty(tf) { if (!tf.faction || !tf.era) return tf; const taken = new Set(); for (const u of tf.units) if (u.pennant) taken.add(u.pennant); const units = tf.units.map(u => { if (u.pennant) return u; const nm = suggestPennantFor(u.classId, tf.faction, tf.era, taken); if (nm) taken.add(nm); return { ...u, pennant: nm || u.pennant }; }); return { ...tf, units }; } // ─── Primitives ──────────────────────────────────────── function Btn({ children, variant = 'default', onClick, title, type = 'button', icon: IconC, disabled, dataTip }) { const cls = 'btn ' + ( variant === 'primary' ? 'btn-primary' : variant === 'subtle' ? 'btn-subtle' : variant === 'ghost' ? 'btn-subtle' : variant === 'danger' ? 'btn-danger' : variant === 'icon' ? 'btn-icon btn-subtle' : '' ); return ( ); } // Pill toggle button for the upper-left mode cluster. function ToggleBtn({ active, onClick, icon: IconC, children, dataTip }) { return ( ); } function useClickOutside(ref, onOutside) { useEffect(() => { const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) onOutside(); }; document.addEventListener('mousedown', onDown); return () => document.removeEventListener('mousedown', onDown); }, [onOutside]); } function QtyStepper({ value, onChange, min = 1, max = 99, onDelete }) { return (
{value}
); } // ─── Faction roundels ────────────────────────────────── const FACTION_ICON = { IJN: 'assets/roundel-ijn.svg', USN: 'assets/roundel-usn.svg', KK: 'assets/roundel-kk.svg', PR: 'assets/roundel-pr.svg', UCM: 'assets/faction-ucm.webp', PHR: 'assets/faction-phr.webp', SCRG: 'assets/faction-scrg.webp', SHLT: 'assets/faction-shlt.webp', RES: 'assets/faction-res.webp', }; function FactionRoundel({ faction, size = 36 }) { const src = FACTION_ICON[faction]; if (src) return {faction; // No logo on hand (e.g. Bioficer) — circular initials badge. if (faction) return ( {faction.slice(0, 2)} ); return null; } function FactionToggle({ faction, era, onChange }) { const scifi = useScifi(); const opts = [ { f: 'IJN', e: 'Early War', label: 'IJN Early War' }, { f: 'IJN', e: 'Late War', label: 'IJN Late War' }, { f: 'USN', e: 'Early War', label: 'USN Early War' }, { f: 'USN', e: 'Late War', label: 'USN Late War' }, ...(scifi ? [ { f: 'UCM', e: 'Standard', label: 'United Colonies' }, { f: 'PHR', e: 'Standard', label: 'Posthuman Republic' }, { f: 'SCRG', e: 'Standard', label: 'Scourge' }, { f: 'SHLT', e: 'Standard', label: 'Shaltari' }, { f: 'RES', e: 'Standard', label: 'Resistance' }, { f: 'BFCR', e: 'Standard', label: 'Bioficer' }, { f: 'KK', e: 'Standard', label: 'Kalium Kabal' }, { f: 'PR', e: 'Standard', label: 'Postman Republic' }, ] : []), ]; return (
{opts.map(({ f, e, label }) => { const active = faction === f && era === e; return ( ); })}
); } // ─── Unit picker ─────────────────────────────────────── function UnitPicker({ onPick, onClose }) { const ref = useRef(null); const scifi = useScifi(); const terms = T(scifi); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); return (
{window.SHIP_CLASSES.map(u => ( ))}
); } // ─── Mod picker (all mods in one flat list, with full text) ─ function ModPicker({ activeIds, onToggle, onClose }) { const ref = useRef(null); useClickOutside(ref, onClose); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); return (
Fleet Modifications
{window.MODIFICATIONS.map(m => { const active = activeIds.includes(m.id); return ( ); })}
); } // ─── Historical Modification sets (4 picks, full text) ─ function HistoricalModSets({ onApply, currentSetId, currentFaction, currentEra }) { return (
{window.HISTORICAL_MOD_SETS.map(set => { const isCurrent = currentSetId === set.id; const isMatch = !isCurrent && currentFaction === set.faction && currentEra === set.era; return ( ); })}
); } // ─── Unit row ────────────────────────────────────────── function UnitRow({ unit, cls, onUpdate, onDelete, overCapacity, suggestedName, faction, fleet }) { const literalNames = useLiteralNames(); const scifi = useScifi(); const terms = T(scifi); if (!cls) return null; return (
{cls.sprite} {scifi ? scifiUnitName(cls.id, cls.name, terms) : cls.name}
onUpdate({ ...unit, pennant: e.target.value })} onFocus={(e) => { if (!unit.pennant && cls) onUpdate({ ...unit, pennant: randomPennant(cls.id, faction, fleet?.era) }); }} title={unit.pennant && MEANINGS[unit.pennant] ? (literalNames ? unit.pennant : MEANINGS[unit.pennant]) : undefined} /> {unit.pennant && ( )}
onUpdate({ ...unit, qty: v })} />
{cls.role || ''} {(() => { const sp = effectiveSpecial(cls, fleet); return sp ? {sp} : null; })()}
{cls.cost * unit.qty} {unit.qty > 1 ? `(${cls.cost} ea)` : 'pts'}
); } // ─── Task Force card ─────────────────────────────────── function TaskForceCard({ tf, idx, fleet, totals, faction, era, onUpdate, onDelete, freePlay }) { const cm = useMemo(classMap, []); const [pickerOpen, setPickerOpen] = useState(false); const squadronOver = totals.squadronCount > totals.aircraft; const tfV = useMemo(() => tfViolations(tf, freePlay, fleet.mods), [tf, freePlay, fleet.mods]); const scifi = useScifi(); const literalNames = useLiteralNames(); const terms = T(scifi); const statMeta = STAT_META(scifi); const updateUnit = (id, unit) => onUpdate({ ...tf, units: tf.units.map(u => u.id === id ? unit : u) }); const deleteUnit = (id) => onUpdate({ ...tf, units: tf.units.filter(u => u.id !== id) }); const addUnit = (classId) => { const existing = tf.units.find(u => u.classId === classId && !u.pennant); let next; if (existing) { next = { ...tf, units: tf.units.map(u => u === existing ? { ...u, qty: u.qty + 1 } : u) }; } else { next = { ...tf, units: [...tf.units, { id: 'u-' + uid(), classId, qty: 1, pennant: '' }] }; } onUpdate(next); }; const totalHulls = tf.units.reduce((s, u) => s + u.qty, 0); const suggestions = useMemo(() => { if (!faction || !era) return {}; const out = {}; const taken = new Set(); for (const u of tf.units) if (u.pennant) taken.add(u.pennant); for (const u of tf.units) { if (u.pennant) continue; out[u.id] = suggestPennantFor(u.classId, faction, era, taken); if (out[u.id]) taken.add(out[u.id]); } return out; }, [tf.units, faction, era]); return (
{faction && }
onUpdate({ ...tf, callSign: e.target.value })} title={tf.callSign && MEANINGS[tf.callSign] ? (literalNames ? tf.callSign : MEANINGS[tf.callSign]) : undefined} />
onUpdate({ ...tf, commander: e.target.value })} data-tip="Click to edit the commanding officer" />
{totals.cost}pts
{ if (window.confirm(`Delete ${tf.callSign || 'this task force'}? This can't be undone.`)) onDelete(); }} title="Delete task force" icon={Icon.Delete} dataTip="Delete this task force">Delete

Units{tf.units.length} entries, {totalHulls} hulls

{squadronOver && (
Squadron limit exceeded.{' '} {totals.squadronCount} squadrons embarked, {totals.aircraft} {terms.aircraftCapacity} available. Reduce squadrons or add carriers.
)} {tfV.tooManyCV && (
Carrier limit exceeded.{' '} {tfV.tooManyCV} Fleet Carriers assigned. Maximum 2 per task force.
)} {tf.units.length > 0 ? ( {sortUnits(tf.units).map(u => { const c = cm[u.classId]; const isSquadron = c && c.kind === 'squadron'; return ( updateUnit(u.id, unit)} onDelete={() => deleteUnit(u.id)} overCapacity={isSquadron && squadronOver} suggestedName={suggestions[u.id]} faction={fleet?.faction} fleet={fleet} /> ); })}
Class and pennant Qty Role and special Cost
) : (
No units yet.
)}
{pickerOpen && setPickerOpen(false)} />}
{statMeta.map(s => { const IconC = (scifi && s.iconScifi) ? s.iconScifi : s.icon; const statLabel = s.label; const v = totals[s.key]; const delta = s.key === 'aircraft' ? totals.aircraftDelta : 0; return (
{statLabel}
{v} {delta !== 0 && s.key === 'aircraft' && ( {delta > 0 ? '+' : ''}{delta} )}
); })}
); } function PrintArea({ fleet, totalsByTf, showPreview }) { const cm = useMemo(classMap, []); const mm = useMemo(modMap, []); const literalNames = useLiteralNames(); const scifi = useScifi(); const terms = T(scifi); const COMBAT_STATS = [ { key: 'aircraft', label: scifi ? 'Capacity' : 'Aircraft', icon: scifi ? Icon.Aerospace : Icon.Aircraft }, { key: 'guns', label: 'Guns', icon: Icon.Guns }, { key: 'strike', label: 'Strike', icon: Icon.Strike }, { key: 'cap', label: 'CAP', icon: Icon.CAP }, { key: 'aa', label: 'AA', icon: Icon.AA }, ]; const mods = (fleet.mods || []).map(id => mm[id]).filter(Boolean); // Screen-only: shrink the fixed-width sheet to fit its pane so it never // spills past the preview area. Reset to 1 for print via CSS @media print. const previewRef = React.useRef(null); const [previewZoom, setPreviewZoom] = React.useState(1); React.useLayoutEffect(() => { if (!showPreview) { setPreviewZoom(1); return; } const el = previewRef.current; const parent = el && el.parentElement; if (!parent) return; const SHEET = 816; const measure = () => { const avail = parent.clientWidth - 24; setPreviewZoom(Math.min(1, avail / SHEET)); }; measure(); const ro = new ResizeObserver(measure); ro.observe(parent); window.addEventListener('resize', measure); return () => { ro.disconnect(); window.removeEventListener('resize', measure); }; }, [showPreview]); return (
{fleet.faction && }
{fmtName(fleet.name)}
{fleet.faction && fleet.era && {fleet.faction}, {fleet.era}. } {fleet.taskForces.length} task force{fleet.taskForces.length === 1 ? '' : 's'}, {fleet.taskForces.reduce((s, t) => s + (totalsByTf[t.id]?.cost || 0), 0)} pts total.
{fleet.taskForces.map((tf, idx) => { const totals = totalsByTf[tf.id] || {}; const sorted = sortUnits(tf.units); return (
Task Force {String(idx + 1).padStart(2, '0')} {tf.callSign && {literalNames && MEANINGS[tf.callSign] ? MEANINGS[tf.callSign] : tf.callSign}}
{tf.commander && Cmdr: {tf.commander}} {totals.cost || 0} pts
{COMBAT_STATS.map(s => { const IconC = s.icon; return (
{IconC && }
{s.label}
{totals[s.key] || 0}
); })}
{sorted.map(u => { const c = cm[u.classId]; if (!c) return null; const costStr = `${c.cost * u.qty}`; return ( ); })}
Qty Unit Role Special Cost Lost
{u.qty} {c.sprite} {scifi ? scifiUnitName(c.id, c.name, terms) : c.name}{u.pennant ? {literalNames && MEANINGS[u.pennant] ? MEANINGS[u.pennant] : u.pennant} : null} {c.role} {effectiveSpecial(c, fleet)} {costStr}
); })} {mods.length > 0 && (
Fleet Modifications
{mods.map(m => (
{m.name}{m.disadv ? (Disadvantageous) : ''}: {renderModText(m.text)}
))}
)}
); } // ─── Fleet Sidebar ──────────────────────────────────── function FleetSidebar({ fleet, totalsByTf, grandTotal, totalHulls, fleetBudget, fv, onBudgetChange, onScaleChange, onFreePlayChange, literalNames, setLiteralNames, historicalOnly, setHistoricalOnly }) { const scale = fleet.scale || 3; const pct = fleetBudget ? Math.min(100, Math.round((grandTotal / fleetBudget) * 100)) : 0; const over = fleetBudget && grandTotal > fleetBudget; const commandChips = scale + 2 + ((fleet.mods || []).includes("enemy-codes") ? 1 : 0); return ( ); } // ─── Improved Armour: class picker modal ─────────────── // ─── Glossary: in-app rules reference, tap to open ───── function GlossaryModal({ onClose }) { const scifi = useScifi(); const stats = STAT_META(scifi); const rules = window.SPECIAL_RULES || {}; useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); return (
e.stopPropagation()}>
Glossary & rules reference
Task force stats
{stats.map(s => (
{s.label}
{s.tip}
))}
Special rules
{Object.keys(rules).map(k => (
{rules[k].name}
{rules[k].text}
))}
); } function ArmourClassModal({ title, current, onPick, onClose }) { const ref = useRef(null); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); const classes = (window.SHIP_CLASSES || []).filter(c => c.category !== 'squadron'); return (
e.stopPropagation()}>
{title} — choose a class
{classes.map(c => ( ))}
); } // ─── Fleet Modifications section (top of main content) ─ function FleetMods({ fleet, onApplySet, onToggleMod, faction, era, onFactionChange, armourSel, onClassSelect }) { const [open, setOpen] = useState(false); const [classModalFor, setClassModalFor] = useState(null); const cmRef = useMemo(classMap, []); const mm = useMemo(modMap, []); const activeIds = fleet.mods || []; const activeMods = activeIds.map(id => mm[id]).filter(Boolean); const allMods = window.MODIFICATIONS || []; const advMods = allMods.filter(m => !m.disadv).sort((a, b) => a.name.localeCompare(b.name)); const disadvMods = allMods.filter(m => m.disadv); const sets = window.HISTORICAL_MOD_SETS || []; const sel = armourSel || {}; return (
Fleet Modifications
{activeMods.map(m => ( {m.needsClass && sel[m.id] && cmRef[sel[m.id]] ? `${m.name}: ${cmRef[sel[m.id]].name}` : m.name} {m.needsClass && ( )} ))}
{open && (
Fleet faction
Advantageous
{advMods.map(m => { const active = activeIds.includes(m.id); const handleClick = () => { if (m.needsClass && !active) { onToggleMod(m.id); setClassModalFor(m.id); } else { onToggleMod(m.id); } }; return ( ); })}
Disadvantageous
{disadvMods.map(m => { const active = activeIds.includes(m.id); return ( ); })}
)} {classModalFor && ( onClassSelect(classModalFor, classId)} onClose={() => setClassModalFor(null)} /> )}
); } // ─── Name pools & meanings ─────────────────────────── const MEANINGS = { 'Kido Butai':'Mobile Strike Force','Rengo Kantai':'Combined Fleet', 'Dai-ichi Kido Kantai':'First Mobile Fleet','Dai-ni Kantai':'Second Fleet', 'Dai-roku Kantai':'Sixth Fleet (Submarine Force)','Koku Kantai':'Air Fleet', 'Sentai':'Battle Squadron','Hikotai':'Air Group', 'Suirai Sentai':'Torpedo Squadron','Zenei Butai':'Vanguard Force', 'Shuryoku Butai':'Main Body', 'Ozawa':'Small Marsh','Nagumo':'South Cloud','Mikawa':'Three Rivers', 'Tanaka':'Middle of the Field','Goto':'Behind the Wisteria', 'Kurita':'Chestnut Field','Nishimura':'West Village','Shima':'Island', 'Ugaki':'Eave Wall','Hashimoto':'Base of the Bridge', 'Akagi':'Red Castle','Kaga':'Old Province','Soryu':'Blue Dragon', 'Hiryu':'Flying Dragon','Shokaku':'Soaring Crane','Zuikaku':'Auspicious Crane', 'Taiho':'Great Phoenix','Shinano':'Ancient Province Name', 'Unryu':'Cloud Dragon','Amagi':'Heavenly Castle','Kasagi':'Mount Kasagi', 'Aso':'Mount Aso','Ikoma':'Living Horse Mountain', 'Zuiho':'Lucky Phoenix','Shoho':'Felicitous Phoenix','Ryujo':'Prancing Dragon', 'Chitose':'A Thousand Years','Chiyoda':'Thousand-Generation Field', 'Junyo':'Falcon Hawk','Hiyo':'Flying Hawk','Ibuki':'Mount Ibuki', 'Yamato':'Great Harmony / Ancient Japan',"Musashi":"Warrior's Domain", 'Nagato':'Long Gate','Mutsu':'Deep Interior','Yamashiro':'Mountain Castle', 'Fuso':'Land of the Mulberry','Kongo':'Diamond / Vajra', 'Haruna':'Mount Haruna','Hiei':'Mount Hiei','Kirishima':'Misty Island', 'Ise':'Old Province Name','Hyuga':'Ancient Eastern Province', 'Atago':'Mount Atago','Maya':'Mount Maya','Takao':'High and Brave', 'Chokai':'Bird Sea','Myoko':'Wonderfully High','Haguro':'Black Feathers', 'Kumano':'Bear Field','Suzuya':'Bell Valley', 'Tone':'Tone River','Chikuma':'Chikuma River', 'Jintsu':'Divine Passage','Sendai':'Within the River','Naka':'Naka River', 'Nagara':'Long and Good','Yura':'Yura River','Agano':'Agano River', 'Noshiro':'Talented Generation','Oyodo':'Great Reed Bed', 'Fubuki':'Blizzard','Ayanami':'Silken Waves','Kagero':'Heat Haze', 'Nowaki':'Field Wind','Makigumo':'Rolling Clouds','Yukikaze':'Snow Wind', 'Shigure':'Autumn Rain','Hamakaze':'Shore Breeze', 'Isokaze':'Rocky Shore Wind','Urakaze':'Bay Wind', 'Mizuho':'Fresh Rice Ears','Kamikawa Maru':'River of the Gods', 'Sanuki Maru':'Sanuki Province', 'Kamoi':'Divine Authority','Hayasui':'Fast Current', 'Notoro':'Cape Notoro','Tsurugisaki':'Sword Cape','Toho Maru':'Eastern Nation', 'Mutsuki-class':'Harmony Month','Fubuki-class':'Blizzard', 'Hatsuharu-class':'Early Spring','Shiratsuyu-class':'White Dew', 'Asashio-class':'Morning Tide','Kagero-class':'Heat Haze', 'Yugumo-class':'Evening Clouds','Akizuki-class':'Autumn Moon','Matsu-class':'Pine Tree', 'Takao-class':'High and Brave','Myoko-class':'Wonderfully High', 'Tone-class':'Tone River','Mogami-class':'Mogami River', 'Sendai-class':'Within the River','Nagara-class':'Long and Good', 'Agano-class':'Agano River','Chitose-class':'A Thousand Years', 'Kamikawa Maru-class':'River of the Gods','Hayasui-class':'Fast Current', 'Sen Toku-class':'Special Submarine', 'Akagi Hikotai':'Red Castle Air Group','Kaga Hikotai':'Old Province Air Group', 'Soryu Hikotai':'Blue Dragon Air Group','Hiryu Hikotai':'Flying Dragon Air Group', 'Shokaku Hikotai':'Soaring Crane Air Group','Zuikaku Hikotai':'Auspicious Crane Air Group', 'Tainan Kokutai':'Tainan Air Corps','Kanbaku 1':'Dive Bomber Unit 1', 'Kanbaku 2':'Dive Bomber Unit 2','Kanko 1':'Torpedo Bomber Unit 1', 'Kanko 3':'Torpedo Bomber Unit 3', 'Taiyo': 'Great Hawk', 'Unyo': 'Cloud Hawk', 'Chuyo': 'Hawk of the Open Sea', 'Kaiyo': 'Sea Hawk', 'Shinyo': 'Divine Hawk', 'Hosho': 'Soaring Phoenix', 'Ryuho': 'Dragon Phoenix', 'Furutaka': 'Old Hawk (Mt. Furutaka)', 'Kako': 'Kako River', 'Aoba': 'Green Leaves', 'Kinugasa': 'Silk Parasol (Mt. Kinugasa)', 'Kuma': 'Kuma River', 'Tama': 'Tama River', 'Kitakami': 'Kitakami River', 'Oi': 'Oi River', 'Kiso': 'Kiso River', 'Yubari': 'Yubari River', 'Katori': 'Fragrance Gathering (Katori Shrine)', 'Kashima': 'Deer Island (Kashima Shrine)', 'Isuzu': 'Fifty Bells', 'Yahagi': 'Arrow-Fletcher River', 'Sakawa': 'Sakawa River', 'Nisshin': 'Daily Advance', 'Akitsushima': 'Dragonfly Islands (ancient name for Japan)', 'Minekaze-class': 'Peak Wind', 'Kamikaze-class': 'Divine Wind', 'Shimakaze-class': 'Island Wind', 'Reisen': 'Zero Fighter (Type 0)', 'Shiden': 'Violet Lightning', 'Shiden-Kai': 'Violet Lightning, Improved', 'Raiden': 'Thunderbolt', 'Hayabusa': 'Peregrine Falcon', 'Reppu': 'Strong Gale', 'Kyofu': 'Mighty Wind', 'Hayate': 'Gale', 'Zuiun': 'Auspicious Cloud', 'Ohka': 'Cherry Blossom', 'Suisei': 'Comet', 'Tenzan': 'Heavenly Mountain', 'Ginga': 'Galaxy', 'Ryusei': 'Shooting Star', }; // PENNANT_POOLS removed — names now come from HISTORICAL_NAMES via namePool(). function randomPennant(classId, faction, era) { let pool = namePool(faction, era, classId); if (!pool.length && !faction) { // No faction chosen yet — fall back to a sensible historical default. const H = window.HISTORICAL_NAMES || {}; pool = [ ...(((H.IJN || {})['Early War'] || {})[classId] || []), ...(((H.USN || {})['Early War'] || {})[classId] || []), ]; } return pickFromPool(pool, null); } const TF_CALLSIGNS = { IJN: ['Kido Butai','Rengo Kantai','Dai-ichi Kido Kantai','Dai-ni Kantai','Dai-roku Kantai','Koku Kantai','Sentai','Hikotai','Suirai Sentai','Zenei Butai','Shuryoku Butai','Ozawa','Nagumo','Mikawa','Tanaka','Goto','Kurita','Nishimura','Shima','Ugaki','Hashimoto','CarDiv 1','CarDiv 2','DesRon 2','DesRon 4','CrusDiv 7','BatDiv 1'], USN: ['Halsey','Spruance','Kinkaid','Fletcher','McMorris','Merrill','Burke','Oldendorf','Mitscher','Bogan','Lee','Scott','Callaghan','TF 38','TF 58','TF 77','TF 34','TF 64','TG 77.4','TG 38.1','TG 38.3','CrusDiv 6','DesRon 21','DesRon 45','BatDiv 6','Striking','Screen','Covering','Support','Hunter'], PR: ['Starheart','Hammer of Purpose','Enlightenment','Apocalypse','Deliverance','Purity of Power','Deus Ex Machina','Forgefire','Godslayer','Triumvir','Code Enforcer','Expeditious Judgement','Great Axiom','Renaissance','Wrath of Zeus','Thunderbolt','Imperator','Supreme','Actium','Long Reign','Might of Pearlescent'], KK: ['TF01','TF02','TF03','TF04','TF05','TF06','TF07','TF08','TF09','TF10','TF11','TF12','TF13','TF14','TF15','TF16','TF17','TF18','TF19','TF20'], neutral: ['Striking','Covering','Screen','Support','Sweeping','Bombardment','Hunter','Carrier','Surface','Coral Sea','Java Sea','Leyte','Midway','Alpha','Bravo','Delta','Foxtrot','Kilo','Zulu'], }; function randomCallSign(faction) { let pool; if (!faction) { pool = [...TF_CALLSIGNS.IJN, ...TF_CALLSIGNS.USN, ...TF_CALLSIGNS.neutral]; } else { pool = TF_CALLSIGNS[faction] || TF_CALLSIGNS.neutral; } return pool[Math.floor(Math.random() * pool.length)]; } // ─── Sort helpers ────────────────────────────────────── const CAT_ORDER = { capital: 0, surface: 1, screen: 2, squadron: 3 }; function sortUnits(units) { const cm = classMap(); return [...units].sort((a, b) => { const ca = cm[a.classId], cb = cm[b.classId]; return (CAT_ORDER[ca?.category] ?? 9) - (CAT_ORDER[cb?.category] ?? 9); }); } // ─── Fleet validation ────────────────────────────────── const HIGH_VALUE_CLASSES = ['fleet-carrier', 'light-carrier', 'battleship']; const HV_LABEL = { 'fleet-carrier': 'CV', 'light-carrier': 'CVL', 'battleship': 'BB' }; const HV_NAME = { 'fleet-carrier': 'Fleet Carriers', 'light-carrier': 'Light Carriers', 'battleship': 'Battleships' }; function fleetViolations(fleet, cm) { if (fleet.freePlay) return {}; const scale = fleet.scale || 3; const v = {}; if (fleet.taskForces.length > scale) v.tooManyTFs = fleet.taskForces.length; const escortCarriers = (fleet.mods || []).includes('escort-carriers'); for (const hvId of HIGH_VALUE_CLASSES) { if (escortCarriers && hvId === 'light-carrier') continue; let count = 0; for (const tf of fleet.taskForces) for (const u of tf.units) if (u.classId === hvId) count += u.qty; if (count > scale) v[hvId] = { count, limit: scale }; } let subCost = 0, totalCost = 0; for (const tf of fleet.taskForces) for (const u of tf.units) { const c = cm[u.classId]; if (!c) continue; const cost = c.cost * u.qty; totalCost += cost; if (u.classId === 'submarine') subCost += cost; } v.subCost = subCost; v.totalCost = totalCost; v.subLimit = totalCost > 0 ? Math.floor(totalCost / 3) : 0; if (subCost > 0 && subCost > v.subLimit) v.tooManySubs = true; return v; } function tfViolations(tf, freePlay, mods) { if (freePlay) return {}; const v = {}; const noCarrierLimit = (mods || []).includes('mobile-force-doctrine'); const cvCount = tf.units.filter(u => u.classId === 'fleet-carrier').reduce((s, u) => s + u.qty, 0); if (!noCarrierLimit && cvCount > 2) v.tooManyCV = cvCount; return v; } function countHV(fleet, hvId) { return fleet.taskForces.reduce((total, tf) => total + tf.units.filter(u => u.classId === hvId).reduce((s, u) => s + u.qty, 0), 0); } // ─── Blank TF factory ────────────────────────────────── function makeBlankTF(n) { return { id: 'tf-' + uid(), callSign: `TF${String(n).padStart(2, '0')}`, commander: '', units: [] }; } // ─── Auto-fill pennants from historical name pool ─────── function autoFillForFleet(tf, faction, era) { if (!faction || !era) return tf; const taken = new Set(); for (const u of tf.units) if (u.pennant) taken.add(u.pennant); const units = tf.units.map(u => { if (u.pennant) return u; const nm = suggestPennantFor(u.classId, faction, era, taken); if (nm) taken.add(nm); return { ...u, pennant: nm || u.pennant }; }); return { ...tf, units }; } // ─── Starter fleet seed ──────────────────────────────── function seedFromExample() { return { name: 'Ⓢ3 Starter Fleet', mods: [], setId: null, faction: null, era: null, budget: 300, scale: 3, freePlay: false, taskForces: [ { id: 'tf-' + uid(), callSign: 'TF01', commander: '', units: [ { id: 'u-' + uid(), classId: 'fleet-carrier', qty: 2, pennant: '' }, { id: 'u-' + uid(), classId: 'battleship', qty: 1, pennant: '' }, { id: 'u-' + uid(), classId: 'heavy-cruiser', qty: 3, pennant: '' }, { id: 'u-' + uid(), classId: 'destroyer', qty: 9, pennant: '' }, { id: 'u-' + uid(), classId: 'fighter-sqn', qty: 12, pennant: '' }, { id: 'u-' + uid(), classId: 'bomber-sqn', qty: 16, pennant: '' }, ]}, { id: 'tf-' + uid(), callSign: 'TF02', commander: '', units: [ { id: 'u-' + uid(), classId: 'fleet-carrier', qty: 1, pennant: '' }, { id: 'u-' + uid(), classId: 'light-carrier', qty: 1, pennant: '' }, { id: 'u-' + uid(), classId: 'heavy-cruiser', qty: 3, pennant: '' }, { id: 'u-' + uid(), classId: 'destroyer', qty: 5, pennant: '' }, { id: 'u-' + uid(), classId: 'fighter-sqn', qty: 10, pennant: '' }, { id: 'u-' + uid(), classId: 'bomber-sqn', qty: 10, pennant: '' }, ]}, { id: 'tf-' + uid(), callSign: 'TF03', commander: '', units: [ { id: 'u-' + uid(), classId: 'battleship', qty: 1, pennant: '' }, { id: 'u-' + uid(), classId: 'heavy-cruiser', qty: 2, pennant: '' }, { id: 'u-' + uid(), classId: 'destroyer', qty: 5, pennant: '' }, ]}, ], }; } // ─── Random TF generator ────────────────────────────── function generateRandomTF(budget, fleet) { const all = window.SHIP_CLASSES; const cm = classMap(); const rand = arr => arr[Math.floor(Math.random() * arr.length)]; const nonSquadron = all.filter(c => c.category !== 'squadron'); const capitals = nonSquadron.filter(c => c.category === 'capital'); const fighter = cm['fighter-sqn']; const bomber = cm['bomber-sqn']; const MAX_FLEET_CV = 2; let remaining = budget; const units = []; const qtyOf = id => { const u = units.find(x => x.classId === id); return u ? u.qty : 0; }; const addOne = (cls) => { const ex = units.find(u => u.classId === cls.id); if (ex) ex.qty++; else units.push({ id: 'u-' + uid(), classId: cls.id, qty: 1, pennant: '' }); remaining -= cls.cost; }; const capacity = () => units.reduce((s, u) => { const c = cm[u.classId]; return s + (c ? (c.stats?.aircraft || 0) * u.qty : 0); }, 0); const squadrons = () => qtyOf('fighter-sqn') + qtyOf('bomber-sqn'); // Anchor the force around a capital ship most of the time const affordableCap = capitals.filter(c => c.cost <= remaining); if (affordableCap.length && Math.random() < 0.85) addOne(rand(affordableCap)); // Fill until the budget is spent. Air squadrons (cost 1 each) are charged // against the same budget and added only up to the current aircraft // capacity, so the final total respects the points value the user set. for (let attempts = 0; attempts < 800 && remaining > 0; attempts++) { const pool = []; for (const c of nonSquadron) { if (c.cost > remaining) continue; if (c.id === 'fleet-carrier' && qtyOf('fleet-carrier') >= MAX_FLEET_CV) continue; pool.push(c); } if (squadrons() < capacity()) { if (fighter && fighter.cost <= remaining) pool.push(fighter); if (bomber && bomber.cost <= remaining) pool.push(bomber); } if (!pool.length) break; addOne(rand(pool)); } const faction = fleet?.faction || null; const era = fleet?.era || null; // Assign random names to every unit, avoiding duplicates within the TF const taken = new Set(); for (const u of units) { const nm = pickFromPool(namePool(faction, era, u.classId), taken); if (nm) { u.pennant = nm; taken.add(nm); } } return { id: 'tf-' + uid(), callSign: randomCallSign(faction), commander: '', units }; } function RandomTFPanel({ fleet, onAdd, onClose }) { const [budget, setBudget] = React.useState(150); const presets = [100, 150, 200, 300]; const go = () => { const b = Math.max(1, Math.min(999, parseInt(budget) || 1)); onAdd(generateRandomTF(b, fleet)); onClose(); }; return (
Random task force
Points budget
{presets.map(p => ( ))}
{ const v = e.target.value; setBudget(v === '' ? '' : Math.min(999, Math.max(0, parseInt(v) || 0))); }} onKeyDown={e => { if (e.key === 'Enter') go(); }} className="random-custom-input" aria-label="Custom points budget" /> pts (1–999)
); } // Plain circled-S glyph in the inherited UI font. Simple and stable. function CircleS() { return {'\u24C8'}; } // Render a name, swapping the Ⓢ marker for the drawn CircleS function fmtName(name) { if (!name || name.indexOf('\u24C8') === -1) return name; const parts = name.split('\u24C8'); return parts.map((p, i) => i === 0 ? p : {p}); } // ─── App ─────────────────────────────────────────────── function App() { const [fleet, setFleet] = useState(() => { try { return JSON.parse(localStorage.getItem('pc2-fleet')) || seedFromExample(); } catch { return seedFromExample(); } }); const [showPreview, setShowPreview] = useState(false); const [scifi, setScifi] = useState(() => localStorage.getItem('pc2-scifi') === '1'); const [literalNames, setLiteralNames] = useState(() => localStorage.getItem('pc2-literal') === '1'); const [historicalOnly, setHistoricalOnly] = useState(() => localStorage.getItem('pc2-histonly') === '1'); setHistFlag(historicalOnly); const [showRandom, setShowRandom] = useState(false); const [showGlossary, setShowGlossary] = useState(false); useEffect(() => { if (fleet) localStorage.setItem('pc2-fleet', JSON.stringify(fleet)); }, [fleet]); useEffect(() => { localStorage.setItem('pc2-scifi', scifi ? '1' : '0'); }, [scifi]); useEffect(() => { localStorage.setItem('pc-literal', literalNames ? '1' : '0'); }, [literalNames]); useEffect(() => { localStorage.setItem('pc2-histonly', historicalOnly ? '1' : '0'); setHistFlag(historicalOnly); }, [historicalOnly]); const cm = useMemo(classMap, []); const totalsByTf = useMemo(() => { if (!fleet) return {}; const out = {}; const mods = (fleet.mods || []).map(id => (modMap())[id]).filter(Boolean); for (const tf of fleet.taskForces) { const base = computeTotals(tf.units, cm); out[tf.id] = applyModEffects(mods, base, tf.units, cm); } return out; }, [fleet, cm]); const grandTotal = useMemo(() => { if (!fleet) return 0; return fleet.taskForces.reduce((s, tf) => s + (totalsByTf[tf.id]?.cost || 0), 0); }, [fleet, totalsByTf]); const fv = useMemo(() => fleetViolations(fleet, cm), [fleet, cm]); const scale = fleet.scale || 3; const fleetBudget = fleet.freePlay ? (fleet.budget || 0) : scale * 100; const totalHulls = fleet.taskForces.reduce((s, t) => s + t.units.reduce((x, u) => x + u.qty, 0), 0); const updateTF = (id, next) => setFleet(f => ({ ...f, taskForces: f.taskForces.map(t => t.id === id ? next : t) })); const deleteTF = (id) => setFleet(f => ({ ...f, taskForces: f.taskForces.filter(t => t.id !== id) })); const addTF = () => setFleet(f => ({ ...f, taskForces: [...f.taskForces, makeBlankTF(f.taskForces.length + 1)] })); const addRandomTF = (tf) => setFleet(f => ({ ...f, taskForces: [...f.taskForces, tf] })); const loadExample = () => { if (!confirm('Replace current fleet with the Ⓢ3 Starter Fleet?')) return; setFleet(seedFromExample()); setShowPreview(false); }; const newBlank = () => { if (!confirm('Start a new blank fleet?')) return; setFleet({ name: 'My Fleet', taskForces: [makeBlankTF(1)], mods: [], setId: null, faction: null, era: null, budget: 0, scale: 3, freePlay: false }); }; const onToggleMod = (id) => { setFleet(f => { const cur = f.mods || []; const removing = cur.includes(id); const next = removing ? cur.filter(x => x !== id) : [...cur, id]; const clearFaction = next.length === 0; let armourSel = f.armourSel || {}; if (removing && armourSel[id]) { armourSel = { ...armourSel }; delete armourSel[id]; } return { ...f, mods: next, setId: null, armourSel, ...(clearFaction ? { faction: null, era: null } : {}) }; }); }; const onClassSelect = (modId, classId) => setFleet(f => ({ ...f, armourSel: { ...(f.armourSel || {}), [modId]: classId } })); const onApplySet = (set) => { setFleet(f => { const taskForces = f.taskForces.map(tf => autoFillForFleet(tf, set.faction, set.era)); return { ...f, mods: [...set.mods], setId: set.id, faction: set.faction, era: set.era, taskForces }; }); }; const onBudgetChange = (n) => setFleet(f => ({ ...f, budget: n })); const onScaleChange = (n) => setFleet(f => ({ ...f, scale: Math.max(1, Math.min(10, n)) })); const onFreePlayChange = (v) => setFleet(f => ({ ...f, freePlay: v })); const toggleScifi = () => { setScifi(s => !s); setFleet(fl => ({ ...fl, faction: null, era: null, mods: [], setId: null })); }; const faction = fleet.faction; const era = fleet.era; const exportFleetText = () => { const cm2 = cm; const lines = []; lines.push(fleet.name || 'My Fleet'); if (fleet.faction) lines.push(`${fleet.faction}${fleet.era ? ' · ' + fleet.era : ''}`); if (fleet.mods && fleet.mods.length > 0) { const mm = modMap(); lines.push('Mods: ' + fleet.mods.map(id => mm[id]?.name || id).join(', ')); } lines.push(''); fleet.taskForces.forEach((tf, i) => { lines.push(`Task Force ${i + 1}${tf.callSign ? ' — ' + tf.callSign : ''}`); tf.units.forEach(u => { const cls = cm2[u.classId]; if (!cls) return; const name = u.pennant ? `${u.pennant} (${cls.name})` : cls.name; const qty = u.qty > 1 ? `×${u.qty} ` : ' '; lines.push(` ${qty}${name} ${cls.cost * u.qty} pts`); }); const tot = totalsByTf[tf.id]?.cost || 0; lines.push(` — ${tot} pts`); lines.push(''); }); lines.push(`Total: ${grandTotal} pts`); const text = lines.join('\n'); navigator.clipboard.writeText(text).then(() => { alert('Fleet copied to clipboard!'); }).catch(() => { // fallback const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); alert('Fleet copied to clipboard!'); }); }; return (
{scifi ? 'Space Command' : 'Pacific Command'}
Sci-fi setShowPreview(p => !p)} icon={Icon.Print} dataTip="Print preview">Preview setLiteralNames(v => !v)} dataTip="Show English translations of Japanese ship and task force names">Literal setHistoricalOnly(v => !v)} dataTip="On: only ships that actually served. Off: also include never-built and unfinished hulls.">Historical
Scale {scale}
Starter fleet New fleet
setShowRandom(r => !r)} icon={Icon.Dice}>Random TF {showRandom && setShowRandom(false)} />}
setShowGlossary(true)} icon={Icon.Help} dataTip="Glossary and rules reference">Glossary
{!showPreview && (

setFleet(f => ({ ...f, name: e.target.value }))} placeholder="Fleet name" />

{fleet.taskForces.length} task force{fleet.taskForces.length !== 1 ? 's' : ''} {' · '} {totalHulls} hulls in service
{ if (!f) { setFleet(fl => ({ ...fl, faction: null, era: null, mods: [], setId: null })); } else { const matchSet = (window.HISTORICAL_MOD_SETS || []).find(s => s.faction === f && s.era === e); setFleet(fl => { const taskForces = fl.taskForces.map(tf => autoFillForFleet(tf, f, e)); return matchSet ? { ...fl, faction: f, era: e, mods: [...matchSet.mods], setId: matchSet.id, taskForces } : { ...fl, faction: f, era: e, taskForces }; }); } }} /> {fleet.taskForces.map((tf, i) => ( updateTF(tf.id, next)} onDelete={() => deleteTF(tf.id)} freePlay={fleet.freePlay} /> ))}
= scale} dataTip={!fleet.freePlay && fleet.taskForces.length >= scale ? `Ⓢ${scale} allows ${scale} task force${scale === 1 ? '' : 's'}` : null} >Add another task force
)} {showGlossary && setShowGlossary(false)} />}
); } ReactDOM.createRoot(document.getElementById('root')).render();