import React, { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
const colors = {
green: "#0B6E4F",
gold: "#C6A85B",
bone: "#F5F1E6",
dark: "#0A0A0A"
};
export default function UnrealFitnessRPG() {
// Persistent state
const [xp, setXp] = useState(0);
const [level, setLevel] = useState(1);
const [weight, setWeight] = useState(130);
const [history, setHistory] = useState([]);
// Load from localStorage
useEffect(() => {
const saved = localStorage.getItem("fitnessRPG");
if (saved) {
const data = JSON.parse(saved);
setXp(data.xp || 0);
setLevel(data.level || 1);
setWeight(data.weight || 130);
setHistory(data.history || []);
}
}, []);
// Save to localStorage
useEffect(() => {
localStorage.setItem(
"fitnessRPG",
JSON.stringify({ xp, level, weight, history })
);
}, [xp, level, weight, history]);
const xpToNext = level * 150;
const gainXP = (amount) => {
let newXP = xp + amount;
let newLevel = level;
while (newXP >= newLevel * 150) {
newXP -= newLevel * 150;
newLevel++;
}
setXp(newXP);
setLevel(newLevel);
};
const logWeight = () => {
const today = new Date().toLocaleDateString();
const newEntry = { date: today, weight };
setHistory([...history, newEntry]);
gainXP(10);
};
const cardStyle = {
backgroundColor: colors.bone,
border: `1px solid ${colors.gold}`
};
const buttonStyle = {
backgroundColor: colors.green,
color: "white"
};
return (
{/* Player */}
{/* Actions */}
{/* Weight Tracking */}
);
}
Level {level}
XP: {xp} / {xpToNext}