Commit de9546cc authored by Matthew Odle's avatar Matthew Odle

more visual cleanup

parent 255cea9f
......@@ -9,7 +9,8 @@
<body>
<h2>Generate resources to keep your villagers alive.</h2>
<div>Food provides energy.</div>
<div>Clothing provides warmth.</div>
<div>Firewood provides warmth.</div>
<div>Clothing reduces warmth decay.</div>
<div>If energy or warmth drops to 0, the villager dies.</div>
<noscript>
You need to enable JavaScript to run this app.
......
......@@ -14,7 +14,7 @@ export class Village extends React.Component {
super();
this.state = {
buildings: this.sortBuildings(props.buildings.slice()),
elapsed: 0,
score: 0,
villageStore: props.villageStore.slice(),
villagers: props.villagers.slice(),
};
......@@ -388,7 +388,7 @@ export class Village extends React.Component {
this.manageProductionBuildings(buildings);
this.manageVillagerConditions();
this.setState({
elapsed: new Date() - this.props.start,
score: new Date() - this.props.start,
buildings: buildings,
});
};
......@@ -407,34 +407,40 @@ export class Village extends React.Component {
const villagers = this.props.villagers.slice();
return (
<div className="village">
<span>Elapsed: { Math.floor(this.state.elapsed / 1000) }</span>
{/* <button type="button" id="restart" onClick={() => this.props.restart()}>Restart</button> */}
<h3>Stock</h3>
<div className="stock">
{ villageStore.map( item =>
<Stock key={item.name} item={item} />
)}
<div className="info">
<div className="stock">
<h3>Stock</h3>
{ villageStore.map( item =>
<Stock key={item.name} item={item} />
)}
</div>
<div className="score">
<h3>Score: { Math.floor(this.state.score / 1000) }</h3>
{/* <button type="button" id="restart" onClick={() => this.props.restart()}>Restart</button> */}
</div>
</div>
<div className="buildings">
<h3>Buildings</h3>
{ buildings.map( building =>
<Building
key={building.id}
building={building}
manageVillagerAssignments={this.manageVillagerAssignments}
increasePriority={this.increasePriority}
decreasePriority={this.decreasePriority}
/>
)}
</div>
<div className="villagers">
<h3>Villagers</h3>
{ villagers.map( villager =>
<Villager
key={villager.id}
villager={villager}
/>
)}
<div className="management">
<div className="buildings">
<h3>Buildings</h3>
{ buildings.map( building =>
<Building
key={building.id}
building={building}
manageVillagerAssignments={this.manageVillagerAssignments}
increasePriority={this.increasePriority}
decreasePriority={this.decreasePriority}
/>
)}
</div>
<div className="villagers">
<h3>Villagers</h3>
{ villagers.map( villager =>
<Villager
key={villager.id}
villager={villager}
/>
)}
</div>
</div>
</div>
)
......
......@@ -26,10 +26,10 @@ export class Villager extends React.Component {
>
{villager.assignment}
</div>
<div style={toolDegradeStyle}><span>Tool: </span><span className="floatright">{villager.toolDurability}</span></div>
<div style={clothingDegradeStyle}><span>Clothing: </span><span className="floatright">{villager.clothingDurability}</span></div>
<div style={warmthDegradeStyle}><span>Warmth: </span><span className="floatright">{villager.warmth}</span></div>
<div style={energyDegradeStyle}><span>Energy: </span><span className="floatright">{villager.energy}</span></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>
}
}
.building {
margin-bottom: 1em;
}
/* Tooltip container */
.tooltip {
position: relative;
......@@ -44,22 +40,24 @@ button {
.active {
background-color: aquamarine;
}
.inactive {
background-color: bisque;
}
.info {
display: inline-block;
}
.terminated {
background-color: tomato;
.buildings {
float: left;
}
.building {
width: 200px;
margin-right: none;
margin-bottom: 1em;
border: 1px solid black;
}
.buildings {
float: left;
.priority {
float: right;
}
.villagers {
......@@ -67,16 +65,28 @@ button {
margin-left: 1em;
width: 150px;
}
.villager {
border: 1px solid black;
margin-bottom: 1em;
}
.priority {
.villagerstat {
float: right;
}
.terminated {
background-color: tomato;
}
.floatright {
float: right;
.stock, .score {
margin-top: 1em;
text-align: center;
border: 1px solid black;
float: left;
}
.stock {
width: 100px;
padding-bottom: 1em;
margin-right: 1em;
}
.score {
width: 100px;
}
......@@ -7,7 +7,7 @@ import { Village } from './components/village';
const knobsAndLevers = {
interval: 1000,
elapsed: 0,
score: 0,
unassignedVillagers: 6,
......
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