تطبيق بوصلة الحضارات

import React, { useState, useEffect } from 'react';

const App = () => {
  const [direction, setDirection] = useState('');
  const [civilization, setCivilization] = useState('');

  useEffect(() => {
    const handleOrientation = (event) => {
      const { alpha } = event;
      if (alpha !== null) {
        const direction = getDirection(alpha);
        setDirection(direction);
        setCivilization(getCivilization(direction));
      }
    };

    window.addEventListener('deviceorientation', handleOrientation);
    return () => {
      window.removeEventListener('deviceorientation', handleOrientation);
    };
  }, []);

  const getDirection = (alpha) => {
    if (alpha >= 337.5 || alpha < 22.5) return 'North';
    if (alpha >= 22.5 && alpha < 67.5) return 'Northeast';
    if (alpha >= 67.5 && alpha < 112.5) return 'East';
    if (alpha >= 112.5 && alpha < 157.5) return 'Southeast';
    if (alpha >= 157.5 && alpha < 202.5) return 'South';
    if (alpha >= 202.5 && alpha < 247.5) return 'Southwest';
    if (alpha >= 247.5 && alpha < 292.5) return 'West';
    if (alpha >= 292.5 && alpha < 337.5) return 'Northwest';
    return '';
  };

  const getCivilization = (direction) => {
    switch (direction) {
      case 'North':
        return 'Greek Civilization';
      case 'Northeast':
        return 'Jews of Greece';
      case 'Northwest':
        return 'Byzantine Civilization';
      case 'East':
      case 'West':
        return 'Jews';
      case 'South':
        return 'Roman Civilization';
      case 'Southeast':
        return 'Jews of Rome';
      case 'Southwest':
        return 'Phoenicians';
      default:
        return '';
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-500 to-purple-600 flex flex-col items-center justify-center text-white">
      <h1 className="text-4xl font-bold mb-8">Compass of Civilizations</h1>
      <div className="bg-white bg-opacity-20 p-8 rounded-lg shadow-lg text-center">
        <h2 className="text-2xl font-semibold mb-4">Direction: {direction}</h2>
        <h3 className="text-xl">Civilization: {civilization}</h3>
      </div>
      <footer className="mt-8 text-sm">
        © 2025 Compass of Civilizations. All rights reserved.
      </footer>
    </div>
  );
};

export default App;