// ViG Command Center — Unified March Center (builder + rally presets merged) const { useState: useStateMC, useMemo: useMemoMC, useEffect: useEffectMC } = React; function MarchCenterPage() { const V = window.VIG; const { isOwned } = useOwn(); const PRESETS = window.MARCH_PRESETS, TIER_ORDER = window.MARCH_TIER_ORDER, fmt = window.MARCH_FMT; const [type, setType] = useStateMC(() => LS.get('vig2_mc_type', 'Ranged')); const [march, setMarch] = useStateMC(() => LS.get('vig2_march_size_v2', 5000000)); const [tier, setTier] = useStateMC(() => LS.get('vig2_march_tier', 't16')); const [kIdx, setKIdx] = useStateMC(() => LS.get('vig2_kingdom', 2)); const [layerSize, setLayerSize] = useStateMC(() => LS.get('vig2_mc_layersize', 1000)); const [layerCount, setLayerCount] = useStateMC(() => LS.get('vig2_mc_layercount', 8)); const [primaryName, setPrimaryName] = useStateMC(() => LS.get('vig2_mc_primary', null)); const [assistName, setAssistName] = useStateMC(() => LS.get('vig2_mc_assist', null)); const [dragonName, setDragonName] = useStateMC(() => LS.get('vig2_mc_dragon', null)); const [reinfFill, setReinfFill] = useStateMC(() => LS.get('vig2_mc_reinf_fill', ['Archers', 'Cavalry'])); const [prevSnap, setPrevSnap] = useStateMC(() => LS.get('vig2_mc_prev', null)); useEffectMC(() => { LS.set('vig2_mc_type', type); }, [type]); useEffectMC(() => { LS.set('vig2_march_size_v2', march); }, [march]); useEffectMC(() => { LS.set('vig2_march_tier', tier); }, [tier]); useEffectMC(() => { LS.set('vig2_kingdom', kIdx); }, [kIdx]); useEffectMC(() => { LS.set('vig2_mc_layersize', layerSize); }, [layerSize]); useEffectMC(() => { LS.set('vig2_mc_layercount', layerCount); }, [layerCount]); useEffectMC(() => { LS.set('vig2_mc_primary', primaryName); }, [primaryName]); useEffectMC(() => { LS.set('vig2_mc_assist', assistName); }, [assistName]); useEffectMC(() => { LS.set('vig2_mc_dragon', dragonName); }, [dragonName]); useEffectMC(() => { LS.set('vig2_mc_reinf_fill', reinfFill); }, [reinfFill]); /* ---- reset / restore previous ---- */ const MC_DEFAULTS = { type: 'Ranged', march: 5000000, tier: 't16', kIdx: 2, layerSize: 1000, layerCount: 8, primaryName: null, assistName: null, dragonName: null, reinfFill: ['Archers', 'Cavalry'] }; const mcSnapshot = () => ({ type, march, tier, kIdx, layerSize, layerCount, primaryName, assistName, dragonName, reinfFill }); const mcApply = s => { setType(s.type); setMarch(s.march); setTier(s.tier); setKIdx(s.kIdx); setLayerSize(s.layerSize); setLayerCount(s.layerCount); setPrimaryName(s.primaryName); setAssistName(s.assistName); setDragonName(s.dragonName); setReinfFill(s.reinfFill || ['Archers', 'Cavalry']); }; const mcReset = () => { const s = mcSnapshot(); setPrevSnap(s); LS.set('vig2_mc_prev', s); mcApply(MC_DEFAULTS); }; const mcRestore = () => { if (!prevSnap) return; const cur = mcSnapshot(); setPrevSnap(cur); LS.set('vig2_mc_prev', cur); mcApply(prevSnap); }; const isTrap = type === 'Trap'; const REINF_MAP = { Archers: 'Ranged', Ground: 'Ground', Cavalry: 'Mounted', 'Large Siege': 'Siege' }; const battleType = isTrap ? 'Ground' : type === 'Reinforce' ? (REINF_MAP[reinfFill[0]] || 'Ground') : type === 'SmallSiege' ? 'Siege' : type; const typePool = useMemoMC(() => V.generals.filter(g => g.type === battleType), [battleType]); const primary = typePool.find(g => g.name === primaryName) || null; const assist = typePool.find(g => g.name === assistName) || null; const dragon = V.dragons.find(d => d.name === dragonName) || null; // clear picks that don't match the new type useEffectMC(() => { if (primaryName && !typePool.some(g => g.name === primaryName)) setPrimaryName(null); if (assistName && !typePool.some(g => g.name === assistName)) setAssistName(null); }, [battleType]); const stats = useMemoMC(() => CALC.marchStats({ primary, assist, dragon, type: battleType }), [primary, assist, dragon, battleType]); const compat = primary && assist ? CALC.compatScore(primary, assist) : null; const suggestedPrimary = typePool.find(isOwned) || typePool[0]; const suggestedDragon = CALC.bestDragons(battleType, 1)[0]; const MC_EXTRA_PRESETS = { Reinforce: { guideName: 'Reinforce March', gear: ['Defense / HP wall set on the keep\u2019s wall general', 'Han Armor & Leg Armor refines'], note: 'Reinforce with your strongest meat-shield tiers \u2014 coordinate composition with the keep owner\u2019s wall setup.', dist: { t11: { T11: 100 }, t12: { T12: 60, T11: 40 }, t13: { T13: 50, T12: 30, T11: 20 }, noT15: { T14: 50, T13: 30, T12: 20 }, t15: { T15: 40, T14: 30, T13: 30 }, t16: { T16: 40, T15: 30, T14: 30 }, t17: { T17: 30, T16: 30, T15: 20, T14: 20 }, }, }, SmallSiege: { guideName: 'Small Siege Rally', gear: ['Full Heinan Set'], note: '95% T11 siege machines — the remaining 5% stays free for layers.', dist: { t11: { T11: 95 }, t12: { T11: 95 }, t13: { T11: 95 }, noT15: { T11: 95 }, t15: { T11: 95 }, t16: { T11: 95 }, t17: { T11: 95 }, }, }, }; const preset = PRESETS[type] || MC_EXTRA_PRESETS[type]; // tier options: Siege rallies only run T14/T15; Small Siege is fixed at 95% T11 const TIER_LIMIT = { Siege: ['noT15', 't15'] }; const tierOpts = TIER_LIMIT[type] ? window.MARCH_TIER_OPTS.filter(o => TIER_LIMIT[type].includes(o.value)) : window.MARCH_TIER_OPTS; const tierEff = tierOpts.some(o => o.value === tier) ? tier : tierOpts[tierOpts.length - 1].value; const showTier = !isTrap && type !== 'SmallSiege'; const dist = preset ? preset.dist[tierEff] : null; const tiers = dist ? TIER_ORDER.filter(t => dist[t] != null) : []; const color = isTrap ? '#71717a' : (TYPE_COLOR[type] || (type === 'Reinforce' ? '#0891b2' : '#9333ea')); const trap = useMemoMC(() => ['T16', 'T15', 'T14', 'T13', 'T12', 'T11'].map(t => ({ t, qty: 1000000 })), []); const KINGDOM_LAYERS = window.MARCH_KINGDOM_LAYERS; const reserved = Math.min(march, (layerSize || 0) * (layerCount || 0)); const mainTroops = Math.max(0, march - reserved); const TYPE_IMG = { Ground: 'vig/assets/icons/infantry.png', Mounted: 'vig/assets/icons/cavalry.png', Ranged: 'vig/assets/icons/ranged.png', Siege: 'vig/assets/icons/siege.png', Trap: 'vig/assets/icons/trap.png', Reinforce: 'vig/assets/icons/reinforce-icon.jpg', SmallSiege: 'vig/assets/icons/small-siege-icon.jpg' }; const TYPE_LABEL = { SmallSiege: 'Small Siege' }; const statCards = [ { label: 'Attack', value: stats.atk, suffix: '%', color: '#dc2626' }, { label: 'Defense', value: stats.def, suffix: '%', color: '#2563eb' }, { label: 'HP / Leadership', value: stats.hp, suffix: '%', color: '#16a34a' }, { label: 'March speed', value: stats.ms, suffix: '%', color: '#FF6B00' }, ]; const maxStat = Math.max(...statCards.map(s => s.value), 1); return (
{/* ===== 1 · parameters ===== */}
Parameters
Rally type, march size & layers — everything below updates live
Restore previous Reset
{/* rally type tiles */}
{[{ v: 'Ground' }, { v: 'Mounted' }, { v: 'Ranged' }, { v: 'Siege' }, { v: 'SmallSiege' }, { v: 'Reinforce' }, { v: 'Trap' }].map(({ v }) => ( ))}
{/* filler troops — Reinforce only */} {type === 'Reinforce' && (
{['Archers', 'Ground', 'Cavalry', 'Large Siege'].map(f => { const on = reinfFill.includes(f); const locked = !on && reinfFill.length >= 2; return ( ); })}
)}
{/* march size */}
{ const n = parseInt(e.target.value.replace(/[^\d]/g, '')) || 0; setMarch(Math.min(n, 99000000)); }} className="h-9 w-full min-w-0 bg-transparent text-[18px] font-semibold tabular-nums text-zinc-900 outline-none dark:text-white" />
{[5000000, 10000000, 15000000].map(v => ( ))}
{/* layer size */} {!isTrap && (
setLayerCount(Math.max(0, +e.target.value || 0))} className="h-9 w-14 bg-transparent text-center text-[16px] font-semibold tabular-nums text-zinc-900 outline-none dark:text-white" /> layers × setLayerSize(Math.max(0, +e.target.value || 0))} className="h-9 w-20 bg-transparent text-center text-[16px] font-semibold tabular-nums text-zinc-900 outline-none dark:text-white" /> −{fmt(reserved)}

Reserved for layering — the composition splits the remaining {fmt(mainTroops)}.

)} {showTier && (
)}
{/* ===== 2 · composition ===== */}
{isTrap ? 'Trap Buster March' : preset.guideName + ' composition'}
{isTrap ? 'Standard fixed quantities' : `${tiers.length} tiers · for ${fmt(mainTroops)} main troops`}
{!isTrap && (TYPE_COLOR[type] ? : {TYPE_LABEL[type] || type})}
{isTrap ? (
Troop composition
{trap.map(({ t, qty }) => (
{t}
{fmt(qty)}
))}

Layers: 100,000 – 150,000 each.

Recommended layer size
({ value: i, label: k.range.replace(/K| /g, '') }))} value={kIdx} onChange={setKIdx} className="mb-3 flex-wrap" />
{KINGDOM_LAYERS.map((k, i) => (
{k.range}{k.size}
))}
) : ( <> {type === 'Reinforce' && reinfFill.length > 0 && (
Fill with {reinfFill.map(f => ( {f}{fmt(Math.round(mainTroops / reinfFill.length))} ))} — split each tier evenly between them
)}
{tiers.map(t => { const pct = dist[t]; const count = Math.round(mainTroops * pct / 100); return (
{t}
{pct}% {fmt(count)}
); })}
Recommended gear
{preset.gear.map(g => {g})}
{preset.note &&

{preset.note}

}
)} {/* ===== 3 · commanders ===== */} {!isTrap && (
Commanders
Primary, assistant & dragon for this march
{(!primary || !dragon) && suggestedPrimary && ( { setPrimaryName(suggestedPrimary.name); setDragonName(suggestedDragon?.d.name); }}>Auto-fill best )}
1Primary general
setPrimaryName(g ? g.name : null)} pool={typePool} placeholder={`Choose a ${battleType} general`} />
2Assistant {compat != null && = 75 ? 'green' : compat >= 55 ? 'brand' : 'zinc'} className="ml-auto">{compat}% synergy}
setAssistName(g ? g.name : null)} pool={typePool} placeholder="Choose an assistant" /> {primary && !assist && (
Suggested: {CALC.bestAssistants(primary, typePool, 3).map(({ g }) => ( ))}
)}
3Dragon
{CALC.bestDragons(battleType, V.dragons.length).map(({ d, fit }) => ( ))}
)}
{/* ===== summary ===== */}

March summary

{!isTrap ? (TYPE_COLOR[type] ? : {TYPE_LABEL[type] || type}) : Trap}
Total march {isTrap ? fmt(trap.reduce((s, x) => s + x.qty, 0)) : fmt(march)}
{!isTrap && reserved > 0 && (
Layers ({layerCount} × {fmt(layerSize)}) −{fmt(reserved)}
)} {!isTrap && reserved > 0 && (
Main troops {fmt(mainTroops)}
)}
{isTrap ? (

Trap busters use fixed 1M layers of T11–T16 — commanders and buffs are secondary; any spare general works.

) : !primary ? (
Pick a primary general (or Auto-fill) to see live stats.
) : ( <>
{statCards.map(s => (
{s.label}+{s.value}{s.suffix}
))}
{primary.name}Primary
{assist &&
{assist.name}Assist
} {dragon &&
{dragon.name}Dragon
}
)}

Distributions follow the ViG Rally Gear & March Setup Guide. Always recheck final composition against your live march size and battlefield objective.

); } window.MarchCenterPage = MarchCenterPage;