Merge pull request #4 from codemethis/basic-functionality

Basic functionality

src/Actions/gameActions.js

@@ -35,3 +35,19 @@ export function buyBuilding(buildingId) {
 		payload: buildingId
 	};
 }
+
+export function hideTooltip() {
+	return {
+		type: 'HIDE_TOOLTIP'
+	};
+}
+
+export function moveTooltip(buildingId, mouseY) {
+	return {
+		type: 'MOVE_TOOLTIP',
+		payload: {
+			buildingId,
+			mouseY
+		}
+	};
+}

src/Components/Building.js

@@ -7,10 +7,14 @@ import { prettifyNumber } from '../Utilities/utilities';
 function Building(props) {
 	const building = props.building;
 	const canBuy = BigNumber(building.priceOfNext).lte(BigNumber(props.nanites).div(100));
-	const overlay = canBuy ? null : (<div style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, backgroundColor: 'rgba(255,255,255,0.5)'}}></div>);
+	const overlay = canBuy ? null : (<div className="overlay"></div>);
 
 	return (
-		<div className="building" style={{position: 'relative', cursor: 'pointer'}} onClick={canBuy ? () => props.buyBuilding(building.id) : () => null}>
+		<div className="building"
+			style={{cursor: canBuy ? 'pointer' : 'default'}}
+			onClick={canBuy ? () => props.buyBuilding(building.id) : () => null}
+			onMouseMove={$event => props.moveTooltip(building.id, ($event.pageY - 50) + 'px')}>
+
 			<h5>{building.name}</h5>
 			<div>{building.owned}</div>
 			<div>{prettifyNumber(building.priceOfNext)}</div>
@@ -22,7 +26,8 @@ function Building(props) {
 Building.propTypes = {
 	building: PropTypes.object.isRequired,
 	nanites: PropTypes.object.isRequired,
-	buyBuilding: PropTypes.func.isRequired
+	buyBuilding: PropTypes.func.isRequired,
+	moveTooltip: PropTypes.func.isRequired
 };
 
 export default Building;

src/Components/Game.js

@@ -5,7 +5,8 @@ import BigNumber from 'big-number';
 
 import Building from './Building';
 import Stats from './Stats';
-import { loadGame, saveGame, clearSave, tick, addNanites, buyBuilding } from '../Actions/gameActions';
+import Tooltip from './Tooltip';
+import { loadGame, saveGame, clearSave, tick, addNanites, buyBuilding, hideTooltip, moveTooltip } from '../Actions/gameActions';
 import { prettifyNumber, updateTitleTag } from '../Utilities/utilities';
 
 import greenNebula from '../Images/greenNebula.jpg';
@@ -25,17 +26,28 @@ class Game extends Component {
 		return prettifyNumber(wholeNanites, true);
 	};
 
-	renderBuildings = () => {
-		return this.props.buildings.map(b => {
-			return (
-				<Building key={b.id} building={b} nanites={this.props.naniteHundredths} buyBuilding={this.props.buyBuilding} />
-			);
-		});
-	};
-
 	render() {
+		const tooltipBuilding = this.props.buildings.find(b => b.id === this.props.tooltipBuilding);
+		const  renderBuildings = () => {
+			return this.props.buildings.map(b => {
+				return (
+					<Building key={b.id} building={b} nanites={this.props.naniteHundredths} buyBuilding={this.props.buyBuilding} moveTooltip={this.props.moveTooltip} />
+				);
+			});
+		};
+		const renderTooltip = () => {
+			let tt = '';
+			if(this.props.tooltipActive) {
+				tt = (
+					<Tooltip tooltipTop={this.props.tooltipTop} tooltipBuilding={tooltipBuilding} />
+				);
+			}
+
+			return tt;
+		}
+
 		return (
-			<div style={{height: '100vh', width: '100vw'}}>
+			<div id="Game">
 				<div id="leftPanel" style={{backgroundImage: 'url(' + greenNebula + ')'}}>
 					<div id="banner">
 						<h2>{this.displayNaniteValue()} nanites</h2>
@@ -55,39 +67,11 @@ class Game extends Component {
 				</div>
 				<div id="rightPanel">
 					<h2 className="text-center">Buildings</h2>
-					{this.renderBuildings()}
-				</div>
-			{/*
-			<div className="container">
-				<div className="row text-center">
-					<div className="col-xs-12">
-						<h1>You have {this.displayNaniteValue()} nanites.</h1>
-					</div>
-					<div className="col-xs-12" style={{padding: '0.5em'}}>
-						<button className="btn btn-primary" onClick={() => this.props.addNanites(100)}>Click to generate nanite</button>
-					</div>
-					<div className="col-xs-12">
-						<button className="btn btn-default" onClick={this.props.saveGame}>Save Game</button>
-						&nbsp;
-						<button className="btn btn-danger" onClick={this.props.clearSave}>Clear Save</button>
-					</div>
-				</div>
-
-				<div className="row" style={{marginTop: '3em'}}>
-					<div className="col-xs-12 col-lg-6 col-lg-offset-3">
-						<Stats nanites={this.props.naniteHundredths}
-								nanitesPerSecond={this.props.nanitesPerSecond}
-								generatedNanites={this.props.nanitesGenerated}
-								handGeneratedNanites={this.props.nanitesHandGenerated}
-								buildingsOwned={this.props.buildingsOwned} />
+					<div id="buildingContainer" onMouseLeave={() => this.props.hideTooltip()}>
+						{renderBuildings()}
 					</div>
 				</div>
-
-				<br /><br /><br />
-				<h3>Buildings</h3>
-				{this.renderBuildings()}
-			</div>
-			*/}
+				{renderTooltip()}
 			</div>
 		);
 	}
@@ -100,12 +84,17 @@ Game.propTypes = {
 	nanitesHandGenerated: PropTypes.object.isRequired,
 	buildingsOwned: PropTypes.number.isRequired,
 	buildings: PropTypes.arrayOf(PropTypes.object).isRequired,
+	tooltipActive: PropTypes.bool.isRequired,
+	tooltipTop: PropTypes.string.isRequired,
+	tooltipBuilding: PropTypes.number.isRequired,
 	loadGame: PropTypes.func.isRequired,
 	saveGame: PropTypes.func.isRequired,
 	clearSave: PropTypes.func.isRequired,
 	tick: PropTypes.func.isRequired,
 	addNanites: PropTypes.func.isRequired,
-	buyBuilding: PropTypes.func.isRequired
+	buyBuilding: PropTypes.func.isRequired,
+	hideTooltip: PropTypes.func.isRequired,
+	moveTooltip: PropTypes.func.isRequired
 }
 
 const mapStateToProps = state => {
@@ -115,7 +104,10 @@ const mapStateToProps = state => {
 		nanitesGenerated: state.nanitesGenerated,
 		nanitesHandGenerated: state.nanitesHandGenerated,
 		buildingsOwned: state.buildingsOwned,
-		buildings: state.buildings
+		buildings: state.buildings,
+		tooltipActive: state.tooltipActive,
+		tooltipTop: state.tooltipTop,
+		tooltipBuilding: state.tooltipBuilding
 	};
 };
 
@@ -131,7 +123,9 @@ const mapDispatchToProps = dispatch => {
 		},
 		tick: () => dispatch(tick()),
 		addNanites: amountToAdd => dispatch(addNanites(amountToAdd)),
-		buyBuilding: buildingId => dispatch(buyBuilding(buildingId))
+		buyBuilding: buildingId => dispatch(buyBuilding(buildingId)),
+		hideTooltip: () => dispatch(hideTooltip()),
+		moveTooltip: (buildingId, mouseY) => dispatch(moveTooltip(buildingId, mouseY))
 	};
 };
 

src/Components/Tooltip.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BigNumber from 'big-number';
+import {prettifyNumber} from '../Utilities/utilities';
+
+function Tooltip(props) {
+	const b = props.tooltipBuilding;
+	const ownedDetails = () => {
+		if(b.owned === 0) {
+			return '';
+		}
+
+		let details = '';
+
+		if(b.owned > 1) {
+			details = (
+				<p>{b.owned} {b.plural} are producing a total of {prettifyNumber(BigNumber(b.baseNHPT).mult(b.owned).div(10))} nanites per second.</p>
+			);
+		}
+
+		return (
+			<div>
+				<p>Each {b.name} produces {prettifyNumber(BigNumber(b.baseNHPT).div(10))} nanites per second.</p>
+				{details}
+			</div>
+		);
+	};
+
+	return (
+		<div id="tooltip" style={{top: props.tooltipTop}}>
+			<h4>{b.name}</h4>
+			<p className="description">{b.description}</p>
+			{ownedDetails()}
+		</div>
+	);
+}
+
+Tooltip.propTypes = {
+	tooltipTop: PropTypes.string.isRequired,
+	tooltipBuilding: PropTypes.object.isRequired
+}
+
+export default Tooltip;

src/Reducers/gameReducer.js

@@ -12,6 +12,8 @@ const defaultState = {
 		{
 			id: 1,
 			name: 'Replicator',
+			plural: 'Replicators',
+			description: 'Nanites merge together to form a nanite-producing fabrication device',
 			owned: 0,
 			basePrice: BigNumber(15),
 			priceOfNext: BigNumber(15),
@@ -20,6 +22,8 @@ const defaultState = {
 		{
 			id: 2,
 			name: 'Drone',
+			plural: 'Drones',
+			description: 'Nanites infect a humanoid host, overpowering will and creating new nanites',
 			owned: 0,
 			basePrice: BigNumber(100),
 			priceOfNext: BigNumber(100),
@@ -28,6 +32,8 @@ const defaultState = {
 		{
 			id: 3,
 			name: 'Fabrication Plant',
+			plural: 'Plants',
+			description: 'An entire manufactoring facility devoted to creation of new nanites',
 			owned: 0,
 			basePrice: BigNumber(1100),
 			priceOfNext: BigNumber(1100),
@@ -36,6 +42,8 @@ const defaultState = {
 		{
 			id: 4,
 			name: 'Colony',
+			plural: 'Colonies',
+			description: 'A city-sized amalgamation of nanite-generating production line',
 			owned: 0,
 			basePrice: BigNumber(12000),
 			priceOfNext: BigNumber(12000),
@@ -44,6 +52,8 @@ const defaultState = {
 		{
 			id: 5,
 			name: 'Space Station',
+			plural: 'Stations',
+			description: 'A massive structure in orbit that solely exists to create more nanites',
 			owned: 0,
 			basePrice: BigNumber(130000),
 			priceOfNext: BigNumber(130000),
@@ -52,6 +62,8 @@ const defaultState = {
 		{
 			id: 6,
 			name: 'Planet',
+			plural: 'Planets',
+			description: 'Your nanites take over an entire world and slowly convert all its natural resources into nanites',
 			owned: 0,
 			basePrice: BigNumber(1400000),
 			priceOfNext: BigNumber(1400000),
@@ -60,6 +72,8 @@ const defaultState = {
 		{
 			id: 7,
 			name: 'Nebula',
+			plural: 'Nebulae',
+			description: 'A star-system\'s worth of space gas, providing a base material for the generation of nanites',
 			owned: 0,
 			basePrice: BigNumber(20000000),
 			priceOfNext: BigNumber(20000000),
@@ -68,6 +82,8 @@ const defaultState = {
 		{
 			id: 8,
 			name: 'Galaxy',
+			plural: 'Galaxies',
+			description: 'A collection of billions of stars, completely overrun with self-replicating nanites',
 			owned: 0,
 			basePrice: BigNumber(330000000),
 			priceOfNext: BigNumber(330000000),
@@ -76,12 +92,18 @@ const defaultState = {
 		{
 			id: 9,
 			name: 'Alternate Dimension',
+			plural: 'Dimensions',
+			description: 'Your nanites have ripped through the very fabric of space-time itself and consumed all that exists on the "other side"',
 			owned: 0,
 			basePrice: BigNumber(5100000000),
 			priceOfNext: BigNumber(5100000000),
 			baseNHPT: BigNumber(2600000)
 		}
-	]
+	],
+
+	tooltipActive: false,
+	tooltipTop: '0px',
+	tooltipBuilding: 1
 };
 
 function deepCloneBuildingObject(buildingObject) {
@@ -211,6 +233,18 @@ export default (state = defaultState, action) => {
 
 			return stateClone;
 
+		case 'HIDE_TOOLTIP':
+			stateClone.tooltipActive = false;
+
+			return stateClone;
+
+		case 'MOVE_TOOLTIP':
+			stateClone.tooltipActive = true;
+			stateClone.tooltipBuilding = action.payload.buildingId;
+			stateClone.tooltipTop = action.payload.mouseY;
+
+			return stateClone;
+
 		default:
 			return state;
 	}