Commit 80c9dd09 authored by Matthew Odle's avatar Matthew Odle

moar style updates

parent 90a5bd1e
......@@ -40,5 +40,8 @@ update:
* Used gradients to show durability of tools and progress of production
2017-11-05
* Implement warmth mechanic
* Have the villager consume firewood to increase warmth stat
* Implemented warmth mechanic
* Villager consumes firewood to increase warmth stat
* Implemented energy mechanic
* Villager consumes food to increase energy stat
......@@ -404,7 +404,7 @@ export class Village extends React.Component {
this.manageProductionBuildings(buildings);
this.manageVillagerConditions();
this.setState({
score: new Date() - this.props.start,
score: this.state.score + 1,
buildings: buildings,
});
};
......@@ -431,7 +431,7 @@ export class Village extends React.Component {
)}
</div>
<div className="score">
<h3>Score: { Math.floor(this.state.score / 1000) }</h3>
<h3>Score: { this.state.score }</h3>
{/* <button type="button" id="restart" onClick={() => this.props.restart()}>Restart</button> */}
</div>
{this.state.gameOver ? <GameOver /> : null}
......
......@@ -16,20 +16,21 @@ export class Villager extends React.Component {
var energyDegradeStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.energy + '%, bisque ' + villager.energy + '%, bisque 100%)'
};
return <div className="villager">
<div
className={
villager.assignment === "DEAD"
? "terminated"
: (villager.assignment === "IDLE" ? "inactive" : "active" )
}
return <div className={
villager.assignment === "DEAD"
? "villager terminated"
: (villager.assignment === "IDLE" ? "villager inactive" : "villager active" )
}
>
{villager.assignment}
<div className="villagerAssignment">{villager.assignment}</div>
<div>
<div className="villagerStat" style={toolDegradeStyle}>Tool</div>
<div className="villagerStat" style={clothingDegradeStyle}>Clothing</div>
</div>
<div>
<div className="villagerStat" style={warmthDegradeStyle}>Warmth</div>
<div className="villagerStat" style={energyDegradeStyle}>Energy</div>
</div>
<div style={toolDegradeStyle}><span>Tool: </span><span className="villagerstat">{villager.toolDurability}</span></div>
<div style={clothingDegradeStyle}><span>Clothing: </span><span className="villagerstat">{villager.clothingDurability}</span></div>
<div style={warmthDegradeStyle}><span>Warmth: </span><span className="villagerstat">{villager.warmth}</span></div>
<div style={energyDegradeStyle}><span>Energy: </span><span className="villagerstat">{villager.energy}</span></div>
</div>
}
}
......@@ -63,14 +63,20 @@ button {
.villagers {
float: left;
margin-left: 1em;
width: 150px;
width: auto;
}
.villager {
border: 1px solid black;
margin-bottom: 1em;
margin-bottom: .5em;
}
.villagerstat {
float: right;
.villagerAssignment {
text-align: center;
}
.villagerStat {
width: 75px;
margin: 2px;
display: inline-block;
border: 1px solid black;
}
.terminated {
background-color: tomato;
......
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