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

Add Aniimo guides and link game cards to toolbox checklists
Some checks failed
Deploy Sokko G / deploy (push) Failing after 3s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-23 20:05:19 +02:00
parent f0797ccf14
commit 13434f72f6
278 changed files with 10025 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

9
website/src/features/games/mhwilds/MhwildsListing.jsx
View file

@ -1,4 +1,5 @@
// Rôle : affiche les listes filtrables de monstres et de faune Monster Hunter Wilds.
import { useGuideChecklist } from "../useGuideChecklist.js";
import { useMemo } from "react";
import { GameBreadcrumb } from "../GameBreadcrumb.jsx";
import { EndemicCard } from "./cards/EndemicCard.jsx";
@ -14,7 +15,9 @@ export function MhwildsListing({ category, game, mhwilds, filters, setFilters, t
const options = (mhwilds.filterOptions?.[category]?.length ? mhwilds.filterOptions[category] : getUniqueConditionValues(items, filterKey, t))
.filter((value) => value !== "none")
.sort((a, b) => t(a).localeCompare(t(b), "fr"));
const visible = useMemo(() => getFilteredMhwildsItems({ category, filterKey, mhwilds, filters, t }), [category, filterKey, mhwilds, filters, t]);
const filtered = useMemo(() => getFilteredMhwildsItems({ category, filterKey, mhwilds, filters, t }), [category, filterKey, mhwilds, filters, t]);
const checklist = useGuideChecklist(`mhwilds/${category}`);
const visible = filtered.filter((item) => checklist.isVisible(item.name));
const label = isMonsters ? t("monsters", { capitalize: true }) : t("endemic_life", { capitalize: true });
return (
@ -42,8 +45,8 @@ export function MhwildsListing({ category, game, mhwilds, filters, setFilters, t
<div className={`game-grid ${isMonsters ? "monster-grid" : "endemic-grid"}`}>
{visible.length ? visible.map((item) => (
isMonsters
? <MonsterCard key={item.name} monster={item} t={t} />
: <EndemicCard key={item.name} item={item} t={t} />
? <MonsterCard key={item.name} monster={item} t={t} completed={checklist.isCompleted(item.name)} completedLabel={checklist.content.completed} />
: <EndemicCard key={item.name} item={item} t={t} completed={checklist.isCompleted(item.name)} completedLabel={checklist.content.completed} />
)) : (
<div className="empty nds-empty-state">
<h2>Aucun résultat</h2>

6
website/src/features/games/mhwilds/cards/EndemicCard.jsx
View file

@ -1,8 +1,9 @@
// Rôle : affiche une carte de faune endémique Monster Hunter Wilds.
import { GuideChecklistMark } from "../../GuideChecklistControls.jsx";
import { IconRow } from "./IconRow.jsx";
import { assetPath, getConditionValues, normalizeText } from "../utils.js";
export function EndemicCard({ item, t }) {
export function EndemicCard({ item, t, completed, completedLabel }) {
const locations = getConditionValues(item.locations);
const description = t(item.description);
const normalizedDescription = normalizeText(description);
@ -11,7 +12,8 @@ export function EndemicCard({ item, t }) {
&& normalizedDescription !== normalizeText("to be completed");
return (
<article className="mhwilds-card endemic-card">
<article className="mhwilds-card endemic-card" data-checklist-complete={completed || undefined}>
<GuideChecklistMark completed={completed} label={completedLabel} />
<div className="mhwilds-card-art">
<img src={assetPath(item.name)} alt={t(item.name, { capitalize: true })} loading="lazy" />
</div>

8
website/src/features/games/mhwilds/cards/MonsterCard.jsx
View file

@ -1,10 +1,11 @@
// Rôle : affiche une carte monstre retournable avec faiblesses et hitzones.
import { GuideChecklistMark } from "../../GuideChecklistControls.jsx";
import { useState } from "react";
import { DamageTable } from "./DamageTable.jsx";
import { IconRow } from "./IconRow.jsx";
import { assetPath, getConditionValues } from "../utils.js";
export function MonsterCard({ monster, t }) {
export function MonsterCard({ monster, t, completed, completedLabel }) {
const [flipped, setFlipped] = useState(false);
const weaknesses = getConditionValues(monster.weaknesses);
const ailments = getConditionValues(monster.ailments).filter((value) => value !== "none");
@ -12,6 +13,7 @@ export function MonsterCard({ monster, t }) {
return (
<article
className={`mhwilds-card monster-card ${flipped ? "is-flipped" : ""}`}
data-checklist-complete={completed || undefined}
onClick={() => setFlipped(!flipped)}
onKeyDown={(event) => {
if (event.key !== "Enter" && event.key !== " ") return;
@ -21,10 +23,11 @@ export function MonsterCard({ monster, t }) {
tabIndex="0"
role="button"
aria-pressed={flipped}
aria-label={`Afficher les dégâts de ${t(monster.name, { capitalize: true })}`}
aria-label={`Afficher les dégâts de ${t(monster.name, { capitalize: true })}${completed ? ` — ${completedLabel}` : ""}`}
>
<div className="mhwilds-card-inner">
<div className="mhwilds-card-face mhwilds-card-front">
<GuideChecklistMark completed={completed} label={completedLabel} />
<span className="mhwilds-flip-indicator" aria-hidden="true">
<span className="ui-icon ui-icon-flip" />
</span>
@ -39,6 +42,7 @@ export function MonsterCard({ monster, t }) {
</div>
</div>
<div className="mhwilds-card-face mhwilds-card-back">
<GuideChecklistMark completed={completed} label={completedLabel} />
<span className="mhwilds-flip-indicator" aria-hidden="true">
<span className="ui-icon ui-icon-flip" />
</span>