Contribution Graph Games

Game Configuration

Generate It might take a second or two

Game Output

Configuration Options

Option	Description	Possible Values
game	The arcade game to generate	loading...
platform	The platform from which to fetch contribution data	loading...
scenario	The predefined contribution scenario to use when platform is set to scenario	loading...
svgCallback	A callback function that will get called when SVG picture is generated	(animatedSVG: string) => void
gameOverCallback	A callback function that will get called when the game is over	gameOverCallback: () => void;
username	The username of the account to fetch contributions from	Any valid GitHub or GitLab username
gameTheme	The visual theme of the game	github, github-dark, gitlab, gitlab-dark
playerStyle	Pacman movement style	conservative, aggressive, opportunistic

How to Use

Method 1: NPM Package

npm install pacman-contribution-graph

import { ArcadeRenderer } from 'pacman-contribution-graph';

// Replace [game-name] with a valid game name
const pr = new ArcadeRenderer({
    game: '[game-name]',
    platform: 'github',
    username: 'yourusername',
    gameTheme: 'github'
});
pr.start();
</script>

Method 3: Github Actions

1. Create a new repository with the same name as your github username
2. Create .github/workflows/main.yml in your github repo with the following content

   name: generate arcade contribution graphs
   
   on:
   	schedule: # run automatically every 24 hours
   	- cron: "0 */24 * * *"
   	workflow_dispatch: # allows to manually run the job at any time
   	push: # run on every push on the master branch
   	branches:
   		- main
   
   jobs:
   	generate:
   	permissions:
   		contents: write
   	runs-on: ubuntu-latest
   	timeout-minutes: 20
   
   	steps:
   		- name: generate contribution graph SVGs
   		uses: abozanona/pacman-contribution-graph@main
   		with:
   			github_user_name: ${{ github.repository_owner }}
   			# Comma-separated list of valid game names (default: pacman)
   			games: 'pacman,bomberman'
   		- name: push SVGs to the output branch
   		uses: crazy-max/ghaction-github-pages@v3.1.0
   		with:
   			target_branch: output
   			build_dir: dist
   		env:
   			GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

3. Create README.md file in your github repo with the following content. Change [USERNAME] with your github username and [game-name] with a valid game name. Repeat the block for each game you enabled.

   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/[USERNAME]/[USERNAME]/output/[game-name]-contribution-graph-dark.svg">
     <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/[USERNAME]/[USERNAME]/output/[game-name]-contribution-graph.svg">
     <img alt="[game-name] contribution graph" src="https://raw.githubusercontent.com/[USERNAME]/[USERNAME]/output/[game-name]-contribution-graph.svg">
   </picture>
   
   _generated with [abozanona/pacman-contribution-graph](https://abozanona.github.io/pacman-contribution-graph/)_

4. That's it! You can also check my github repo @abozanona for an example

Method 4: Gitlab Pipeline

1. Create a new repository with the same name as your gitlab username
2. Generate & Setup Push Token
   1. Open the repository, and from left sidebar navigate to settings => Access Token tab.
   2. Generate a new Access Token with the name `CI/CD Push Token` & scope `write_repository`. Access tokens are only valid for 1 year maximum.
   3. From left sidebar navigate to settings => CI/CD.
   4. In Variables section, add a new variable with the name `CI_PUSH_TOKEN` and the value of the Access Token. Make sure that the variable is `Masked` & `Protect`.
3. In the repository, create a .gitlab-ci.yml file with the following content. Replace [game-name] with your chosen game. Add one block per game.

   stages:
   	- generate
   	- deploy
   
   variables:
   	GIT_SUBMODULE_STRATEGY: recursive
   
   generate_graphs:
   	stage: generate
   	image: node:20
   	script:
   		- mkdir -p dist
   		- npm install -g pacman-contribution-graph
   		# Replace [game-name] with the game you want; repeat for each game
   		- pacman-contribution-graph --game [game-name] --platform gitlab --username "$CI_PROJECT_NAMESPACE" --gameTheme gitlab --output dist/[game-name]-contribution-graph.svg
   		- pacman-contribution-graph --game [game-name] --platform gitlab --username "$CI_PROJECT_NAMESPACE" --gameTheme gitlab-dark --output dist/[game-name]-contribution-graph-dark.svg
   	artifacts:
   		paths:
   			- dist/*.svg
   		expire_in: 1 hour
   	rules:
   		- if: '$CI_PIPELINE_SOURCE == "schedule"'
   		- if: '$CI_PIPELINE_SOURCE == "push"'
   
   deploy_to_readme:
   	stage: deploy
   	image: alpine:latest
   	script:
   		- apk add --no-cache git
   		- mkdir -p output
   		- cp dist/*.svg output/
   		- git remote set-url origin https://gitlab-ci-token:${CI_PUSH_TOKEN}@gitlab.com/${CI_PROJECT_PATH}.git
   		- git config --global user.email "arcade-bot@example.com"
   		- git config --global user.name "Arcade Bot"
   		- git add output/*.svg
   		- git commit -m "Update arcade contribution graphs [ci skip]" || echo "No changes"
   		- git push origin HEAD:main
   	rules:
   		- if: '$CI_PIPELINE_SOURCE == "schedule"'
   		- if: '$CI_PIPELINE_SOURCE == "push"'

4. Create README.md file in your gitlab repo with the following content. Change [USERNAME] with your gitlab username and [game-name] with the game. Repeat the block for each game you enabled.

   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://gitlab.com/[USERNAME]/[USERNAME]/-/raw/main/output/[game-name]-contribution-graph-dark.svg">
     <source media="(prefers-color-scheme: light)" srcset="https://gitlab.com/[USERNAME]/[USERNAME]/-/raw/main/output/[game-name]-contribution-graph.svg">
     <img alt="[game-name] contribution graph" src="https://gitlab.com/[USERNAME]/[USERNAME]/-/raw/main/output/[game-name]-contribution-graph.svg">
   </picture>
   
   _generated with [abozanona/pacman-contribution-graph](https://abozanona.github.io/pacman-contribution-graph/)_

5. Schedule pipeline running
   • Go to your project in GitLab
   • In the left sidebar, navigate to Build > Pipeline schedules (sometimes under CI/CD > Schedules)
   • Click New schedule
   • In the form:
     • Interval pattern: Enter a cron expression for daily runs. For example, 0 2 \* \* \* to run every day at 2:00 AM (UTC).
     • Timezone: Select your preferred timezone.
     • Target branch: Choose the main branch.
   • Click Save pipeline schedule (or Create pipeline schedule).
6. That's it! You can also check my gitlab repo @abozanona for an example

Method 5: Using cli

1. Run npm install -g pacman-contribution-graph
2. Run the CLI, replacing [game-name] with your chosen game:

   pacman-contribution-graph --game [game-name] --platform github --username your_username --gameTheme github --output [game-name]-contribution-graph.svg