Ui is perfectly fine but I want that I am playing it with computer so don't make it for 4player and make it 2 player in which one is me and other is computer which automically roll dice and play according to their mind and one problem is that pieces are not moving when i click them for play so solve these problems "import React, { useState, useEffect } from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
  Text,
  Animated,
  Dimensions,
} from 'react-native';

const BOARD_SIZE = Dimensions.get('window').width * 0.9;
const CELL_SIZE = BOARD_SIZE / 15;
const PIECE_SIZE = CELL_SIZE * 0.8;

// Colors for different players
const COLORS = {
  RED: '#ff4d4d',
  GREEN: '#4CAF50',
  YELLOW: '#FFEB3B',
  BLUE: '#2196F3',
  WHITE: '#FFFFFF',
  GRAY: '#E0E0E0',
  BLACK: '#000000',
};

// Initial positions for pieces in home
const INITIAL_POSITIONS = {
  RED: [
    { x: 1, y: 1 },
    { x: 1, y: 2 },
    { x: 2, y: 1 },
    { x: 2, y: 2 },
  ],
  GREEN: [
    { x: 1, y: 13 },
    { x: 1, y: 12 },
    { x: 2, y: 13 },
    { x: 2, y: 12 },
  ],
  BLUE: [
    { x: 13, y: 1 },
    { x: 13, y: 2 },
    { x: 12, y: 1 },
    { x: 12, y: 2 },
  ],
  YELLOW: [
    { x: 13, y: 13 },
    { x: 13, y: 12 },
    { x: 12, y: 13 },
    { x: 12, y: 12 },
  ],
};

// Path coordinates for each player
const PATHS = {
  RED: [
    // Starting point and common path
    { x: 6, y: 1 }, { x: 6, y: 2 }, { x: 6, y: 3 }, { x: 6, y: 4 }, { x: 6, y: 5 },
    { x: 5, y: 6 }, { x: 4, y: 6 }, { x: 3, y: 6 }, { x: 2, y: 6 }, { x: 1, y: 6 },
    { x: 1, y: 7 }, { x: 1, y: 8 },
    // ... Rest of the path
  ],
  // Similar paths for other colors
};

const App = () => {
  const [gameState, setGameState] = useState({
    currentPlayer: 'RED',
    diceValue: null,
    pieces: {
      RED: Array(4).fill({ position: -1, isHome: true }),
      GREEN: Array(4).fill({ position: -1, isHome: true }),
      BLUE: Array(4).fill({ position: -1, isHome: true }),
      YELLOW: Array(4).fill({ position: -1, isHome: true }),
    },
  });

  const [diceAnimation] = useState(new Animated.Value(0));
  const [isRolling, setIsRolling] = useState(false);

  // Function to roll dice
  const rollDice = () => {
    if (isRolling) return;
    setIsRolling(true);

    Animated.sequence([
      Animated.timing(diceAnimation, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }),
      Animated.timing(diceAnimation, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true,
      }),
    ]).start(() => {
      const value = Math.floor(Math.random() * 6) + 1;
      setGameState(prev => ({ ...prev, diceValue: value }));
      setIsRolling(false);
      
      // If it's computer's turn, make a move
      if (gameState.currentPlayer !== 'RED') {
        setTimeout(computerMove, 1000);
      }
    });
  };

  // Computer move logic
  const computerMove = () => {
    const currentColor = gameState.currentPlayer;
    const pieces = gameState.pieces[currentColor];
    const diceValue = gameState.diceValue;

    // Simple AI logic: Move the first valid piece
    let moved = false;
    for (let i = 0; i < pieces.length; i++) {
      if (isValidMove(currentColor, i, diceValue)) {
        movePiece(currentColor, i);
        moved = true;
        break;
      }
    }

    if (!moved) {
      nextTurn();
    }
  };

  // Check if move is valid
  const isValidMove = (color, pieceIndex, steps) => {
    const piece = gameState.pieces[color][pieceIndex];
    
    // If piece is in home and dice shows 6
    if (piece.isHome && steps === 6) return true;
    
    // If piece is on board
    if (!piece.isHome) {
      const newPosition = piece.position + steps;
      // Check if new position is within bounds and not occupied
      return newPosition < PATHS[color].length;
    }

    return false;
  };

  // Move piece logic
  const movePiece = (color, pieceIndex) => {
    setGameState(prev => {
      const newState = { ...prev };
      const piece = newState.pieces[color][pieceIndex];
      
      if (piece.isHome && prev.diceValue === 6) {
        piece.isHome = false;
        piece.position = 0;
      } else if (!piece.isHome) {
        piece.position += prev.diceValue;
      }

      return newState;
    });

    nextTurn();
  };

  // Next turn logic
  const nextTurn = () => {
    const turns = ['RED', 'GREEN', 'BLUE', 'YELLOW'];
    setGameState(prev => ({
      ...prev,
      currentPlayer: turns[(turns.indexOf(prev.currentPlayer) + 1) % 4],
      diceValue: null,
    }));
  };

  // Render game board
  const renderBoard = () => {
    const cells = [];
    for (let i = 0; i < 15; i++) {
      for (let j = 0; j < 15; j++) {
        cells.push(
          <View
            key={`${i}-${j}`}
            style={[
              styles.cell,
              getCellStyle(i, j),
            ]}
          />
        );
      }
    }
    return cells;
  };

  // Get cell style based on position
  const getCellStyle = (i, j) => {
    // Home area styles
    if (i < 6 && j < 6) return { backgroundColor: COLORS.RED };
    if (i < 6 && j > 8) return { backgroundColor: COLORS.GREEN };
    if (i > 8 && j < 6) return { backgroundColor: COLORS.BLUE };
    if (i > 8 && j > 8) return { backgroundColor: COLORS.YELLOW };

    // Path styles
    if ((i === 7 && j < 6) || (i === 7 && j > 8)) return { backgroundColor: COLORS.GRAY };
    if ((j === 7 && i < 6) || (j === 7 && i > 8)) return { backgroundColor: COLORS.GRAY };

    return { backgroundColor: COLORS.WHITE };
  };

  // Render pieces
  const renderPieces = () => {
    const pieces = [];
    Object.entries(gameState.pieces).forEach(([color, colorPieces]) => {
      colorPieces.forEach((piece, index) => {
        if (piece.isHome) {
          const homePos = INITIAL_POSITIONS[color][index];
          pieces.push(
            <View
              key={`${color}-${index}`}
              style={[
                styles.piece,
                {
                  backgroundColor: COLORS[color],
                  left: homePos.x * CELL_SIZE,
                  top: homePos.y * CELL_SIZE,
                },
              ]}
            />
          );
        } else {
          const pathPos = PATHS[color][piece.position];
          pieces.push(
            <View
              key={`${color}-${index}`}
              style={[
                styles.piece,
                {
                  backgroundColor: COLORS[color],
                  left: pathPos.x * CELL_SIZE,
                  top: pathPos.y * CELL_SIZE,
                },
              ]}
            />
          );
        }
      });
    });
    return pieces;
  };

  // Render dice
  const renderDice = () => {
    return (
      <Animated.View
        style={[
          styles.dice,
          {
            transform: [
              {
                rotate: diceAnimation.interpolate({
                  inputRange: [0, 1],
                  outputRange: ['0deg', '360deg'],
                }),
              },
            ],
          },
        ]}
      >
        <Text style={styles.diceText}>
          {gameState.diceValue || '?'}
        </Text>
      </Animated.View>
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.boardContainer}>
        <View style={styles.board}>
          {renderBoard()}
          {renderPieces()}
        </View>
      </View>
      
      <View style={styles.controls}>
        <Text style={styles.turnText}>
          Current Turn: {gameState.currentPlayer}
        </Text>
        <TouchableOpacity
          style={styles.rollButton}
          onPress={rollDice}
          disabled={isRolling || gameState.currentPlayer !== 'RED'}
        >
          <Text style={styles.rollButtonText}>Roll Dice</Text>
        </TouchableOpacity>
        {renderDice()}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  boardContainer: {
    width: BOARD_SIZE,
    height: BOARD_SIZE,
    backgroundColor: '#fff',
    borderRadius: 10,
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  board: {
    width: '100%',
    height: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  cell: {
    width: CELL_SIZE,
    height: CELL_SIZE,
    borderWidth: 0.5,
    borderColor: '#ccc',
  },
  piece: {
    position: 'absolute',
    width: PIECE_SIZE,
    height: PIECE_SIZE,
    borderRadius: PIECE_SIZE / 2,
    borderWidth: 2,
    borderColor: '#fff',
  },
  controls: {
    marginTop: 20,
    alignItems: 'center',
  },
  dice: {
    width: 60,
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
  },
  diceText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  turnText: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  rollButton: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
    marginBottom: 10,
  },
  rollButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default App;"