connect4 Game - React Component Library

Una librería de componentes React para el juego Connect Four (connect4).

Instalación

npm install @barcelonadev/puzzle-game
# o
yarn add @barcelonadev/puzzle-game

Compatibilidad de Versiones

Esta librería está diseñada para ser compatible con cualquier versión de React desde la 16.8.0 en adelante (que incluye React Hooks). Las dependencias de React están configuradas como peerDependencies, lo que significa que:

• No se incluye React en el bundle de la librería
• Usa la versión de React del proyecto padre
• Evita conflictos de versiones y duplicación de código
• Reduce el tamaño final de tu aplicación

Si tu proyecto usa React 16.8+, 17.x, 18.x, o 19.x, esta librería funcionará sin problemas.

Uso

Importación básica

import { connect4Game } from '@barcelonadev/puzzle-game';
import '@barcelonadev/puzzle-game/style.css';

function App() {
  return (
    <div>
      <h1>Mi Juego de Connect Four</h1>
      <connect4Game />
    </div>
  );
}

Con configuración personalizada

import { connect4Game } from '@barcelonadev/puzzle-game';
import '@barcelonadev/puzzle-game/style.css';

function App() {
  const handleGameEnd = (winner: string | null) => {
    if (winner) {
      console.log(`¡Ganador: ${winner}!`);
    } else {
      console.log('¡Empate!');
    }
  };

  return (
    <connect4Game
      onGameEnd={handleGameEnd}
      boardSize={{ rows: 6, cols: 7 }}
    />
  );
}

Formatos Soportados

Esta librería está construida con múltiples formatos para máxima compatibilidad:

• ES Modules (ESM): Para bundlers modernos (Vite, Webpack 5+, Rollup)
• CommonJS (CJS): Para Node.js y bundlers antiguos
• UMD: Para uso directo en navegador

Desarrollo

Instalación de dependencias

npm install

Desarrollo local

npm run dev

Construcción

# Construir solo la librería
npm run build

# Construir librería + tipos TypeScript
npm run build:all

# Limpiar dist
npm run clean

Publicación

npm version patch  # o minor/major
npm publish

Estructura del Proyecto

src/
├── connect4/
│   ├── components/     # Componentes React
│   ├── hooks/         # Custom hooks
│   ├── dto/           # Data Transfer Objects
│   ├── provider.tsx   # Context provider
│   └── index.tsx      # Punto de entrada
├── app.tsx            # App de desarrollo
└── main.tsx           # Entry point de desarrollo

Tecnologías

• React 16.8+ (compatible con 16.8, 17.x, 18.x, 19.x)
• TypeScript
• Vite
• CSS Modules
• ESLint + Prettier

Troubleshooting

Error de versión de React

Si encuentras errores relacionados con versiones de React, asegúrate de que:

1. Tu proyecto tenga React instalado (versión 16.8.0 o superior)
2. No haya conflictos de versiones en tu package.json
3. Si usas npm, ejecuta npm ls react para verificar que solo hay una versión

Error de módulos

Si tienes problemas con la importación, verifica que tu bundler soporte ES modules. Para proyectos más antiguos, puedes usar la versión CommonJS:

const { connect4Game } = require('@barcelonadev/puzzle-game');

Licencia

MIT