Commit 0640877d authored by Matthew Odle's avatar Matthew Odle

villagers no longer die as fast

villagers will die a while after energy or warmth run out
removed villager display completely; this info will be handled by
a status bar showing a count of villagers with each ailment

tried to fix the css, but just made it worse
using adarkroom as a starting point
parent 2fafba7a
......@@ -10,7 +10,9 @@
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<div id="rules"></div>
<div class="top">
<div id="root"></div>
<div id="rules"></div>
</div>
</body>
</html>
......@@ -2,7 +2,6 @@ import React from 'react';
import { Goods } from './goods';
import { Materials } from './materials';
import { Priority } from './priority';
export class Building extends React.Component {
......
......@@ -2,15 +2,11 @@ import React from 'react';
import { Message } from './message';
export class VillageInfo extends React.Component {
export class Log extends React.Component {
render = () => {
return <div className="info">
<div className="log">
<div className="score">
<div>Score</div><div>{ this.props.score }</div>
{/* <button type="button" id="restart" onClick={() => this.props.restart()}>Restart</button> */}
</div>
{ this.props.log.map( logEntry => <Message message={logEntry} /> ) }
</div>
</div>
......
import React from 'react';
import { Message } from './message';
export class Rules extends React.Component {
render(props) {
return <div className="message">
{ this.props.rules.map(rule => <Message message={rule} /> ) }
return <div className="rules">
{ this.props.rules.map(rule => <div key={Math.random(Date.now())}>{rule}</div> ) }
</div>
}
}
import React from 'react';
export class Score extends React.Component {
render = () => {
return <div className="score">
<div>Score</div><div>{ this.props.score }</div>
</div>
}
}
import React from 'react';
export class StatusRow extends React.Component {
render(props) {
return <div className="statusRow">
<div className="statusName">{this.props.status}</div>
<div className="statusCount">{this.props.count}</div>
<div className="clear"></div>
</div>;
}
}
import React from 'react';
export class Stock extends React.Component {
render(props) {
var item = this.props.item;
return <div className={item.count <= 0 ? "stockAbsent" : "stockPresent" }>{item.name}: {item.count}</div>;
}
}
import React from 'react';
export class StoreRow extends React.Component {
render(props) {
var item = this.props.item;
return <div className="storeRow">
<div className="storeName">{item.name}</div>
<div className={item.count <= 0 ? "storeAbsent storeCount" : "storePresent storeCount"}>{item.count}</div>
<div className="clear"></div>
</div>;
}
}
import React from 'react';
import { Stock } from './stock';
import { StoreRow } from './store-row';
import { StatusRow } from './status-row';
import { Buildings } from './buildings';
import { Villagers } from './villagers';
export class VillageManagement extends React.Component {
......@@ -87,19 +87,33 @@ export class VillageManagement extends React.Component {
};
render = () => {
const statuses = this.props.villagerStatus;
return <div className="management">
<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 className="storeContainer">
<h3>Stores</h3>
<div className="stores">
<div className="resources">
{ this.props.villageStore.map( item =>
<StoreRow key={item.name} item={item} />
)}
</div>
</div>
</div>
<div className="statusContainer">
<h3>Status</h3>
<div className="statuses">
<div className="infos">
{ Array.from(Object.keys(statuses)).map( status =>
<StatusRow key={status} status={status} count={statuses[status]}/>
)}
</div>
</div>
</div>
</div>
}
}
import React from 'react';
import { VillageInfo } from './village-info';
import { Log } from './log';
import { VillageManagement } from './village-management';
import { Score } from './score';
export class Village extends React.Component {
......@@ -16,7 +17,8 @@ export class Village extends React.Component {
score: 0,
villageStore: props.villageStore.slice(),
villagers: props.villagers.slice(),
log: props.log.slice(),
log: [],
villagerStatus: {naked: 0, toolless: 0, starving: 0, freezing: 0},
};
}
......@@ -74,7 +76,7 @@ export class Village extends React.Component {
if (building.materials) {
building.materials.map( material =>
theItems.map( theItem =>
theItem.name === material
theItem.name === material
? (theItem.count > 0 && flag ? flag = true : flag = false)
: null,
)
......@@ -87,12 +89,10 @@ export class Village extends React.Component {
const villageStore = this.state.villageStore.slice();
building.materials.map(
material => villageStore.map(
villageStoreMaterial => {
villageStoreMaterial =>
villageStoreMaterial.name === material && villageStoreMaterial.count > 0
? (villageStoreMaterial.count -= 1)
: null;
;
}
: null
)
);
this.updateTheVillageStore(villageStore);
......@@ -144,13 +144,10 @@ export class Village extends React.Component {
}
degradeTools = (villagers) => {
// eslint-disable-next-line
villagers.map(villager => {
// eslint-disable-next-line
villager.hasTool && villager.toolDurability > 0
? villager.toolDurability -= this.props.knobsAndLevers.toolDegradeRate
: null;
// eslint-disable-next-line
villager.hasTool && villager.toolDurability <= 0
? villager.hasTool = false
: null
......@@ -182,7 +179,6 @@ export class Village extends React.Component {
manageProductionBuildings = (buildings) => {
this.sortBuildings(buildings);
// eslint-disable-next-line
buildings.map( building => {
if (this.canProduce(building) || building.materialsInUse) {
this.processProductionCycle(building);
......@@ -206,7 +202,6 @@ export class Village extends React.Component {
checkVillagerTool = (villager) => {
// only equip tools to villagers that are assigned to a building
// eslint-disable-next-line
villager.toolDurability <= 0 && villager.assignment !== "IDLE" ? villager = this.getTool(villager) : null;
}
......@@ -230,10 +225,11 @@ export class Village extends React.Component {
checkVillagerWarmth = (villager) => {
const baseWarmthDecayRate = this.props.knobsAndLevers.baseWarmthDecayRate;
const clothingWarmthDecayReduction = this.props.knobsAndLevers.clothingWarmthDecayReduction;
const villagerDeathValue = this.props.knobsAndLevers.villagerDeathValue;
villager.warmth -= villager.clothed ? Math.ceil(baseWarmthDecayRate - clothingWarmthDecayReduction) : baseWarmthDecayRate;
// eslint-disable-next-line
villager.warmth < 0 ? villager.warmth = 0 : null;
villager.warmth < villagerDeathValue ? villager.warmth = villagerDeathValue : null;
this.consumeFirewoodIfNeeded(villager);
}
getClothing = (villager) => {
......@@ -247,11 +243,8 @@ export class Village extends React.Component {
}
manageVillagerClothing = (villager) => {
// eslint-disable-next-line
villager.clothingDurability > 0 ? villager.clothingDurability -= this.props.knobsAndLevers.clothingDegradeRate : null;
// eslint-disable-next-line
villager.clothingDurability <= 0 ? villager.clothed = false : null;
// eslint-disable-next-line
villager.clothed ? null : this.getClothing(villager);
}
......@@ -275,10 +268,10 @@ export class Village extends React.Component {
checkVillagerEnergy = (villager) => {
const baseEnergyDegradeRate = this.props.knobsAndLevers.baseEnergyDegradeRate;
const assignmentEnergyMultiplier = this.props.knobsAndLevers.assignmentEnergyMultiplier;
const villagerDeathValue = this.props.knobsAndLevers.villagerDeathValue;
const multiplier = villager.assignment !== "IDLE" ? assignmentEnergyMultiplier : 1;
villager.energy -= baseEnergyDegradeRate * multiplier;
// eslint-disable-next-line
villager.energy < 0 ? villager.energy = 0 : null;
villager.energy < villagerDeathValue ? villager.energy = villagerDeathValue : null;
this.consumeFoodIfNeeded(villager);
}
......@@ -294,18 +287,24 @@ export class Village extends React.Component {
this.updateTheBuildings(targetBuilding);
}
killVillager = (villager) => {
// eslint-disable-next-line
villager.assignment !== "IDLE" ? this.removeVillager(villager) : null;
villager.assignment = "DEAD";
this.updateLog("A villager has died");
killVillager = (villager, reason) => {
villager.assignment !== 'IDLE' ? this.removeVillager(villager) : null;
villager.assignment = 'DEAD';
this.updateLog('a villager has ' + reason + ' to death');
}
bringOutYourDead = (villager) => {
let timeToDie = false;
villager.assignment !== "DEAD" && (villager.energy <= 0 || villager.warmth <= 0) ? timeToDie = true : timeToDie = false;
// eslint-disable-next-line
timeToDie ? this.killVillager(villager) : null;
const timeToDieValue = this.props.knobsAndLevers.villagerDeathValue;
if (villager.assignment !== 'DEAD') {
if (villager.energy <= timeToDieValue) {
this.killVillager(villager, 'starved');
return;
}
if (villager.warmth <= timeToDieValue) {
this.killVillager(villager, 'frozen');
return;
}
}
}
updateAllVillagers = (villagers) => {
......@@ -316,7 +315,6 @@ export class Village extends React.Component {
manageVillagerConditions = () => {
const villagers = this.state.villagers.slice();
// eslint-disable-next-line
villagers.map( villager => {
if (villager.assignment !== 'DEAD') {
this.checkVillagerTool(villager);
......@@ -329,11 +327,26 @@ export class Village extends React.Component {
this.updateAllVillagers(villagers);
}
captureGameStatusInfo = () => {
let villagerStatus = {naked: 0, toolless: 0, starving: 0, freezing: 0};
const warningValue = this.props.knobsAndLevers.villagerWarningValue;
const villagers = this.state.villagers.slice();
villagers.map(villager => {
!villager.hasTool && villager.assignment !== 'DEAD' ? villagerStatus.toolless += 1 : null;
!villager.clothed && villager.assignment !== 'DEAD' ? villagerStatus.naked += 1 : null;
villager.energy <= warningValue && villager.assignment !== 'DEAD' ? villagerStatus.starving += 1 : null;
villager.warmth <= warningValue && villager.assignment !== 'DEAD' ? villagerStatus.freezing += 1 : null;
});
this.setState({
villagerStatus: villagerStatus,
});
}
checkGameEndConditions = () => {
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;
everyoneIsDead ? this.updateLog("dead... all dead.") : null;
this.setState({
gameOver: everyoneIsDead,
});
......@@ -343,6 +356,7 @@ export class Village extends React.Component {
const buildings = this.props.buildings.slice();
this.manageProductionBuildings(buildings);
this.manageVillagerConditions();
this.captureGameStatusInfo();
this.checkGameEndConditions();
if (this.state.gameOver) {
clearInterval(this.timer);
......@@ -365,17 +379,17 @@ export class Village extends React.Component {
const buildings = this.props.buildings.slice();
this.sortBuildings(buildings);
const villagers = this.props.villagers.slice();
const villagerStatus = this.state.villagerStatus;
return (
<div className="village">
<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}
/>
</div>
<Score score={this.state.score} />
<VillageManagement
buildings={buildings} villageStore={villageStore}
villagers={villagers} villagerStatus={villagerStatus}
updateTheBuildings={this.updateTheBuildings}
updateTheVillagers={this.updateTheVillagers}
/>
<Log log={this.state.log} score={this.state.score} />
</div>
)
}
......
import React from 'react';
export class VillagerStatus extends React.Component {
render(props) {
const villagerStatus = this.props.villagerStatus;
return <div className="aStatus">
{ Array.from(Object.keys(villagerStatus)).map(status => <div key={status}>{status} : {villagerStatus[status]}</div> ) }
</div>
}
}
......@@ -20,12 +20,18 @@ button {
display: inline-block;
}
.rules {
color: blue;
border: 1px solid black;
left: 10px;
bottom: 10px;
color: #666;
z-index: 10;
}
.welcome {
left: 10px;
top: 10px;
color: #666;
z-index: 10;
}
.log {
float: left;
border: 1px solid black;
margin-top: 1em;
padding: 0.5em;
width: 325px;
......@@ -34,13 +40,12 @@ button {
}
.buildings {
width: 48%;
float: left;
margin-right: 1em;
}
.building {
width: auto;
height: 3em;
min-height: 3.5em;
padding: 2px;
margin: 2px 0;
border: 1px solid black;
......@@ -52,12 +57,14 @@ button {
float: right;
}
.villageManagement:after {
.management {
position: relative;
float: left;
overflow: hidden;
}
.management:after {
clear: both;
display: block;
content: "";
border: 1px solid black;
margin-bottom: 2em;
}
.villagers {
display: inline;
......@@ -73,7 +80,7 @@ button {
float: right;
width: auto;
}
.villagerStat {
.villagerStatus {
width: 35px;
margin: 2px;
padding-top: 1px;
......@@ -85,35 +92,80 @@ button {
background-color: tomato;
}
.stock, .score {
text-align: center;
float: right;
.storeContainer {
right: 0px;
top: 0px;
position: absolute;
}
.statusContainer {
right: 0px;
top: 0px;
}
.stores, .statuses {
position: relative;
z-index: 10;
border: 1px solid black;
cursor: default;
padding: 5px 10px;
width: 200px;
}
.stock {
margin-top: 1em;
width: 100px;
padding-bottom: 1em;
margin-right: 1em;
margin-left: 1em;
.resources, .infos {
display: block;
}
.storeRow, .statusRow {
position: relative;
}
.storeName, .statusName {
clear: both;
float: left;
}
.storeCount, .statusCount {
float: right;
}
.storeAbsent {
color: tomato;
}
.clear {
clear: both;
}
.score {
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;
}
@media (min-width: 768px) {
* {
font-size: 16px;
}
.clearfix:after {
clear: both;
display: block;
content: "";
.log {
position: absolute;
top: 20px;
left: 0px;
height: 700px;
width: 200px;
overflow: hidden;
}
.score {
width: 100px;
}
#root {
margin: auto;
width: 700px;
padding: 20px 0 0 220px;
position: relative;
}
.villager {
margin: 0.25em;
}
.rules, .welcome {
position: fixed;
}
.management {
width: 700px;
height: 700px;
}
}
......@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
import './index.css';
import { Heading } from './components/heading';
import { Village } from './components/village';
import { Rules } from './components/rules';
......@@ -12,16 +11,15 @@ const knobsAndLevers = {
score: 0,
maxLogArraySize: 100,
unassignedVillagers: 10,
startingVillagers: 10,
villagerDeathValue: -50,
villagerWarningValue: 0,
villagerHasTool: true,
toolMultiplier: 4,
toolDurability: 100,
toolDegradeRate: 1,
productionComplete: 100,
defaultCapacity: 50,
defaultProductionRate: 1,
toolDegradeRate: 15,
villagerClothed: true,
clothingDegradeRate: 1,
......@@ -30,22 +28,26 @@ const knobsAndLevers = {
warmthReplenishThreshold: 10,
warmthPerFirewood: 80,
baseEnergyDegradeRate: 1,
baseEnergyDegradeRate: 10,
assignmentEnergyMultiplier: 2,
energyReplenishThreshold: 10,
energyPerFood: 80,
defaultToolStores: 50,
defaultFirewoodStores: 50,
defaultFoodStores: 50,
defaultClothingStores: 10,
productionComplete: 100,
defaultCapacity: 50,
defaultProductionRate: 1,
defaultToolStores: 0,
defaultFirewoodStores: 0,
defaultFoodStores: 5,
defaultClothingStores: 0,
defaultHideStores: 0,
defaultIronStores: 0,
defaultWoodStores: 0,
}
const startingLog = [
"Welcome to Resource Quest!",
"Generate resources to keep your villagers alive.",
"Food provides energy.",
"Firewood provides warmth.",
......@@ -79,7 +81,7 @@ const addVillager = () => {
// clothingDurability: nextId % 2 === 0 ? 100 : 0,
};
villagers.push(villager);
if (villagers.length < knobsAndLevers['unassignedVillagers']) {
if (villagers.length < knobsAndLevers['startingVillagers']) {
addVillager();
}
}
......@@ -193,21 +195,20 @@ const generateBuildings = () => {
producing: false
});
ReactDOM.render(<div>
<Heading text={"RESOURCE QUEST"} />
const Game = () => {
return <div className="game">
<Village buildings={buildings} villageStore={villageStore}
villagers={villagers} knobsAndLevers={knobsAndLevers}
start={Date.now()} restart={restart} log={startingLog}
start={Date.now()} restart={restart}
/>
</div>,
<Rules rules={startingLog} />
</div>
}
ReactDOM.render(<Game />,
document.getElementById('root')
);
}
init();
ReactDOM.render(
<Rules className="rules" rules={startingLog} />,
document.getElementById('rules')
);
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