import React from 'react';
import Character from './Character';
import Inventory from './Inventory';
import { ProgressBar, Badge, Tooltip, OverlayTrigger } from 'react-bootstrap';

class Hero extends Character {
    constructor() {
        super();
        this.state = {
            show: false
        };
        this.toggleInventory = this.toggleInventory.bind(this);
    }
    toggleInventory() {
        this.setState({
            show: !this.state.show
        });
    }
    render() {
        const hero = this.props.params;
        const barStyle = { width:150 };
        const hp = (hero.health / hero.maxHealth) * 100;

        const hpTooltip = (
            <Tooltip id="tooltip">{`${hero.health}/${hero.maxHealth}`}</Tooltip>
        );

        return (
            <div>
                <h3>{hero.name} ({hero.level} level)</h3>
                <div style={barStyle}>
                    <OverlayTrigger placement="right" overlay={hpTooltip}>
                        <ProgressBar bsStyle="danger" now={hp} label={`${hp}%`} />
                    </OverlayTrigger>
                </div>
                <div>Damage <Badge>{hero.minDamage}-{hero.maxDamage}</Badge></div>
                <div>Coins <Badge>{hero.coins}</Badge></div>
                <div><a href="#" onClick={this.toggleInventory}>Inventory</a> <Badge>{hero.inventory.length}</Badge></div>
                <div><a href="#" onClick={this.props.changeHero}>Exit</a></div>
                <Inventory show={this.state.show} toggle={this.toggleInventory} hero={hero} updateHero={this.props.updateHero}/>
            </div>
        );
    }
}

export default Hero

@@ -467,24 +467,233 @@
   %7D);%0A    %7D%0A
+    setHealthBarType(healthValue) %7B%0A        if (healthValue %3E 69) %7B%0A            return 'success';%0A        %7D else if (healthValue %3E 29) %7B%0A            return 'warning';%0A        %7D%0A%0A        return 'danger';%0A    %7D%0A
     render()
@@ -772,15 +772,68 @@
 dth:
+ 
 150 %7D;%0A
+        const hbStyle = %7B backgroundColor: '#eee'%7D;%0A
     
@@ -982,16 +982,25 @@
 xHealth%7D
+ ($%7Bhp%7D%25)
 %60%7D%3C/Tool
@@ -1016,16 +1016,70 @@
     );%0A%0A
+        const healthBar = this.setHealthBarType(hp);%0A%0A
         
@@ -1201,17 +1201,95 @@
 rStyle%7D%3E
+HP:%3C/div%3E
 %0A
+                %3Cdiv style=%7BbarStyle%7D%3E%0A                    %3Cdiv%3E%0A    
         
@@ -1379,16 +1379,20 @@
         
+    
 %3CProgres
@@ -1408,41 +1408,43 @@
 yle=
-%22danger%22 now=%7Bhp%7D label=%7B%60$%7Bhp%7D%25%60
+%7BhealthBar%7D now=%7Bhp%7D style=%7BhbStyle
 %7D /%3E
@@ -1464,16 +1464,20 @@
         
+  
+  
 %3C/Overla
@@ -1486,16 +1486,43 @@
 rigger%3E%0A
+                    %3C/div%3E%0A
         

Change the color of healthbar (green, yellow, red) when HP is growing or reducing