Commit 00a5fa0a authored by Matthew Odle's avatar Matthew Odle

show villager components

parent 2e95a76b
This diff is collapsed.
......@@ -7,6 +7,7 @@
</style>
</head>
<body>
<h2>Generate resources to keep your villagers alive.</h2>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
......
......@@ -2,6 +2,7 @@ import React from 'react';
import { Building } from './building';
import { Stock } from './stock';
import { Villager } from './villager';
export class Village extends React.Component {
......@@ -270,6 +271,7 @@ export class Village extends React.Component {
const buildings = this.props.buildings.slice();
this.sortBuildings(buildings);
const villageStore = this.props.villageStore.slice();
const villagers = this.props.villagers.slice();
return (
<div className="village">
<span>Elapsed: { Math.floor(this.state.elapsed / 1000) }</span>
......@@ -291,6 +293,14 @@ export class Village extends React.Component {
/>
)}
</div>
<div className="villagers">
{ villagers.map( villager =>
<Villager
key={villager.id}
villager={villager}
/>
)}
</div>
</div>
)
}
......
import React from 'react';
export class Villager extends React.Component {
render(props) {
var villager = this.props.villager;
return <div className="villager">
<div className={villager.assignment != "none" ? "active" : "inactive"}>
Villager {villager.id}{villager.assignment === "none" ? null : ": " + villager.assignment}
</div>
<div className={villager.toolDurability > 0 ? "active" : "inactive"}>Tool: {villager.toolDurability + "%"}</div>
</div>
}
}
......@@ -41,15 +41,29 @@ button {
margin-left: 10px;
}
.yes {
.yes, .active {
background-color: aquamarine;
}
.no {
.no, .inactive {
background-color: bisque;
}
.building {
width: 200px;
margin-right: none;
}
\ No newline at end of file
}
.buildings {
float: left;
}
.villagers {
float: left;
margin-left: 1em;
width: 200px;
}
.villager {
margin-bottom: 1em;
}
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