تطبيق النظام: مهام عشوائية وجوائز

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [currentLevel, setCurrentLevel] = useState(1);
  const [points, setPoints] = useState(0);
  const [rewards, setRewards] = useState([]);
  const [punishments, setPunishments] = useState([]);

  useEffect(() => {
    generateRandomTasks();
  }, []);

  const generateRandomTasks = () => {
    const randomTasks = Array.from({ length: 200 }, () => ({
      id: Math.random().toString(36).substr(2, 9),
      description: `Task ${Math.floor(Math.random() * 1000)}`,
      time: Math.floor(Math.random() * 24),
      completed: false,
    }));
    setTasks(randomTasks);
  };

  const completeTask = (taskId) => {
    setTasks((prevTasks) =>
      prevTasks.map((task) =>
        task.id === taskId ? { ...task, completed: true } : task
      )
    );
    setPoints((prevPoints) => prevPoints + 10);
    if (points >= 100) {
      setCurrentLevel((prevLevel) => prevLevel + 1);
      setPoints(0);
    }
  };

  return (
    <div className="App bg-blue-900 text-white min-h-screen p-8">
      <h1 className="text-4xl font-bold mb-8">The System</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {tasks.map((task) => (
          <div key={task.id} className="bg-blue-800 p-4 rounded-lg shadow-lg">
            <h2 className="text-xl font-semibold">{task.description}</h2>
            <p className="text-sm">Time: {task.time}:00</p>
            <button
              onClick={() => completeTask(task.id)}
              className="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
            >
              Complete Task
            </button>
          </div>
        ))}
      </div>
      <div className="mt-8">
        <h2 className="text-2xl font-bold">Current Level: {currentLevel}</h2>
        <p className="text-lg">Points: {points}</p>
      </div>
    </div>
  );
};

export default App;