102 lines
4.4 KiB
JavaScript
102 lines
4.4 KiB
JavaScript
import React from 'react';
|
||
|
||
function GamePoolModal({ games, onClose }) {
|
||
return (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||
<div className="bg-white dark:bg-gray-800 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
|
||
<div className="flex justify-between items-center p-4 sm:p-6 border-b dark:border-gray-700">
|
||
<div>
|
||
<h2 className="text-xl sm:text-2xl font-bold dark:text-gray-100">Available Game Pool</h2>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||
{games.length} {games.length === 1 ? 'game' : 'games'} match your filters
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-2xl"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className="overflow-y-auto p-4 sm:p-6">
|
||
{games.length === 0 ? (
|
||
<p className="text-gray-500 dark:text-gray-400 text-center py-8">
|
||
No games match your current filters. Try adjusting the filters or enabling more games.
|
||
</p>
|
||
) : (
|
||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||
{games.map((game) => {
|
||
// Determine border color based on favor bias
|
||
const getBorderStyle = () => {
|
||
if (game.favor_bias === 1) {
|
||
return 'border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/10';
|
||
}
|
||
if (game.favor_bias === -1) {
|
||
return 'border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/10';
|
||
}
|
||
return 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700';
|
||
};
|
||
|
||
return (
|
||
<div
|
||
key={game.id}
|
||
className={`border rounded-lg p-3 sm:p-4 ${getBorderStyle()}`}
|
||
>
|
||
<div className="flex items-start justify-between gap-2 mb-1">
|
||
<h3 className="font-semibold text-sm sm:text-base dark:text-gray-100 flex-1">
|
||
{game.title}
|
||
</h3>
|
||
{/* Show favor indicator */}
|
||
{game.favor_bias === 1 && (
|
||
<span className="text-xs font-semibold bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded whitespace-nowrap">
|
||
Favored
|
||
</span>
|
||
)}
|
||
{game.favor_bias === -1 && (
|
||
<span className="text-xs font-semibold bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 px-2 py-0.5 rounded whitespace-nowrap">
|
||
Disfavored
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||
{game.pack_name}
|
||
</p>
|
||
<div className="flex flex-wrap gap-2 text-xs">
|
||
<span className="bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 px-2 py-1 rounded">
|
||
{game.min_players}-{game.max_players} players
|
||
</span>
|
||
{game.game_type && (
|
||
<span className="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 px-2 py-1 rounded">
|
||
{game.game_type}
|
||
</span>
|
||
)}
|
||
{game.play_count > 0 && (
|
||
<span className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">
|
||
{game.play_count} plays
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="border-t dark:border-gray-700 p-4 sm:p-6">
|
||
<button
|
||
onClick={onClose}
|
||
className="w-full bg-indigo-600 dark:bg-indigo-700 text-white py-2 sm:py-3 rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition"
|
||
>
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default GamePoolModal;
|
||
|