Pac-Man Contributions Game

Turn your GitHub or GitLab contributions into an interactive Pac-Man game!

This project allows you to visualize your contribution graph as a playable Pac-Man game. Set up your preferences, generate the game, and have fun while showcasing your coding activity.

Game Configuration

Platform

Output format

Username:

Theme:

Sounds:

Game Speed: 1

Github Access Token(Generate one):

Player Style:

It might take a second or two

Game Output

Commits count: 0

Configuration Options

Option	Description	Possible Values
`platform`	The platform from which to fetch contribution data	`github`, `gitlab`
`outputFormat`	The format of the game output	`canvas`, `svg`
`canvas`	The canvas element in DOM to render Pacman game into	`typeof HTMLCanvasElement`
`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
`gameSpeed`	The speed of the Pac-Man character in the game	1 (fastest) to 10 (slowest)
`gameTheme`	The visual theme of the game	`github`, `github-dark`, `gitlab`, `gitlab-dark`
`playerStyle`	Pacman movement style	`conservative`, `aggressive`, `opportunistic`
`enableSounds`	Enable or disable game sounds(only in canvas mode)	`true`, `false`

How to Use

Method 1: NPM Package

npm install pacman-contribution-graph

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

const pr = new PacmanRenderer({
    platform: 'github',
    username: 'yourusername',
    canvas: document.getElementById('canvas'),
    outputFormat: 'canvas',
    gameTheme: 'github'
});
pr.start();

Method 2: Script loading

<script type="module">
import { PacmanRenderer } from 'https://cdn.jsdelivr.net/npm/pacman-contribution-graph/dist/pacman-contribution-graph.min.js';
const pr = new PacmanRenderer({
    platform: 'github',
    username: 'yourusername',
    canvas: document.getElementById('canvas'),
    outputFormat: 'canvas',
    gameTheme: 'github'
});
pr.start();
</script>

Method 3: Iframe/Image Embedding


<!-- For canvas -->
<iframe src="https://abozanona.github.io/pacman-contribution-graph/embeded/canvas.html?username=yourusername&platform=github" 
    width="800" height="600" frameborder="0"></iframe>
<!-- For SVG -->
<img src="https://pacman.abozanona.me?username=yourusername" />

Method 4: Github Actions

Create a new repository with the same name as your github username

Create .github/workflows/main.yml in your github repo with the following content

name: generate pacman game

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: 5

	steps:
		- name: generate pacman-contribution-graph.svg
		uses: abozanona/pacman-contribution-graph@main
		with:
			github_user_name: ${{ github.repository_owner }}

		# push the content of  to a branch
		# the content will be available at https://raw.githubusercontent.com//// , or as github page
		- name: push pacman-contribution-graph.svg 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 }}

Create README.md file in your github repo with the following content. Change `[USERNAME]` with your github username

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

_generated with [abozanona/pacman-contribution-graph](https://abozanona.github.io/pacman-contribution-graph/)_

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

Method 5: Gitlab Pipeline

Create a new repository with the same name as your gitlab username
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`.

In the repository, create a .gitlab-ci.yml file with the following content

stages:
	- generate
	- deploy

variables:
	GIT_SUBMODULE_STRATEGY: recursive

generate_pacman_graph:
	stage: generate
	image: node:20
	script:
		- mkdir -p dist
		- npm install -g pacman-contribution-graph
		- pacman-contribution-graph --platform gitlab --username "$CI_PROJECT_NAMESPACE" --gameTheme gitlab --output pacman-contribution-graph-light.svg
		- mv pacman-contribution-graph-light.svg dist/pacman-contribution-graph-light.svg
		- pacman-contribution-graph --platform gitlab --username "$CI_PROJECT_NAMESPACE" --gameTheme gitlab-dark --output pacman-contribution-graph-dark.svg
		- mv pacman-contribution-graph-dark.svg dist/pacman-contribution-graph-dark.svg
	artifacts:
		paths:
			- dist/pacman-contribution-graph-light.svg
			- dist/pacman-contribution-graph-dark.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/pacman-contribution-graph-light.svg output/
		- cp dist/pacman-contribution-graph-dark.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 "pacman-bot@example.com"
		- git config --global user.name "Pacman Bot"
		- git add output/pacman-contribution-graph-light.svg output/pacman-contribution-graph-dark.svg
		- git commit -m "Update Pac-Man contribution graph [ci skip]" || echo "No changes"
		- git push origin HEAD:main
	rules:
		- if: '$CI_PIPELINE_SOURCE == "schedule"'
		- if: '$CI_PIPELINE_SOURCE == "push"'

Create README.md file in your gitlab repo with the following content. Change `[USERNAME]` with your github username

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

_generated with [abozanona/pacman-contribution-graph](https://abozanona.github.io/pacman-contribution-graph/)_

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).
That's it! You can also check my gitlab repo @abozanona for an example

Method 6: Using cli

Run npm install -g pacman-contribution-graph
Run pacman-contribution-graph --platform gitlab --username username --gameTheme github --output output.svg