Day 22 [D&D Character Sheets]

Here's another iteration of the character sheet. I've spent a lot of time thinking about how to edit the sheet and send it back to the server. Here's my current idea:

1. Send a rendered view to the client.
2. The view would request a character object from the server as soon as it's loaded.
3. Any changes made on the page would alter the object.
4. On clicking "save" the object would be posted to an update route on the server.

I changed the design of the character sheet, here the current iteration.

Also a small sample of the editing functionality, right now it only work on ability scores, doesn't change skill mods, and is not persisted to the server. It's mainly for investigating how I wanted to do it.

The code needs a refactor but I was trying to push through and get something working, so here we are

/*
* Wait for the DOM to Load. Not using jquery's ready because
* in this quick and dirty implementation it wouldn't be loaded yet
* , as JQuery is deferred load.
*/
window.addEventListener("DOMContentLoaded", () => {
    // A click handler for elements with a special class.
    $(".editOnClick").on("click", (e) => {
        /*
        * This attribute is created in the server's renderer.
        * It's primary function is to hold a valid key name
        * right now
        */
        let field = $(e.target).attr("data-fieldName");
        let $value = $(`#${field}-value`);
        // Grab that initial number that was rendered.
        let initial = $value.html();
        // Clear out that value
        $value.empty();

        // Create my input
        let $input = $("<input/>")
            .addClass("form-control text-black")
            .attr("type", "number")
            .attr("value", initial)
            .keypress((e) => {
                // When the user presses enter, add the changes to the DOM.
                if (e.keyCode == "13") {
                    $value.text(e.target.value);
                    let mod = Math.floor((Number(e.target.value) - 10) / 2);
                    console.log(mod);
                    console.log(
                        $(`#${field}-mod`).text(mod > 0 ? `+${mod}` : mod)
                    );
                }
            });
        $value.append($input);
        $input.focus();
    });
});

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.