D&D Character Creation Tool

D&D Character Creation Tool.markdown

D&D Character Creation Tool

A Pen by Jeremy Woodbridge on CodePen.

License.

index.jade

// All stats are determined by 3rd edition rules
div#fullpage
  //Intro
  .jumbotron.section
    h1.logo D&D Character Creation tool
  //Die rolls  
  .section
    br
    br
    h1 Die Rolls
    button(onclick ="dieChar();") ROLL!
    .row
      .col-sm-3
        h3 Die 1
        div#die1
      .col-sm-3
        h3 Die 2
        #die2
      .col-sm-3
        h3 Die 3
        #die3
      .col-sm-3
        h3 Die 4
        #die4
    br
    br
    br
    h1 Die Total
    div#dieTotal
    //Races
  .section
    .row
    .col-sm-4#human
      h1 Human
    .col-sm-4#elf
      h1 Elf
    .col-sm-4#dwarf
      h1 Dwarf
    //Classes
  .section
    .row
    .col-sm-4#barb
      h1 Barbarian
    .col-sm-4#ranger
      h1 Ranger
    .col-sm-4#sorcerer
      h1 Sorcerer
   //ALLOCATION
  .section
    br 
    br
    h1 Allocate your Ability Score
     //RESULTS
  .section
    br
    h1 Here are you results
    

script.js

$('#fullpage').fullpage();
//Objects and Variables
/*var playerClass = {
  hp: 0,
  str: 0,
  dex: 0,
  con: 0,
  int: 0,
  wis: 0,
  cha: 0,
  ac: 0,
  svt: 0,
  ar: 0,
  dr: 0
};
*/
function playerChar(str, dex, con, int, wis, cha){
  this.str = str;
  this.dex = dex;
  this.con = con;
  this.int = int;
  this.wis = wis;
  this.cha = cha;
}

var Dwarf = new playerChar(10, 10, 12, 10, 10, 8);
var Elf = new playerChar(10, 12, 8, 10, 10, 10);

var skills = ["Acrobatics"];

//Test Object access
//console.log("Dwarf strength " + Dwarf.str)

/*
Stat Legend
ABILITY SCORES
hp = Health Points
str = Strength
dex = Dexterity
con = Constitution
int = Intelligence
wis = Wisdom
cha = Charisma
EXTRA SCORES
ac = armor class
svt = Saving Throws
ar = Attack Rolls
dr = Damage Rolls
feats = Feats
*/

//Dice roll functions
//There will be 4 6 sided die so 4 random numbers between 1-6
// those values will need to be put on screen as a total and seperate values

//math random statement

function dieChar(){
  var times = 4;
  var rolls = [];
  var total = 0;
  
  for (var i=0; i < times; i++){
    rolls.push(Math.floor(Math.random() * (7 - 1)) + 1)
  }
  for(i = 0; i < rolls.length; i++){
    console.log(rolls[i]);
  }
  var dieTotal = rolls[0] + rolls[1] + rolls[2] + rolls[3];
  document.getElementById('die1').innerHTML = rolls[0];
  document.getElementById('die2').innerHTML = rolls[1];
  document.getElementById('die3').innerHTML = rolls[2];
  document.getElementById('die4').innerHTML = rolls[3];
  document.getElementById('dieTotal').innerHTML = dieTotal;
}

//Check list
  //Races
  //Classes
  //Ability Allocation
  //option: Export Stats to D&D sheet

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.js  "></script>

style.sass

*
  //border: solid 1px red
  text-align: center

script
  font-size: 25px
  
//HEADER
.logo
  margin-top: 30%
/*.jumbotron
  background-image: url('https://i.ytimg.com/vi/6qQGZXWeYI8/maxresdefault.jpg', no-repeat)

//RACES
#human
  color: white
  height: 99%
  background-image: url('http://38.media.tumblr.com/15a71bf05c7a9336310090209eeb6b02/tumblr_inline_nctxdwiHYh1r9s131.jpg')
  
#elf
  color: white
  height: 99%
  background-image: url('http://epiclevelgaming.com/wp-content/uploads/2014/08/Elf-fantasy-17349761-877-6202-877x480.jpg')

#dwarf
  color: white
  height: 99%
  background-image: url('http://4.bp.blogspot.com/-5N1fMna0eOk/VAacUxkXs9I/AAAAAAAADks/ViQVG9mUREY/s1600/dwarf_by_armandeo64-d4sfgvm.jpg')
  
//CLASSES

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

Currently an app project for new D&D players. I find creating a character frustrating as a newer player so this project is to make a new character much smoother