advanced-games-library/src/components/MultiplayerGameDemo.js

Advanced Gaming Library for React Native - Four Complete Games with iOS Compatibility Fixes

import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Alert,
  ScrollView,
  Dimensions
} from 'react-native';

// רכיב דמו למשחק מולטיפלייר
const MultiplayerGameDemo = ({ 
  config = {}, 
  onGameEnd = () => {}, 
  onError = () => {},
  onPlayerJoin = () => {},
  onPlayerLeave = () => {}
}) => {
  const [gameState, setGameState] = useState('lobby'); // lobby, playing, finished
  const [players, setPlayers] = useState([
    { id: 1, name: 'אתה', score: 0, isLocal: true },
    { id: 2, name: 'שחקן 2', score: 0, isLocal: false },
    { id: 3, name: 'שחקן 3', score: 0, isLocal: false }
  ]);
  const [currentRound, setCurrentRound] = useState(1);
  const [localScore, setLocalScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(30);

  useEffect(() => {
    if (gameState === 'playing' && timeLeft > 0) {
      const timer = setTimeout(() => {
        setTimeLeft(prev => prev - 1);
      }, 1000);
      return () => clearTimeout(timer);
    } else if (timeLeft === 0) {
      endRound();
    }
  }, [gameState, timeLeft]);

  const startGame = () => {
    setGameState('playing');
    setTimeLeft(30);
    setCurrentRound(1);
    Alert.alert('🚀 המשחק מתחיל!', 'לחץ על הכפתורים כדי לקבל נקודות');
  };

  const endRound = () => {
    // סימולציה של ניקוד שחקנים אחרים
    setPlayers(prev => prev.map(player => ({
      ...player,
      score: player.isLocal ? localScore : player.score + Math.floor(Math.random() * 20) + 5
    })));

    if (currentRound < 3) {
      setCurrentRound(prev => prev + 1);
      setTimeLeft(30);
      Alert.alert(`🎯 סוף סיבוב ${currentRound}`, `הניקוד שלך: ${localScore}`, [
        { text: 'סיבוב הבא', onPress: () => {} }
      ]);
    } else {
      endGame();
    }
  };

  const endGame = () => {
    setGameState('finished');
    const winner = players.reduce((prev, current) => 
      current.score > prev.score ? current : prev
    );
    
    Alert.alert(
      '🏆 המשחק הסתיים!', 
      `הזוכה: ${winner.name}\nהניקוד שלך: ${localScore}`,
      [
        { text: 'שחק שוב', onPress: resetGame },
        { text: 'חזור לתפריט', onPress: () => onGameEnd(localScore) }
      ]
    );
  };

  const resetGame = () => {
    setGameState('lobby');
    setLocalScore(0);
    setCurrentRound(1);
    setTimeLeft(30);
    setPlayers(prev => prev.map(player => ({ ...player, score: 0 })));
  };

  const addPoint = (points) => {
    if (gameState === 'playing') {
      setLocalScore(prev => prev + points);
      
      // סימולציה של פעולות שחקנים אחרים
      if (Math.random() > 0.7) {
        setPlayers(prev => prev.map(player => 
          !player.isLocal ? 
          { ...player, score: player.score + Math.floor(Math.random() * 5) + 1 } 
          : player
        ));
      }
    }
  };

  const renderLobby = () => (
    <View style={styles.container}>
      <Text style={styles.title}>👥 חדר מולטיפלייר</Text>
      
      <View style={styles.playersSection}>
        <Text style={styles.sectionTitle}>שחקנים מחוברים:</Text>
        {players.map(player => (
          <View key={player.id} style={styles.playerCard}>
            <Text style={styles.playerName}>
              {player.name} {player.isLocal ? '(אתה)' : ''}
            </Text>
            <View style={[
              styles.playerStatus, 
              { backgroundColor: player.isLocal ? '#4caf50' : '#2196f3' }
            ]}>
              <Text style={styles.statusText}>מוכן</Text>
            </View>
          </View>
        ))}
      </View>

      <View style={styles.gameInfo}>
        <Text style={styles.infoText}>📋 חוקי המשחק:</Text>
        <Text style={styles.ruleText}>• 3 סיבובים של 30 שניות</Text>
        <Text style={styles.ruleText}>• לחץ על הכפתורים לנקודות</Text>
        <Text style={styles.ruleText}>• השחקן עם הכי הרבה נקודות מנצח</Text>
      </View>

      <TouchableOpacity style={styles.startButton} onPress={startGame}>
        <Text style={styles.startButtonText}>🚀 התחל משחק</Text>
      </TouchableOpacity>
    </View>
  );

  const renderGame = () => (
    <View style={styles.container}>
      <View style={styles.gameHeader}>
        <Text style={styles.roundText}>סיבוב {currentRound}/3</Text>
        <Text style={styles.timerText}>⏰ {timeLeft}s</Text>
        <Text style={styles.scoreText}>הניקוד שלך: {localScore}</Text>
      </View>

      <View style={styles.gameArea}>
        <Text style={styles.instructionText}>לחץ על הכפתורים לנקודות!</Text>
        
        <View style={styles.buttonGrid}>
          <TouchableOpacity 
            style={[styles.gameButton, styles.button1]} 
            onPress={() => addPoint(1)}
          >
            <Text style={styles.buttonText}>🔵 +1</Text>
          </TouchableOpacity>
          
          <TouchableOpacity 
            style={[styles.gameButton, styles.button2]} 
            onPress={() => addPoint(3)}
          >
            <Text style={styles.buttonText}>🟢 +3</Text>
          </TouchableOpacity>
          
          <TouchableOpacity 
            style={[styles.gameButton, styles.button3]} 
            onPress={() => addPoint(5)}
          >
            <Text style={styles.buttonText}>🔴 +5</Text>
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.leaderboard}>
        <Text style={styles.leaderboardTitle}>🏆 לוח תוצאות:</Text>
        {players
          .sort((a, b) => b.score - a.score)
          .map((player, index) => (
            <View key={player.id} style={styles.leaderboardItem}>
              <Text style={styles.playerRank}>#{index + 1}</Text>
              <Text style={styles.playerNameSmall}>{player.name}</Text>
              <Text style={styles.playerScore}>{player.score}</Text>
            </View>
          ))}
      </View>
    </View>
  );

  const renderFinished = () => (
    <View style={styles.container}>
      <Text style={styles.title}>🏆 תוצאות סופיות</Text>
      
      <View style={styles.finalResults}>
        {players
          .sort((a, b) => b.score - a.score)
          .map((player, index) => (
            <View key={player.id} style={[
              styles.finalPlayerCard,
              index === 0 ? styles.winnerCard : {},
              player.isLocal ? styles.localPlayerCard : {}
            ]}>
              <Text style={styles.finalRank}>
                {index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉'} #{index + 1}
              </Text>
              <Text style={styles.finalPlayerName}>{player.name}</Text>
              <Text style={styles.finalPlayerScore}>{player.score} נקודות</Text>
            </View>
          ))}
      </View>

      <TouchableOpacity style={styles.playAgainButton} onPress={resetGame}>
        <Text style={styles.playAgainText}>🔄 שחק שוב</Text>
      </TouchableOpacity>
    </View>
  );

  switch (gameState) {
    case 'playing':
      return renderGame();
    case 'finished':
      return renderFinished();
    default:
      return renderLobby();
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f8f9fa',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
    color: '#333',
  },
  playersSection: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  playerCard: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 10,
    marginBottom: 8,
    elevation: 2,
  },
  playerName: {
    fontSize: 16,
    color: '#333',
  },
  playerStatus: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 15,
  },
  statusText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  gameInfo: {
    backgroundColor: '#e3f2fd',
    padding: 15,
    borderRadius: 10,
    marginBottom: 20,
  },
  infoText: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#1976d2',
  },
  ruleText: {
    fontSize: 14,
    color: '#1565c0',
    marginBottom: 4,
  },
  startButton: {
    backgroundColor: '#4caf50',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
  },
  startButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
  gameHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 10,
  },
  roundText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
  timerText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#f44336',
  },
  scoreText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#4caf50',
  },
  gameArea: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  instructionText: {
    fontSize: 16,
    marginBottom: 30,
    color: '#666',
    textAlign: 'center',
  },
  buttonGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    gap: 15,
  },
  gameButton: {
    width: 100,
    height: 100,
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },
  button1: {
    backgroundColor: '#2196f3',
  },
  button2: {
    backgroundColor: '#4caf50',
  },
  button3: {
    backgroundColor: '#f44336',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  leaderboard: {
    backgroundColor: '#fff',
    padding: 15,
    borderRadius: 10,
    marginTop: 20,
  },
  leaderboardTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  leaderboardItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 8,
  },
  playerRank: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#ff9800',
    width: 30,
  },
  playerNameSmall: {
    fontSize: 14,
    color: '#333',
    flex: 1,
  },
  playerScore: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#4caf50',
  },
  finalResults: {
    flex: 1,
    marginBottom: 20,
  },
  finalPlayerCard: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#fff',
    borderRadius: 10,
    marginBottom: 10,
    elevation: 2,
  },
  winnerCard: {
    backgroundColor: '#fff3e0',
    borderWidth: 2,
    borderColor: '#ff9800',
  },
  localPlayerCard: {
    borderWidth: 2,
    borderColor: '#4caf50',
  },
  finalRank: {
    fontSize: 24,
    marginRight: 15,
  },
  finalPlayerName: {
    fontSize: 18,
    fontWeight: 'bold',
    flex: 1,
    color: '#333',
  },
  finalPlayerScore: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#4caf50',
  },
  playAgainButton: {
    backgroundColor: '#2196f3',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
  },
  playAgainText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default MultiplayerGameDemo;