julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add examples section to ChallengesSection component: Introduce a toggleable examples section with detailed challenge descriptions and suggested points, enhancing user engagement and clarity on challenge expectations.
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 2m47s
Details

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-16 08:09:37 +01:00
parent bfaf30ee26
commit c7595c4173
1 changed files with 90 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
components/challenges/ChallengesSection.tsx
View File

@@ -72,6 +72,7 @@ export default function ChallengesSection({
const [pointsReward, setPointsReward] = useState(100);
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [showExamples, setShowExamples] = useState(false);
useEffect(() => {
fetchChallenges();
@@ -452,6 +453,95 @@ export default function ChallengesSection({
})}
</div>
)}
{/* Examples Section */}
<Card variant="dark" className="mt-8">
<button
onClick={() => setShowExamples(!showExamples)}
className="w-full flex items-center justify-between p-4 text-left"
>
<h3 className="text-lg font-bold text-pixel-gold">
💡 Exemples de défis
</h3>
<span className="text-pixel-gold text-xl">
{showExamples ? "−" : "+"}
</span>
</button>
{showExamples && (
<div className="px-4 pb-4 space-y-4 border-t border-[var(--border)] pt-4">
<div className="space-y-3">
<div className="p-4 bg-black/40 rounded border border-[var(--border)]">
<h4 className="font-bold text-pixel-gold mb-2">
Qui participera à plus d&apos;événements ce mois ?
</h4>
<p className="text-sm text-gray-300">
Le joueur qui participe au plus grand nombre d&apos;événements
organisés ce mois remporte le défi. Les événements doivent
être validés par un admin pour compter.
</p>
<div className="mt-2 text-xs text-gray-400">
Points suggérés: 150
</div>
</div>
<div className="p-4 bg-black/40 rounded border border-[var(--border)]">
<h4 className="font-bold text-pixel-gold mb-2">
Premier à atteindre le niveau 10
</h4>
<p className="text-sm text-gray-300">
Le premier joueur à atteindre le niveau 10 remporte le défi.
Le niveau est calculé automatiquement selon le score total.
</p>
<div className="mt-2 text-xs text-gray-400">
Points suggérés: 200
</div>
</div>
<div className="p-4 bg-black/40 rounded border border-[var(--border)]">
<h4 className="font-bold text-pixel-gold mb-2">
Meilleur feedback sur un événement
</h4>
<p className="text-sm text-gray-300">
Le joueur qui donne le feedback le plus détaillé et
constructif sur un événement remporte le défi. L&apos;admin
désignera le gagnant selon la qualité du feedback.
</p>
<div className="mt-2 text-xs text-gray-400">
Points suggérés: 100
</div>
</div>
<div className="p-4 bg-black/40 rounded border border-[var(--border)]">
<h4 className="font-bold text-pixel-gold mb-2">
Plus grand nombre de points gagnés cette semaine
</h4>
<p className="text-sm text-gray-300">
Le joueur qui accumule le plus de points cette semaine
remporte le défi. Seuls les points gagnés après l&apos;acceptation
du défi comptent.
</p>
<div className="mt-2 text-xs text-gray-400">
Points suggérés: 250
</div>
</div>
<div className="p-4 bg-black/40 rounded border border-[var(--border)]">
<h4 className="font-bold text-pixel-gold mb-2">
Défi créatif : meilleure bio de profil
</h4>
<p className="text-sm text-gray-300">
Le joueur avec la bio de profil la plus créative et originale
remporte le défi. L&apos;admin désignera le gagnant selon
l&apos;originalité et la qualité de la bio.
</p>
<div className="mt-2 text-xs text-gray-400">
Points suggérés: 120
</div>
</div>
</div>
</div>
)}
</Card>
</div>
</section>
);