Commit da9de42f authored by Matthew Odle's avatar Matthew Odle

move background color generator for progress and villager status

parent 5ee40fb4
......@@ -5,10 +5,20 @@ import { Materials } from './materials';
export class Building extends React.Component {
generateStyleString = (value) => {
const progressColor = 'lightgreen';
const noProgressColor = 'white';
return 'linear-gradient(to right, '
+ progressColor + ' 0%, '
+ progressColor + ' ' + value + '%, '
+ noProgressColor + ' ' + value + '%, '
+ noProgressColor + ' 100%)'
};
render() {
var building = this.props.building;
var progressStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + building.progress + '%, white ' + building.progress + '%, white 100%)'
background: this.generateStyleString(building.progress)
};
return (
<div className={building.producing ? "building active" : "building inactive"} style={progressStyle}>
......
......@@ -2,19 +2,29 @@ import React from 'react';
export class Villager extends React.Component {
generateStyleString = (value) => {
const progressColor = 'lightgreen';
const noProgressColor = 'white';
return 'linear-gradient(to right, '
+ progressColor + ' 0%, '
+ progressColor + ' ' + value + '%, '
+ noProgressColor + ' ' + value + '%, '
+ noProgressColor + ' 100%)'
};
render(props) {
var villager = this.props.villager;
var toolDegradeStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.toolDurability + '%, white ' + villager.toolDurability + '%, white 100%)'
background: this.generateStyleString(villager.toolDurability)
};
var clothingDegradeStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.clothingDurability + '%, white ' + villager.clothingDurability + '%, white 100%)'
background: this.generateStyleString(villager.clothingDurability)
};
var warmthDegradeStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.warmth + '%, white ' + villager.warmth + '%, white 100%)'
background: this.generateStyleString(villager.warmth)
};
var energyDegradeStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.energy + '%, white ' + villager.energy + '%, white 100%)'
background: this.generateStyleString(villager.energy)
};
return <div className={
villager.assignment === "DEAD"
......@@ -32,5 +42,5 @@ export class Villager extends React.Component {
<div className="villagerStat" style={energyDegradeStyle}>EN</div>
</div>
</div>
}
};
}
......@@ -11,7 +11,7 @@ button {
width: 340px;
}
.active {
background-color: aquamarine;
background-color: lightgreen;
}
.inactive {
background-color: white;
......
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