some units are now more compact, for example pc squad

This commit is contained in:
NilsUeter
2025-02-23 10:50:01 +01:00
parent 0c89ed6ddc
commit 0058d3e291
+45 -41
View File
@@ -190,6 +190,7 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
<div <div
style={{ style={{
padding: "4px 16px", padding: "4px 16px",
paddingBottom: 0,
color: "#fff", color: "#fff",
position: "relative", position: "relative",
marginLeft: "1.3rem", marginLeft: "1.3rem",
@@ -255,26 +256,39 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
{cost.points}pts {cost.points}pts
</span> </span>
</div> </div>
<div className="relative z-10 flex gap-4">
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: 6, gap: 6,
zIndex: 1, }}
position: "relative", >
}} {modelStats.map((model, index) => (
> <ModelStats
{modelStats.map((model, index) => ( key={index}
<ModelStats modelStats={modelStats}
key={index} modelStat={model}
modelStats={modelStats} modelList={modelList}
modelStat={model} index={index}
modelList={modelList} showName={modelStats.length > 1}
index={index} />
showName={modelStats.length > 1} ))}
/> </div>
))} {modelStats?.[0] && (
<div
className={`mt-[17px] ${
modelStats.length > 1 ? "" : "self-center"
}`}
style={{
fontSize: "0.7em",
}}
>
{modelList.map((model, index) => (
<div key={model}>{model}</div>
))}
</div>
)}
</div> </div>
</div> </div>
<div <div
@@ -453,7 +467,6 @@ const ModelStats = ({ modelStat, index, showName, modelList }) => {
wounds = "/"; wounds = "/";
} }
const showWeapons = index === 0;
return ( return (
<div style={{ display: "flex", gap: "1.2rem" }}> <div style={{ display: "flex", gap: "1.2rem" }}>
<Characteristic title="M" characteristic={move} index={index} /> <Characteristic title="M" characteristic={move} index={index} />
@@ -462,26 +475,17 @@ const ModelStats = ({ modelStat, index, showName, modelList }) => {
<Characteristic title="W" characteristic={wounds} index={index} /> <Characteristic title="W" characteristic={wounds} index={index} />
<Characteristic title="LD" characteristic={leadership} index={index} /> <Characteristic title="LD" characteristic={leadership} index={index} />
<Characteristic title="OC" characteristic={oc} index={index} /> <Characteristic title="OC" characteristic={oc} index={index} />
<div {showName && (
className="flex flex-wrap items-center gap-2" <div
style={{ className="flex flex-wrap items-center gap-2"
marginTop: index === 0 ? 16 : 0, style={{
textShadow: "0px 0px 5px rgb(0 0 0)", marginTop: index === 0 ? 16 : 0,
}} textShadow: "0px 0px 5px rgb(0 0 0)",
> }}
{showName && <div style={{ whiteSpace: "nowrap" }}>{name}</div>} >
{showWeapons && ( <div style={{ whiteSpace: "nowrap" }}>{name}</div>
<div </div>
style={{ )}
fontSize: "0.7em",
}}
>
{modelList.map((model, index) => (
<div key={model}>{model}</div>
))}
</div>
)}
</div>
</div> </div>
); );
}; };