Commit b200deb6 authored by Matthew Odle's avatar Matthew Odle

add colorization using classNames!

parent b2ba605d
......@@ -237,9 +237,9 @@
"integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
},
"async": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/async/-/async-2.5.0.tgz",
"integrity": "sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw=="
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz",
"integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw=="
},
"async-each": {
"version": "1.0.1",
......@@ -840,9 +840,9 @@
"integrity": "sha1-uzX4pRn2AOD6a4SFJByXnQFB+y0="
},
"browserslist": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.7.0.tgz",
"integrity": "sha512-s34mrlczJsfbJu//mz/m9zlOy/S6tiP6El1u8iC1gTfEnzKXvxo8RAoCxS/MmojB7rd7bnfYzvKQNHykWaUWWw=="
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.8.0.tgz",
"integrity": "sha512-iiWHM1Et6Q4TQpB7Ar6pxuM3TNMXasVJY4Y/oh3q38EwR3Z+IdZ9MyVf7PI4MJFB4xpwMcZgs9bEUnPG2E3TCA=="
},
"bser": {
"version": "2.0.0",
......@@ -924,14 +924,14 @@
}
},
"caniuse-db": {
"version": "1.0.30000757",
"resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000757.tgz",
"integrity": "sha1-+iOjgyE9hX9KHmo77hezJmhQTL8="
"version": "1.0.30000760",
"resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000760.tgz",
"integrity": "sha1-PqKUc+t4psywny63Osnh3r/sUo0="
},
"caniuse-lite": {
"version": "1.0.30000757",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000757.tgz",
"integrity": "sha1-geO8ApcooDKTNQGZTvedscIRWeM="
"version": "1.0.30000760",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000760.tgz",
"integrity": "sha1-7HIDlXQvHH7IlH/W3SYE53qPmP8="
},
"capture-stack-trace": {
"version": "1.0.0",
......@@ -995,6 +995,11 @@
"resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
"integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA=="
},
"classnames": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
"integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
},
"clean-css": {
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz",
......@@ -1035,9 +1040,9 @@
}
},
"clone": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
"integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk="
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.3.tgz",
"integrity": "sha1-KY1+IjFmD0DAA8LtMUDezz9TCF8="
},
"co": {
"version": "4.6.0",
......@@ -1060,9 +1065,9 @@
"integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q="
},
"color-convert": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz",
"integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o="
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
"integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ=="
},
"color-name": {
"version": "1.1.3",
......@@ -1132,9 +1137,9 @@
}
},
"connect-history-api-fallback": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.4.0.tgz",
"integrity": "sha1-PbJPlz9LkjsOgvYZzg3wJBHKYj0="
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz",
"integrity": "sha1-sGhzk0vF40T+9hGhlqb6rgruAVo="
},
"console-browserify": {
"version": "1.1.0",
......@@ -1241,9 +1246,9 @@
}
},
"crypto-browserify": {
"version": "3.11.1",
"resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.11.1.tgz",
"integrity": "sha512-Na7ZlwCOqoaW5RwUK1WpXws2kv8mNhWdTlzob0UXulk6G9BDbyiJaGTYBIX61Ozn9l1EPPJpICZb4DaOpT9NlQ=="
"version": "3.12.0",
"resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
"integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg=="
},
"css-color-names": {
"version": "0.0.4",
......@@ -5155,6 +5160,11 @@
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.5.tgz",
"integrity": "sha512-8T7Zn1AhMsQ/HI1SjcCfT/t4ii3eAqco3yOcSzS4mozsOz69lHLsoMXmF9nZgnFanYscnSlUSgs8uZyKzpE6kg=="
},
"randomfill": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.3.tgz",
"integrity": "sha512-YL6GrhrWoic0Eq8rXVbMptH7dAxCs0J+mh5Y0euNekPPYaxEmdVGim6GdoxoRzKW2yJoU8tueifS7mYxvcFDEQ=="
},
"range-parser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
......@@ -5178,9 +5188,9 @@
}
},
"react": {
"version": "16.0.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.0.0.tgz",
"integrity": "sha1-zn348ZQbA28Cssyp29DLHw6FXi0="
"version": "16.1.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.1.0.tgz",
"integrity": "sha512-hvKYlKqde2JNnNiEzORvSA0J1L7uSZ43l+J89ZNoP4EXxQrVNH0CFj8vorfPou3w+1ou1BNMBir2VVsuXtETRA=="
},
"react-dev-utils": {
"version": "4.2.1",
......@@ -5188,9 +5198,9 @@
"integrity": "sha1-nydj57r6GhucUiVNKked7sKA8RE="
},
"react-dom": {
"version": "16.0.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.0.0.tgz",
"integrity": "sha1-nMMHnD3NcNTG4BuEqrKn40wwP1g="
"version": "16.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.1.0.tgz",
"integrity": "sha512-i9in5qW3H2PDinUPD9bnQK7tLAD8LhjYQ+fXi3nJOvVnxOO3ErHq6RNEnKY7pbjTPt155e74q7al8eBUuyLtew=="
},
"react-error-overlay": {
"version": "3.0.0",
......@@ -5950,9 +5960,9 @@
"integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g=="
},
"uglify-js": {
"version": "3.1.6",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.1.6.tgz",
"integrity": "sha512-/rseyxEKEVMBo8279lqpoJgD6C/i/CIi+9TJDvWmb+Xo6mqMKwjA8Io3IMHlcXQzj99feR6zrN8m3wqqvm/nYA=="
"version": "3.1.8",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.1.8.tgz",
"integrity": "sha512-1lnTkrJWw6LJ7n43ZyYVXx0eN2PQh0c3Inb0nY/vj5fNfwykXQFif2kvNgm/Bf0ClLA8R6SKaMHFzo9io4Q+vg=="
},
"uglify-to-browserify": {
"version": "1.0.2",
......@@ -6319,19 +6329,14 @@
}
},
"webpack-sources": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.0.1.tgz",
"integrity": "sha512-05tMxipUCwHqYaVS8xc7sYPTly8PzXayRCB4dTxLhWTqlKUiwH6ezmEe0OSreL1c30LAuA3Zqmc+uEBUGFJDjw==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.0.2.tgz",
"integrity": "sha512-Y7UddMCv6dGjy81nBv6nuQeFFIt5aalHm7uyDsAsW86nZwfOVPGRr3XMjEQLaT+WKo8rlzhC9qtbJvYKLtAwaw==",
"dependencies": {
"source-list-map": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz",
"integrity": "sha512-I2UmuJSRr/T8jisiROLU3A3ltr+swpniSmNPI4Ml3ZCX6tVnDsuZzK7F2hl5jTqbZBWCEKlj5HRQiPExXLgE8A=="
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
}
}
},
......
......@@ -2,6 +2,7 @@
"name": "resource-quest",
"version": "0.1.0",
"dependencies": {
"classnames": "^2.2.5",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.13"
......
......@@ -3,9 +3,17 @@ 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>
var classNames = require('classnames');
const name = this.props.statusName;
const statusProps = this.props.statusProps;
const count = statusProps.count;
const statusClassNames = statusProps.classNames;
statusClassNames.badThing = statusProps.count > 0 ? true : false;
const statusClassName = classNames(statusClassNames);
return <div className={statusClassName}>
<div className="statusName">{name}</div>
<div className="statusCount">{count}</div>
<div className="clear"></div>
</div>;
}
......
......@@ -10,8 +10,8 @@ export class Status extends React.Component {
<h3>Villager Status</h3>
<div className="statuses">
<div className="infos">
{ Array.from(Object.keys(statuses)).map( status =>
<StatusRow key={status} status={status} count={statuses[status]}/>
{ Array.from(Object.keys(statuses)).map( statusName =>
<StatusRow key={statusName} statusName={statusName} statusProps={statuses[statusName]}/>
)}
</div>
</div>
......
import React from 'react';
export class StoreRow extends React.Component {
render(props) {
const item = this.props.item;
const count = this.props.count;
return <div className="storeRow">
<div className="storeName">{item}</div>
<div className={count <= 0 ? "storeAbsent storeCount" : "storePresent storeCount"}>{count}</div>
var classNames = require('classnames');
const name = this.props.storeItemName;
const storeItemProps = this.props.storeItemProps;
const count = storeItemProps.count;
const storeClassNames = storeItemProps.classNames;
storeClassNames.badThing = storeItemProps.count <= 0 ? true : false;
const storeClassName = classNames('storeRow', storeClassNames);
// return <div className="storeRow">
return <div className={storeClassName}>
<div className="storeName">{name}</div>
<div className="storeCount">{count}</div>
<div className="clear"></div>
</div>;
}
......
......@@ -10,8 +10,8 @@ export class Stores extends React.Component {
<h3>Stores</h3>
<div className="stores">
<div className="resources">
{ Array.from(Object.keys(stores)).map( item =>
<StoreRow key={item} item={item} count={stores[item].count} />
{ Array.from(Object.keys(stores)).map( storeItemName =>
<StoreRow key={storeItemName} storeItemName={storeItemName} storeItemProps={stores[storeItemName]} />
)}
</div>
</div>
......
......@@ -48,13 +48,13 @@ export class VillageManagement extends React.Component {
}
manageVillagerAssignments = (building, amount, operation) => {
if (operation === 'assign' && this.props.villagerStatus.unassigned > 0) {
if (operation === 'assign' && this.props.villagerStatus.unassigned.count > 0) {
this.assignVillagers(building, amount);
}
if (operation === 'unassign') {
this.unassignVillagers(building, amount);
}
this.props.villagerStatus.unassigned = this.getUnassignedVillagers().length;
this.props.villagerStatus.unassigned.count = this.getUnassignedVillagers().length;
};
render = () => {
......
......@@ -22,7 +22,7 @@ export class Village extends React.Component {
villageStore: props.villageStore,
villagers: props.villagers.slice(),
log: [],
villagerStatus: {naked: 0, toolless: 0, starving: 0, freezing: 0, unassigned: props.knobsAndLevers.startingVillagers},
villagerStatus: props.villagerStatus,
};
}
......@@ -64,7 +64,6 @@ export class Village extends React.Component {
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,
});
......@@ -89,7 +88,7 @@ export class Village extends React.Component {
const villageStore = this.state.villageStore;
building.materials.map(
material => villageStore[material] && villageStore[material].count > 0
? (villageStore[material].count -= 1)
? (villageStore[material].count -= 1, villageStore[material].classNames.badThingHappened = true)
: null
);
this.updateTheVillageStore(villageStore);
......@@ -102,7 +101,7 @@ export class Village extends React.Component {
goods.map(
theGood => {
villageStore[theGood].count += 1;
villageStore[theGood].classNames.show = true;
villageStore[theGood].classNames.goodThingHappened = true;
}
);
// holy crap this is confusing; basically, count the elements in the goods array and stuff them in an object
......@@ -194,6 +193,7 @@ export class Village extends React.Component {
villager.toolDurability = 100;
villager.hasTool = true;
villageStore['tool'].count -= 1;
villageStore['tool'].classNames.badThingHappened = true
}
}
......@@ -235,6 +235,7 @@ export class Village extends React.Component {
villager.clothingDurability = 100;
villager.clothed = true;
villageStore['clothing'].count -= 1;
villageStore['clothing'].classNames.badThingHappened = true
}
}
......@@ -249,6 +250,7 @@ export class Village extends React.Component {
if (villageStore['food'].count > 0) {
villager.energy += this.props.knobsAndLevers.energyPerFood;
villageStore['food'].count -= 1;
villageStore['food'].classNames.badThingHappened = true
}
}
......@@ -286,6 +288,7 @@ export class Village extends React.Component {
villager.assignment !== 'IDLE' ? this.removeVillager(villager) : null;
villager.assignment = 'DEAD';
this.updateLog('a villager has ' + reason + ' to death');
this.state.villagerStatus.dead.count += 1;
}
bringOutYourDead = (villager) => {
......@@ -322,19 +325,26 @@ export class Village extends React.Component {
this.updateAllVillagers(villagers);
}
setBadThingClass = (thing) => {
console.log(thing)
console.log(this.state.villagerStatus[thing])
console.log(this.state.villagerStatus);
this.state.villagerStatus[thing].classNames.badThingHappened = true;
}
captureGameStatusInfo = () => {
const villagerStatus = this.state.villagerStatus;
villagerStatus.toolless = 0;
villagerStatus.naked = 0;
villagerStatus.starving = 0;
villagerStatus.freezing = 0;
villagerStatus.toolless.count = 0;
villagerStatus.naked.count = 0;
villagerStatus.starving.count = 0;
villagerStatus.freezing.count = 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;
!villager.hasTool && villager.assignment !== 'DEAD' ? (villagerStatus.toolless.count += 1, this.setBadThingClass('toolless')) : null;
!villager.clothed && villager.assignment !== 'DEAD' ? (villagerStatus.naked.count += 1, this.setBadThingClass('naked')) : null;
villager.energy <= warningValue && villager.assignment !== 'DEAD' ? (villagerStatus.starving.count += 1, this.setBadThingClass('starving')) : null;
villager.warmth <= warningValue && villager.assignment !== 'DEAD' ? (villagerStatus.freezing.count += 1, this.setBadThingClass('freezing')) : null;
});
this.setState({
villagerStatus: villagerStatus,
......@@ -351,7 +361,23 @@ export class Village extends React.Component {
});
}
resetStatusClassNames = () => {
Array.from(Object.keys(this.state.villagerStatus)).map( key => {
this.state.villagerStatus[key].classNames.goodThingHappened = false;
this.state.villagerStatus[key].classNames.badThingHappened = false;
});
}
resetStoreClassNames = () => {
Array.from(Object.keys(this.props.villageStore)).map( key => {
this.props.villageStore[key].classNames.goodThingHappened = false;
this.props.villageStore[key].classNames.badThingHappened = false;
});
}
tick = () => {
this.resetStatusClassNames();
this.resetStoreClassNames();
const buildings = this.props.buildings.slice();
this.manageProductionBuildings(buildings);
this.manageVillagerConditions();
......
......@@ -117,6 +117,7 @@ button {
}
.storeRow, .statusRow {
position: relative;
padding: 0 5px;
}
.storeName, .statusName {
clear: both;
......@@ -125,9 +126,24 @@ button {
.storeCount, .statusCount {
float: right;
}
.storeAbsent {
.goodThingHappened {
animation: fadeOutAdded 2s;
}
@keyframes fadeOutAdded {
from { background-color: lightgreen; }
to { background-color: white; }
}
.badThing {
color: tomato;
}
.badThingHappened {
animation: fadeOutRemoved 2s;
}
@keyframes fadeOutRemoved {
from { background-color: tomato; }
to { background-color: white; }
}
.clear {
clear: both;
}
......
......@@ -28,7 +28,7 @@ const knobsAndLevers = {
warmthReplenishThreshold: 10,
warmthPerFirewood: 80,
baseEnergyDegradeRate: 1,
baseEnergyDegradeRate: 30,
assignmentEnergyMultiplier: 2,
energyReplenishThreshold: 10,
energyPerFood: 80,
......@@ -39,7 +39,7 @@ const knobsAndLevers = {
defaultToolStores: 25,
defaultFirewoodStores: 25,
defaultFoodStores: 50,
defaultFoodStores: 5,
defaultClothingStores: 25,
defaultHideStores: 0,
......@@ -57,15 +57,24 @@ const startingLog = [
]
const villageStore = {
wood: {count: knobsAndLevers.defaultWoodStores, source: 'FORESTER_HUT', classNames: {}},
tool: {count: knobsAndLevers.defaultToolStores, source: 'SMITHY', classNames: {}},
iron: {count: knobsAndLevers.defaultIronStores, source: 'MINE', classNames: {}},
firewood: {count: knobsAndLevers.defaultFirewoodStores, source: 'WOODCUTTER_HUT', classNames: {}},
food: {count: knobsAndLevers.defaultFoodStores, source: 'GATHERER_HUT, HUNTER_LODGE', classNames: {}},
hide: {count: knobsAndLevers.defaultHideStores, source: 'HUNTER_LODGE', classNames: {}},
clothing: {count: knobsAndLevers.defaultClothingStores, source: 'TAILOR', classNames: {}},
wood: {count: knobsAndLevers.defaultWoodStores, source: 'FORESTER_HUT', classNames: {goodThingHappened: false, badThingHappened: false}},
tool: {count: knobsAndLevers.defaultToolStores, source: 'SMITHY', classNames: {goodThingHappened: false, badThingHappened: false}},
iron: {count: knobsAndLevers.defaultIronStores, source: 'MINE', classNames: {goodThingHappened: false, badThingHappened: false}},
firewood: {count: knobsAndLevers.defaultFirewoodStores, source: 'WOODCUTTER_HUT', classNames: {goodThingHappened: false, badThingHappened: false}},
food: {count: knobsAndLevers.defaultFoodStores, source: 'GATHERER_HUT, HUNTER_LODGE', classNames: {goodThingHappened: false, badThingHappened: false}},
hide: {count: knobsAndLevers.defaultHideStores, source: 'HUNTER_LODGE', classNames: {goodThingHappened: false, badThingHappened: false}},
clothing: {count: knobsAndLevers.defaultClothingStores, source: 'TAILOR', classNames: {goodThingHappened: false, badThingHappened: false}},
};
const villagerStatus = {
naked: {count: 0, classNames: {badThingHappened: false}},
toolless: {count: 0, classNames: {badThingHappened: false}},
starving: {count: 0, classNames: {badThingHappened: false}},
freezing: {count: 0, classNames: {badThingHappened: false}},
unassigned: {count: knobsAndLevers.startingVillagers, classNames: {badThingHappened: false}},
dead: {count: 0, classNames: {badThingHappened: false}},
}
const addVillager = () => {
let nextId = villagers.length > 0 ? Math.max(...villagers.map(v => v.id)) + 1 : 0;
const villager = {
......@@ -194,12 +203,11 @@ const generateBuildings = () => {
baseProductionRate: knobsAndLevers.defaultProductionRate,
producing: false
});
const Game = () => {
return <div className="game">
<Village buildings={buildings} villageStore={villageStore}
villagers={villagers} knobsAndLevers={knobsAndLevers}
start={Date.now()} restart={restart}
start={Date.now()} restart={restart} villagerStatus={villagerStatus}
/>
<Rules rules={startingLog} />
</div>
......
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