DEV Community

Cover image for Using GitHub Actions to turn contributors into heroes of an open source game
Paula Santamaría
Paula Santamaría

Posted on

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!

Screenshot showing how the info is used in the game's main menu. The avatar and username are presented as "the explorer". The commit hash is the "experiment number" and the PR title is the "log entry"

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:

A gif showing the game's main menu with the info from the latest PR and then the gameplay, which is an astronaut floating over a planet and dodging spikey things

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 }}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (21)

Collapse
 
mauro_codes profile image
Mauro Garcia • Edited

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:
game main menu

And this this how my character looks:
character in game

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

Collapse
 
paulasantamaria profile image
Paula Santamaría

Hahah that's the idea!

Here's how Mauro's contribution looks:

Collapse
 
shadowruge profile image
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

Collapse
 
michaeltharrington profile image
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!!

Collapse
 
paulasantamaria profile image
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!

Collapse
 
michaeltharrington profile image
Michael Tharrington

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

Collapse
 
star_trooper profile image
Atharva Shirdhankar

Awesome game + GitHub Action 😃🚀

Collapse
 
star_trooper profile image
Atharva Shirdhankar

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

Collapse
 
paulasantamaria profile image
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 :)

Collapse
 
poolad profile image
MJ Pooladkhay

Nice idea 🔥

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thanks Mo :). It was a fun project.

Collapse
 
neilblaze profile image
Pratyay Banerjee

Just one word — Amazing!

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thank you!

Collapse
 
granthair5 profile image
Grant Hair

Damn this is cool, game looks awesome!

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thanks :D

Collapse
 
jenlooper profile image
Jen Looper

This is the coolest! Well done!

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thanks Jen! It was a fun project 😊

Collapse
 
sachmata profile image
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/

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thanks for sharing Martin! Really cool project 🙌

Collapse
 
ful1e5 profile image
Kaiz Khatri

Amazing <3 <3

Collapse
 
paulasantamaria profile image
Paula Santamaría

Thanks, glad you liked it!