espergen-character-sheets/dist/index.js

Esper Genesis 5th Edition character sheets created in ReactJS.

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
require('bootstrap/dist/css/bootstrap.css');

var EsperGenCharacter = function EsperGenCharacter() {};

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

function AttackTable(props) {
  function updateValue(index, field, v) {
    var value = getValue().slice();
    value[index][field] = v;
    props.onChange(props.name, value);
  }

  function getValue() {
    var value = props.value;

    if (!value) {
      value = [];
    }

    while (value.length < props.rows) {
      value.push({});
    }

    return value;
  }

  var classes = 'espergen-table';

  if (props.classes) {
    classes += ' ' + props.classes;
  }

  return React.createElement("table", {
    className: classes
  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Weapon"), React.createElement("th", {
    style: {
      width: '35px'
    }
  }, "Prof."), React.createElement("th", {
    style: {
      width: '70px'
    }
  }, "Range"), React.createElement("th", {
    style: {
      width: '40px'
    }
  }, "To Hit"), React.createElement("th", {
    style: {
      width: '70px'
    }
  }, "Damage"), React.createElement("th", {
    style: {
      width: '70px'
    }
  }, "Dmg. Type"))), React.createElement("tbody", null, getValue().map(function (v, index) {
    return [React.createElement("tr", {
      key: 'espergen-table-row-' + props.name + index
    }, React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.name ? v.name : '',
      onChange: function onChange(e) {
        return updateValue(index, 'name', e.target.value);
      }
    })), React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.prof ? v.prof : '',
      onChange: function onChange(e) {
        return updateValue(index, 'prof', e.target.value);
      }
    })), React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.range ? v.range : '',
      onChange: function onChange(e) {
        return updateValue(index, 'range', e.target.value);
      }
    })), React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.toHit ? v.toHit : '',
      onChange: function onChange(e) {
        return updateValue(index, 'toHit', e.target.value);
      }
    })), React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.damage ? v.damage : '',
      onChange: function onChange(e) {
        return updateValue(index, 'damage', e.target.value);
      }
    })), React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.damageType ? v.damageType : '',
      onChange: function onChange(e) {
        return updateValue(index, 'damageType', e.target.value);
      }
    }))), React.createElement("tr", {
      key: 'espergen-table-row2-' + props.name + index
    }, React.createElement("td", {
      colSpan: 6
    }, React.createElement("label", {
      className: 'mb-0 mr-2'
    }, "Special"), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 50px'
      },
      value: v.special ? v.special : '',
      onChange: function onChange(e) {
        return updateValue(index, 'special', e.target.value);
      }
    })))];
  })));
}

function DeathSave(props) {
  var classes = 'espergen-deathsave';

  if (props.classes) {
    classes += ' ' + props.classes;
  }

  function renderHex(value, number, type) {
    var cn = type && type > 0 ? 'deathsave' : 'deathsave fake';

    if (type === 2) {
      cn += ' failure';
    }

    if (value && number && value >= number) {
      cn += ' active';
    }

    if (number === 2) {
      cn += ' even';
    }

    var text = '';
    var click = null;

    if (type && type > 0) {
      text = number === 1 ? 'I' : number === 2 ? 'II' : number === 3 ? 'III' : '';
      click = type === 1 ? function () {
        return props.onChange(props.name + 'Successes', value === number ? null : number);
      } : function () {
        return props.onChange(props.name + 'Failures', value === number ? null : number);
      };
    }

    return React.createElement("div", {
      className: cn,
      onClick: click
    }, React.createElement("div", {
      className: 'left'
    }), React.createElement("div", {
      className: 'middle'
    }, text), React.createElement("div", {
      className: 'right'
    }));
  }

  return React.createElement("div", {
    className: classes
  }, React.createElement("div", {
    className: 'deathsave-row'
  }, renderHex(null, 1, 0), renderHex(props.valueSuccess, 2, 1), renderHex(null, 3, 0)), React.createElement("div", {
    className: 'deathsave-row'
  }, renderHex(props.valueSuccess, 1, 1), renderHex(null, 2, 0), renderHex(props.valueSuccess, 3, 1), React.createElement("label", {
    className: 'ml-3 mb-0',
    style: {
      paddingTop: '5px'
    }
  }, "Survive")), React.createElement("div", {
    className: 'deathsave-row'
  }, renderHex(props.valueFailure, 1, 2), renderHex(props.valueFailure, 2, 2), renderHex(props.valueFailure, 3, 2), React.createElement("label", {
    className: 'ml-3 mb-0',
    style: {
      paddingTop: '5px'
    }
  }, "Perish")));
}

function FeatureTable(props) {
  function updateValue(index, field, v) {
    var value = getValue().slice();
    value[index][field] = v;
    props.onChange(props.name, value);
  }

  function getValue() {
    var value = props.value;

    if (!value) {
      value = [];
    }

    while (value.length < props.rows) {
      value.push({});
    }

    return value;
  }

  var classes = 'espergen-table';

  if (props.classes) {
    classes += ' ' + props.classes;
  }

  return React.createElement("table", {
    className: classes
  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Feature"), React.createElement("th", {
    style: {
      width: '70px'
    }
  }, "Max Use"), React.createElement("th", {
    style: {
      width: '70px'
    }
  }, "Recovery"), React.createElement("th", {
    style: {
      width: '50px'
    }
  }, "Used"))), React.createElement("tbody", null, getValue().map(function (v, index) {
    return React.createElement("tr", {
      key: 'espergen-table-row-' + props.name + index
    }, React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.name ? v.name : '',
      onChange: function onChange(e) {
        return updateValue(index, 'name', e.target.value);
      }
    })), React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.maxUse ? v.maxUse : '',
      onChange: function onChange(e) {
        return updateValue(index, 'maxUse', e.target.value);
      }
    })), React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.recovery ? v.recovery : '',
      onChange: function onChange(e) {
        return updateValue(index, 'recovery', e.target.value);
      }
    })), React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.used ? v.used : '',
      onChange: function onChange(e) {
        return updateValue(index, 'used', e.target.value);
      }
    })));
  })));
}

function ResistancesTable(props) {
  function updateValue(index, field, v) {
    var value = getValue().slice();
    value[index][field] = v;
    props.onChange(props.name, value);
  }

  function getValue() {
    var value = props.value;

    if (!value) {
      value = [];
    }

    while (value.length < props.rows) {
      value.push({});
    }

    return value;
  }

  var classes = 'espergen-table';

  if (props.classes) {
    classes += ' ' + props.classes;
  }

  return React.createElement("table", {
    className: classes
  }, React.createElement("tbody", null, getValue().map(function (v, index) {
    return React.createElement("tr", {
      key: 'espergen-table-row-' + props.name + index
    }, React.createElement("td", null, React.createElement("input", {
      type: 'text',
      value: v.name ? v.name : '',
      onChange: function onChange(e) {
        return updateValue(index, 'name', e.target.value);
      }
    })));
  })));
}

function Skill(props) {
  var classes = 'espergen-skill';

  if (props.classes) {
    classes += ' ' + props.classes;
  }

  return React.createElement("div", {
    className: classes
  }, React.createElement("input", {
    type: 'text',
    value: props.value ? props.value : '',
    onChange: function onChange(e) {
      return props.onChange(props.name, e.target.value);
    }
  }), React.createElement("label", null, props.label), props.hint ? React.createElement("span", {
    className: 'espergen-skill-hint'
  }, props.hint) : null, React.createElement("div", {
    className: props.checked ? 'espergen-skill-circle active' : 'espergen-skill-circle',
    onClick: function onClick() {
      return props.onChange(props.name + 'Checked', !props.checked);
    }
  }));
}

function StatBox(props) {
  var classes = 'espergen-statbox';

  if (props.classes) {
    classes += ' ' + props.classes;
  }

  var modifier = '';

  if (props.value && !isNaN(Number(props.value))) {
    var modifierNum = Math.floor((Number(props.value) - 10) / 2);

    if (modifierNum > 0) {
      modifier = '+' + modifierNum;
    } else {
      modifier = modifierNum.toString();
    }
  }

  return React.createElement("div", {
    className: classes
  }, React.createElement("div", {
    className: 'espergen-statbox-value'
  }, React.createElement("input", {
    type: 'text',
    value: props.value ? props.value : '',
    onChange: function onChange(e) {
      return props.onChange(props.name, e.target.value);
    }
  })), React.createElement("div", null, React.createElement("label", {
    className: 'abbrev'
  }, props.abbreviation), React.createElement("hr", null), React.createElement("label", null, props.label)), React.createElement("div", {
    className: 'espergen-statbox-modifier'
  }, modifier), React.createElement("div", {
    className: 'espergen-statbox-value'
  }, React.createElement("input", {
    type: 'text',
    value: props.valueSave ? props.valueSave : '',
    onChange: function onChange(e) {
      return props.onChange(props.name + 'Save', e.target.value);
    }
  })));
}

var initialState = {
  character: {}
};

var EsperGenCharacterStatsSheet = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(EsperGenCharacterStatsSheet, _React$Component);

  function EsperGenCharacterStatsSheet(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    if (props.defaultCharacter) {
      initialState.character = props.defaultCharacter;
    }

    _this.state = initialState;
    return _this;
  }

  var _proto = EsperGenCharacterStatsSheet.prototype;

  _proto.updateCharacter = function updateCharacter(name, value) {
    var oldCharacter = this.getCharacter();
    var newCharacter = {};
    Object.assign(newCharacter, oldCharacter);
    newCharacter[name] = value;

    if (!this.props.character) {
      this.setState({
        character: newCharacter
      });
    }

    if (typeof this.props.onCharacterChanged === 'function') {
      this.props.onCharacterChanged(newCharacter, name, value);
    }
  };

  _proto.getCharacter = function getCharacter() {
    var character = this.state.character;

    if (this.props.character) {
      character = this.props.character;
    }

    return character;
  };

  _proto.render = function render() {
    var _this2 = this;

    var character = this.getCharacter();
    return React.createElement("div", {
      className: 'espergen-character-sheet container-xl mt-5 mb-5'
    }, React.createElement("div", null, React.createElement("div", {
      className: 'row mb-4'
    }, React.createElement("div", {
      className: 'col-md-5 order-md-2'
    }, React.createElement("div", {
      className: 'espergen-page-title text-md-right'
    }, "Esper Genesis"), React.createElement("div", {
      className: 'espergen-page-subtitle text-md-right'
    }, "Heroic Sci-Fi Roleplaying"), React.createElement("div", {
      className: 'row mt-2'
    }, React.createElement("div", {
      className: 'col-md-6'
    }, React.createElement("label", {
      style: {
        width: '100px'
      }
    }, "Experience Points: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 100px)'
      },
      className: 'espergen-linput',
      value: character.xp ? character.xp : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('xp', e.target.value);
      }
    })), React.createElement("div", {
      className: 'col-md-6'
    }, React.createElement("label", {
      style: {
        width: '70px'
      }
    }, "Next Level: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 70px)'
      },
      className: 'espergen-linput',
      value: character.nextXp ? character.nextXp : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('nextXp', e.target.value);
      }
    }))), React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-12'
    }, React.createElement("label", {
      style: {
        width: '60px'
      }
    }, "Campaign: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 60px)'
      },
      className: 'espergen-linput',
      value: character.campaign ? character.campaign : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('campaign', e.target.value);
      }
    }))), React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-12'
    }, React.createElement("label", {
      style: {
        width: '170px'
      }
    }, "Crucible Corps Serial Number:", ' '), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 170px)'
      },
      className: 'espergen-linput',
      value: character.corpsSerialNumber ? character.corpsSerialNumber : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('corpsSerialNumber', e.target.value);
      }
    })))), React.createElement("div", {
      className: 'col-md-7 order-md-1'
    }, React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-3 text-center mt-3 mt-md-0'
    }, React.createElement("div", {
      className: 'espergen-circle'
    }, React.createElement("div", {
      className: 'espergen-circle-inner'
    }, React.createElement("input", {
      type: 'text',
      value: character.level ? character.level : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('level', e.target.value);
      }
    }))), React.createElement("div", {
      className: 'upper1',
      style: {
        fontSize: '20px'
      }
    }, React.createElement("span", null, "L"), "evel")), React.createElement("div", {
      className: 'col-md-9'
    }, React.createElement("div", {
      className: 'row mt-2'
    }, React.createElement("div", {
      className: 'col-md-7 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '40px'
      }
    }, "Name: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 40px)'
      },
      className: 'espergen-linput',
      value: character.name ? character.name : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('name', e.target.value);
      }
    })), React.createElement("div", {
      className: 'col-md-5 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '45px'
      }
    }, "Player: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 45px)'
      },
      className: 'espergen-linput',
      value: character.playerName ? character.playerName : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('playerName', e.target.value);
      }
    }))), React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-12 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '40px'
      }
    }, "Class: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 40px)'
      },
      className: 'espergen-linput',
      value: character["class"] ? character["class"] : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('class', e.target.value);
      }
    }))), React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-6 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '40px'
      }
    }, "Race: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 40px)'
      },
      className: 'espergen-linput',
      value: character.race ? character.race : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('race', e.target.value);
      }
    })), React.createElement("div", {
      className: 'col-md-6 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '70px'
      }
    }, "Background: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 70px)'
      },
      className: 'espergen-linput',
      value: character.background ? character.background : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('background', e.target.value);
      }
    }))), React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-3 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '45px'
      }
    }, "Gender: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 45px)'
      },
      className: 'espergen-linput',
      value: character.gender ? character.gender : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('gender', e.target.value);
      }
    })), React.createElement("div", {
      className: 'col-md-3 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '30px'
      }
    }, "Size: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 30px)'
      },
      className: 'espergen-linput',
      value: character.size ? character.size : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('size', e.target.value);
      }
    })), React.createElement("div", {
      className: 'col-md-3 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '45px'
      }
    }, "Height: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 45px)'
      },
      className: 'espergen-linput',
      value: character.height ? character.height : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('height', e.target.value);
      }
    })), React.createElement("div", {
      className: 'col-md-3 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '45px'
      }
    }, "Weight: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 45px)'
      },
      className: 'espergen-linput',
      value: character.weight ? character.weight : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('weight', e.target.value);
      }
    }))), React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-2 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '30px'
      }
    }, "Age: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 30px)'
      },
      className: 'espergen-linput',
      value: character.age ? character.age : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('age', e.target.value);
      }
    })), React.createElement("div", {
      className: 'col-md-3 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '30px'
      }
    }, "Hair: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 30px)'
      },
      className: 'espergen-linput',
      value: character.hair ? character.hair : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('hair', e.target.value);
      }
    })), React.createElement("div", {
      className: 'col-md-3 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '35px'
      }
    }, "Eyes: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 35px)'
      },
      className: 'espergen-linput',
      value: character.eyes ? character.eyes : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('eyes', e.target.value);
      }
    })), React.createElement("div", {
      className: 'col-md-4 pl-md-1 pr-md-1'
    }, React.createElement("label", {
      style: {
        width: '60px'
      }
    }, "Alignment: "), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 60px)'
      },
      className: 'espergen-linput',
      value: character.alignment ? character.alignment : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('alignment', e.target.value);
      }
    }))))))), React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-4'
    }, React.createElement("div", {
      className: 'upper1',
      style: {
        fontSize: '20px'
      }
    }, React.createElement("span", null, "A"), "bilities"), React.createElement("label", {
      style: {
        margin: '0 85px 5px 8px'
      }
    }, "Score"), React.createElement("label", {
      style: {
        margin: '0 20px 5px'
      }
    }, "Modifier"), React.createElement("label", {
      style: {
        margin: '0 30px 5px'
      }
    }, "Saving", React.createElement("br", null), "Throw"), React.createElement(StatBox, {
      abbreviation: 'STR',
      label: 'Strength',
      name: 'str',
      value: character.str,
      valueSave: character.strSave,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(StatBox, {
      abbreviation: 'DEX',
      label: 'Dexterity',
      name: 'dex',
      value: character.dex,
      valueSave: character.dexSave,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(StatBox, {
      abbreviation: 'CON',
      label: 'Constitution',
      name: 'con',
      value: character.con,
      valueSave: character.conSave,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(StatBox, {
      abbreviation: 'INT',
      label: 'intelligence',
      name: 'int',
      value: character["int"],
      valueSave: character.intSave,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(StatBox, {
      abbreviation: 'WIS',
      label: 'Wisdom',
      name: 'wis',
      value: character.wis,
      valueSave: character.wisSave,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(StatBox, {
      abbreviation: 'CHA',
      label: 'Charisma',
      name: 'cha',
      value: character.cha,
      valueSave: character.chaSave,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement("div", {
      className: 'upper1 mt-4',
      style: {
        fontSize: '16px'
      }
    }, React.createElement("span", null, "S"), "enses"), React.createElement("div", null, React.createElement("label", {
      className: 'upper1',
      style: {
        fontSize: '16px',
        fontWeight: 'normal'
      }
    }, React.createElement("span", null, "P"), "assive ", React.createElement("span", null, "P"), "erception"), React.createElement("input", {
      type: 'text',
      style: {
        width: '40px',
        height: '40px',
        border: '2px solid black',
        margin: '0 10px 0 20px',
        fontSize: '16px',
        textAlign: 'center'
      },
      className: 'espergen-linput',
      value: character.passivePerception ? character.passivePerception : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('passivePerception', e.target.value);
      }
    }), React.createElement("label", {
      style: {
        textAlign: 'center',
        verticalAlign: 'middle'
      }
    }, "= 10 +", React.createElement("br", null), "Perception", React.createElement("br", null), "Skill")), React.createElement("div", null, React.createElement("textarea", {
      className: 'espergen-linedtextarea',
      value: character.senses ? character.senses : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('senses', e.target.value);
      },
      rows: 2
    }))), React.createElement("div", {
      className: 'col-md-4 pr-md-1 pl-md-1'
    }, React.createElement("div", {
      className: 'row mt-5'
    }, React.createElement("div", {
      className: 'col-md-7 pr-md-1 pl-md-1 text-center'
    }, React.createElement("div", null, React.createElement("div", {
      className: 'upper1',
      style: {
        fontSize: '16px',
        textAlign: 'center'
      }
    }, React.createElement("span", null, "B"), "urst ", React.createElement("span", null, "F"), "ire"), React.createElement("div", {
      className: 'mt-2'
    }, React.createElement("label", {
      className: 'espergen-inline-label'
    }, "Burst", React.createElement("br", null), "DC"), React.createElement("div", {
      className: 'espergen-round-input'
    }, React.createElement("input", {
      type: 'text',
      value: character.burstDc ? character.burstDc : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('burstDc', e.target.value);
      }
    })), React.createElement("label", {
      className: 'espergen-inline-label'
    }, "Burst Save", React.createElement("br", null), "Bonus"), React.createElement("div", {
      className: 'espergen-round-input'
    }, React.createElement("input", {
      type: 'text',
      value: character.burstSave ? character.burstSave : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('burstSave', e.target.value);
      }
    })))), React.createElement("label", {
      className: 'text-center',
      style: {
        fontSize: '9px'
      }
    }, "(DC = 8 + Proficiency Score + Dex Bonus)"), React.createElement("div", null, React.createElement("div", {
      className: 'upper1 mt-3',
      style: {
        fontSize: '16px',
        textAlign: 'center'
      }
    }, React.createElement("span", null, "A"), "bility ", React.createElement("span", null, "S"), "ave ", React.createElement("span", null, "DC")), React.createElement("div", {
      className: 'mt-2'
    }, React.createElement("div", {
      className: 'espergen-inline-label'
    }, React.createElement("label", null, "8 + "), React.createElement("input", {
      type: 'text',
      style: {
        width: '24px',
        margin: '0 5px 0 5px',
        textAlign: 'center'
      },
      className: 'espergen-linput',
      value: character.abilitySave1Mod ? character.abilitySave1Mod : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('abilitySave1Mod', e.target.value);
      }
    }), React.createElement("br", null), React.createElement("label", {
      style: {
        fontSize: '9px'
      }
    }, "+ Prof", React.createElement("br", null), "Bonus")), React.createElement("div", {
      className: 'espergen-round-input',
      style: {
        marginBottom: '15px'
      }
    }, React.createElement("input", {
      type: 'text',
      value: character.abilitySave1Dc ? character.abilitySave1Dc : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('abilitySave1Dc', e.target.value);
      }
    })), React.createElement("div", {
      className: 'espergen-inline-label'
    }, React.createElement("label", null, "8 + "), React.createElement("input", {
      type: 'text',
      style: {
        width: '24px',
        margin: '0 5px 0 5px',
        textAlign: 'center'
      },
      className: 'espergen-linput',
      value: character.abilitySave2Mod ? character.abilitySave2Mod : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('abilitySave2Mod', e.target.value);
      }
    }), React.createElement("br", null), React.createElement("label", {
      style: {
        fontSize: '9px'
      }
    }, "+ Prof", React.createElement("br", null), "Bonus")), React.createElement("div", {
      className: 'espergen-round-input',
      style: {
        marginBottom: '15px'
      }
    }, React.createElement("input", {
      type: 'text',
      value: character.abilitySave2Dc ? character.abilitySave2Dc : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('abilitySave2Dc', e.target.value);
      }
    }))))), React.createElement("div", {
      className: 'col-md-5'
    }, React.createElement("div", {
      className: 'espergen-circle solid'
    }, React.createElement("div", {
      className: 'espergen-circle-inner'
    }, React.createElement("input", {
      type: 'text',
      style: {
        padding: '13px'
      },
      value: character.proficiencyBonus ? character.proficiencyBonus : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('proficiencyBonus', e.target.value);
      }
    }))), React.createElement("div", {
      className: 'upper1',
      style: {
        fontSize: '16px',
        textAlign: 'center',
        lineHeight: '24px',
        marginTop: '10px'
      }
    }, React.createElement("span", null, "P"), "roficiency", React.createElement("br", null), React.createElement("span", null, "B"), "onus"), React.createElement("hr", {
      className: 'espergen-seperator'
    }), React.createElement("div", null, React.createElement("input", {
      type: 'text',
      style: {
        width: '24px',
        height: '24px',
        border: '1px solid black',
        margin: '0 10px 0 10px',
        fontSize: '12px',
        textAlign: 'center'
      },
      className: 'espergen-linput',
      value: character.inspiration ? character.inspiration : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('inspiration', e.target.value);
      }
    }), React.createElement("label", {
      className: 'upper1',
      style: {
        fontSize: '12px',
        fontWeight: 'normal',
        margin: '0',
        verticalAlign: 'bottom'
      }
    }, React.createElement("span", null, "I"), "inspiration")), React.createElement("hr", {
      className: 'espergen-seperator'
    }))), React.createElement("label", {
      className: 'text-center w-100 mt-2 mb-0'
    }, React.createElement("strong", null, "Saving Throw Advantages/Disadvantages")), React.createElement("textarea", {
      className: 'espergen-linedtextarea',
      value: character.savingThrowAdvs ? character.savingThrowAdvs : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('savingThrowAdvs', e.target.value);
      },
      rows: 2
    }), React.createElement("div", {
      className: 'upper1 mt-2 mb-1',
      style: {
        fontSize: '16px'
      }
    }, React.createElement("span", null, "S"), "pecial ", React.createElement("span", null, "F"), "eatures"), React.createElement(FeatureTable, {
      rows: 6,
      name: 'specialFeatures',
      value: character.specialFeatures,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    })), React.createElement("div", {
      className: 'col-md-4'
    }, React.createElement("div", {
      className: 'upper1 mb-2',
      style: {
        fontSize: '20px'
      }
    }, React.createElement("span", null, "S"), "kills"), React.createElement("label", {
      style: {
        margin: '0 0px 5px 8px'
      }
    }, "Bonus"), React.createElement("label", {
      style: {
        margin: '0 0px 5px 18px'
      }
    }, "Skill Name"), React.createElement("label", {
      style: {
        margin: '0 5px 5px 0px',
        "float": 'right'
      }
    }, "Proficient"), React.createElement("div", {
      className: 'espergen-skilllist'
    }, React.createElement(Skill, {
      label: 'Acrobatics',
      hint: '(Dex)',
      name: 'skillAcrobatics',
      value: character.skillAcrobatics,
      checked: character.skillAcrobaticsChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Astrophysics',
      hint: '(Int)',
      name: 'skillAstrophysics',
      value: character.skillAstrophysics,
      checked: character.skillAstrophysicsChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Athletics',
      hint: '(Str)',
      name: 'skillAthletics',
      value: character.skillAthletics,
      checked: character.skillAthleticsChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Computers',
      hint: '(Int)',
      name: 'skillComputers',
      value: character.skillComputers,
      checked: character.skillComputersChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Deception',
      hint: '(Cha)',
      name: 'skillDeception',
      value: character.skillDeception,
      checked: character.skillDeceptionChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Insight',
      hint: '(Wis)',
      name: 'skillInsight',
      value: character.skillInsight,
      checked: character.skillInsightChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Intimidation',
      hint: '(Cha)',
      name: 'skillIntimidation',
      value: character.skillIntimidation,
      checked: character.skillIntimidationChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Investigation',
      hint: '(Int)',
      name: 'skillInvestigation',
      value: character.skillInvestigation,
      checked: character.skillInvestigationChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Lore',
      hint: '(Int)',
      name: 'skillLore',
      value: character.skillLore,
      checked: character.skillLoreChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Mechanics',
      hint: '(Wis)',
      name: 'skillMechanics',
      value: character.skillMechanics,
      checked: character.skillMechanicsChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Medicine',
      hint: '(Wis)',
      name: 'skillMedicine',
      value: character.skillMedicine,
      checked: character.skillMedicineChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Perception',
      hint: '(Wis)',
      name: 'skillPerception',
      value: character.skillPerception,
      checked: character.skillPerceptionChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Performance',
      hint: '(Cha)',
      name: 'skillPerformance',
      value: character.skillPerformance,
      checked: character.skillPerformanceChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Persuasion',
      hint: '(Cha)',
      name: 'skillPersuasion',
      value: character.skillPersuasion,
      checked: character.skillPersuasionChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Slight of Hand',
      hint: '(Dex)',
      name: 'skillSlightOfHand',
      value: character.skillSlightOfHand,
      checked: character.skillSlightOfHandChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Stealth',
      hint: '(Dex)',
      name: 'skillStealth',
      value: character.skillStealth,
      checked: character.skillStealthChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Survival',
      hint: '(Wis)',
      name: 'skillSurvival',
      value: character.skillSurvival,
      checked: character.skillSurvivalChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    }), React.createElement(Skill, {
      label: 'Xenobiology',
      hint: '(Int)',
      name: 'skillXenobiology',
      value: character.skillXenobiology,
      checked: character.skillXenobiologyChecked,
      onChange: function onChange(name, value) {
        _this2.updateCharacter(name, value);
      }
    })))), React.createElement("hr", {
      className: 'espergen-page-break mt-2'
    }), React.createElement("hr", {
      className: 'espergen-page-break mb-2'
    }), React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-6'
    }, React.createElement("div", {
      className: 'mb-2'
    }, React.createElement("div", {
      className: 'upper1',
      style: {
        fontSize: '20px',
        display: 'inline-block',
        verticalAlign: 'middle',
        marginBottom: '5px'
      }
    }, React.createElement("span", null, "C"), "ombat"), React.createElement("div", {
      className: 'espergen-round-input large ml-4 mr-2'
    }, React.createElement("input", {
      type: 'text',
      value: character.init ? character.init : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('init', e.target.value);
      }
    })), React.createElement("div", {
      className: 'upper1 mr-2',
      style: {
        fontSize: '16px',
        fontWeight: 'normal',
        display: 'inline-block',
        verticalAlign: 'middle'
      }
    }, React.createElement("span", null, "I"), "nitiative"), React.createElement("div", {
      className: 'ml-3 mr-0',
      style: {
        display: 'inline-block'
      }
    }, React.createElement("label", {
      className: 'mb-0 text-center w-100',
      style: {
        fontSize: '8px'
      }
    }, "Dex"), React.createElement("br", null), React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      value: character.initDex ? character.initDex : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('initDex', e.target.value);
      }
    })), "+", React.createElement("div", {
      className: 'ml-0 mr-2',
      style: {
        display: 'inline-block'
      }
    }, React.createElement("label", {
      className: 'mb-0 text-center w-100',
      style: {
        fontSize: '8px'
      }
    }, "Misc"), React.createElement("br", null), React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      value: character.initMisc ? character.initMisc : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('initMisc', e.target.value);
      }
    })), React.createElement("div", {
      style: {
        display: 'inline-block',
        width: '1px',
        verticalAlign: 'middle',
        height: '40px',
        backgroundColor: 'black'
      }
    }), React.createElement("div", {
      className: 'ml-2 mr-2',
      style: {
        display: 'inline-block'
      }
    }, React.createElement("label", {
      className: 'mb-0 text-center w-100',
      style: {
        fontSize: '8px'
      }
    }, "Base Speed"), React.createElement("br", null), React.createElement("input", {
      type: 'text',
      style: {
        height: '36px',
        width: '50px'
      },
      className: 'espergen-binput',
      value: character.speed ? character.speed : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('speed', e.target.value);
      }
    })), React.createElement("div", {
      className: 'ml-2',
      style: {
        display: 'inline-block'
      }
    }, React.createElement("label", {
      className: 'mb-0 text-center w-100',
      style: {
        fontSize: '8px'
      }
    }, "Encumbered"), React.createElement("br", null), React.createElement("input", {
      type: 'text',
      style: {
        height: '36px',
        width: '50px'
      },
      className: 'espergen-binput',
      value: character.encumbered ? character.encumbered : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('encumbered', e.target.value);
      }
    }))), React.createElement("div", {
      className: 'row'
    }, React.createElement("div", {
      className: 'col-md-4 pd-md-0'
    }, React.createElement("div", {
      className: 'upper1 mb-3',
      style: {
        fontSize: '16px',
        display: 'inline-block',
        verticalAlign: 'middle'
      }
    }, React.createElement("span", null, "A"), "rmour ", React.createElement("span", null, "C"), "lass"), React.createElement("div", {
      className: 'espergen-hex'
    }, React.createElement("div", {
      className: 'espergen-circle-inner'
    }, React.createElement("input", {
      type: 'text',
      value: character.ac ? character.ac : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('ac', e.target.value);
      }
    })))), React.createElement("div", {
      className: 'col-md-8 pl-md-0 mt-5 mt-md-0'
    }, React.createElement("div", {
      className: 'mt-2'
    }, React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      value: character.acBonus ? character.acBonus : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acBonus', e.target.value);
      }
    }), React.createElement("label", {
      className: 'mb-0 text-center',
      style: {
        width: '60px',
        fontSize: '8px',
        verticalAlign: 'middle'
      }
    }, "Armour", React.createElement("br", null), "Bonus"), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 84px'
      },
      className: 'espergen-binput',
      value: character.acBonusText ? character.acBonusText : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acBonusText', e.target.value);
      }
    })), React.createElement("span", {
      className: 'ml-2',
      style: {}
    }, "+"), React.createElement("div", null, React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      value: character.acShieldBonus ? character.acShieldBonus : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acShieldBonus', e.target.value);
      }
    }), React.createElement("label", {
      className: 'mb-0 text-center',
      style: {
        width: '60px',
        fontSize: '8px',
        verticalAlign: 'middle'
      }
    }, "Shield", React.createElement("br", null), "Bonus"), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 84px'
      },
      className: 'espergen-binput',
      value: character.acShieldBonusText ? character.acShieldBonusText : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acShieldBonusText', e.target.value);
      }
    })), React.createElement("span", {
      className: 'ml-2',
      style: {}
    }, "+"), React.createElement("div", null, React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      value: character.acDexMod ? character.acDexMod : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acDexMod', e.target.value);
      }
    }), React.createElement("label", {
      className: 'mb-0 text-center',
      style: {
        width: '60px',
        fontSize: '8px',
        verticalAlign: 'middle'
      }
    }, "Dexterity", React.createElement("br", null), "Modifier"), React.createElement("div", {
      style: {
        display: 'inline-block',
        verticalAlign: 'middle',
        lineHeight: '12px'
      }
    }, React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      style: {
        height: '12px',
        width: '12px',
        fontSize: '7px'
      },
      value: character.acMediumArmour ? character.acMediumArmour : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acMediumArmour', e.target.value);
      }
    }), React.createElement("label", {
      className: 'mb-0 ml-1 mr-3',
      style: {
        fontSize: '8px',
        verticalAlign: 'middle'
      }
    }, "Medium Armour (Max Bonus + 2)"), React.createElement("br", null), React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      style: {
        height: '12px',
        width: '12px',
        fontSize: '7px'
      },
      value: character.acHeavyArmour ? character.acHeavyArmour : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acHeavyArmour', e.target.value);
      }
    }), React.createElement("label", {
      className: 'mb-0 ml-1 mr-3',
      style: {
        fontSize: '8px',
        verticalAlign: 'middle'
      }
    }, "Heavy Armour (No Dex Bonus)")), React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      style: {
        height: '12px',
        width: '12px',
        fontSize: '8px'
      },
      value: character.acStealthDisAdv ? character.acStealthDisAdv : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acStealthDisAdv', e.target.value);
      }
    }), React.createElement("label", {
      className: 'mb-0 ml-1 mr-2',
      style: {
        fontSize: '7px',
        verticalAlign: 'middle'
      }
    }, "Stealth", React.createElement("br", null), "Disadv")), React.createElement("span", {
      className: 'ml-2',
      style: {}
    }, "+"), React.createElement("div", null, React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      value: character.acPowerModifier ? character.acPowerModifier : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acPowerModifier', e.target.value);
      }
    }), React.createElement("label", {
      className: 'mb-0 text-center',
      style: {
        width: '60px',
        fontSize: '8px',
        verticalAlign: 'middle'
      }
    }, "Power", React.createElement("br", null), "Modifier"), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 84px'
      },
      className: 'espergen-binput',
      value: character.acPowerModifierText ? character.acPowerModifierText : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acPowerModifierText', e.target.value);
      }
    })), React.createElement("span", {
      className: 'ml-2',
      style: {}
    }, "+"), React.createElement("div", null, React.createElement("input", {
      type: 'text',
      className: 'espergen-binput',
      value: character.acItemModifier ? character.acItemModifier : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acItemModifier', e.target.value);
      }
    }), React.createElement("label", {
      className: 'mb-0 text-center',
      style: {
        width: '60px',
        fontSize: '8px',
        verticalAlign: 'middle'
      }
    }, "Item", React.createElement("br", null), "Modifier"), React.createElement("input", {
      type: 'text',
      style: {
        width: 'calc(100% - 84px'
      },
      className: 'espergen-binput',
      value: character.acItemModifierText ? character.acItemModifierText : '',
      onChange: function onChange(e) {
        return _this2.updateCharacter('acItemModifierText', e.target.value);
      }
    })), React.createElement("span", {
      className: 'ml