Using GitHub Actions to turn contributors into heroes of an open source game

My Workflow

We already know open source contributors are the heroes of the tech industry. They make our lives easier with their libraries, frameworks, and more. I wanted to use this opportunity to make them into a more literal type of hero inside a game.

So, here's how it works:

My GitHub Actions workflow extracts information from the contributor's PR and uses it to dynamically generate a file that the game will use after being deployed.
To obtain this information from the PR the workflow uses GitHub's API through octokit/request-action@v2.x and saves the relevant data using environment variables that are then used to generate a Contributor.ts file.

Then the workflow builds the whole project, including the generated file, and deploys it to GitHub Pages. So the latest deployment includes the latest PR and contributor information!

Finally, the workflow also generates a copy of each contribution and stores it in an "archive" folder that can be accessed from the deployed website, so contributors can access their contributions live even after another merged PR overrode them.

So, if you contributed, you can always access the deployment from your contribution in https://pawap90.github.io/space-commit/archive/{your-username}.

The game is called "Space commit". It's a simple, side-scroller, open-source game I developed especially for this submission. For the development I used Phaser with TypeScript, ESLint, and Snowpack. I decided to make our heroes astronauts because I thought it captured the essence of open source contributors: They are explorers and science lovers; They get themselves in unexplored territories and enjoy learning.

Here's a quick demo:

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

name: CICD
on:
  push:
    branches: [ main ]

  workflow_dispatch:

jobs:

  build:
    runs-on: ubuntu-latest
    steps:

      # Retrieve contribution data from GitHub API
      - uses: octokit/request-action@v2.x
        name: Retrieve contribution data
        id: get_contribution_data
        with:
          route: GET /repos/{owner}/{repo}/commits/{commit_sha}/pulls
          owner: pawap90
          repo: space-commit
          commit_sha: ${{ github.sha }}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      # Generate env variables to easily access the contribution data
      - name: Store contribution data in env vars
        run: | 
          echo "username=${{ fromJson(steps.get_contribution_data.outputs.data)[0].user.login }}" >> $GITHUB_ENV
          echo "avatar_url=${{ fromJson(steps.get_contribution_data.outputs.data)[0].user.avatar_url }}" >> $GITHUB_ENV
          echo "commit_sha=${{ github.sha }}" >> $GITHUB_ENV
          echo "message=${{ fromJson(steps.get_contribution_data.outputs.data)[0].title }}" >> $GITHUB_ENV


      - name: Print collected data 
        run: | 
          echo "data collected 
                username ${{ env.username }}
                avatar ${{ env.avatar_url }}
                commit sha ${{ env.commit_sha }}
                message ${{ env.message }}"

      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
          cache: 'npm'

      - name: Generate contributor file 
        run: |
          echo "export const Contributor = {
              username: '${{ env.username }}',
              avatar_url: '${{ env.avatar_url }}',
              commit: '${{ env.commit_sha }}',
              message: '${{ env.message }}'
          };" > src/Contributor.ts

      - name: Build project 🔧
        run: | 
          npm install
          npm run build

      # Deploy latest contribution to GitHub pages
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: gh-pages
          folder: _build
          clean: true
          clean-exclude: archive

      # Store build permanently in archive folder so everyone can check previous contributions by username
      - name: Send to archive 📁
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: gh-pages 
          folder: _build
          clean: true
          clean-exclude: archive
          target-folder: archive/${{ env.username }}

Additional Resources / Info

Here's the game repo where this workflow is used: github.com/pawap90/space-commit

And you can play the latest version here: pawap90.github.io/space-commit

Also, I built most of this game live on Twitch. You can check it our here: twitch.tv/paulasantamaria

Comments

[Michael Tharrington]

This is soo awesome! I'm loving the artwork for the game and the mechanics are just the right amount of floaty, haha.

I think the biggest opportunity for improvement in my mind would be some music + sound effects! But totally understand this was only built in a short bit of time. It's still incredibly polished! 🙂

Nice work all around!!

[Paula Santamaría]

Thank you so much Michael!

I actually spent quite some time during one of my streams trying to find just the right amount of floatiness 😂

You are totally right, I didn't have time to work on the music, but then I also forgot to create an Issue for it. Thanks for the suggestion!

[Michael Tharrington]

You're very welcome! And again, really cool game. 🙌

[Mauro Garcia]

Knowing that my face will be included within the game made the entire process of collaboration much more fun 😂

This is how the main menu of the game look like with my contribution:

And this this how my character looks:

In case you want to play the game with my avatar, here's the link

[Paula Santamaría]

Hahah that's the idea!

Here's how Mauro's contribution looks:

[izaias]

Maravilhoso, peço que me perdoe mas tenho que perguntar tenho uma ideia e queria compartilhar aqui pois acho pertinente.
Bom eu vi o seu trabalho e digo novamente maravilhoso, porque não criar um repositório colaborativo com várias áreas da informática, dados programação e afins para projetos que gerem renda para os colaboradores pois basta de se render ao mercado especulativo das empresas, tornemos nossa experiência em renda e ajudado uns aos outros para chegar a um comunidade hiper colaborativa ... Não sei se me expressei de forma correta, mas fica a mensagem, parabéns novamente

[Atharva Shirdhankar]

Awesome game + GitHub Action 😃🚀

[Atharva Shirdhankar]

I like the idea to promote Open Source and even have fun by playing game💯

[Paula Santamaría]

Thank you! I've been having fun playing it too 😂
There a re several improvements I'd like to make, but I decided to leave it for other contributors to chime in :)

[MJ Pooladkhay]

Nice idea 🔥

[Paula Santamaría]

Thanks Mo :). It was a fun project.

[Pratyay Banerjee]

Just one word — Amazing!

[Paula Santamaría]

Thank you!

[Grant Hair]

Damn this is cool, game looks awesome!

[Paula Santamaría]

Thanks :D

[Jen Looper]

This is the coolest! Well done!

[Paula Santamaría]

Thanks Jen! It was a fun project 😊

[Martin Dimitrov]

We had similar idea for a JS challenge as simple Open source game a while ago :) github.com/ChaosGroup/chaos-boats and here is the deployment chaosgroup.github.io/chaos-boats/

[Paula Santamaría]

Thanks for sharing Martin! Really cool project 🙌

[Kaiz Khatri]

Amazing <3 <3

[Paula Santamaría]

Thanks, glad you liked it!