diff --git a/src/Roster.jsx b/src/Roster.jsx index bf2418a..ee118df 100644 --- a/src/Roster.jsx +++ b/src/Roster.jsx @@ -1,8 +1,8 @@ import factionBackground from "./assets/factionBackground.png"; import adeptusAstartesIcon from "./assets/adeptusAstartesIcon.png"; -import meleeIcon from "./assets/meleeIcon.png"; import rangedIcon from "./assets/rangedIcon.png"; import { Arrow } from "./assets/icons"; +import { Weapons } from "./Weapons"; export const Roster = ({ roster }) => { if (!roster) { @@ -230,8 +230,8 @@ const Unit = ({ unit }) => {
{hasDifferentProfiles && ( - - + + - - - - - - - - - - - - )} - - {weapons.map((weapon, index) => ( - - ))} - {weapons.length > 0 && ( - - - - )} - - - ); -}; - -const Weapon = ({ weapon, modelStats, isMelee, index }) => { - let { _name, _selectionName, _range, _type, str, _ap, _damage } = weapon; - var lastWhiteSpace = _type.lastIndexOf(" "); - const type = _type.substring(0, lastWhiteSpace); - const attacks = _type.substring(lastWhiteSpace + 1); - const bs = modelStats[0]._bs; - const ws = modelStats[0]._ws; - const strModel = modelStats[0].str; - const meleeAttacks = modelStats[0]._attacks; - - if (_name === "Krak grenades") { - _name = "Krak grenade"; - } - const differentProfiles = - _selectionName !== _name && - !_name.includes("(Shooting)") && - !_name.includes("(Melee)"); - const interestingType = type && type !== "Melee"; - if (differentProfiles && _name.endsWith(" grenades")) { - _name = _name.replace(" grenades", ""); - } - if (differentProfiles && _name.endsWith(" grenade")) { - _name = _name.replace(" grenade", ""); - } - if (differentProfiles && _name.includes(" - ")) { - _name = _name.split(" - ")[1]; - } - return ( - - - - - - - - - - - ); -}; - -const calculateWeaponStrength = (strModel, strWeapon) => { - if (strWeapon.startsWith("User")) return strModel; - if (strWeapon.startsWith("x")) - return strModel * parseInt(strWeapon.replace("x", "")); - return strModel + parseInt(strWeapon, 10); -}; - const Psykers = ({ title, psykers }) => { return ( <> @@ -659,7 +533,8 @@ const Psykers = ({ title, psykers }) => { ))} {psykers.length > 0 && ( - + + )} @@ -672,7 +547,7 @@ const Psyker = ({ psyker, index }) => { return ( - + + + + + + + + + + + + + )} + + {weapons.map((weapon, index) => ( + + ))} + {weapons.length > 0 && ( + + + + + )} + + + ); +}; + +const Weapon = ({ weapon, modelStats, isMelee, className, index }) => { + let { _name, _selectionName, _range, _type, str, _ap, _damage } = weapon; + var lastWhiteSpace = _type.lastIndexOf(" "); + const type = _type.substring(0, lastWhiteSpace); + const attacks = _type.substring(lastWhiteSpace + 1); + const bs = modelStats[0]._bs; + const ws = modelStats[0]._ws; + const strModel = modelStats[0].str; + const meleeAttacks = modelStats[0]._attacks; + + if (_name === "Krak grenades") { + _name = "Krak grenade"; + } + const differentProfiles = + _selectionName !== _name && + !_name.includes("(Shooting)") && + !_name.includes("(Melee)"); + const interestingType = type && type !== "Melee"; + if (differentProfiles && _name.endsWith(" grenades")) { + _name = _name.replace(" grenades", ""); + } + if (differentProfiles && _name.endsWith(" grenade")) { + _name = _name.replace(" grenade", ""); + } + if (differentProfiles && _name.includes(" - ")) { + _name = _name.split(" - ")[1]; + } + return ( + + + + + + + + + + + ); +}; + +const getWeaponClassNames = (weapons, index) => { + let differentColor = false; + for (let i = 1; i <= index; i++) { + let { _selectionName } = weapons[i]; + if (_selectionName !== weapons[i - 1]._selectionName) { + differentColor = !differentColor; + } + } + const classes = []; + if (differentColor) classes.push("rowOtherColor"); + if (index === 0) classes.push("noBorderTop"); + if ( + index > 0 && + weapons[index]._selectionName === weapons[index - 1]._selectionName + ) + classes.push("noBorderTop"); + return classes.join(" "); +}; + +const calculateWeaponStrength = (strModel, strWeapon) => { + if (strWeapon.startsWith("User")) return strModel; + if (strWeapon.startsWith("x")) + return strModel * parseInt(strWeapon.replace("x", "")); + return strModel + parseInt(strWeapon, 10); +}; diff --git a/src/index.css b/src/index.css index 4d3d478..7c40fbc 100644 --- a/src/index.css +++ b/src/index.css @@ -104,27 +104,23 @@ button:focus-visible { .weapons-table td { padding: 1px 8px; - border-bottom: 1px dotted #9e9fa1; + border-top: 1px dotted #9e9fa1; text-align: center; vertical-align: baseline; } +.noBorderTop td { + border-top: none; +} + .emptyRow { height: 22.5px; } -.emptyRow td { - border-bottom: none; -} - .rowOtherColor { background-color: #d0d1d3; } -.differentProfiles + .differentProfiles { - border-top: 1px solid #dfe0e2; -} - @media print { .print-display-none { display: none;
{Arrow}
{Arrow} { ); }; -const Weapons = ({ title, weapons, modelStats }) => { - const isMelee = title === "MELEE WEAPONS"; - return ( - <> - {weapons.length > 0 && ( -
-
- -
-
{title}RANGEA{isMelee ? "WS" : "BS"}SAPD
- {differentProfiles && Arrow} - -
- {differentProfiles && _selectionName + " - "} - {_name} - {interestingType && ( - - [{type}] - - )} -
-
{_range}{isMelee ? meleeAttacks : attacks}{isMelee ? ws : bs}{isMelee ? calculateWeaponStrength(strModel, str) : str}{_ap}{_damage}
{ + const isMelee = title === "MELEE WEAPONS"; + return ( + <> + {weapons.length > 0 && ( +
+
+ +
+
{title}RANGEA{isMelee ? "WS" : "BS"}SAPD
+ {differentProfiles && Arrow} + +
+ {differentProfiles && _selectionName + " - "} + {_name} + {interestingType && ( + + [{type}] + + )} +
+
{_range}{isMelee ? meleeAttacks : attacks}{isMelee ? ws : bs}{isMelee ? calculateWeaponStrength(strModel, str) : str}{_ap}{_damage}