Commit 3157d356 authored by Matthew Odle's avatar Matthew Odle

add messaging; update styles

parent 1bf2934b
......@@ -7,11 +7,6 @@
</style>
</head>
<body>
<h2>Generate resources to keep your villagers alive.</h2>
<div>Food provides energy.</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.
</noscript>
......
import React from 'react';
export class Heading extends React.Component {
render(props) {
return<h2 className="title">RESOURCE QUEST</h2>
}
}
import React from 'react';
export class GameOver extends React.Component {
export class Message extends React.Component {
render(props) {
return <div className="gameover">
<h3>They're all dead, Jim</h3>
return <div className="message">
{ this.props.message }
</div>
}
}
import React from 'react';
import { Stock } from './stock';
import { GameOver } from './game-over';
import { Message } from './message';
export class VillageInfo extends React.Component {
render = () => {
return <div className="info">
<div className="stock">
<h3>Stock</h3>
{ this.props.villageStore.map( item =>
<Stock key={item.name} item={item} />
)}
<div>
<div className="stock">
<h3>Stock</h3>
{ this.props.villageStore.map( item =>
<Stock key={item.name} item={item} />
)}
</div>
<div className="score">
<h3>Score: { this.props.score }</h3>
{/* <button type="button" id="restart" onClick={() => this.props.restart()}>Restart</button> */}
</div>
</div>
<div className="score">
<h3>Score: { this.props.score }</h3>
{/* <button type="button" id="restart" onClick={() => this.props.restart()}>Restart</button> */}
<div className="log">
{ this.props.log.map( logEntry => <Message message={logEntry} /> ) }
</div>
{this.props.gameOver ? <GameOver /> : null}
</div>
}
}
......@@ -16,6 +16,7 @@ export class Village extends React.Component {
score: 0,
villageStore: props.villageStore.slice(),
villagers: props.villagers.slice(),
log: props.log.slice(),
};
}
......@@ -53,6 +54,15 @@ export class Village extends React.Component {
});
}
updateLog = (message) => {
const log = this.state.log.slice();
log.unshift(message);
log.length > this.props.knobsAndLevers.maxLogArraySize ? log.pop() : null;
console.log(log)
this.setState({
log: log,
});
}
//----- cycle management functions -----//
......@@ -77,20 +87,27 @@ export class Village extends React.Component {
const villageStore = this.state.villageStore.slice();
building.materials.map(
material => villageStore.map(
villageStoreMaterial => villageStoreMaterial.name === material && villageStoreMaterial.count > 0 ? villageStoreMaterial.count -= 1 : null,
villageStoreMaterial => {
villageStoreMaterial.name === material && villageStoreMaterial.count > 0
? (villageStoreMaterial.count -= 1)
: null;
;
}
)
);
this.updateTheVillageStore(villageStore);
building.materialsInUse = true;
this.updateLog("used by " + building.label + ": " + building.materials.map(material => material ))
};
addProduct = (goods) => {
addProduct = (buildingName, goods) => {
const villageStore = this.state.villageStore.slice();
goods.map(
aGood => villageStore.map(
storeItem => storeItem.name === aGood ? storeItem.count += 1 : null,
)
);
this.updateLog("produced by " + buildingName + ": " + goods.map(good => good))
this.updateTheVillageStore(villageStore);
};
......@@ -101,7 +118,7 @@ export class Village extends React.Component {
building.progress = 0;
building.materialsInUse = false;
}
this.addProduct(building.goods);
this.addProduct(building.label, building.goods);
};
startNextProductionCycle = (building) => {
......@@ -275,6 +292,7 @@ export class Village extends React.Component {
// eslint-disable-next-line
villager.assignment !== "IDLE" ? this.removeVillager(villager) : null;
villager.assignment = "DEAD";
this.updateLog("A villager has died");
}
bringOutYourDead = (villager) => {
......@@ -307,15 +325,27 @@ export class Village extends React.Component {
const villagers = this.state.villagers.slice();
let everyoneIsDead = true;
villagers.map( villager => villager.assignment === 'DEAD' && everyoneIsDead ? everyoneIsDead = true : everyoneIsDead = false);
everyoneIsDead ? this.updateLog("They're all dead, Jim. Game Over.") : null;
this.setState({
gameOver: everyoneIsDead,
});
}
checkStores = () => {
const villageStore = this.state.villageStore.slice();
const thingsWeCareAbout = ['food', 'tool', 'firewood'];
villageStore.map( item =>
thingsWeCareAbout.includes(item.name) && item.count <= 0
? this.updateLog(item.name + " stores are empty!")
: null
);
}
tick = () => {
const buildings = this.props.buildings.slice();
this.manageProductionBuildings(buildings);
this.manageVillagerConditions();
this.checkStores();
this.checkGameEndConditions();
if (this.state.gameOver) {
clearInterval(this.timer);
......@@ -340,7 +370,7 @@ export class Village extends React.Component {
const villagers = this.props.villagers.slice();
return (
<div className="village">
<VillageInfo villageStore={villageStore} score={this.state.score} />
<VillageInfo villageStore={villageStore} score={this.state.score} log={this.state.log} />
<VillageManagement
buildings={buildings} villagers={villagers}
updateTheBuildings={this.updateTheBuildings}
......
......@@ -36,7 +36,11 @@
button {
margin-left: 10px;
}
.title {
border: 1px solid black;
text-align: center;
width: 340px;
}
.active {
background-color: aquamarine;
}
......@@ -46,6 +50,14 @@ button {
.info {
display: inline-block;
}
.log {
float: left;
border: 1px solid black;
margin-top: 1em;
width: 325px;
height: 150px;
overflow: hidden;
}
.buildings {
float: left;
......
......@@ -3,13 +3,15 @@ import ReactDOM from 'react-dom';
import './index.css';
import { Heading } from './components/heading';
import { Village } from './components/village';
const knobsAndLevers = {
interval: 1000,
score: 0,
maxLogArraySize: 100,
unassignedVillagers: 6,
unassignedVillagers: 10,
villagerHasTool: true,
toolMultiplier: 4,
......@@ -32,15 +34,24 @@ const knobsAndLevers = {
energyReplenishThreshold: 10,
energyPerFood: 80,
defaultToolStores: 20,
defaultFirewoodStores: 20,
defaultFoodStores: 20,
defaultClothingStores: 0,
defaultToolStores: 50,
defaultFirewoodStores: 50,
defaultFoodStores: 50,
defaultClothingStores: 10,
defaultLeatherStores: 0,
defaultIronStores: 0,
defaultWoodStores: 0,
}
const startingLog = [
"Welcome to Resource Quest!",
"Generate resources to keep your villagers alive.",
"Food provides energy.",
"Firewood provides warmth.",
"Clothing reduces warmth decay.",
"If energy or warmth drops to 0, the villager dies.",
]
const villageStore = [
{name: 'wood', count: knobsAndLevers.defaultWoodStores, source: 'FORESTER_HUT'},
{name: 'tool', count: knobsAndLevers.defaultToolStores, source: 'SMITHY'},
......@@ -180,8 +191,13 @@ const generateBuildings = () => {
producing: false
});
ReactDOM.render(
<Village buildings={buildings} villageStore={villageStore} villagers={villagers} knobsAndLevers={knobsAndLevers} start={Date.now()} restart={restart}/>,
ReactDOM.render(<div>
<Heading text={"RESOURCE QUEST"} />
<Village buildings={buildings} villageStore={villageStore}
villagers={villagers} knobsAndLevers={knobsAndLevers}
start={Date.now()} restart={restart} log={startingLog}
/>
</div>,
document.getElementById('root')
);
}
......
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