Commit 9956764a authored by Matthew Odle's avatar Matthew Odle

update visuals to make better use of real estate; add double food production to gatherer hut

parent 6064d493
......@@ -46,4 +46,12 @@ update:
* Villager consumes food to increase energy stat
2017-11-06
*
\ No newline at end of file
* added messaging
* slimmed up villager and building elements
2017-11-07
* more style redesigns to take better advantage of real estate. Can now see all pertinent information simultaneously on mobile screen. It spreads out a little too much in the browser, but that's OK. Really hoping I won't have to have different elements for desktop browser to make it responsive.
2017-11-08
TODO
* Add varying production amounts, rather than just having each building produce 1 of each of its goods each round. This will make it so the gatherer's hut isn't useless by allowing it to produce 2 food. (this could be accomplished by just adding food to the gatherer's hut twice. This would have to be accounted for in the displaying of the goods in the gatherer's hut building element.
\ No newline at end of file
......@@ -13,17 +13,14 @@ export class Building extends React.Component {
};
return (
<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.assignedVillagers.length} - <span className="buildingLabel">{building.label}</span>
<div className="villagerAdjustButtons">
<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>
</div>
{ building.goods ? <Goods building={building} /> : null }
{ building.materials ? <Materials building={building} /> : null }
</div>
{ building.goods ? <Goods building={building} /> : null }
{ building.materials ? <Materials 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>
{ building.priority !== undefined
? <Priority building={building} increasePriority={this.props.increasePriority} decreasePriority={this.props.decreasePriority} />
: null
}
</div>
);
}
......
import React from 'react';
import { Building } from './building';
export class Buildings extends React.Component {
render(props) {
return <div>
<div className="buildings clearfix">
<h3>Buildings</h3>
{ this.props.buildings.map( building =>
<Building
key={building.id}
building={building}
manageVillagerAssignments={this.props.manageVillagerAssignments}
increasePriority={this.props.increasePriority}
decreasePriority={this.props.decreasePriority}
/>
)}
</div>
</div>;
}
}
......@@ -3,10 +3,13 @@ import React from 'react';
export class Goods extends React.Component {
render() {
var building = this.props.building;
var goods = {};
building.goods.map( good => Array.from(Object.keys(goods)).includes(good) ? goods[good] += 1 : goods[good] = 1);
return (
<div className='goods'>
<span>makes: </span>
<span>{building.goods.toString()}</span>
<span>{Array.from(Object.keys(goods)).toString()}</span>
</div>
);
}
......
import React from 'react';
import { Stock } from './stock';
import { Message } from './message';
export class VillageInfo extends React.Component {
render = () => {
return <div className="info">
<div>
<div className="stock">
<h3>Stock</h3>
{ this.props.villageStore.map( item =>
<Stock key={item.name} item={item} />
)}
</div>
<div className="log">
<div className="score">
<h3>Score: { this.props.score }</h3>
<div>Score</div><div>{ this.props.score }</div>
{/* <button type="button" id="restart" onClick={() => this.props.restart()}>Restart</button> */}
</div>
</div>
<div className="log">
{ this.props.log.map( logEntry => <Message message={logEntry} /> ) }
</div>
</div>
......
import React from 'react';
import { Villager } from './villager';
import { Building } from './building';
import { Stock } from './stock';
import { Buildings } from './buildings';
import { Villagers } from './villagers';
export class VillageManagement extends React.Component {
......@@ -87,27 +88,18 @@ export class VillageManagement extends React.Component {
render = () => {
return <div className="management">
<div className="buildings">
<h3>Buildings</h3>
{ this.props.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>
{ this.props.villagers.map( villager =>
<Villager
key={villager.id}
villager={villager}
/>
<div className="clearfix">
<h3>Stock</h3>
{ this.props.villageStore.map( item =>
<Stock key={item.name} item={item} />
)}
</div>
<Buildings buildings={this.props.buildings}
manageVillagerAssignments={this.manageVillagerAssignments}
increasePriority={this.increasePriority}
decreasePriority={this.decreasePriority}
/>
<Villagers villagers={this.props.villagers} />
</div>
}
}
......@@ -107,7 +107,13 @@ export class Village extends React.Component {
storeItem => storeItem.name === aGood ? storeItem.count += 1 : null,
)
);
this.updateLog("produced by " + buildingName + ": " + goods.map(good => good))
// holy crap this is confusing; basically, count the elements in the goods array and stuff them in an object
// then loop through the keys of the object and print the amounts produced
// this is to enable production of more than one good per tick without printing duplicate good names
// all of this will get rewritten when good stores get moved to the buildings
let goodsMapping = {}
goods.map( good => Array.from(Object.keys(goodsMapping)).includes(good) ? goodsMapping[good] += 1 : goodsMapping[good] = 1);
this.updateLog("produced by " + buildingName + ": " + Array.from(Object.keys(goodsMapping)).map(good => good + ": " + goodsMapping[good]))
this.updateTheVillageStore(villageStore);
};
......@@ -361,10 +367,11 @@ export class Village extends React.Component {
const villagers = this.props.villagers.slice();
return (
<div className="village">
<VillageInfo villageStore={villageStore} score={this.state.score} log={this.state.log} />
<VillageInfo log={this.state.log} score={this.state.score} />
<div className="villageManagement">
<VillageManagement
buildings={buildings} villagers={villagers}
villageStore={villageStore}
updateTheBuildings={this.updateTheBuildings}
updateTheVillagers={this.updateTheVillagers}
/>
......
......@@ -24,12 +24,12 @@ export class Villager extends React.Component {
>
<div className="villagerAssignment">{villager.assignment}</div>
<div>
<div className="villagerStat" style={toolDegradeStyle}>Tool</div>
<div className="villagerStat" style={clothingDegradeStyle}>Clothing</div>
<div className="villagerStat" style={toolDegradeStyle}>TL</div>
<div className="villagerStat" style={clothingDegradeStyle}>CL</div>
</div>
<div>
<div className="villagerStat" style={warmthDegradeStyle}>Warmth</div>
<div className="villagerStat" style={energyDegradeStyle}>Energy</div>
<div className="villagerStat" style={warmthDegradeStyle}>WM</div>
<div className="villagerStat" style={energyDegradeStyle}>EN</div>
</div>
</div>
}
......
import React from 'react';
import { Villager } from './villager';
export class Villagers extends React.Component {
render(props) {
return <div>
<div className="villagers clearfix">
<h3>Villagers</h3>
{ this.props.villagers.map( villager =>
<Villager className="aVillager"
key={villager.id}
villager={villager}
/>
)}
</div>
</div>;
}
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 125px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: -200%;
left: 100%;
overflow: auto;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
* {
font-size: 10px;
}
button {
......@@ -58,20 +27,27 @@ button {
float: left;
border: 1px solid black;
margin-top: 1em;
padding: 0.5em;
width: 325px;
height: 150px;
overflow: hidden;
}
.buildings {
width: 48%;
float: left;
margin-right: 1em;
}
.building {
width: 150px;
margin-right: none;
margin-bottom: 1em;
width: auto;
height: 3em;
padding: 2px;
margin: 2px 0;
border: 1px solid black;
}
.buildingLabel {
font: bold 1em Georgia, serif;
}
.priority {
float: right;
}
......@@ -84,20 +60,23 @@ button {
margin-bottom: 2em;
}
.villagers {
float: left;
margin-left: 1em;
width: auto;
display: inline;
}
.villager {
border: 1px solid black;
margin-bottom: .5em;
display: inline-block;
}
.villagerAssignment {
text-align: center;
}
.villagerAdjustButtons {
float: right;
width: auto;
}
.villagerStat {
width: 75px;
width: 35px;
margin: 2px;
padding-top: 1px;
display: inline-block;
border: 1px solid black;
text-align: center;
......@@ -107,20 +86,34 @@ button {
}
.stock, .score {
margin-top: 1em;
text-align: center;
float: right;
border: 1px solid black;
float: left;
}
.stock {
margin-top: 1em;
width: 100px;
padding-bottom: 1em;
margin-right: 1em;
margin-left: 1em;
}
.score {
width: 100px;
width: 35px;
padding: 5px 0;
}
.stockAbsent {
background-color: tomato;
color: white;
}
.stockAbsent, .stockPresent {
border: 1px solid black;
margin: 0.2em;
padding: 0.2em;
float: left;
}
.clearfix:after {
clear: both;
display: block;
content: "";
}
......@@ -51,6 +51,7 @@ const startingLog = [
"Firewood provides warmth.",
"Clothing reduces warmth decay.",
"If energy or warmth drops to 0, the villager dies.",
"Key: TL=Tool, CL=Clothing, WM=Warmth, EN=Energy",
]
const villageStore = [
......@@ -130,7 +131,7 @@ const generateBuildings = () => {
name: 'GATHERER_HUT',
label: "Gatherer's Hut",
description: "nuts, berries, and tubers are packed with nutrients",
goods: ['food'],
goods: ['food', 'food'],
assignedVillagers: [],
capacity: knobsAndLevers.defaultCapacity,
progress: 0,
......
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