Commit 255cea9f authored by Matthew Odle's avatar Matthew Odle

clean up the visuals

parent 1b9504b2
......@@ -4,7 +4,7 @@ export class AssignedVillagers extends React.Component {
render() {
var building = this.props.building;
return (
<div className={building.assignedVillagers.length > 0 ? "active" : "inactive"}>
<div>
<span>Villagers Assigned: </span>
<span>{building.assignedVillagers.length}</span>
</div>
......
......@@ -13,23 +13,18 @@ export class Building extends React.Component {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + building.progress + '%, bisque ' + building.progress + '%, bisque 100%)'
};
return (
<div className="building">
<div className='tooltip'>{building.label}
<div className={building.producing ? "building active" : "building inactive"} style={progressStyle}>
<div className='tooltip'>{building.label}: {building.assignedVillagers.length}
<span className='tooltiptext'>{building.description}</span>
</div>
{ building.priority !== undefined
? <Priority building={building} increasePriority={this.props.increasePriority} decreasePriority={this.props.decreasePriority} />
: null
}
{ 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 className="progress" style={progressStyle}>Progress: {building.progress}</div>
{ building.assignedVillagers ? <AssignedVillagers building={building} /> : null }
<button type="button" id="addAVillager" onClick={() => this.props.manageVillagerAssignments(building, 1, 'assign')}>+</button>
<button type="button" id="removeAVillger" onClick={() => this.props.manageVillagerAssignments(building, 1, 'unassign')}>-</button>
<button type="button" id="addManyVillagers" onClick={() => this.props.manageVillagerAssignments(building, 10, 'assign')}>++</button>
<button type="button" id="removeManyVillagers" onClick={() => this.props.manageVillagerAssignments(building, 10, 'unassign')}>--</button>
{ building.priority !== undefined
? <Priority building={building} increasePriority={this.props.increasePriority} decreasePriority={this.props.decreasePriority} />
: null
}
</div>
);
}
......
......@@ -4,7 +4,7 @@ export class Priority extends React.Component {
render() {
var building = this.props.building;
return (
<div className='materials'>
<div className='priority'>
<button type="button" id="increasePriority" onClick={() => this.props.increasePriority(building)}>^</button>
<button type="button" id="decreasePriority" onClick={() => this.props.decreasePriority(building)}>v</button>
</div>
......
......@@ -415,8 +415,8 @@ export class Village extends React.Component {
<Stock key={item.name} item={item} />
)}
</div>
<h3>Buildings</h3>
<div className="buildings">
<h3>Buildings</h3>
{ buildings.map( building =>
<Building
key={building.id}
......@@ -428,6 +428,7 @@ export class Village extends React.Component {
)}
</div>
<div className="villagers">
<h3>Villagers</h3>
{ villagers.map( villager =>
<Villager
key={villager.id}
......
......@@ -24,12 +24,12 @@ export class Villager extends React.Component {
: (villager.assignment === "IDLE" ? "inactive" : "active" )
}
>
Villager {villager.id}: {villager.assignment}
{villager.assignment}
</div>
<div style={toolDegradeStyle}>Tool: {villager.toolDurability}</div>
<div style={clothingDegradeStyle}>Clothing: {villager.clothingDurability}</div>
<div style={warmthDegradeStyle}>Warmth: {villager.warmth}</div>
<div style={energyDegradeStyle}>Energy: {villager.energy}</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>
}
}
......@@ -65,10 +65,18 @@ button {
.villagers {
float: left;
margin-left: 1em;
width: 210px;
width: 150px;
}
.villager {
border: 1px solid black;
margin-bottom: 1em;
}
.priority {
float: right;
}
.floatright {
float: right;
}
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