Tetardtek
b58d39e707
12 SCSS files (1167 lines) replaced by centralized index.css with Tailwind v4 @theme tokens, @layer components, and utility classes. Game panel design system (gp-*) preserved as CSS components. Inline styles in Settings/Login/MilestoneBar converted to Tailwind utilities. sass removed from dependencies. Build clean, 53 tests pass.
45 lines
1.4 KiB
JavaScript
Executable File
45 lines
1.4 KiB
JavaScript
Executable File
import { useGameStore } from "../store/useGameStore";
|
|
import { ACHIEVEMENTS } from "../data/achievements";
|
|
|
|
function Achievements() {
|
|
const state = useGameStore((s) => s.state);
|
|
|
|
const unlocked = ACHIEVEMENTS.filter((a) => a.check(state));
|
|
const locked = ACHIEVEMENTS.filter((a) => !a.check(state));
|
|
|
|
return (
|
|
<div className="fullachieve">
|
|
<h1>Succès</h1>
|
|
<p className="achieve-counter">
|
|
{unlocked.length} / {ACHIEVEMENTS.length}
|
|
</p>
|
|
|
|
<div className="achievementscontainer">
|
|
<div className="achievementscardcontainer">
|
|
{unlocked.map((a) => (
|
|
<div key={a.id} className="achieve-card achieve-unlocked">
|
|
<span className="achieve-icon">{a.icon}</span>
|
|
<div className="achieve-info">
|
|
<p className="achieve-name">{a.name}</p>
|
|
<p className="achieve-desc">{a.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{locked.map((a) => (
|
|
<div key={a.id} className="achieve-card achieve-locked">
|
|
<span className="achieve-icon">🔒</span>
|
|
<div className="achieve-info">
|
|
<p className="achieve-name">{a.name}</p>
|
|
<p className="achieve-desc">???</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Achievements;
|