Character Gen - React

Developer
Dave
Size
37,586 Kb
Views
22,264
  1. Character Gen - React Previews
  2. Character Gen - React HTML Codes
  3. Character Gen - React CSS Codes
  4. Character Gen - React JS Codes

How do I make an character gen - react?

What is a character gen - react? How do you make a character gen - react? This script and codes were developed by Dave on 17 September 2022, Saturday.

Character Gen - React Previews
IQ Test

Character Gen - React - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Character Gen - React</title> <link rel='stylesheet prefetch' href='css/https___codepen_io_team_c.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg class="h-hide" xmlns="http://www.w3.org/2000/svg"> <symbol id="caret-icon" viewBox="0 0 10 7"> <path fill="currentColor" fill-rule="evenodd" d="M4.95 4.07L2.12 1.244c-.39-.39-1.023-.39-1.413 0-.39.39-.39 1.024 0 1.414L3.95 5.9c.187.187.44.292.707.292h.585c.266 0 .52-.105.708-.292l3.242-3.243c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L4.95 4.07z"/> </symbol> <symbol id="plus-icon" viewBox="0 0 12 12"> <path fill="currentColor" fill-rule="evenodd" d="M7 5V0H5v5H0v2h5v5h2V7h5V5H7z" /> </symbol>
<symbol id="equals-icon" viewBox="0 0 75 93.75"> <g><path fill="currentColor" fill-rule="evenodd" d="M 73.15625 57.085938 C 73.15625 60.882812 69.871094 63.945312 65.796875 63.953125 L 9.203125 63.953125 C 5.132812 63.953125 1.84375 60.882812 1.835938 57.085938 L 1.835938 53.226562 C 1.835938 49.4375 5.128906 46.371094 9.203125 46.371094 L 65.796875 46.371094 C 69.863281 46.371094 73.160156 49.4375 73.160156 53.226562 Z M 73.15625 57.085938"/><path fill="currentColor" fill-rule="evenodd" d="M 73.15625 26.523438 C 73.15625 30.324219 69.871094 33.382812 65.796875 33.390625 L 9.203125 33.390625 C 5.136719 33.390625 1.84375 30.324219 1.839844 26.523438 L 1.839844 22.664062 C 1.839844 18.875 5.132812 15.800781 9.203125 15.804688 L 65.796875 15.804688 C 69.863281 15.804688 73.160156 18.875 73.160156 22.664062 Z M 73.15625 26.523438 "/></g>
</symbol>
<div class="l-container"> <div id="appRoot"></div>
</div> <script src='https://fb.me/react-15.1.0.min.js'></script>
<script src='https://fb.me/react-dom-15.1.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Character Gen - React - Script Codes CSS Codes

.c-radio-input__input { margin-right: rem($shell-g-spacing-x-small);
}
.c-stat-box { border: 1px solid; margin-left: rem($shell-g-spacing); padding: rem($shell-g-spacing-2x-small); text-align: center; width: rem($shell-g-spacing-4x-large);
}
.c-stat-box__value { display: block;
}
.c-stat-box__label { display: block; font-size: rem($shell-g-font-size-2x-small); text-transform: uppercase;
}
.c-form-item { display: flex; flex-direction: column;
}
.c-stat { align-items: flex-end; display: flex;
}
/* ============================================================================ COMPONENTS -> SELECT LIST ========================================================================= */
/** * See the ESDoc's in "SelectList.js" for a description of this * component and refer to the JSX section in this file to see the components * markup. */
/** * Settings. */
// Equals the height of text inputs
$c-select-list-padding-ends: $shell-g-spacing-small;
/** * The container `` element which we apply the visual `` element. * * 1. Remove the visual user-agent styles. * 2. Reinstate the correct `cursor` as we killed it in [1]. * 3. We always want it to be the full width of its parent `` element. * 4. The only visual styles we apply, the rest go on the parent `` * element. * 4a. Needs to be bigger to make room for the SVG icon. * 5. Remove `outline` as we provide a strong custom `:focus`. * 6. Needed in order to have `transition` work as browsers don't like it * when there isn't the same amount of `box-shadow` values for both * default and the `:focus` state ಠ╭╮ಠ. * 7. Hide the arrow in IE 10. */
.c-select-list__select { appearance: none; // [1] background: none; // [1] border: 0; // [1] cursor: pointer; // [2] display: block; // [3] font-size: rem($shell-g-font-size-small); // [4] outline: 0; // [5] padding-bottom: rem($c-select-list-padding-ends); // [4] padding-left: rem($shell-g-spacing); // [4] padding-right: rem($shell-g-spacing-2x-large); // [4a] padding-top: rem($c-select-list-padding-ends); // [4] transition: box-shadow 0.2s ease; width: 100%; // [3] // [7] &::-ms-expand { display: none; } // [5] &:focus { box-shadow: inset 0 0 0 0 rgba($shell-g-color-white, 0), $g-box-shadow-active; // [6] } &.is-invalid, &.is-invalid:focus { box-shadow: 0 0 0 1px $g-color-red-500; }
}
/** * The SVG caret icon. */
.c-select-list__icon { fill: $shell-g-color-black; height: rem(7); pointer-events: none; position: absolute; right: rem($shell-g-spacing); top: 50%; transform: translateY(-50%); width: rem(16);
}
.c-text-input { background-color: $shell-g-color-white; border: 0; border-radius: $shell-g-border-radius; box-shadow: $g-box-shadow-text-input; color: $shell-g-color-text; font-size: rem($shell-g-font-size-small); outline: 0; // [1] padding: rem($shell-g-spacing-small) rem($shell-g-spacing); transition: box-shadow 0.2s ease; width: 100%; // [1] &:focus { box-shadow: inset 0 0 0 0 rgba($shell-g-color-white, 0), $g-box-shadow-active; // [2] } &.is-invalid, &.is-invalid:focus { box-shadow: 0 0 0 1px $g-color-red-500; }
}
.c-button { align-items: center; background-color: $g-color-legacy-green-700; background-image: linear-gradient( $g-color-legacy-green-500, transparent); border: 1px solid $g-color-legacy-green-700; border-radius: $shell-g-border-radius; box-shadow: inset 0 1px 0 0 $g-color-legacy-green-400; display: inline-flex; font-weight: $shell-g-font-weight-bold; line-height: 1; // [1] outline: 0; // [2] padding: rem($shell-g-spacing-small) rem($shell-g-spacing-x-large); text-decoration: none; text-shadow: 0 1px 1px $g-color-legacy-green-800; transition: background-color 0.12s ease; &, &:hover, // [3] &:focus { // [3] color: $shell-g-color-white; } &:hover, &:focus { background-color: $g-color-legacy-green-400; } // [1] &:focus { box-shadow: $g-box-shadow-active; } &:active { box-shadow: inset 0 1px 0 rgba($shell-g-color-black, 0.08), inset -2px 0 0 rgba($shell-g-color-black, 0.03); text-shadow: 0 -1px 1px $g-color-legacy-green-800; transform: translateY(1px); }
}
.c-stat .c-text-input { border-bottom-right-radius: 0; border-top-right-radius: 0; border: 1px solid rgba($shell-g-color-black, 0.2); border-right: none; width: rem(150);
}
.c-stat .c-button { border-bottom-left-radius: 0; border-top-left-radius: 0;
}

Character Gen - React - Script Codes JS Codes

'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// DATA
var stats = [{ id: 'stat1', name: 'Strength'
}, { id: 'stat2', name: 'Dexterity'
}, { id: 'stat3', name: 'Constitution'
}, { id: 'stat4', name: 'Intelligence'
}, { id: 'stat5', name: 'Wisdom'
}, { id: 'stat6', name: 'Charisma'
}];
var races = [{ name: 'Human', value: 'human', size: 'medium', modifiers: {}
}, { name: 'Dwarf', value: 'dwarf', modifiers: { stat3: 2, stat6: -2 }, size: 'medium'
}, { name: 'Elf', value: 'elf', modifiers: { stat2: 2, stat3: -2 }, size: 'medium'
}, { name: 'Gnome', value: 'gnome', modifiers: { stat1: -2, stat3: 2 }, size: 'small'
}, { name: 'Half-Elf', value: 'half-elf', modifiers: {}, size: 'medium'
}, { name: 'Half-Orc', modifiers: { stat1: 2, stat4: -2, stat6: -2 }, value: 'half-orc', size: 'medium'
}, { name: 'Halfling', modifiers: { stat1: -2, stat2: 2 }, value: 'halfling', size: 'small'
}];
var classes = [{ name: 'Barbarian', value: 'barbarian', classSkills: ['Climb', 'Craft', 'Handle Animal', 'Intimidate', 'Jump (Str)', 'Listen', 'Ride', 'Survival', 'Swim'], initSkillModifier: 4, levelSkillModifier: 4, level: { 1: { baseAttackBonus: [2], baseSavingThrows: { fort: 2, ref: 0, will: 0 }, special: ['Fast Movement', 'Illiteracy', 'Rage 1/day'] }, 2: { baseAttackBonus: [3], baseSavingThrows: { fort: 3, ref: 0, will: 0 }, special: ['Uncanny Dodge'] } }
}, { name: 'Bard', value: 'bard'
}, { name: 'Cleric', value: 'cleric'
}, { name: 'Druid', value: 'druid'
}, { name: 'Fighter', value: 'fighter'
}, { name: 'Monk', value: 'monk'
}, { name: 'Paladin', value: 'paladin'
}, { name: 'Ranger', value: 'ranger'
}, { name: 'Rogue', value: 'rogue'
}, { name: 'Sorceror', value: 'sorceror'
}, { name: 'Wizard', value: 'wizard'
}];
var alignments = [{ name: 'Lawful Good'
}, { name: 'Neutral Good'
}, { name: 'Chaotic Good'
}, { name: 'Lawful Neutral'
}, { name: 'True Neutral'
}, { name: 'Chaotic Neutral'
}, { name: 'Lawful Evil'
}, { name: 'Neutral Evil'
}, { name: 'Chaotic Evil'
}];
// UTILS
var getRandom = function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
};
var roll = function roll(d) { return getRandom(1, d);
};
var sum = function sum(array) { return array.reduce(function (a, b) { return a + b; });
};
var rollStat = function rollStat() { var i = arguments.length <= 0 || arguments[0] === undefined ? 3 : arguments[0]; var array = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1]; if (i > 0) { array.push(roll(6)); return rollStat(i - 1, array); } else { return sum(array); }
};
var getStatModifier = function getStatModifier(val) { return Math.floor((val - 10) / 2);
};
// PRESENTATIONAL COMPONENTS
var StatBox = function StatBox(_ref) { var value = _ref.value; var label = _ref.label; return React.createElement( 'div', { className: 'c-stat-box' }, React.createElement( 'p', null, React.createElement( 'strong', { className: 'c-stat-box__value' }, value ), React.createElement( 'span', { className: 'c-stat-box__label' }, label ) ) );
};
StatBox.propTypes = { value: React.PropTypes.string, label: React.PropTypes.string
};
var BaseAttackBox = function BaseAttackBox(_ref2) { var _ref2$selectedClass = _ref2.selectedClass; var selectedClass = _ref2$selectedClass === undefined ? {} : _ref2$selectedClass; var level = _ref2.level; var getModifer = function getModifer() { var bab = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; if (selectedClass.level !== undefined && selectedClass.level[level].baseAttackBonus) { bab = selectedClass.level[level].baseAttackBonus; } return bab; }; var value = getModifer(); return React.createElement(StatBox, { label: 'BAB', value: value });
};
var RadioInput = function RadioInput(_ref3) { var _ref3$id = _ref3.id; var id = _ref3$id === undefined ? "910123" : _ref3$id; var labelText = _ref3.labelText; var props = _objectWithoutProperties(_ref3, ['id', 'labelText']); return React.createElement( 'div', { className: 'c-radio-input' }, React.createElement('input', _extends({}, props, { id: id, className: 'c-radio-input__input', type: 'radio' })), React.createElement( 'label', { htmlFor: id }, labelText ) );
};
RadioInput.propTypes = { id: React.PropTypes.string, labelText: React.PropTypes.string.isRequired
};
var Button = function Button(_ref4) { var text = _ref4.text; var _ref4$type = _ref4.type; var type = _ref4$type === undefined ? 'submit' : _ref4$type; var props = _objectWithoutProperties(_ref4, ['text', 'type']); return React.createElement( 'button', _extends({ className: 'c-button' }, props), text );
};
Button.propTypes = { text: React.PropTypes.string.isRequired, type: React.PropTypes.string
};
var TextInput = function TextInput(_ref5) { var _ref5$id = _ref5.id; var id = _ref5$id === undefined ? '1234' : _ref5$id; var labelText = _ref5.labelText; var _ref5$type = _ref5.type; var type = _ref5$type === undefined ? 'text' : _ref5$type; var _ref5$value = _ref5.value; var value = _ref5$value === undefined ? '' : _ref5$value; var props = _objectWithoutProperties(_ref5, ['id', 'labelText', 'type', 'value']); return React.createElement( 'div', { className: 'c-form-item' }, React.createElement( 'label', { htmlFor: id }, labelText ), React.createElement('input', _extends({}, props, { id: id, className: 'c-text-input', type: type, value: value })) );
};
TextInput.propTypes = { id: React.PropTypes.string, labelText: React.PropTypes.string.isRequired, type: React.PropTypes.string, value: React.PropTypes.string
};
var SelectList = function SelectList(_ref6) { var _ref6$id = _ref6.id; var id = _ref6$id === undefined ? '7891' : _ref6$id; var labelText = _ref6.labelText; var options = _ref6.options; var props = _objectWithoutProperties(_ref6, ['id', 'labelText', 'options']); return React.createElement( 'div', null, React.createElement( 'label', { htmlFor: id }, labelText ), React.createElement( 'span', { className: 'c-select-list' }, React.createElement( 'select', _extends({}, props, { id: id, className: 'c-select-list__select' }), options.map(function (item, i) { return React.createElement( 'option', { key: i, disabled: item.disbled, value: item.value }, item.name ); }) ), React.createElement( 'svg', { className: 'c-select-list__icon' }, React.createElement('use', { xlinkHref: '#caret-icon' }) ) ) );
};
SelectList.propTypes = { id: React.PropTypes.string, labelText: React.PropTypes.string.isRequired, options: React.PropTypes.array.isRequired
};
var Canvas = function (_React$Component) { _inherits(Canvas, _React$Component); function Canvas(props) { _classCallCheck(this, Canvas); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { selectedRace: { value: 'human' }, selectedClass: { value: 'bard' }, gender: 'male', level: '1' }; _this.passClass = _this.passClass.bind(_this); _this.passRace = _this.passRace.bind(_this); _this.toggleGender = _this.toggleGender.bind(_this); _this.changeValue = _this.changeValue.bind(_this); return _this; } Canvas.prototype.changeValue = function changeValue(e) { var _setState; this.setState((_setState = {}, _setState[e.target.name] = e.target.value, _setState)); }; Canvas.prototype.toggleGender = function toggleGender(e) { this.setState({ gender: e.target.value }); }; Canvas.prototype.passClass = function passClass(e) { this.setState({ selectedClass: classes.filter(function (el) { return el.value === e.target.value; })[0] }); }; Canvas.prototype.passRace = function passRace(e) { this.setState({ selectedRace: races.filter(function (el) { return el.value === e.target.value; })[0] }); }; Canvas.prototype.render = function render() { return React.createElement( 'div', null, React.createElement( 'div', { className: 'h-spacing' }, React.createElement(TextInput, { labelText: 'Name: ', value: this.state.name, id: 'name', name: 'name', onChange: this.changeValue }) ), React.createElement( 'div', { className: 'h-spacing' }, React.createElement(TextInput, { labelText: 'Age: ', value: this.state.age, id: 'age', name: 'age', onChange: this.changeValue }) ), React.createElement( 'div', { className: 'h-spacing' }, React.createElement( 'fieldset', null, React.createElement( 'legend', null, 'Gender:' ), React.createElement(RadioInput, { id: 'male', labelText: 'Male', value: 'male', name: 'gender', checked: this.state.gender === 'male', onClick: this.toggleGender }), React.createElement(RadioInput, { id: 'female', labelText: 'Female', value: 'female', name: 'gender', checked: this.state.gender === 'female', onClick: this.toggleGender }) ) ), React.createElement( 'div', { className: 'h-spacing' }, React.createElement(TextInput, { labelText: 'Level: ', value: this.state.level, id: 'level', name: 'level', onChange: this.changeValue }) ), React.createElement( 'div', { className: 'h-spacing' }, React.createElement(SelectList, { labelText: 'Race: ', id: 'race', name: 'selectedRace', options: races, onChange: this.passRace }) ), React.createElement( 'div', { className: 'h-spacing' }, React.createElement(SelectList, { labelText: 'Class: ', id: 'class', options: classes, name: 'selectedClass', onChange: this.passClass }) ), React.createElement( 'div', { className: 'h-spacing' }, React.createElement(SelectList, { labelText: 'Alignment: ', id: 'alignment', options: alignments }) ), React.createElement(StatList, { race: this.state.selectedRace }), React.createElement( 'div', { className: 'h-spacing' }, React.createElement( 'h3', { className: 'heading-sub-title' }, 'Base Attack' ), React.createElement(BaseAttackBox, { selectedClass: this.state.selectedClass, level: this.state.level }) ), React.createElement( 'div', { className: 'h-spacing' }, React.createElement( 'h3', { className: 'heading-sub-title' }, 'Saving Throws' ), React.createElement(SavingThrows, { selectedClass: this.state.selectedClass, level: this.state.level }) ) ); }; return Canvas;
}(React.Component);
;
var StatList = function StatList(props) { return React.createElement( 'div', null, stats.map(function (result) { return React.createElement(Stat, _extends({ key: result.id, statId: result.id, text: result.name }, props)); }) );
};
// CONTAINER COMPONENTS
var Stat = function (_React$Component2) { _inherits(Stat, _React$Component2); function Stat(props) { _classCallCheck(this, Stat); var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this, props)); _this2.state = { value: 10 }; _this2.handleTextChange = _this2.handleTextChange.bind(_this2); _this2.generateStat = _this2.generateStat.bind(_this2); return _this2; } Stat.prototype.handleTextChange = function handleTextChange(e) { this.setState({ value: e.target.value }); }; Stat.prototype.generateStat = function generateStat() { this.setState({ value: rollStat() }); }; Stat.prototype.render = function render() { var _this3 = this; var getRacialModifier = function getRacialModifier() { var racialMod = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; if (_this3.props.race.modifiers !== undefined && _this3.props.race.modifiers[_this3.props.statId]) { racialMod = _this3.props.race.modifiers[_this3.props.statId]; } return racialMod; }; var value = parseInt(this.state.value); var racialModifier = getRacialModifier(); var total = value + racialModifier; var modifier = getStatModifier(total); return React.createElement( 'div', { className: 'h-spacing' }, React.createElement( 'div', { className: 'c-stat' }, React.createElement(TextInput, { id: this.props.id, labelText: this.props.text + ':', value: this.state.value, onChange: this.handleTextChange, type: 'number' }), React.createElement(Button, { text: 'Roll', onClick: this.generateStat }), React.createElement( 'svg', { className: '', height: '30', width: '30' }, React.createElement('use', { xlinkHref: '#plus-icon' }) ), React.createElement(StatBox, { label: 'Racial', value: racialModifier }), React.createElement( 'svg', { className: '', height: '30', width: '30' }, React.createElement('use', { xlinkHref: '#equals-icon' }) ), React.createElement(StatBox, { label: 'Total', value: total }), React.createElement(StatBox, { label: 'Mod', value: modifier }) ) ); }; return Stat;
}(React.Component);
;
var SavingThrows = function SavingThrows(_ref7) { var _ref7$selectedClass = _ref7.selectedClass; var selectedClass = _ref7$selectedClass === undefined ? {} : _ref7$selectedClass; var level = _ref7.level; var getModifer = function getModifer() { var save = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; var name = arguments[1]; if (selectedClass.level !== undefined && selectedClass.level[level].baseSavingThrows[name]) { save = selectedClass.level[level].baseSavingThrows[name]; } return save; }; var reflex = getModifer(0, 'ref'); // total Dex mod + class base var will = getModifer(0, 'will'); // total widom mod + class base var fortitude = getModifer(0, 'fort'); // total const mod + class base return React.createElement( 'div', { className: 'l-grid' }, React.createElement( 'div', { className: 'l-grid__item' }, React.createElement(StatBox, { label: 'Ref', value: reflex }) ), React.createElement( 'div', { className: 'l-grid__item' }, React.createElement(StatBox, { label: 'Fort', value: fortitude }) ), React.createElement( 'div', { className: 'l-grid__item' }, React.createElement(StatBox, { label: 'Will', value: will }) ) );
};
SavingThrows.propTypes = { selectedClass: React.PropTypes.object, level: React.PropTypes.string
};
// MAIN RENDER
ReactDOM.render(React.createElement(Canvas, null), document.getElementById('appRoot'));
Character Gen - React - Script Codes
Character Gen - React - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded September 17, 2022
Rating 3
Size 37,586 Kb
Views 22,264
Do you need developer help for Character Gen - React?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dave (DaveOrDead) Script Codes
Name
Validation fun
Colour Swatches
Callbacks 2 - Passing arguments
Javascript Binding
Cors
React Tic Tac Toe
Email validation
Dice roller
React dropdown
Password validation
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!