照片排名系统

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

const App = () => {
  const [photos, setPhotos] = useState([]);
  const [currentPair, setCurrentPair] = useState([]);
  const [ranking, setRanking] = useState({});

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

  const fetchPhotos = () => {
    // Mock data for photos with metadata
    const mockPhotos = [
      { id: 1, url: 'https://placehold.co/300X300', metadata: { title: 'Photo 1', description: 'Description for Photo 1' } },
      { id: 2, url: 'https://placehold.co/300X300', metadata: { title: 'Photo 2', description: 'Description for Photo 2' } },
      { id: 3, url: 'https://placehold.co/300X300', metadata: { title: 'Photo 3', description: 'Description for Photo 3' } }
    ];
    setPhotos(mockPhotos);
    setCurrentPair([mockPhotos[0], mockPhotos[1]]);
  };

  const handleChoice = (chosenId) => {
    const newRanking = { ...ranking };
    const [photoA, photoB] = currentPair;

    if (!newRanking[photoA.id]) newRanking[photoA.id] = 0;
    if (!newRanking[photoB.id]) newRanking[photoB.id] = 0;

    if (chosenId === photoA.id) {
      newRanking[photoA.id] += 1;
    } else {
      newRanking[photoB.id] += 1;
    }

    setRanking(newRanking);
    selectNextPair();
  };

  const selectNextPair = () => {
    const nextPair = photos.slice(2, 4);
    if (nextPair.length === 2) {
      setCurrentPair(nextPair);
    } else {
      // End of ranking or shuffle for more rounds
      setCurrentPair([photos[0], photos[1]]);
    }
  };

  return (
    <div className='flex flex-col items-center justify-center min-h-screen bg-gray-100'>
      <h1 className='text-3xl font-bold mb-8'>Photo Ranking System</h1>
      <div className='flex space-x-8'>
        {currentPair.map((photo) => (
          <div key={photo.id} className='flex flex-col items-center'>
            <img src={photo.url} alt={photo.metadata.title} className='w-64 h-64 object-cover rounded-lg shadow-lg' />
            <h2 className='text-xl mt-4'>{photo.metadata.title}</h2>
            <p className='text-gray-600'>{photo.metadata.description}</p>
            <button
              onClick={() => handleChoice(photo.id)}
              className='mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200'
            >
              Choose
            </button>
          </div>
        ))}
      </div>
      <div className='mt-8'>
        <h2 className='text-2xl font-bold mb-4'>Ranking</h2>
        <ul>
          {Object.entries(ranking).map(([id, score]) => (
            <li key={id} className='text-lg'>{`Photo ${id}: ${score} votes`}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default App;