cassoid/components/barstat/index.js

Cassoid, Foundry and your guide to weapon crafting

const styles = require('./statbar.module.css');
const React, { memo } = require('react');

/**
 * Representation of a single statbar.
 *
 * @param {[type]} name [description]
 * @param {[type]} base [description]
 * @param {[type]} max [description]
 * @param {[type]} added [description]
 * @param {[type]} removed [description]
 * @public
 */
function BarStat({ name, base, added, removed, max = 100 }) {
  return (
    <div className={ styles.statbar }>
      <span className={ styles.name }>{ name }</span>
      <div className={ styles.bar } style={{ width: `${max}%` }}>
        <div className={ styles.base } style={{ width: `${base}%` }} />

        { added && <div className={ styles.added } style={{ width: `${added}%` }} /> }
        { removed && <div className={ styles.removed } style={{ width: `${removed}%` }} /> }
      </div>
    </div>
  );
}

//
// Expose the component.
//
module.exports = require('red/export')({
  BarStat: memo(BarStat)
});