by giodss



A Raid Finder For The Game Grand Blue Fantasy

Hosted at

Click here to make a new Heroku dyno with this site pre-installed! Deploy

Example of Website


Please remember to change/remove the Google Analytics code at the bottom of index.html if you are cloning this repository!

Installing Dependencies

After cloning or downloading the source code, make sure that you have Node.js and NPM installed and setup in your PATH. All the other dependencies will be installed when the command npm install is run in the root directory of the site. Semantic UI is set to automatically install itself during this process. The next step would be to setup the environment variables as shown in the next section. The site's server can then be started with node index.js or npm start.

Setting Up The Environment Variables

Setting up the environment variables is necessary for using the Twitter API.

Twitter App Page

  1. Go to the Twitter app page and create a new app. The application details don't matter too much.

Twitter App Details Page

  1. Make sure you app has read and write permissions in the permissions tab.

Twitter App Key Create Page Twitter App Access Create Page

  1. The Keys and Access Tokens tab already contains two of the four keys you need: the Consumer Key and the Consumer Secret. To create the other two, click on the "Create my access token" button. Now, the page will refresh and the other two keys will appear: the Access Token and the Access Token Secret.
  2. These 4 keys will need to be setup in your environment. See below on how to do so in Heroku.

Using The Environment Variables in Heroku

Twitter App Access Create Page

  1. Go to your app's settings page. There will be a "Reveal Config Vars" button.
  2. Enter all 4 keys and their corresponding values: consumer_key, consumer_secret, access_token_key, access_token_secret.
  3. Restart your dynos.
  4. App should work now!

Adding New Raids

Raid Structure

  1. Add the raid to the raids.json file in the root of the project.

Raid Image Folder

  1. Add the raid cover image to the static/assets/raids folder. You can get this image from the GBF wiki.

Adding New Sound Notifications

Sounds Folder

  1. Add the sound file to the static/assets/sounds folder.

Sounds Loading

  1. Load the sound file in the top of main.js.

Sounds Playing

  1. Add playing the sound file in the PlaySoundNotif function in main.js.

Sound Option In HTML

  1. Add the option in the sound choice control in index.html.

Sound Option In JS

  1. Add the option in the CreateSettingsModalFrame function in settings.js.