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

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

/**
 * GameHeader - JavaScript Fallback Version
 * A header component with game title, score, and controls
 * 
 * @version 1.0.0
 * @author Games Studio
 */

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

const GameHeader = ({
  title = 'Game',
  score = 0,
  onBack,
  onMenu,
  showTimer = false,
  time = 0,
  style,
  ...props
}) => {
  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <View style={[styles.header, style]} {...props}>
      <View style={styles.leftSection}>
        {onBack && (
          <TouchableOpacity style={styles.button} onPress={onBack}>
            <Text style={styles.buttonText}>← Back</Text>
          </TouchableOpacity>
        )}
      </View>
      
      <View style={styles.centerSection}>
        <Text style={styles.title}>{title}</Text>
        {showTimer && (
          <Text style={styles.timer}>Time: {formatTime(time)}</Text>
        )}
      </View>
      
      <View style={styles.rightSection}>
        {onMenu && (
          <TouchableOpacity style={styles.button} onPress={onMenu}>
            <Text style={styles.buttonText}>☰ Menu</Text>
          </TouchableOpacity>
        )}
        <Text style={styles.score}>Score: {score}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 15,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  leftSection: {
    flex: 1,
    alignItems: 'flex-start',
  },
  centerSection: {
    flex: 2,
    alignItems: 'center',
  },
  rightSection: {
    flex: 1,
    alignItems: 'flex-end',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#2c3e50',
  },
  timer: {
    fontSize: 12,
    color: '#7f8c8d',
    marginTop: 2,
  },
  score: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#27ae60',
  },
  button: {
    padding: 8,
    borderRadius: 5,
    backgroundColor: '#3498db',
  },
  buttonText: {
    color: 'white',
    fontSize: 12,
    fontWeight: 'bold',
  },
});

module.exports = GameHeader;