Typescript 8wr API example

[Jaggernaut]

After spending a bunch of time trying to get connected to the firebase data as described in another post I thought it might be helpful to someone else see what I ended up doing that worked.

Original post that mentions to use firebase: http://8wr.io/threads/external-access-to-modify-fields-via-api.40/#post-131

My use case is available here: https://github.com/Jaggernaut555/midi-mixer-slippi-scoreboard
I use it to automatically update scores with Slippi, the custom emulator for playing Smash Bros Melee online. A video is included on the readme demonstrating what it looks like.

Here is a small example of loading and modifying data in typescript with the firebase module from npm:

import { FirebaseOptions, initializeApp } from 'firebase/app';
import { getFirestore, getDoc, setDoc, doc, DocumentReference, DocumentData } from 'firebase/firestore/lite';

// This interface should be whatever your scoreboard looks like
interface scoreboard {

    // This is a "scoreboard" type field with the unique key "players"
    players_1s: number,
    players_1: string | null,
    players_2s: number,
    players_2: string | null,

    // These are "Text field" type with the unique keys "game" and "round"
    game_1: string | null,
    round_1: string | null,

    // This is a "check box" type field with the unique key "started" and 2 rows
    started_1: boolean,
    started_2: boolean

    // This include any unknown fields that you don't care about modifying but don't want to lose
    [prop: string]: any,
}

// These are the keys for a particular scoreboard
// You can get them from your scoreboard page
// 8wr.io/scoreboard/source/[PACKAGE KEY]/[PAGE KEY]/
let packageKey = "Your key";
let pageKey = "Your other key";

// Setup the firebase connection
let options: FirebaseOptions = {
    projectId: "eightway-io",
}
let fb = initializeApp(options);
let fs = getFirestore(fb);
let docRef: DocumentReference<DocumentData>;
docRef = doc(fs, "scoreboard", packageKey, pageKey, "fields");

// Some helper functions to get and set scoreboard data
async function getScoreboard(): Promise<scoreboard> {
    const scoreSnapshot = await getDoc(docRef);
    if (scoreSnapshot.exists()) {
        return scoreSnapshot.data() as scoreboard;
    }
    else {
        // This means you were not able to get the scoreboard. Check that your package and page keys were correct.
        console.log("failed");
        return null as any;
    }
}

async function setScoreboard(data: scoreboard) {
    // This is what actually updates the scoreboard on 8wr.io
    await setDoc(docRef, data);
}

// Now we use the previous two functions
getScoreboard().then(async (data) => {
    if (data === null) {
        // Didn't get the scoreboard
        return;
    }
    console.log(data);
    // We can now do any modifying we want of the scoreboard object
    if (data.started_2) {
        data.started_1 = true;
        data.started_2 = false;

        data.players_1s = 0;
        data.players_1 = "Me";

        data.players_2s = 0;
        data.players_2 = "Someone else";

        await setScoreboard(data);
    }
});