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

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`
`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://abozanona.github.io/pacman-contribution-graph/embeded/svg.html?username=yourusername&platform=github" />

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/github-action@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