pacman-contribution-graph 1.0.10 → 1.0.12

package/README.md

@@ -1,24 +1,151 @@
-# Pacman Contribution Graph Game
+# Pac-Man Contribution Graph Game
 
-This JavaScript library transforms your GitHub or GitLab contribution graph into an interactive Pac-Man-style game. It offers a unique and engaging way to visualize your coding activity over the past year.
+Transform your GitHub or GitLab contribution graph into an interactive Pac-Man game! This JavaScript library offers a unique and engaging way to visualize your coding activity over the past year.
 
-![Pacman contribution graph](assets/packman-demo.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/abozanona/abozanona/output/pacman-contribution-graph-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/abozanona/abozanona/output/pacman-contribution-graph.svg">
+  <img alt="pacman contribution graph" src="https://raw.githubusercontent.com/abozanona/abozanona/output/pacman-contribution-graph.svg">
+</picture>
 
 ## Features
 
+Elevate your GitHub profile with the Pac-Man Contribution Graph Game and add a playful touch to your coding journey!
+
 - **Contribution Visualization**: Converts your GitHub or GitLab contribution data into a colorful grid.
-- **Interactive Gameplay**: Navigate Pac-Man through your contribution graph, eating dots based on your actual commits.
-- **Platform Support**: Compatible with both GitHub and GitLab contribution data.
-- **Dynamic Grid**: The game grid adapts to your contribution history, with cell colors reflecting commit intensity.
-- **Month Labels**: Displays month names above the grid for easy time reference.
-- **Pac-Man Mechanics**:
-    - Pac-Man moves autonomously towards the nearest contribution cell.
-    - Mouth animation mimics the classic Pac-Man game.
-- **Ghost AI**:
-    - Four ghosts with unique colors chase Pac-Man.
-    - Ghosts have different behaviors when Pac-Man has a power-up.
-- **Power-Up System**: Pac-Man can activate a power-up after eating enough dots, turning ghosts blue and vulnerable.
-- **Scoring**: Points are awarded for eating contribution dots and ghosts.
-- **Game Over**: The game ends when all contribution dots are consumed, with an option to reset.
-
-[Click here to try it out](https://abozanona.github.io/pacman-contribution-graph/)
+- **Interactive Gameplay**: Navigate Pac-Man through your contributions, evading ghosts and collecting pellets.
+- **Multiple Themes**: Choose between different themes, such as GitHub Dark and GitLab Dark.
+- **Customizable Settings**: Adjust game speed, sound preferences, and output format (Canvas or SVG).
+
+## Demo
+
+Experience the game firsthand:
+
+**Live Demo**: [Pac-Man Contribution Game](https://abozanona.github.io/pacman-contribution-graph/)
+
+## Installation
+
+To integrate the Pac-Man Contribution Graph into your project, you can install it via npm:
+
+```bash
+npm install pacman-contribution-graph
+```
+
+Alternatively, include it directly in your HTML using jsDelivr:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/pacman-contribution-graph@1.0.10/dist/index.min.js"></script>
+```
+
+## Usage
+
+Here's how to set up and run the Pac-Man Contribution Graph:
+
+1. **Include the Library**: Ensure the library is included in your project, either via npm or a script tag.
+2. **Initialize the Game**: Use the following code to generate the game:
+
+    ```javascript
+    import { generatePacManGame } from 'pacman-contribution-graph';
+
+    generatePacManGame({
+    	username: 'your_username',
+    	platform: 'github', // or 'gitlab'
+    	theme: 'github-dark', // or 'gitlab-dark'
+    	speed: 2,
+    	sound: true,
+    	output: 'canvas' // or 'svg'
+    });
+    ```
+
+3. **Customize Settings**: Adjust the parameters as needed:
+    - `username`: Your GitHub or GitLab username.
+    - `platform`: Specify `'github'` or `'gitlab'`.
+    - `theme`: Choose between available themes.
+    - `speed`: Set the game speed (e.g., `1` for normal, `2` for fast).
+    - `sound`: Enable or disable sound (`true` or `false`).
+    - `output`: Select `'canvas'` for browser play or `'svg'` for a downloadable animated SVG.
+
+## Integrate into Your GitHub Profile
+
+To showcase the Pac-Man game on your GitHub profile, follow these steps:
+
+1. **Create a Special Repository**:
+
+    - Name a new repository exactly as your GitHub username (e.g., `username/username`).
+    - This repository powers your GitHub profile page.
+
+2. **Set Up GitHub Actions**:
+
+    - In the repository, create a `.github/workflows/` directory.
+    - Add a `main.yml` file with the following content:
+
+        ```yaml
+        name: generate pacman game
+
+        on:
+        schedule: # Run automatically every 24 hours
+            - cron: "0 */24 * * *"
+        workflow_dispatch: # Allows manual triggering
+        push: # Runs on every push to the main 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 generated SVG to the output branch
+            - 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 }}
+        ```
+
+3. **Add to Profile README**:
+
+    - In your repository, create or edit the `README.md` file to include:
+
+        ```markdown
+        ## My Contribution Graph
+
+        <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>
+        ```
+
+4. **Commit and Push**:
+    - Push the changes to GitHub. The GitHub Actions workflow will run daily, updating the Pac-Man game on your profile.
+
+For a detailed guide, refer to the blog post: [Integrate Pac-Man Contribution Graph into Your GitHub Profile](https://abozanona.me/integrate-pacman-contribution-graph-into-github/)
+
+## Contributing
+
+Contributions are welcome! To contribute:
+
+1. Fork the repository.
+2. Create a new branch: `git checkout -b feature-name`.
+3. Make your changes and commit them: `git commit -m 'Add feature'`.
+4. Push to the branch: `git push origin feature-name`.
+5. Submit a pull request.
+
+## Acknowledgements
+
+Inspired by the [snk](https://github.com/Platane/snk) project, which turns your GitHub contribution graph into a snake game. Special thanks to all contributors and the open-source community for their support.
+
+## Online tools that use Pac-Man Contribution Graph Game
+
+- Profile Readme Generator: [Website](https://profile-readme-generator.com/) • [Pull Request](https://github.com/maurodesouza/profile-readme-generator/pull/98)

package/action.yml

@@ -0,0 +1,16 @@
+name: 'generate-pacman-game-from-github-contribution-grid'
+description: 'Generates a Pacman game from a github user contributions grid. Output the animation as svg'
+author: 'abozanona'
+
+runs:
+    using: node20
+    main: github-action/dist/index.js
+
+inputs:
+    github_user_name:
+        description: 'github user name'
+        required: true
+    github_token:
+        description: 'github token used to fetch the contribution calendar. Default to the action token if empty.'
+        required: false
+        default: ${{ github.token }}

package/dist/pacman-contribution-graph.js

@@ -1570,7 +1570,7 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
 
 const getGitlabContribution = (store) => __awaiter(void 0, void 0, void 0, function* () {
     // const response = await fetch(`https://gitlab.com/users/${username}/calendar.json`);
-    const response = yield fetch(`https://v0-new-project-q1hhrdodoye-abozanona-gmailcoms-projects.vercel.app/api/contributions?username=${store.config.username}`);
+    const response = yield fetch(`https://v0-new-project-q1hhrdodoye-abozanona-gmailcoms-projects.vercel.app/api/contributions?username=${store.config.username}`, { cache: 'no-store' });
     const contributionsList = yield response.json();
     return Object.entries(contributionsList).map(([date, count]) => ({
         date: new Date(date),
@@ -1589,8 +1589,10 @@ const getGithubContribution = (store) => __awaiter(void 0, void 0, void 0, funct
             if ((_a = store.config.githubSettings) === null || _a === void 0 ? void 0 : _a.accessToken) {
                 headers['Authorization'] = 'Bearer ' + store.config.githubSettings.accessToken;
             }
+            headers['Cache-Control'] = 'no-cache';
             const response = yield fetch(`https://api.github.com/search/commits?q=author:${store.config.username}&sort=author-date&order=desc&page=${page}&per_page=1000`, {
-                headers
+                headers,
+                cache: 'no-store'
             });
             const contributionsList = yield response.json();
             isComplete = contributionsList.items.length === 0;