shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display searchable Aniimo numbers on cards
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-25 20:21:14 +02:00
parent 69e3b8ef2f
commit 1ee460b94f
3 changed files with 23 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
website/src/features/games/aniimo/AniimoCard.jsx
View file

@ -36,7 +36,11 @@ function CardFaces({ variant, t, content, checklist, statsMax }) {
<div className="aniimo-card-inner">
<div className="aniimo-face aniimo-front nds-card" aria-hidden={flipped} inert={flipped}>
{flipButton(false, frontButton)}
<div className="aniimo-portrait"><img src={variant.image} alt={t(variant.name)} width="512" height="840" loading="lazy" /><GuideChecklistCheckbox checklist={checklist} itemKey={variant.key} /></div>
<div className="aniimo-portrait">
<img src={variant.image} alt={t(variant.name)} width="512" height="840" loading="lazy" />
<span className="aniimo-number">N° {variant.aniimoId}</span>
<GuideChecklistCheckbox checklist={checklist} itemKey={variant.key} />
</div>
<div className="aniimo-card-body">
<h2 title={t(variant.name)}>{t(variant.name)}</h2>
<p className="aniimo-form" title={t(variant.form)}>{t(variant.form)}</p>

17
website/src/styles/_aniimo.scss
View file

@ -136,6 +136,7 @@
}
.aniimo-portrait {
@include surfaces.card-cover-divider;
position: relative;
aspect-ratio: 3 / 4;
max-height: 250px;
width: 100%;
@ -143,6 +144,22 @@
overflow: hidden;
img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
}
.aniimo-number {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 2;
padding: 3px 7px;
border: 1px solid var(--color-border-hover);
border-radius: var(--radius-sm);
background: rgba(7, 9, 19, 0.82);
color: var(--color-text-primary);
font-size: var(--font-size-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.2;
pointer-events: none;
}
// Les deux portraits de Petit Esprit de Feu ont davantage de vide sous le personnage.
.aniimo-result[data-aniimo="11001"] .aniimo-portrait img { object-position: center 20%; }
.aniimo-card-body {