Day 23 [D&D Character Sheets]

Report

Today I'm continuing to work on the editing portion of my character sheet. Figuring out how to link dom changes to the character is pretty tough for me, simply because of the sheer volume of changes that I'm going to want to track. Here's what I have so far.

// fetch json representing the character.
let fetchPromise = fetch(window.location.pathname + "/api").then((res) =>
    res.json()
);

async function main(fetchPromise) {
    let data = await fetchPromise;
    let rawCharacter = data.character;

    /* create a proxy to observe changes in the character
    *  I'd like to make this proxy the source of truth for the DOM,
    *  it would map the character object to fields on the DOM and update
    *  the DOM as the character object changes. In react this
    *  this would be super easy.
    */
    let character = ObservableSlim.create(rawCharacter, true, (changes) => {
        // Observable Slim comes from this library
        // https://github.com/ElliotNB/observable-slim
        console.log(changes)
        let splitPath = changes.currentPath.split
        switch () {
            /* I stopped here, trying to think about how I choose which
            *  elements to update.
            */
        }
    });

    $(".editOnClick").on("click", (e) => {
        let $target = $(e.target);

        let field = $target.attr("data-fieldName");
        if (field == undefined) return false;

        let fieldParts = field.split("-");
        let fieldType = fieldParts[0];
        let fieldKey = fieldParts[1];
        console.log(fieldType);

        /* This switch decides which DOM manipulations to do based on
        *  the 'type' part of a field name. I want to move the to the
        *  observer.
        */
        switch (fieldType) {
            case "ability":
                console.log("triggered");
                let $value = $(`#ability-${fieldKey}-value`);
                let initial = $value.html();
                $value.empty();
                let $input = $("<input/>")
                    .addClass("form-control text-black")
                    .attr("type", "number")
                    .attr("value", initial)
                    .keypress((e) => {
                        if (e.keyCode == "13") {
                            $value.text(e.target.value);
                            let mod = Math.floor((Number(e.target.value) - 10) / 2);
                            character.stats.abilities[fieldKey] = e.target.value;
                            console.log(character);
                            // console.log(mod);
                            console.log(
                                $(`#${field}-mod`).text(mod > 0 ? `+${mod}` : mod)
                            );
                        }
                    });
                $value.append($input);
                $input.focus();
                break;
            default:
                break;
        }
    });
}

window.addEventListener("DOMContentLoaded", () => {
    main(fetchPromise);
});

Thanks for Reading!

Project

ApproachingApathy / 100days-dnd-character-sheets

[100days] The DND Character Sheet App

This is the first project of my 100 days of coding This is an app to keep D&D character sheets.

Stack

I'll be using Node.js and building a full-stack Express app with MongoDB.

Requirements

Minimum Viable

• Present a D&D Character Sheet
  • The sheet should display all the same info as the first page of the 5e Official sheet.
• Users should be able to log in and create player-characters.
• Users should be able to edit character sheets.
• Users should be able to organize character sheets into groups (parties/tables)
• Sheets should auto calculate basic stats like ability modifiers
  • Support Proficiency Bonuses

Cake

• Extend character creation to allow the user to use any of the three common stat gen methods
  • Point Buy
  • Standard Array
  • Roll
• Extend the character sheet to all the info in the 5e official sheet.
• Allow for image uploads for character portraits.
• Allow for…

View on GitHub

The First project will be an app to keep D&D character sheets.

Stack

I'll be using Node.js and building a full-stack Express app with MongoDB.

Requirements

Minimum Viable

• [ ] Investigate automating or finding a source of info for the data in the SRD.
• [X] Present a D&D Character Sheet
  • [ ] The sheet should display all the same info as the first page of the 5e Official sheet.
• [ ] Users should be able to log in and create player-characters.
• [ ] Users should be able to edit character sheets.
• [ ] Users should be able to organize character sheets into groups (parties/tables)
• [ ] Sheets should auto calculate basic stats like ability modifiers.
  • [ ] Support Proficiency Bonuses

Cake

• [ ] Extend character creation to allow the user to use any of the three common stat gen methods.
  • [ ] Point Buy
  • [ ] Standard Array
  • [ ] Roll
• [ ] Extend the character sheet to all the info in the 5e official sheet.
• [ ] Allow for image uploads for character portraits.
• [ ] Allow for extended descriptions/backstories.
  • [ ] Characters should have nice full page backstories.
  • [ ] Preferably use a markdown editor.