Descripción • Instalación • Estructura • Uso • Próximos pasos • Licencia
Un nonograma es un juego de ingenio que se ha popularizado con los juegos Picross. Se basan en el estado de las celdas de una cuadrícula, que pueden estar vacías o rellenas. Para averiguar el estado de las celdas hay que servirse de las pistas, que línea a línea indican cuántas celdas estan rellenas y cómo se agrupan.
Para más detalles sobre cómo jugar, revisa 🚧cómo jugar🚧.
Picreact es una versión de este juego desarrollada en React con TypeScript. En lugar de cargar puzles ya creados, Picreact te da la posibilidad de generar puzles aleatorios o crear (y compartir) los tuyos propios. Además, el estado del puzle que estes resolviendo queda almacenado en el navegador para no perder tu progreso al cerrar.
Los puzles pueden tener más de una solución, para resolverlos solo tienes que satisfacer todas las pistas de filas y columnas, no igualar el estado original. Es decir, en ciertos casos puedes crear un puzle y al resolverlo hacerlo con un estado diferente al orginal.
El proyecto está generado con Create React App con el template de TypeScript.
A pesar de ser un proyecto pequeño y no considerarlo necesario, he decidido aplicar code splitting para probar lazy y Suspense de React.
Para los estilos he usado PostCSS. Al necesitar configuración propia de webpack para hacerlo funcionar, he optado por usar CRACO (Create React App Configuration Override), que permite sobrescribir configuraciones de webpack sin necesidad de hacer eject. He usado características de CSS stage 3 y reglas anidadas.
Para los iconos he generado componentes a partir de imágenes SVG y las fuentes de texto usadas son del sistema, de esta forma no he necesitado ningún asset para el proyecto.
Para gestionar las rutas uso wouter, ya que es muy ligero y más que suficiente para un proyecto como este.
Instrucciones para instalar y/o probar el proyecto. Puedes instalarlo localmente, o como un contenedor docker, o probarlo directamente en la versión desplegada en vercel.
La última versión de la aplicación se encuentra desplegada en Vercel para que la tengas disponible en un solo click:
Necesitas node y npm para instalar este proyecto en local.
- Clona el proyecto:
git clone git@github.com:bgonp/picreact.git && cd picreact - Instala las dependencias:
npm install - Con las dependencias instaladas, puedes optar por desplegarlo en entorno de desarrollo o crear la build y servirla por tí mismo:
- Desplegar entorno de desarrollo:
npm start - Generar los estáticos (en /build):
npm run build
- Desplegar entorno de desarrollo:
Si te es más cómodo, puedes levantar un contenedor con todo lo necesario. Necesitas docker y docker-compose.
- Clona el proyecto:
git clone git@github.com:bgonp/picreact.git && cd picreact - Levanta el contenedor:
docker-compose up -d - Listo, la aplicación esta accesible en el puerto 8080
picreact
├── build # Archivos estáticos generados.
├── public # Archivo html de entrada. No hay assets.
├── src
│ ├── components # Componentes de la aplicación.
│ │ └── icons # Components de iconos.
│ ├── constants # Constantes para controlar urls, tiempos, rutas...
│ ├── contexts # Contextos usados. Maneja el estado del puzle y los modales.
│ ├── hooks # Custom hooks para el puzle, el modal y el control de clicks.
│ ├── models # Modelos globales TypeScript.
│ ├── pages # Páginas que gestionan cada una de las rutas.
│ ├── router # Gestión de rutas y carga de las páginas correspondientes.
│ ├── styles # Estilos generales de la aplicación
│ │ └── components # Estilos correspondientes a cada componente con CSS Modules.
│ ├── utils # Funciones auxiliares de uso general.
│ └── index.tsx # Punto de entrada que carga el componente padre.
├── .eslintrc # Configuración de eslint. Partiendo de standard.
├── .prettier # Configuración de prettier.
├── craco.config.js # Configuración de webpack complementando la de CRA.
├── package.json # Dependencias del proyecto.
├── postcss.config.js # Configuración de PostCSS.
└── tsconfig.json # Configuración para la transpilación de TypeScript.
Sección NEW, desde aquí puedes elegir un puzle generado aleatoriamente o ir a la página de creación de puzle.
- EASY: Genera un puzle aleatorio de 5x5
- MEDIUM: Genera un puzle aleatorio de 10x10
- HARD: Genera un puzle aleatorio de 15x15
- EXPERT: Genera un puzle aleatorio de 20x20
- CUSTOM: Lleva a la sección de creación de puzle
También puedes acceder a estas secciones desde el menú del header.
Sección PLAY. Desde aquí se resuelve el puzle propuesto. Botón izquierdo del ratón para marcar la casilla como rellena y botón derecho para marcarla como vacía con una X. Pudes pulsar y arrastrar para marcar varias casillas seguidas. Botones laterales:
- Compartir: Copia una URL que al compartirla carga el puzle actual.
- Restaurar: Si te atascas puede ser mejor hacer borrón y cuenta nueva.
- Deshacer: Deshaz tus últimos movimientos si te equivocas (límite fijado a 10).
Si consigues satisfacer todas las pistas de filas y columnas habrás resuelto el puzle. Aún puedes compartirlo o cargar un nuevo puzle.
Sección CREATE. Accede a esta sección desde la página principal o desde el menú principal en el header. Primero elige el tamaño de tu puzle (de 5x5 a 20x20).
Una vez termines tu diseño, guárdalo desde el botón lateral. Ahora puedes resolver tu propio puzle o compartirlo a través de URL desde el botón compartir. Toma, un ejemplo 😉
- HOW_TO_PLAY.md
- Tests (😅)
- Responsive
- i18n
- Readme en inglés
- localForage
- Favicon
- ...