PDFs/MazeRenderer.tsx

import type React from "react"
import { View, StyleSheet } from "react-native"
import type { MazeCell } from "../utils/mazeGenerator"

interface MazeRendererProps {
  maze: MazeCell[][]
  mousePosition: [number, number] | null
}

const MazeRenderer: React.FC<MazeRendererProps> = ({ maze, mousePosition }) => {
  return (
    <View style={styles.container}>
      {maze.map((row, rowIndex) => (
        <View key={rowIndex} style={styles.row}>
          {row.map((cell, cellIndex) => (
            <View
              key={`${rowIndex}-${cellIndex}`}
              style={[
                styles.cell,
                cell.walls.top && styles.topWall,
                cell.walls.right && styles.rightWall,
                cell.walls.bottom && styles.bottomWall,
                cell.walls.left && styles.leftWall,
                cell.isEntry && styles.entryCell,
                cell.isExit && styles.exitCell,
              ]}
            />
          ))}
        </View>
      ))}
      {mousePosition && (
        <View
          style={[
            styles.mouse,
            {
              top: `${(mousePosition[0] * 100) / maze.length}%`,
              left: `${(mousePosition[1] * 100) / maze[0].length}%`,
            },
          ]}
        />
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    aspectRatio: 1,
    width: "100%",
    position: "relative",
  },
  row: {
    flex: 1,
    flexDirection: "row",
  },
  cell: {
    flex: 1,
    aspectRatio: 1,
  },
  topWall: {
    borderTopWidth: 2,
    borderTopColor: "black",
  },
  rightWall: {
    borderRightWidth: 2,
    borderRightColor: "black",
  },
  bottomWall: {
    borderBottomWidth: 2,
    borderBottomColor: "black",
  },
  leftWall: {
    borderLeftWidth: 2,
    borderLeftColor: "black",
  },
  entryCell: {
    backgroundColor: "green",
  },
  exitCell: {
    backgroundColor: "red",
  },
  mouse: {
    position: "absolute",
    width: "10%",
    height: "10%",
    backgroundColor: "yellow",
    borderRadius: 50,
  },
})

export default MazeRenderer