إضافة لعبة Pacman لحسابك الشخصي في Github

عملت في الأسبوع اماضي على تطوير لعبة بسيطة تضيف لمسة مرحة وتفاعلية إلى ملفي الشخصي على GitHub.

الفكرة عبارة عن لعبة Pacman, بحيث تأكل الشخصية Pacman المساهمات على شبكة الإسهامات الخاصة بك, وفي حال أن أكلت عددا كافيا من النقاط فبإمكانك أكل الأشباح أيضا.

يمكنك دمج لعبة Pac-Man داخل صفحتك الشخصية في Github باستخدام GitHub Actions! هذه الطريقة تقوم بتحديث ملفك الشخصي تلقائيًا كل 24 ساعة مع رسوم متحركة للعبة Pac-Man التي تتحرك عبر المساهمات الخاصة بك. إليك كيفية إعدادها:

الخطوة 1: إنشاء مستودع جديد

ابدأ بإنشاء مستودع جديد بنفس اسم مستخدم GitHub الخاص بك. هذا المستودع الخاص هو الذي يشغل صفحة ملفك الشخصي على GitHub.

الخطوة 2: إعداد GitHub Actions

داخل مستودعك، قم بإنشاء ملف سير العمل لتوليد وتحديث لعبة Pac-Man تلقائيًا.

1. انتقل إلى مستودعك

2. أنشئ مجلدًا جديدًا: `.github/workflows/`

3. داخل هذا المجلد، أنشئ ملفًا يسمى `main.yml`

4. أضف المحتوى التالي:

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/github-action@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: إضافة مخطط Pac-Man إلى ملف README في ملفك الشخصي

الآن، دعنا ندمج المخطط المُولد في ملفك الشخصي.

1. في مستودعك، أنشئ ملف `README.md` (أو قم بتحرير ملف موجود).

2. أضف المحتوى التالي:

<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/)_

📌 لا تنسَ استبدال [USERNAME] باسم المستخدم الفعلي على GitHub!

```

الخطوة 4: رفع التغييرات!

قم برفع التغييرات إلى GitHub. خلال دقائق، سيظهر في ملفك الشخصي لعبة Pac-Man تتحرك عبر مخطط المساهمات الخاص بك! 🎮

لرؤية مثال حقيقي، يمكنك زيارة مستودع GitHub الخاص بـ abozanona على هذا الرابط

. كما يمكنك زيارة صفحة المشروع الرئيسية لاستكشاف طرق أخرى لدمج اللعبة https://abozanona.github.io... .

🛠 هذه الأداة ما زالت في مرحلة التطوير. إذا لاحظت أي مشكلة أو كان هناك شيء يحتاج إلى تعديل، لا تتردد في فتح Issue على GitHub. وإذا كنت ترغب في المساهمة بشكل أكبر، يمكنك إنشاء Pull Request!

💻 جرب الأداة: لا تتردد في تجربة الأداة على صفحة المشروع في GitHub هنا: https://abozanona.github.io...

لأن التنسيق على موقع حسوب صعب قليلا, بإمكانك قراءة المقال على مدونتي أيضا