DEV Community: Ephriam Henderson

Day 23 [D&D Character Sheets]

Ephriam Henderson — Tue, 14 Apr 2020 07:19:04 +0000

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.

Day 22 [D&D Character Sheets]

Ephriam Henderson — Sat, 11 Apr 2020 02:58:19 +0000

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:

Send a rendered view to the client.
The view would request a character object from the server as soon as it's loaded.
Any changes made on the page would alter the object.
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.

Day 21 [D&D Character Sheet]

Ephriam Henderson — Thu, 09 Apr 2020 03:56:32 +0000

Report

Today I got stuck for a while trying to implement something I thought would be cool. The idea was to encapsulate all password hashing and comparison functions into the Player Model. I've already started down this path by attaching my hashing and password comparison functions to a static class and instance method respectively. The goal was to take that further. I would use a setter method on the password field to hash the password. Right now inserting a password looks like this:

user.password = db.models.User.hashPassword(password)

After my changes it would look like this:

user.password = password

The model would handle the hashing internally. Here's where I got stuck, after I setup the setter function I continued getting the error Player validation failed: password: Cast to String failed for value "password" at path "password". After nearly an hour of googling, I found the answer. Mongoose doesn't support asynchronous setters. That error is likely the result of mongoose trying to cast a promise into a string. I could have continued with the plan a couple of ways.

1. Switch to synchronous hashing.

I could use bcrypt in synchronous mode. The problem is the bcrypt is designed to be slow. And while I don't think my app is going to get many, if any users, blocking the stack every time a user signed-up or changed their password felt like and unacceptable compromise.

2. Use an instance method

I could use an instance method to hash and set the password. The problem with this is on the first creation of the document I could not think of a way to set the password. For Instance:

// No longer would the password be set like this.
db.models.User.create({email: email, password: password})
// It would be something like this.
db.models.User.create({email}).setPassword(password)

The problem is that .create() saves the model to the database. Why is this problem? What is the password on that first save? I could set a default, maybe an empty string, but then for however short a time period I'd have an account in my database that had an insecure(empty or some default value) password in my database.

What if something went wrong before hashPassword() could complete? I could log in to an account with an empty string! In sequelize I could use the .build() method to construct an instance before saving it, if there is an equivalent method in mongoose I don't know it yet.

Even if that method does exist, I don't like the idea of constructing a user without a password.

In the I decided that the complexities getting one of the above paths to work wasn't worth the benefits. I did end up making some changes to the schema.

// db/models/player/index.js
password: {
    type: String,
    required: true,
    /* The password is no longer retrieved by default, 
    the select key means that a developer has to specifically 
    request it. */
    select: false,
    /* This getter means that a developer that tries to access 
    the password in the conventional way will cause an error to 
    be thrown.
    This discourages retrieving the password from outside the 
    schema, something that, as constructed, a developer should 
    have little reason to do. */
    get: () => {
        let accessError = new Error(
            `Password field is not directly accessible. 
            Please use the checkPassword or hashPassword method.`
        );
        logger.error(accessError.message);
        throw accessError;
    }
},

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.

Day 20 [D&D Character Sheet]

Ephriam Henderson — Wed, 08 Apr 2020 04:50:14 +0000

Report

Today I have have an actual app! You can click around and do stuff! Not much but... In all seriousness, today you can create an account an log-in, stay logged, and see a list of characters. There's still a lot of features to develop, but I'm making progress, however slowly. Anyway here's what I did today.

Finished up authentication.

First priority was fixing a bug in the user signup. The form validation failed continuously failed, preventing a user from signing up. I'm using HTML5 form validation on the signup fields, and despite meeting the requirements the password kept being rejected as invalid.

A Tale of Debugging

I started debugging yesterday after I encountered the error. I started my search under the assumption that something was wrong with the password field since that was what threw the error. Given my inexperience with regex I focused my debugging efforts there. Today I decided to remove the pattern attribute on my password field and discovered that the validation failed even without the pattern!

And that is why you shouldn't make assumptions. I should have through checked to verify what was wrong with the form before jumping into debugging regex. After some testing I realized that the validation on all the field failed and that something in that page's javascript was causing the bug. In the end the javascript was cruft and needed to be wiped anyway.

I didn't identify the exact source of the bug, I'm guessing it was the setCustomValidity() function? That doesn't seem likely given what the function is supposed to do according to the documentation. If anyone is interested here's the offending code.

// public/js/users/login.js
$(document).ready(() => {
    document
        .getElementById("signup-password")
        .setCustomValidity(
            "Include 1 lowercase, 1 uppercase, and 1 number.\n Minimum 8 characters, maximum 40 characters."
        );

    $("form").on("submit", e => {
        e.preventDefault();
        const $form = $(e.target);
        fetch($form.prop("action"), {
            method: "POST",
            credentials: "same-origin",
            redirect: "follow",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body: $form.serialize()
        })
            .then(response => {
                if (response.redirected) {
                    window.location.href = response.url;
                } else {
                    return response.json();
                }
            })
            .then(data => {
                console.log(data);
            })
            .catch(err => {
                console.log(err);
            });
    });
});

// views/users/login.ejs
<form action="/users/signup" method="post">
    <div class="form-group">
        <label for="signup-email">Email</label>
        <input
            type="email"
            name="email"
            id="signup-email"
            class="form-control"
            required
        />
    </div>
    <div class="form-group">
        <label for="signup-username">Username</label>
        <input
            type="text"
            name="username"
            id="signup-username"
            class="form-control"
            required
        />
    </div>
    <div class="form-group">
        <label for="signup-password">Password</label>
        <input
            type="password"
            name="password"
            id="signup-password"
            class="form-control"
            required
            minlength="8"
            maxlength="50"
            pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,50})"
        />
    </div>
    <div class="form-group">
        <button class="btn" type="submit">Signup</button>
    </div>
</form>

I also add some flash messages from the server to provide error messages with the signup is invalid. Here's the flash middleware.

// index.js
app.use((req, res, next) => {
    req.flash = function (flash) {
        this.session.sessionFlash = { type: flash.type, message: flash.message };
        return this;
    };
    res.locals.sessionFlash = req.session.sessionFlash;
    req.session.sessionFlash = null;
    next();
});

Lastly I began persisting the state(making it so that sessions could last past a server shutdown) to the mongo database.

Wrote a Character List view

I wrote a simple Character List view. It still initial and needs testing but it's accessible in app via a link in the navbar.

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.

Day 19 [D&D Character Sheet]

Ephriam Henderson — Tue, 07 Apr 2020 06:19:21 +0000

Report

This weekend I did a little debugging, not enough for a full report and not the full hour I'm supposed to do. Today I did quite a bit. I..

Edited the character schema to use the Die schema from the Race model.

First I moved the Die schema from the Race schema's file into a folder sharedSchemas/ specifically for embedded documents that will be reused across schema. I spent a while figuring out how I wanted to structure the files, I settled on putting sharedSchema outside of db/models into the the db module's root db/.

Created a logout route, and a button to trigger it.

First I create the logout route.

// router/users/index.js
router.get("/logout", (req, res) => {
    req.logout();
    res.redirect("/");
});

Then add a button to the navbar.

<!-- views/layouts/includes/navbar.ejs -->
<ul class="navbar-nav m-0 ml-auto">
    <% if (isSignedIn) { %>
        <!-- ... -->
        <li class="nav-item">
            <a href="/users/logout" class="nav-link">Logout</a>
        </li>
    <% } else { %>
        <li class="nav-item">
            <a href="/users/login" class="nav-link">Login</a>
        </li>
    <% } %>
</ul>

Created a Character List that displays the logged in player's characters.

I created a character list view, and a new route for viewing the logged-in users characters. This route will likely become more generic in the future, probably allowing anyone to veiw a user's published characters. Speaking of publishing, I'll also be adding an isPublished field to the character model that determines whether the character appears in searches. Here's the ejs for that list.

<!-- views/characters/characterList.ejs -->
<!-- The view is made to be generic for 
reuse in many different routes --> 
<div class="col-md h-100">
    <div class="d-flex justify-content-start">
        <% data.characters.forEach(character => { %>
        <div class="card" style="width: 18rem;">
            <img
                class="card-img-top"
                src="http://via.placeholder.com/215"
                alt="Card image cap"
            />
            <div class="card-body">
                <h5 class="card-title"><%= character.shortName %></h5>
                <p class="card-text text-truncate"><%= character.description %></p>
                <a href="/characters/<%= character.id %> " class="btn btn-primary"
                    >Go somewhere</a
                >
            </div>
        </div>
        <% }) %>
    </div>
</div>

And here's the route.

// router/users/index.js

// route: /users/characters/
router.get("/characters", async (req, res) => {
    // This should be removed
    logger.debug(`[/users/characters] user id: ${req.user.id}`);
    console.log(req.user);
    if (req.isAuthenticated) {
        const characters = await req.context.db.models.Character.find({
            player: req.user.id
        });
        console.log(characters);
        res.render("characters/characterList", {
            page: {
                title: "Your Characters"
            },
            data: {
                characters
            }
        });
    } else {
        res.redirect("/users/login");
    }
});

I also discovered a bug with my passport initialization that I fixed. I forgot to await the Player find method in my deserializeUser function. This led to req.user being an unresolved promise in my routes. I fixed it by adding the forgotten await.

// helpers/init-passport.js
passport.deserializeUser(async (id, done) => {
    logger.debug(`Deserializing user: ${id}`);
    const db = await dbPromise;
    // before:
    // let user = db.models.Player.findById(id);
    // after:
    let user = await db.models.Player.findById(id);
    done(null, user);
});

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.

Day 18 [D&D Character Sheet]

Ephriam Henderson — Fri, 03 Apr 2020 05:51:00 +0000

Report

Today I did a little refactoring of my Character sheet by moving the Ability/skill blocks to an include. Here's the new include.

<!-- views/characters/includes/skill.ejs -->
<div class="row border">
    <div class="col-md-4 border-right">
        <dt><%= ability.name %></dt>
        <dd>
            <%= ability.value || 0%>
        </dd>
    </div>
    <!-- prettier-ignore -->
    <div class="col-md">
                <% /* Check skills was passed to prevent undefined errors...
                just realizing I should check that it's and array here. %>
        <%(typeof skills == 'undefined' ? [] : skills).forEach(skill => { %>
        <dl class="row">
            <dt class="col-sm-9">
                <%= skill.name || "No Name"%>
            </dt>
            <dd class="col-sm-3">
                <%= skill.value || 0 %>
            </dd>
        </dl>
        <% }) %>
    </div>
</div>

And here's a before and after of that section from the character sheet.

<!-- views/characterSheet.ejs before -->
<div class="col-md px-3">
    <div class="row border">
        <div class="col-md-4 border-right">
            <dt>Strength</dt>
            <dd>
                <%=
                data.character.stats.abilities.strength
                %>
            </dd>
        </div>
        <div class="col-md">
            <dl class="row">
                <dt class="col-sm-9">
                    Athletics
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.athletics.skill.value
                    || 0 %>
                </dd>
            </dl>
        </div>
    </div>
    <div class="row border">
        <div class="col-md-4 border-right">
            <dt>Dexterity</dt>
            <dd>
                <%=
                data.character.stats.abilities.dexterity
                %>
            </dd>
        </div>
        <div class="col-md">
            <dl class="row">
                <dt class="col-sm-9">
                    Acrobatics
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.acrobatics.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Sleight of Hand
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.sleightOfHand.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Stealth
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.stealth.skill.value
                    || 0 %>
                </dd>
            </dl>
        </div>
    </div>
    <div class="row border">
        <div class="col-md-4 border-right">
            <dt>Constitution</dt>
            <dd>
                <%=
                data.character.stats.abilities.constitution
                %>
            </dd>
        </div>
        <div class="col-md"></div>
    </div>
    <div class="row border">
        <div class="col-md-4 border-right">
            <dt>Intelligence</dt>
            <dd>
                <%=
                data.character.stats.abilities.intelligence
                %>
            </dd>
        </div>
        <div class="col-md">
            <dl class="row">
                <dt class="col-sm-9">
                    Arcana
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.arcana.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    History
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.history.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Investigation
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.investigation.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Nature
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.nature.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Religion
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.religion.skill.value
                    || 0 %>
                </dd>
            </dl>
        </div>
    </div>
    <div class="row border">
        <div class="col-md-4 border-right">
            <dt>Wisdom</dt>
            <dd>
                <%= data.character.stats.abilities.wisdom
                %>
            </dd>
        </div>
        <div class="col-md">
            <dl class="row">
                <dt class="col-sm-9">
                    Animal Handling
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.animalHandling.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Insight
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.insight.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Medicine
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.medicine.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Perception
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.perception.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Survival
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.survival.skill.value
                    || 0 %>
                </dd>
            </dl>
        </div>
    </div>
    <div class="row border">
        <div class="col-md-4 border-right">
            <dt>Charisma</dt>
            <dd>
                <%=
                data.character.stats.abilities.charisma
                %>
            </dd>
        </div>
        <div class="col-md">
            <dl class="row">
                <dt class="col-sm-9">
                    Deception
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.deception.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Intimidation
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.intimidation.skill.value
                    || 0 %>
                </dd>
            </dl>
            <dl class="row">
                <dt class="col-sm-9">
                    Performance
                </dt>
                <dd class="col-sm-3">
                    <%=
                    data.character.stats.skills.performance.skill.value
                    || 0 %>
                </dd>
            </dl>
        </div>
    </div>
</div>

<!-- 
views/characterSheet.ejs moved to views/characters/characterSheet.ejs
after
-->
<div class="col-md px-3">
    <% const PATH_TO_SKILL_INCLUDE = "./includes/skill.ejs" %> 
    <%- 
        include(PATH_TO_SKILL_INCLUDE, {
            ability: {
                name: "Strength", 
                value: data.character.stats.abilities.strength 
            },
            skills:[ 
                { 
                    name: "Athletics",
                    value:data.character.stats.skills.athletics.skill.value
                }
            ]
    }) 
    %> 
    <%- 
        include(PATH_TO_SKILL_INCLUDE, {
            ability: {
                name: "Dexterity",
                value: data.character.stats.abilities.dexterity
            },
            skills: [
                {
                    name: "Acrobatics",
                    value: data.character.stats.skills.acrobatics.skill.value
                },
                {
                    name: "Sleight of Hand",
                    value: data.character.stats.skills.sleightOfHand.skill.value
                },
                {
                    name: "Stealth",
                    value: data.character.stats.skills.stealth.skill.value
                }
            ]
        }) 
    %>
    <%- 
        include(PATH_TO_SKILL_INCLUDE, {
            ability: {
                name: "Constitution",
                value: data.character.stats.abilities.constitution
            },
        }) 
    %>
    <%- 
        include(PATH_TO_SKILL_INCLUDE, {
            ability: {
                name: "Intelligence",
                value:data.character.stats.abilities.intelligence
            },
            skills: [
                {
                    name: "Arcana",
                    value: data.character.stats.skills.arcana.skill.value
                },
                {
                    name: "History",
                    value: data.character.stats.skills.history.skill.value
                },
                {
                    name: "Investigation",
                    value: data.character.stats.skills.investigation.skill.value
                },
                {
                    name: "Nature",
                    value: data.character.stats.skills.nature.skill.value
                },
                {
                    name: "Religion",
                    value: data.character.stats.skills.religion.skill.value
                }
            ]})
    %>
    <%- 
        include(PATH_TO_SKILL_INCLUDE, {
            ability: {
                name: "Wisdom",
                value: data.character.stats.abilities.wisdom
            },
            skills: [
                {
                    name: "Animal Handling",
                    value: data.character.stats.skills.animalHandling.skill.value
                },
                {
                    name: "Insight",
                    value: data.character.stats.skills.insight.skill.value
                },
                {
                    name: "Medicine",
                    value: data.character.stats.skills.medicine.skill.value
                },
                {
                    name: "Perception",
                    value: data.character.stats.skills.perception.skill.value
                },
                {
                    name: "Survival",
                    value: data.character.stats.skills.survival.skill.value
                }
            ]
        })
    %>
    <%-  
        include(PATH_TO_SKILL_INCLUDE, {
            ability: {
                name: "Charisma",
                value: data.character.stats.abilities.charisma
            },
            skills: [
                {
                    name: "Deception",
                    value: data.character.stats.skills.deception.skill.value
                },
                {
                    name: "Intimidation",
                    value: data.character.stats.skills.intimidation.skill.value
                },
                {
                    name: "Performance",
                    value: data.character.stats.skills.performance.skill.value
                }
            ]
        })
    %> 
</div>

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.

Day 17 [D&D Character Sheet]

Ephriam Henderson — Thu, 02 Apr 2020 05:48:15 +0000

Report

Today I finished the character sheet page, It will probably change in the future but this is good to continue development with.

I still need to add saving throws to the skills section. There are also places where data doesn't exist in the database yet. I'm happy enough that I consider it pretty far along to my first requirement.

After I finished that I worked on something else that interested me.

The character Writer will be a utility to help players think about character backstories. It will ask questions about a character appearance, personality, and history providing a few preselected choices and custom inputs (soon™). Eventually I'd like to be be able to save or output those choices somehow, far down the road they could even be used to provide suggestions for mechanical character building like selecting a class, and distributing stats.

Here's some front end code.

<div class="col-md bg-info d-flex h-100">
    <div class="d-flex align-items-center justify-content-center w-100">
        <div id="writer-container" class="d-flex flex-column">
            <h1 id="writer-question" class="text-center">
                Welcome to The Character Writer
            </h1>
            <br />
            <div id="writer-options" class="d-flex justify-content-around"></div>
            <div class="d-flex justify-content-around">
                <button id="prev-button" class="btn" hidden>Previous</button>
                <button id="next-button" class="btn">Next</button>
            </div>
        </div>
    </div>
</div>

The Writer class is the controller for this page. I use a class to interact with the writer page to keep the code contained and separate from any other logic I may write. The Writer functionality is stored in one object. This keeps code organized and the global scope clean.

class Writer {
            constructor(init) {
                this.$container = $("#writer-container");
                this.page = -1;
                this.$question = $("#writer-question");
                this.$options = $("#writer-options");
                this.questions = init.questions || [];
                this.choices = {};
                $("#next-button").on("click", e => this.advance());
                $("#prev-button").on("click", e => this.reverse());
                $("#writer-options").on("click", e => {
                    const $target = $(e.target);
                    if ($target.prop("tagName") == "BUTTON") {
                        this.choices[$target.attr("data-question")] = $target.attr(
                            "data-choice"
                        );
                        this.advance();
                    }
                    console.log(this.choices);
                });
            }

            _createOptionButtons() {
                return this.questions[this.page].options.map((option, index) => {
                    return $("<button>")
                        .addClass("btn myOption")
                        .attr("id", `option-${index}`)
                        .attr("data-choice", index)
                        .attr("data-question", this.page)
                        .text(option.text);
                });
            }

            advance() {
                console.log("Start");
                if (this.page < this.questions.length - 1) {
                    this.page++;
                    this.$container.attr("data-page", this.page);
                    this.$question.text(this.questions[this.page].question);
                    this.$options.empty();
                    let optionButtons = this._createOptionButtons();
                    this.$options.append(optionButtons);
                    if (this.page > 0) $("#prev-button").removeAttr("hidden");
                    if (this.page >= this.questions.length - 1)
                        $("#next-button").attr("hidden", true);
                }
            }

            reverse() {
                if (this.page > 0) {
                    this.page--;
                    this.$container.attr("data-page", this.page);
                    this.$question.text(this.questions[this.page].question);
                    this.$options.empty();
                    let optionButtons = this._createOptionButtons();
                    this.$options.append(optionButtons);
                    if (this.page < 1) $("#prev-button").attr("hidden", true);
                    if (this.page < this.questions.length - 1)
                        $("#next-button").removeAttr("hidden");
                }
            }
        }

I could improve this by refactoring the reverse and advance methods to move the repeated code into its own method. The code below could be moved into a new method that advance and reverse could call. I could also keep the nav buttons on the object rather than retrieving them from the DOM each time.

this.$container.attr("data-page", this.page);
this.$question.text(this.questions[this.page].question);
this.$options.empty();
let optionButtons = this._createOptionButtons();
this.$options.append(optionButtons);

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.

Day 16 [D&D Characters Sheet]

Ephriam Henderson — Tue, 31 Mar 2020 06:25:55 +0000

More work on the character sheet design.

Day 15 [D&D Character Sheet]

Ephriam Henderson — Sun, 29 Mar 2020 09:20:29 +0000

Report

I worked on the character sheet and modified my character schema today. My first attempt at the character sheet has made me think about what I want from it. Here's a list of goals for the UI of the character sheet.

On a large(1080p) user should be able to see most relevant stats without scrolling.
On mobile devices certain stats like hit points and armor class should remain in view when scrolling.
On mobile, hide things like features, languages, and spells in a submenu.
Have an expandable details pane, would roll out from the right on large screens and the bottom on small ones.
Detailed Information should be accessible fast and easily, no more than a few clicks or taps away.
Everything on the page should be editable within two cl

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.
[ ] 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.

Day 14 [D&D Character Sheet]

Ephriam Henderson — Fri, 27 Mar 2020 06:54:47 +0000

Report

Today I worked on the character sheet, I didn't make much progress but it's coming along slowly. I'm glad I went with bootstrap, their grid system makes it pretty easy to move things around.

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.
[ ] 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.

Day 13 [D&D Character Sheet]

Ephriam Henderson — Thu, 26 Mar 2020 06:14:26 +0000

Report

I worked on building the login and index page today. I'm not a design guy so it looks...passable.

Yeah...passable. In any case I needed to start building the front-end to continue the project. Once I had backend login working it made sense to actually build the page that will use it.

Believe it or not, most of time was spent styling. To be honest design isn't my favorite thing, nor am I particularly good at it. That said I did learn some things.

Thanks to my sass complier I can use the bootstrap npm module and compile it with alongside my own css. That's handy.

@import "../node_modules/bootstrap/scss/bootstrap";

I also learned about defer and async loading for script tags. If you give script tags a defer property they will load but only execute once the page has load. The async property runs the script asynchronously with page load.

<script src="/js/jquery-3.4.1.min.js" defer></script>
<script src="/js/bootstrap.bundle.min.js" defer></script>

I even used some html5 form validation.

<form action="/users/signup" method="post">
                <div class="form-group">
                    <label for="signup-email">Email</label>
                    <input
                        type="email"
                        name="email"
                        id="signup-email"
                        class="form-control"
                        required
                    /> 
                    <!-- The required property prevents the form from being submitted without a valu-->
                </div>
                <div class="form-group">
                    <label for="signup-username">Username</label>
                    <input
                        type="text"
                        name="username"
                        id="signup-username"
                        class="form-control"
                        required
                    />
                </div>
                <div class="form-group">
                    <label for="signup-password">Password</label>
                    <input
                        type="password"
                        name="password"
                        id="signup-password"
                        class="form-control"
                        required
                        minlength="8"
                        maxlength="50"
                        pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,50})"
                    />
                    <!-- You can even do regex pattern testing with pure html.-->

                </div>
                <div class="form-group">
                    <button class="btn" type="submit">Signup</button>
                </div>
            </form>

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.
[ ] 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.

Day 12 [D&D Character Sheets]

Ephriam Henderson — Wed, 25 Mar 2020 08:31:11 +0000

Report

Today I got user authentication working with passport. I started setting by setting up my password hashing. I noticed that in the passport documentation that they were using methods on the user object to compare and hash passwords and had an realization. I never made the connection to do store the hashing logic on the model but I loved the pattern. Password hashing is intrinsically tied to the user object and it makes sense to store them together, it also make maintenance easier. With this in mind, I made a static and instance method on my player schema to handle password hashing.

// db/models/player/index.js
const Player= new Schema({...});

Player.methods.checkPassword = function(plainTextPassword) {
    return bcrypt.compare(plainTextPassword, this.password)
}

Player.statics.hashPassword = function(plainTextPassword) {
    return bcrypt.hash(plainTextPassword, 10)
}

module.exports = Player

You can see the static method being used in the seeder. And the instance method in the passport local strategy.

// db/seeder.js
const player = await db.models.Player.create({
    username: "admin",
    email: "ephriamhenderson@ephriamhenderson.dev",
    // Static method that hashes user password.
    password: await db.models.Player.hashPassword("password") 
});

// helpers/init-passport.js
const player = await db.models.Player.findOne({
    email: email.toLowerCase()
});
// ...
// The instance method that compares the password.
let isMatch = await player.checkPassword(password);

Getting passport working properly took a bit of debugging. First the local strategy didn't seem to be running. Soon I realized that I needed to define the name of my username and password field.

// helpers/init-passport.js
// broken
passport.use(
    new LocalStrategy(
        async (email, password, done) => {
            logger.debug(`Auth attempt for: ${email}`);
            const db = await dbPromise;
            const player = await db.models.Player.findOne({
                email: email.toLowerCase()
            });

            if (!player) {
                logger.debug(`No email found for: ${email}`);
                return done(null, false, { message: "Incorrect Credentials" });
            }

            let isMatch = await player.checkPassword(password);

            if (!isMatch) {
                logger.debug(`Incorrect password for: ${email}`);
                return done(null, false, { message: "Incorrect Credentials" });
            }
            logger.debug(`${email} logged in successfully.`);

            return done(null, player);
        }
    )
);

// helpers/init-passport.js
// fixed
passport.use(
        new LocalStrategy(
            {
                // define the name of the username and password fields
                usernameField: "email",
                passwordField: "password"
            },
            async (email, password, done) => {
                logger.debug(`Auth attempt for: ${email}`);
                // Make sure the db is connected and and the db object returned
                const db = await dbPromise;
                const player = await db.models.Player.findOne({
                    email: email.toLowerCase()
                });

                // Does player with that email exist? If not send an error.
                if (!player) {
                    logger.debug(`No email found for: ${email}`);
                    return done(null, false, { message: "Incorrect Credentials" });
                }

                let isMatch = await player.checkPassword(password);

                // Does the password match? If not send and error.
                if (!isMatch) {
                    logger.debug(`Incorrect password for: ${email}`);
                    return done(null, false, { message: "Incorrect Credentials" });
                }
                logger.debug(`${email} logged in successfully.`);

                return done(null, player);
            }
        )
    );

Once I got the local strategy to run correctly I encountered an issue with my login post route.

// router/users/index.js
router.post(
    "/login",
    bodyParser.urlencoded({ extended: true }),
    // This should redirect depending on failure or success.
    passport.authenticate("local", {
        successRedirect: "/",
        failureRedirect: "/users/login"
    })
);

Passport wouldn't redirect correctly, when I made a request it would hang without throwing an error. Almost as if I had forgot to send a response in a normal route. Eventually I found the problem in my passport serialization.

// helpers/init-passport.js
// broken
passport.serializeUser((user, done) => {
    logger.debug(`Serializing ${user.email}`);
    done(null, user.id);
});

passport.deserializeUser(async (id, done) => {
    logger.debug(`Deserializing user: ${id}`);
    const db = await dbPromise;
    let user = db.models.Player.findById(id);
});

// helpers/init-passport.js
// fixed
passport.serializeUser((user, done) => {
    logger.debug(`Serializing ${user.email}`);
    done(null, user.id);
});

passport.deserializeUser(async (id, done) => {
    logger.debug(`Deserializing user: ${id}`);
    const db = await dbPromise;
    let user = db.models.Player.findById(id);
    // I had forgot to call done.
    done(null, user);
});

I'm happy with today. I had a good time debugging this issue and I got authentication working fairly easily with passport. As a junior dev I still have a ton to learn about security and would be interested in learning how to make my passwords more secure, am I making any blatant security mistakes? Any tips for best practices? Feel free to tell me how bad I am at this!

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.
[ ] 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.