تطبيق حساب نقاط الألعاب

import React, { useState } from 'react';

const App = () => {
  const [points, setPoints] = useState(0);
  const [totalPoints, setTotalPoints] = useState(0);
  const [level, setLevel] = useState(1);

  const handleAddPoints = () => {
    setTotalPoints(totalPoints + points);
    setLevel(Math.floor(totalPoints / 100) + 1);
    setPoints(0);
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
      <h1 className="text-4xl font-bold mb-8">Leveling System</h1>
      <div className="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
        <div className="mb-4">
          <label className="block text-sm font-medium mb-2">Enter Points:</label>
          <input
            type="number"
            value={points}
            onChange={(e) => setPoints(parseInt(e.target.value))}
            className="w-full p-2 bg-gray-700 rounded text-white"
          />
        </div>
        <button
          onClick={handleAddPoints}
          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Add Points
        </button>
        <div className="mt-6">
          <p className="text-lg">Total Points: <span className="font-bold">{totalPoints}</span></p>
          <p className="text-lg">Current Level: <span className="font-bold">{level}</span></p>
        </div>
      </div>
      <footer className="mt-8 text-sm text-gray-500">
        © 2025 Leveling System. All rights reserved.
      </footer>
    </div>
  );
};

export default App;