Commit 5171d81e authored by Matthew Odle's avatar Matthew Odle

add rules to bottom; get rid of bisque; add color indicators for stock empty

parent 3157d356
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
</style>
</head>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
</style>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<div id="rules"></div>
</body>
</html>
......@@ -9,7 +9,7 @@ export class Building extends React.Component {
render() {
var building = this.props.building;
var progressStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + building.progress + '%, bisque ' + building.progress + '%, bisque 100%)'
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + building.progress + '%, white ' + building.progress + '%, white 100%)'
};
return (
<div className={building.producing ? "building active" : "building inactive"} style={progressStyle}>
......
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} /> ) }
</div>
}
}
......@@ -4,6 +4,6 @@ export class Stock extends React.Component {
render(props) {
var item = this.props.item;
return <div>{item.name}: {item.count}</div>;
return <div className={item.count <= 0 ? "stockAbsent" : "stockPresent" }>{item.name}: {item.count}</div>;
}
}
......@@ -331,21 +331,10 @@ export class Village extends React.Component {
});
}
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);
......@@ -371,11 +360,13 @@ export class Village extends React.Component {
return (
<div className="village">
<VillageInfo villageStore={villageStore} score={this.state.score} log={this.state.log} />
<VillageManagement
buildings={buildings} villagers={villagers}
updateTheBuildings={this.updateTheBuildings}
updateTheVillagers={this.updateTheVillagers}
/>
<div className="villageManagement">
<VillageManagement
buildings={buildings} villagers={villagers}
updateTheBuildings={this.updateTheBuildings}
updateTheVillagers={this.updateTheVillagers}
/>
</div>
</div>
)
}
......
......@@ -5,16 +5,16 @@ export class Villager extends React.Component {
render(props) {
var villager = this.props.villager;
var toolDegradeStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.toolDurability + '%, bisque ' + villager.toolDurability + '%, bisque 100%)'
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.toolDurability + '%, white ' + villager.toolDurability + '%, white 100%)'
};
var clothingDegradeStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.clothingDurability + '%, bisque ' + villager.clothingDurability + '%, bisque 100%)'
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.clothingDurability + '%, white ' + villager.clothingDurability + '%, white 100%)'
};
var warmthDegradeStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.warmth + '%, bisque ' + villager.warmth + '%, bisque 100%)'
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.warmth + '%, white ' + villager.warmth + '%, white 100%)'
};
var energyDegradeStyle = {
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.energy + '%, bisque ' + villager.energy + '%, bisque 100%)'
background: 'linear-gradient(to right, aquamarine 0%, aquamarine ' + villager.energy + '%, white ' + villager.energy + '%, white 100%)'
};
return <div className={
villager.assignment === "DEAD"
......
......@@ -45,11 +45,15 @@ button {
background-color: aquamarine;
}
.inactive {
background-color: bisque;
background-color: white;
}
.info {
display: inline-block;
}
.rules {
color: blue;
border: 1px solid black;
}
.log {
float: left;
border: 1px solid black;
......@@ -72,6 +76,13 @@ button {
float: right;
}
.villageManagement:after {
clear: both;
display: block;
content: "";
border: 1px solid black;
margin-bottom: 2em;
}
.villagers {
float: left;
margin-left: 1em;
......@@ -109,3 +120,7 @@ button {
.score {
width: 100px;
}
.stockAbsent {
background-color: tomato;
color: white;
}
......@@ -5,6 +5,7 @@ import './index.css';
import { Heading } from './components/heading';
import { Village } from './components/village';
import { Rules } from './components/rules';
const knobsAndLevers = {
interval: 1000,
......@@ -200,6 +201,12 @@ const generateBuildings = () => {
</div>,
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