Commit dc087a93 authored by Matthew Odle's avatar Matthew Odle

add gradiants to tool durability and production progress

parent 7ea5d38f
......@@ -9,6 +9,9 @@ export class Building extends React.Component {
render() {
var building = this.props.building;
var progressStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + building.progress + '%, bisque ' + building.progress + '%, bisque 100%)'
};
return (
<div className="building">
<div className='tooltip'>{building.label}
......@@ -21,7 +24,7 @@ export class Building extends React.Component {
{ building.goods ? <Goods building={building} /> : null }
{ building.materials ? <Materials building={building} /> : null }
<div className={building.producing ? "active" : "inactive"}>Active: {building.producing ? "Yes" : "No" }</div>
<div>Progress: {building.progress}</div>
<div className="progress" style={progressStyle}>Progress: {building.progress}</div>
{ building.assignedVillagers ? <AssignedVillagers building={building} /> : null }
<button type="button" id="addAVillager" onClick={() => this.props.manageVillagers(building, 1, 'assign')}>+</button>
<button type="button" id="removeAVillger" onClick={() => this.props.manageVillagers(building, 1, 'unassign')}>-</button>
......
......@@ -4,11 +4,14 @@ export class Villager extends React.Component {
render(props) {
var villager = this.props.villager;
var durabilityStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.toolDurability + '%, bisque ' + villager.toolDurability + '%, bisque 100%)'
};
return <div className="villager">
<div className={villager.assignment !== "none" ? "active" : "inactive"}>
Villager {villager.id}{villager.assignment === "none" ? ": IDLE" : ": " + villager.assignment}
</div>
<div className={villager.toolDurability > 0 ? "active" : "inactive"}>Tool: {villager.toolDurability + "%"}</div>
<div className={villager.toolDurability > 0 ? "active" : "inactive"} style={durabilityStyle}>Tool: {villager.toolDurability + "%"}</div>
</div>
}
}
......@@ -41,11 +41,11 @@ button {
margin-left: 10px;
}
.yes, .active {
.active {
background-color: aquamarine;
}
.no, .inactive {
.inactive {
background-color: bisque;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment