/ontario-melee-leaderboards

Primary LanguageTypeScriptMIT LicenseMIT

Ontario Ranked Slippi Leaderboard

Code powering https://rdrnt.github.io/ontario-melee-leaderboards/#/

Technologies

Fork of CoSlippiLeaderboard

How it works

The leaderboard is built from two programs:

  • [src/] A static react website which displays player data
  • [cron/] A cron job which pulls connect codes from a google sheet, player data from slippi, and writes that data to json files in cron/data/, and then redeploys the static site.

Caveats

  • The undocumented slippi api this depends on may break at any time
  • This project takes extra consideration to avoid slamming the slippi servers with api calls, please be considerate of this.
  • Logic for determining ranks may become out of sync with the official slippi rank logic
  • I'm missing svgs for Master ranks, lol

Getting started

  • Clone git clone https://github.com/rdrnt/ontario-melee-leaderboards
  • (Optional) Run nvm use 18.12.0. This will ensure that you are running the supported version of Node.js. You can nvm installation instructions here.
  • Install dependencies: yarn
  • Run the project: npm start
  • Set your repoPath in settings.js and "homepage" in package.json to your github pages url (e.g. https://rdrnt.github.io/ontario-melee-leaderboards/#/)
  • Create a google form to collect player tags from your region. image
  • Link your google form to a google sheet image
  • Follow directions in https://theoephraim.github.io/node-google-spreadsheet/#/getting-started/authentication?id=service-account to create a service account and credentials to read from the google sheet. Save your creds json file to secrets/creds.json
  • Change spreadsheetID in settings.js to your google sheet ID
  • Edit your crontab to run the cron job every 30 minutes. On linux crontab -e

Example crontab:

# m h  dom mon dow   command
*/30 * * * * /bin/bash /home/grantismo/code/CoSlippiLeaderboard/cron/run.sh

Settings

settings.js file includes all important settings that should be used to setup deployments to gh-pages:

  • title – Base application title
  • cname – Adds CNAME file that allows to use custom domain names with gh-pages
  • repoPath – username.github.io/repoPath for react router to recognize gh-pages paths
  • spreadsheetID - ID for google sheet containing player connect codes. https://docs.google.com/spreadsheets/d/[YOUR ID]

scripts

  • npm start – starts development server with webpack-dev-server
  • npm run build – builds project to production
  • npm run deploy – builds and deploys project to Github pages
  • ./cron/run.sh - manually runs the cron job

Support me

☕ Buy the original creator a coffee