advanced-games-library/src/components/common/GameWidgets.js

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

/**
 * GameWidgets - JavaScript Fallback Version
 * A collection of game UI widgets like progress bars and indicators
 * 
 * @version 1.0.0
 * @author Games Studio
 */

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

const GameWidgets = ({
  progress = 0,
  level = 1,
  achievements = [],
  showProgressBar = true,
  showLevelIndicator = true,
  showAchievements = true,
  style,
  ...props
}) => {
  const renderProgressBar = () => {
    if (!showProgressBar) return null;
    
    return (
      <View style={styles.progressContainer}>
        <Text style={styles.progressLabel}>Progress: {Math.round(progress)}%</Text>
        <View style={styles.progressBar}>
          <View 
            style={[
              styles.progressFill, 
              { width: `${Math.min(progress, 100)}%` }
            ]} 
          />
        </View>
      </View>
    );
  };

  const renderLevelIndicator = () => {
    if (!showLevelIndicator) return null;
    
    return (
      <View style={styles.levelContainer}>
        <Text style={styles.levelLabel}>Level {level}</Text>
        <View style={styles.levelBadge}>
          <Text style={styles.levelText}>{level}</Text>
        </View>
      </View>
    );
  };

  const renderAchievements = () => {
    if (!showAchievements || achievements.length === 0) return null;
    
    return (
      <View style={styles.achievementsContainer}>
        <Text style={styles.achievementsLabel}>Achievements:</Text>
        {achievements.map((achievement, index) => (
          <View key={index} style={styles.achievementBadge}>
            <Text style={styles.achievementText}>🏆 {achievement}</Text>
          </View>
        ))}
      </View>
    );
  };

  return (
    <View style={[styles.container, style]} {...props}>
      {renderProgressBar()}
      {renderLevelIndicator()}
      {renderAchievements()}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  progressContainer: {
    marginBottom: 10,
  },
  progressLabel: {
    fontSize: 12,
    color: '#7f8c8d',
    marginBottom: 5,
  },
  progressBar: {
    height: 8,
    backgroundColor: '#ecf0f1',
    borderRadius: 4,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    backgroundColor: '#27ae60',
    borderRadius: 4,
  },
  levelContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  levelLabel: {
    fontSize: 12,
    color: '#7f8c8d',
    marginRight: 10,
  },
  levelBadge: {
    backgroundColor: '#3498db',
    borderRadius: 12,
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  levelText: {
    color: 'white',
    fontSize: 12,
    fontWeight: 'bold',
  },
  achievementsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
  },
  achievementsLabel: {
    fontSize: 12,
    color: '#7f8c8d',
    marginRight: 10,
  },
  achievementBadge: {
    backgroundColor: '#f39c12',
    borderRadius: 10,
    paddingHorizontal: 8,
    paddingVertical: 4,
    marginRight: 5,
    marginBottom: 5,
  },
  achievementText: {
    color: 'white',
    fontSize: 10,
    fontWeight: 'bold',
  },
});

module.exports = GameWidgets;