Hay dos formas de contribuir a este proyecto. Puedes contribuir agregando o cambiando un pixel en el canvas, o puedes hacer una contribución al proyecto en si, por ejemplo agregando tests, actualizando el HTML o la documentación.
Para ambos escenarios la configuración es la misma, pero los pasos para contribuir son diferentes.
Contribuir a código abierto puede ser intimidante. Por esa misma razón, creamos una misión nueva en TwilioQuest que te guiará paso a paso para crear una contribución a este proyecto. Después de descargar el juego, podrás elegir la misión y ésta te guiará a través de todos los pasos necesarios, desde clonar el proyecto hasta crear tu pull request.
¡Disfruta la aventura!
- Una cuenta de GitHub
- Tener git instalado en tu computador. Aprende aquí como instalarlo
- Node.js y un administrador de paquetes como npm
- Crea un fork de este proyecto
- Clona el proyecto ejecutando en tu terminal:
git clone https://github.com/<TU_USUARIO_DE_GITHUB>/open-pixel-art.git- Instala las dependencias para desarrollar localmente:
cd open-pixel-art
npm install- Inicia el servidor local de desarrollo:
npm start- Abre tu navegador y anda a http://localhost:8080. Deberías ver el mismo contenido que está en https://open-pixel-art.com, pero esta versión tendrá una grilla para ayudarte a visualizar mejor el canvas y que puedas ubicar tu pixel de manera más sencilla.
Si quieres contribuir con un pixel, deberás modificar el archivo que reside en _data/pixels.json. Este archivo contiene todos los pixeles que están actualmente en el canvas.
Hay dos formas diferentes para contribuir con un pixel:
Hay algunos pixeles que ya existen en el archivo pixels.json, pero en la propiedad username tienen un valor de <UNCLAIMED>. Esto significa que puedes cambiar ese valor y hacerlos tuyos, y cambiar el color al que tu quieras. Luego de hacer ese cambio, deberás actualizar la propiedad username y cámbiarla por tu usuario de GitHub, que debe ser el mismo con el que abrirás el pull request.
Para crear un pixel nuevo, agrega una fila nueva al arreglo data que esta dentro de pixels.json.
Cada nuevo pixel debe ser un objeto que debe contener las siguientes cuatro propiedades:
x: La coordenada x de tu pixel.0representa la columna más a la izquierda del canvas.y: La coordenada y de tu pixel.0representa la fila que está más abajo en el canvas.color: El color de tu pixel, en formato hexadecimal (Ejemplo: #ff0000 para rojo).username: El usuario de GitHub que usarás para abrir el pull request.
La fila de tu pixel va a tomar en cuenta primero la coordenada y y luego la coordenada x. Si no estás seguro de tus cambios, puedes hacerlos y ejecutar npm run format:json y esto ajustará tu pixel a la posición adecuada.
El cambio final debería verse así (reemplazando dkundel por tu usuario de GitHub):
{
"data": [
{"y": 1, "x": 3, "color": "#F22F46", "username": "twilio-labs"},
+ { "y": 1, "x": 4, "color": "#FFFF00", "username": "dkundel"},
{"y": 2, "x": 9, "color": "#F22F46", "username": "twilio"},
...
]
}Después de hacer el cambio, deberías ver el nuevo pixel al abrir http://localhost:8080 en tu navegador. Si no estás satisfecho con la posición, puedes seguir ajustando los valores x e y hasta que encuentres el lugar apropiado y si necesitas ajustar el color, puedes hacer lo mismo, pero cambiando la propiedad color del objeto.
Finalmente, puedes validar que los cambios estén bien ejecutando los tests y revisando que todos sigan pasando. Puedes hacer esto en una nueva terminal, ejecutando:
npm testUna vez que estés satisfecho con tus cambios y estén validados, crea una rama para que puedas guardar tus cambios.
git checkout -b add-my-new-pixelLuego, guarda tus cambios haciendo un commit, ejecutando lo siguiente:
git add _data/pixels.json
git commit -m "feat(pixels): add my new pixel"Esto creará un nuevo commit con el mensaje feat(pixels): add my new pixel. Este mensaje de commit se rige por el Conventional Commits Standard.
Sube tus cambios a GitHub ejecutando en tu consola:
git push origin add-my-new-pixelY luego sigue estas instrucciones para abrir un pull request desde tu fork hacia la rama master de github.com/twilio-labs/open-pixel-art.
Te agradecemos el interés de contribuir a este proyecto con otros cambios. Antes de empezar a trabajar en el código, por favor revisa si existe un issue en GitHub para esos cambios. Si no lo hay, por favor abre uno. Y si ya existe uno, deja un comentario para que sepamos que estás trabajando en ese cambio.
Después de hacer tus cambios, sigue los pasos listados más arriba para hacer tu contribución.
Cuando abras tu pull request, asegúrate de descomentar la sección de "additional info" en la descripción del pull request, agrega detalles de los cambios y una referencia al issue relacionado a estos.
open-pixel-art
├── .all-contributorsrc
├── .eleventy.js
├── .eleventyignore
├── .git
├── .github
├── .gitignore
├── .mergify.yml
├── .prettierrc
├── .vscode
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── __tests__
├── _data
├── assets
├── dangerfile.js
├── index.njk
├── package-lock.json
├── package.json
└── styles
Este proyecto usa Eleventy. Estos son los archivos de configuración del proyecto.
Este proyecto usa Mergify para incluir automáticamente ciertos PRs, basados en condiciones definidas internamente.
Este directorio contiene todos los tests unitarios, y usamos Jest para ejecutarlos.
El directorio _data contiene el archivo pixels.json que representa cada pixel que existe en el canvas, un archivo defaults.json que contiene algunos valores por defecto como el tamaño del canvas, y un archivo env.js con valores relacionados a los ambientes de la aplicación. Todos los datos estarán automáticamente disponibles en el archivo index.njk.
Este directorio contiene recursos estáticos.
Este proyecto usa Danger para algunas validaciones y revisiones de código. Este archivo contiene la lógica para eso.
Esta es el archivo de la plantilla que usamos para generar el HTML del sitio.
Este directorio contiene todos los estilos personalizados. Los estilos de index.njk están en styles/main.css.
Queremos que este proyecto sea lo más amigable y acogedor posible. Si interactuas con este proyecto de cualquier forma, estás de acuerdo en adoptar y respetar el Código de Conducta del proyecto. Si sientes que alguien involucrado en este proyecto ha realizado alguna acción que atente contra este Código de Conducta, por favor avísanos enviando un correo electrónico a [email protected] para tomar las medidas necesarias.
Todos las contribuciones realizadas serán integradas bajo la misma licencia de código abierto que utiliza este proyecto.