Improve formatting and styling and output to HTML.

.gitignore

@@ -1 +1,2 @@
+dist
 node_modules

package.json

@@ -4,6 +4,7 @@
   "description": "Generate character backstories based on the Xanathar's Guide to Everything 'This Is Your Life' tables.",
   "main": "./src/index.js",
   "scripts": {
+    "build": "webpack",
     "start": "webpack-dev-server",
     "test": "jasmine --config=jasmine.json"
   },

src/formatter/index.js

@@ -0,0 +1,79 @@
+module.exports = function (character) {
+  let output = '';
+
+  output += '\n<h3>Overview</h3>\n\n';
+
+  output += `<p>You are a ${character.age} year old ${character.alignment.toLowerCase()} ${character.race.name.toLowerCase()} ${character.background.name.toLowerCase()} adventuring as a ${character.class.name.toLowerCase()}.</p>\n`;
+
+  output += '<p>';
+  if (character.backgroundReason) {
+    output += `You became a ${character.background.name.toLowerCase()} because ${character.backgroundReason}<br>\n`;
+  }
+  output += `You became a ${character.class.name.toLowerCase()} because ${character.classReason}`;
+  output += '</p>\n\n';
+
+  if (character.raceOther.length > 0) {
+    output += `<h3>Racial (${character.race.name})</h3>\n\n`;
+    output += '<p>' + character.raceOther.map(o => `<strong>${o.name}:</strong> ${o.value}`).join('<br>\n') + '</p>\n\n';
+  }
+
+  output += `<h3>Background (${character.background.name})</h3>\n\n`;
+  output += '<p>';
+  output += `<strong>Trait:</strong> ${character.backgroundTrait}<br>\n`;
+  output += `<strong>Ideal:</strong> ${character.backgroundIdeal}<br>\n`;
+  output += `<strong>Bond:</strong> ${character.backgroundBond}<br>\n`;
+  output += `<strong>Flaw:</strong> ${character.backgroundFlaw}<br>\n`;
+  output += character.backgroundOther.map(o => `<strong>${o.name}:</strong> ${o.value}`).join('<br>\n') + '</p>\n\n';
+  output += '</p>\n\n';
+
+  if (character.classOther.length > 0) {
+    output += `<h3>Class (${character.class.name})</h3>\n\n`;
+    output += '<p>' + character.classOther.map(o => `<strong>${o.name}:</strong> ${o.value}`).join('<br>\n') + '</p>\n\n';
+  }  
+
+  output += '<h3>Family</h3>\n\n';
+
+  const { mother, father } = character.parents;
+  if (!character.knewParents) {
+    output += '<p>You don\'t know who your parents are.</p>';
+  } else {
+    if (mother.race === father.race) {
+      output += `<p>Your mother and father are both ${mother.race.toLowerCase()}s. Your mother ${mother.occupation}, while your father ${father.occupation}.<p>`;
+    } else {
+      output += `<p>Your mother is ${mother.race.toLowerCase()} and ${mother.occupation}, but your father is ${father.race.toLowerCase()} and ${father.occupation}.</p>`;
+    }
+  }
+
+  const sibCount = character.siblings.length;
+  if (sibCount === 0) {
+    output += '<p>You were an only child.</p>\n';
+  } else if (character.knewParents) {
+    output += `<p>You had ${sibCount} sibling${sibCount === 1 ? '' : 's'}.</p>\n`;
+    output += '<ul>';
+    character.siblings.forEach(s => {
+      output += `<li>a ${s.relativeAge} ${s.relationship} who ${s.occupation}. They are ${s.status} ${s.attitude}</li>\n`
+    })
+    output += '</ul>';
+  } else {
+    output += '<p>You don\'t know if you have any siblings.</p>\n';
+  }
+
+  output += '<h3>Upbringing</h3>\n\n';
+
+  output += `<p>You were born ${character.birthplace}.</p>\n`;
+  output += `<p>You were raised by ${character.raisedBy.name} and had a ${character.lifestyle.name.toLowerCase()} lifestyle, living ${character.home}.</p>\n`;
+
+  if (mother.absent) { output += `<p>Your mother ${mother.absent}</p>\n`; }
+  if (father.absent) { output += `<p>Your father ${father.absent}</p>\n`; }
+
+  output += `<h3>Life Events (${character.events.length})</h3>\n\n<ul>`;
+  character.events.forEach(e => {
+    output += `<li>${e}</li>\n`;
+  });
+  output += '</ul>\n\n';
+
+  output += '<h3>Trinket</h3>\n\n';
+  output += `<p>Currently in your possession you have ${character.trinket}</p>`
+
+  return output;
+};

src/generator/class.js

@@ -144,7 +144,7 @@ const classes = {
           'Your mentor was a wise treant who taught you to think in terms of years and decades rather than days or months.',
           'You were tutored by a dryad who watched over a slumbering portal to the Abyss. During your training, you were tasked with watching for hidden threats to the world.',
           'Your tutor always interacted with you in the form of a falcon. You never saw the tutor\'s humanoid form.',
-          'You were one of several youngsters who were mentored by an old druid, until one ofyour fellow pupils betrayed your group and killed your master.',
+          'You were one of several youngsters who were mentored by an old druid, until one of your fellow pupils betrayed your group and killed your master.',
           'Your mentor has appeared to you only in visions. You have yet to meet this person, and you are not sure such a person exists in mortal form.',
           'Your mentor was a werebear who taught you to treat all living things with equal regard.',
         ]

src/generator/index.js

@@ -59,6 +59,13 @@ function upbringing (character) {
   character.lifestyle = Family.lifestyle();
   character.home = Family.home(character.lifestyle);
   character.childhood = Life.childhood(character.charismaModifier || 0);
+
+  if (character.raisedBy.absent.includes('mother')) {
+    character.parents.mother.absent = Family.absentParent();
+  }
+  if (character.raisedBy.absent.includes('father')) {
+    character.parents.father.absent = Family.absentParent();
+  }
 }
 
 function siblings (character) {
@@ -96,6 +103,7 @@ module.exports = function (config = {}) {
   background(character);
   adventuringClass(character);
   parents(character);
+  siblings(character);
   upbringing(character);
   events(character);
   trinket(character);

src/generator/life.js

@@ -115,7 +115,7 @@ function tragedy() {
     case 6: return 'War ravaged your home community, reducing everything to rubble and ruin. in the aftermath, you either helped your town rebuild or moved somewhere else.';
     case 7: return 'A lover disappeared without a trace. You have been looking for that person ever since.';
     case 8: return 'A terrible blight in your home community caused crops to fail, and many starved. You lost a sibling or some other family member.';
-    case 9: return 'You did something that brought terrible shame to you in the eyes of your family. You might have been involved in a scandal, dabbled in dark magic, or offended someone important. The attitude ofyour family members toward you becomes indifferent at best, though they might eventually forgive you.';
+    case 9: return 'You did something that brought terrible shame to you in the eyes of your family. You might have been involved in a scandal, dabbled in dark magic, or offended someone important. The attitude of your family members toward you becomes indifferent at best, though they might eventually forgive you.';
     case 10: return 'For a reason you were never told, you were exiled from your community. You then either wandered in the wilderness for a time or promptly found a new place to live.';
     case 11: return 'A romantic relationship ended. ' + ((random.dice('1d6') % 2 === 0) ? 'with bad feelings.' : 'but it was amicable.');
     case 12: return `A current or prospective romantic partner of yours died. Cause of death: ${causeOfDeath()}.` + (random.dice('1d12') === 1 ? ' It was your fault.' : '');

src/generator/race.js

@@ -20,7 +20,7 @@ const monsterOther = {
     'At a young age, you adopted a human religion and now serve it faithfully.',
     'You received divine insight that sent you on your path, and occasionally receive new visions that guide you.',
     'Your sworn enemy is an ally of your people, forcing you to leave your tribe to gain vengeance.',
-    'An evil entity corrupted your. people\'s society.',
+    'An evil entity corrupted your people\'s society.',
     'An injury or strange event caused you to lose all memory of your past, but occasional flashes of it return to you.',
   ]
 };

src/index.html

@@ -1,12 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>This Is Your Life</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  <body>
-    <h1>This Is Your Life</h1>
-    <div id="character"></div>
-  </body>
+
+<head>
+  <title>This Is Your Life</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+</head>
+
+<body>
+  <nav class="navbar navbar-dark fixed-top bg-dark">
+    <a class="navbar-brand" href="#">This Is Your Life</a>
+  </nav>
+
+  <main role="main">
+    <div class="jumbotron">
+      <div class="container">
+        <h1>This Is Your Life!</h1>
+        <p>
+          This is a simple generator that automates the process of rolling on all the character generation tables that can be found
+          in the Dungeons &amp; Dragons 5th Edition Player Handbook, Volo's Guide to Monsters, and Xanathar's Guide to Everything.
+          Click the button below to create a character!</p>
+          <a id="generate" href="#" class="btn btn-primary" role="button">Roll again!
+            <i class="fa fa-chevron-right"></i>
+          </a>
+      </div>
+    </div>
+    <div class="container">
+      <div id="character"></div>
+      <hr>
+    </div>
+  </main>
+
+  <footer class="footer">
+    <div class="container bt-light mt-4 pt-4 pb-4">
+      <div class="text-right">
+        <small>
+          <div>Created by Thomas R. Wolfe</div>
+          <div>All content owned by
+            <a href="https://www.wizards.com" target="_blank">Wizards of the Coast</a>
+          </div>
+          <div>
+            <a href="https://github.com/trwolfe13/this-is-your-life/" target="_blank">
+              <i class="fa fa-github"></i> View on Github</a>
+          </div>
+        </small>
+      </div>
+    </div>
+  </footer>
+
+</body>
+
 </html>

src/index.js

@@ -1,3 +1,10 @@
 const Generator = require('./generator');
+const Formatter = require('./formatter');
 
-console.log(Generator());
+function generateCharacter() {
+  const character = Generator();
+  document.getElementById('character').innerHTML = Formatter(character);
+}
+
+document.getElementById('generate').addEventListener('click', generateCharacter);
+generateCharacter();

src/styles/index.scss

@@ -0,0 +1,12 @@
+.jumbotron h1 {
+  font-size: 3rem;
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+h3 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  border-bottom: 1px solid #343a40;
+  padding-bottom: 8px;
+}

webpack.config.js

@@ -5,7 +5,7 @@ module.exports = {
   context: path.join(__dirname, './src'),
   target: 'web',
   entry: [
-    './index.js'
+    './index.js', './styles/index.scss'
   ],
   output: {
     path: path.join(__dirname, 'dist'),