Skip to content

Latest commit

 

History

History
98 lines (71 loc) · 4.13 KB

README.md

File metadata and controls

98 lines (71 loc) · 4.13 KB
Raw

Killer Streak Overlay - Dead By Daylight

This was created for Otzdarva's Twitch Stream. Otzdarva decided to take on a challenge, winning 50 Killer games in a row in Dead By Daylight. This while playing without Add-ons.

While playing, Otz will update a public spreadsheet with data. This data is then process by this service, to display an overlay on his stream with the status of the streak.

It looks something like this: Preview

How does it work?

This service is using Google Apps Script to send an HTTP Request to a Web Server, so it can notify the client (by a Websocket) that a change has been made.

Can I use it for my Stream?

Yes! But please consider giving me credit for the work I put in.

Setup seems complicated, can you host it for me?

If you need a custom version, or a hosted version of this, you can contact me on Discord: andre.paulo, or join this server.

Setup

Requirements

  • NodeJS (tested in v12.18.4)

Instalation

  1. Clone the repository: https://github.com/andre-paulo98/dbd-killer-streak.git.

  2. Install NPM dependencies: npm install.

  3. Copy the example config file to config.js.

  4. Change the config file with an API key:

    • Go to Google API Console: https://console.developers.google.com/projectcreate
    • Create a new Project.
    • Enable APIS and Services.
    • Search for sheets.
    • Select Google Sheets API.
    • Press Enable.
    • Go back to the dashboard (Click on icon, in top left).
    • Select Credentials.
    • Create Credentials.
    • Select API Key.
    • Copy that Key to the config.js file.

  5. Change the ID for the Spreadsheet:

    • Make a copy of Otz's spreadsheet to your account.
    • Share it publicly with a link. Make sure that everyone can see the spreadsheet, (Try in a different browser, or in Incognito mode).
    • Copy the ID, ex: https://docs.google.com/spreadsheets/d/1PVh8RE3uy88YjdOYPA0Xi35b8ReCDteHZo0lFYKw2HI/edit#gid=0 the ID would be 1PVh8RE3uy88YjdOYPA0Xi35b8ReCDteHZo0lFYKw2HI

  6. Setup Google Apps Script to notify on change:

    function alertChanges() {
    var response = UrlFetchApp.fetch("<url>/webhook-send-update");
    console.log("response => ", response);
}

function createSpreadsheetOpenTrigger() {
    var ss = SpreadsheetApp.openById("<spreadsheet ID>");
    ScriptApp.newTrigger('alertChanges')
        .forSpreadsheet(ss)
        .onChange()
        .create();
}
    • Change <url> and <spreadsheet ID> to their respectful values
      • If you aren't running the service behind a proxy (Apache, Nginx), the URL could be the server IP and port, eg: http://203.0.113.50:3000, so it would something like this: UrlFetchApp.fetch("http://203.0.113.50:3000/webhook-send-update");.
      • You can also run this behind a proxy and change the URL appropriately.
      • Spreadsheet ID is the same as step 5.
    • Press CTRL + S to save the file.
    • Click Select Function and select createSpreadsheetOpenTrigger.

    function

    • Then press the Play button on the left to save the trigger.
    • You'll need to authorize your application parts of your Google Data.
      • Select an account.
      • You'll see a warning that the application was not validated.
      • Press Advanced and scroll down to the bottom and press Access to <your application> (insecure).
      • Scroll down and press Allow.
    What does this do?

    This will setup in your account a script to notify your service that a change was made in the spreadsheet.

  7. Everything should be ready for you to start.

    • Run the script with node index.js.
    • If you open on your browser http://<server IP>:3000/render, you should see the page.

  8. If you change a value in the spreadsheet, and it saves it online, it should update automatically on the render page.