advanced-games-library/src/games/demo-game/DemoGameComponent.js

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

/**
 * DemoGameComponent - JavaScript Fallback Version
 * A React Native component for the demo game
 * 
 * @version 1.0.0
 * @author Games Studio
 */

const React = require('react');
const {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
  Dimensions,
} = require('react-native');

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

// Fallback DemoGameComponent
const DemoGameComponent = ({
  config = {
    difficulty: 'medium',
    showTutorial: true,
    enableSound: true
  },
  onGameComplete,
  onGameStart,
  title = '🎯 Demo Game',
  subtitle = 'Welcome to the demo game!'
}) => {
  const [gameState, setGameState] = React.useState('menu'); // menu, playing, complete
  const [score, setScore] = React.useState(0);
  const [time, setTime] = React.useState(0);
  const [targets, setTargets] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);

  const startGame = () => {
    setIsLoading(true);
    setGameState('playing');
    setScore(0);
    setTime(0);
    
    // Create initial targets
    const initialTargets = [];
    for (let i = 0; i < 5; i++) {
      initialTargets.push({
        id: i,
        x: Math.random() * (screenWidth - 100),
        y: Math.random() * (screenHeight - 200) + 100,
        size: 60,
        active: true,
        color: '#e74c3c'
      });
    }
    setTargets(initialTargets);
    
    setTimeout(() => {
      setIsLoading(false);
      onGameStart?.();
    }, 1000);
  };

  const hitTarget = (targetId) => {
    if (gameState !== 'playing') return;
    
    setTargets(prev => prev.map(target => 
      target.id === targetId ? { ...target, active: false } : target
    ));
    
    setScore(prev => prev + 100);
    
    // Check if all targets are hit
    const remainingTargets = targets.filter(t => t.active).length - 1;
    if (remainingTargets === 0) {
      const finalScore = score + 100;
      const finalTime = time;
      setGameState('complete');
      onGameComplete?.({
        score: finalScore,
        time: finalTime,
        moves: 5,
        completed: true
      });
    }
  };

  const renderTarget = (target) => {
    if (!target.active) return null;
    
    return (
      <TouchableOpacity
        key={target.id}
        style={[
          styles.target,
          {
            left: target.x,
            top: target.y,
            width: target.size,
            height: target.size,
            backgroundColor: target.color,
          }
        ]}
        onPress={() => hitTarget(target.id)}
        activeOpacity={0.7}
      >
        <Text style={styles.targetText}>🎯</Text>
      </TouchableOpacity>
    );
  };

  const renderMenu = () => (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#f8f9fa" />
      
      <View style={styles.menuContent}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.subtitle}>{subtitle}</Text>
        
        <View style={styles.configInfo}>
          <Text style={styles.configText}>Difficulty: {config.difficulty}</Text>
          <Text style={styles.configText}>Tutorial: {config.showTutorial ? 'On' : 'Off'}</Text>
          <Text style={styles.configText}>Sound: {config.enableSound ? 'On' : 'Off'}</Text>
        </View>
        
        <TouchableOpacity
          style={styles.startButton}
          onPress={startGame}
        >
          <Text style={styles.startButtonText}>Start Game</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );

  const renderGame = () => (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#f8f9fa" />
      
      <View style={styles.gameHeader}>
        <Text style={styles.gameTitle}>Demo Game</Text>
        <Text style={styles.scoreText}>Score: {score}</Text>
        <Text style={styles.timeText}>Time: {Math.floor(time / 1000)}s</Text>
      </View>
      
      <View style={styles.gameArea}>
        {targets.map(renderTarget)}
      </View>
      
      <View style={styles.gameControls}>
        <TouchableOpacity
          style={styles.controlButton}
          onPress={() => setGameState('menu')}
        >
          <Text style={styles.controlButtonText}>Menu</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );

  const renderComplete = () => (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#f8f9fa" />
      
      <View style={styles.completeContent}>
        <Text style={styles.completeTitle}>🎉 Game Complete!</Text>
        <Text style={styles.completeText}>Final Score: {score}</Text>
        <Text style={styles.completeText}>Time: {Math.floor(time / 1000)}s</Text>
        
        <TouchableOpacity
          style={styles.restartButton}
          onPress={() => setGameState('menu')}
        >
          <Text style={styles.restartButtonText}>Play Again</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );

  if (isLoading) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.loadingContainer}>
          <Text style={styles.loadingText}>Loading...</Text>
        </View>
      </SafeAreaView>
    );
  }

  switch (gameState) {
    case 'playing':
      return renderGame();
    case 'complete':
      return renderComplete();
    default:
      return renderMenu();
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  menuContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#2c3e50',
    marginBottom: 10,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    color: '#7f8c8d',
    textAlign: 'center',
    marginBottom: 40,
  },
  configInfo: {
    marginBottom: 40,
    alignItems: 'center',
  },
  configText: {
    fontSize: 14,
    color: '#34495e',
    marginBottom: 5,
  },
  startButton: {
    backgroundColor: '#3498db',
    padding: 15,
    borderRadius: 10,
    minWidth: 200,
    alignItems: 'center',
  },
  startButtonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  gameHeader: {
    padding: 20,
    alignItems: 'center',
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  gameTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#2c3e50',
    marginBottom: 10,
  },
  scoreText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#27ae60',
  },
  timeText: {
    fontSize: 16,
    color: '#7f8c8d',
  },
  gameArea: {
    flex: 1,
    position: 'relative',
  },
  target: {
    position: 'absolute',
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  targetText: {
    fontSize: 24,
  },
  gameControls: {
    padding: 20,
    alignItems: 'center',
  },
  controlButton: {
    backgroundColor: '#e74c3c',
    padding: 15,
    borderRadius: 10,
    minWidth: 100,
    alignItems: 'center',
  },
  controlButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  completeContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  completeTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#27ae60',
    marginBottom: 20,
    textAlign: 'center',
  },
  completeText: {
    fontSize: 18,
    color: '#2c3e50',
    marginBottom: 10,
  },
  restartButton: {
    backgroundColor: '#3498db',
    padding: 15,
    borderRadius: 10,
    minWidth: 200,
    alignItems: 'center',
    marginTop: 30,
  },
  restartButtonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#2c3e50',
  },
});

module.exports = { DemoGameComponent };
module.exports.default = DemoGameComponent;