initial commit

Scott Wey · Scott Wey · commit 23e8df000b9a · 2016-10-27T21:48:57.000-07:00
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,4 @@
+{
+  "extends": "eslint-config-airbnb",
+  "env": {"browser":true}
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "bun",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "eslint": "^3.7.0",
+    "eslint-config-airbnb": "^12.0.0",
+    "eslint-plugin-import": "^1.16.0",
+    "eslint-plugin-jsx-a11y": "^2.2.2",
+    "eslint-plugin-react": "^6.3.0",
+    "react-scripts": "0.6.1"
+  },
+  "dependencies": {
+    "aphrodite": "^0.6.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-redux": "^4.4.5",
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.1.0",
+    "reselect": "^2.5.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favico.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Bun Quest</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+import { StyleSheet, css } from 'aphrodite';
+
+const style = StyleSheet.create({
+  default: {
+    padding: '2px 10px',
+    backgroundColor: 'white',
+    ':hover:enabled': { backgroundColor: '#5588ff',
+                color: 'white' },
+    ':active:enabled': { backgroundColor: '#3366dd' },
+    ':disabled': { color: '#dbdbdb',
+                    borderColor: '#dbdbdb',
+                    backgroundColor: '#fdfdfd' },
+    border: '1px solid #5588ff',
+    borderRadius: '3px',
+    color: '#5588ff',
+    outline: 'none',
+    margin: '3px',
+    fontSize: '1em',
+    textTransform: 'uppercase',
+    }
+});
+
+const Button = props => <button className={css(style.default)} {...props}>{props.children}</button>;
+export default Button;
diff --git a/src/components/BuyButton.jsx b/src/components/BuyButton.jsx
@@ -0,0 +1,12 @@
+import React, { PropTypes } from 'react';
+import Button from './Button'
+
+const BuyButton = ({ canBuy, onClick, children }) => {
+  if (canBuy) {
+    return (<Button onClick={onClick}>{children}</Button>);
+  }
+  return (<Button disabled>{children}</Button>);
+};
+
+
+export default BuyButton;
diff --git a/src/components/Producer.jsx b/src/components/Producer.jsx
@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react';
+import BuyButton from './BuyButton';
+
+const Producer = ({ producer, buyAction, money }) => {
+  const { name, description, product, price: basePrice, scaling, count } = producer;
+  const price = Math.ceil(basePrice * Math.pow(scaling, count));
+  const boundBuy = buyAction.bind(undefined, price);
+  const enoughMoney = money >= price;
+  return (
+    <div>
+      <h3>{name}</h3>
+      {description} <br />
+      Produces { product } buns at a time. You have {count}. <br />
+      Price: {price} <br />
+      <BuyButton canBuy={enoughMoney} onClick={boundBuy}>Buy</BuyButton>
+      <hr />
+    </div>
+  );
+};
+
+Producer.propTypes = {
+  producer: PropTypes.object.isRequired,
+  buyAction: PropTypes.func.isRequired,
+  money: PropTypes.number.isRequired,
+};
+
+export default Producer;
diff --git a/src/components/ProducerList.jsx b/src/components/ProducerList.jsx
@@ -0,0 +1,15 @@
+import React, { PropTypes } from 'react';
+import Producer from './Producer'
+
+const ProducerList = ({ game: { producers: producerArray, money }, buyAction }) => {
+  const producers = producerArray.map((producer, id) => (
+    <Producer key={id} producer={producer} buyAction={buyAction.bind(undefined, id)} money={money} />
+  ));
+  return (
+    <div>
+      {producers}
+    </div>
+  );
+};
+
+export default ProducerList;
diff --git a/src/components/Ticker.jsx b/src/components/Ticker.jsx
@@ -0,0 +1,39 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { moneyPerTickSelector } from '../selectors/perTickSelector';
+import * as gameActions from '../ducks/game';
+
+class Ticker extends Component {
+  componentDidMount() {
+    this.interval = setInterval(this.props.tick, this.props.interval);
+  }
+
+  componentWillUpdate() {
+    clearInterval(this.interval);
+  }
+
+  componentDidUpdate() {
+    this.interval = setInterval(this.props.tick, this.props.interval);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    const { interval, moneyPerTick } = this.props;
+    return (<span>{moneyPerTick / (parseFloat(interval) / 1000)} buns per second</span>);
+  }
+}
+
+Ticker.propTypes = {
+  tick: PropTypes.func.isRequired,
+  interval: PropTypes.number.isRequired,
+  moneyPerTick: PropTypes.number.isRequired,
+};
+
+const stateToProps = state => ({ interval: state.game.interval, moneyPerTick: moneyPerTickSelector(state) });
+const dispatchToProps = dispatch => bindActionCreators(gameActions, dispatch);
+
+export default connect(stateToProps, dispatchToProps)(Ticker);
diff --git a/src/containers/Index.jsx b/src/containers/Index.jsx
@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as gameActions from '../ducks/game';
+import ProducerList from '../components/ProducerList';
+import Ticker from '../components/Ticker';
+import Button from '../components/Button';
+
+const Index = ({ game, click, buyProducer }) => (
+  <div>
+    <h1>BUN QUEST</h1>
+    <h2>{game.money} buns</h2>
+    <Ticker /><br />
+    <Button onClick={click}> Bake Bun </Button><hr />
+    <ProducerList game={game} buyAction={buyProducer} /><br />
+  </div>
+);
+
+Index.propTypes = {
+  game: PropTypes.object.isRequired,
+  click: PropTypes.func.isRequired,
+};
+
+const stateToProps = state => ({ game: state.game });
+const dispatchToProps = dispatch => bindActionCreators(gameActions, dispatch);
+
+export default connect(stateToProps, dispatchToProps)(Index);
diff --git a/src/definitions/producers.js b/src/definitions/producers.js
@@ -0,0 +1,33 @@
+const producerData = [
+  {
+    name: 'Baker',
+    description: 'Bakers of buns to help you produce more, not experts or artisans by any means, but better than nothing.',
+    product: 1,
+    price: 10,
+    scaling: 1.15,
+  },
+  {
+    name: 'Bun Artisan',
+    description: 'Masters of bun-making. This bunderful baker is ready to take on the challenge of making you rich. In buns.',
+    product: 5,
+    price: 85,
+    scaling: 1.14,
+  },
+  {
+    name: 'Bunsmith',
+    description: 'Not bakers, but devotees of true bun-craft. Bunsmiths seclude themselves deep in the fiery hearts of buncanos, vainly pursuing the perfect bun.',
+    product: 25,
+    price: 720,
+    scaling: 1.13,
+  },
+  {
+    name: 'Bun Knight',
+    description: 'Gallant knights that have sworn blood oaths to bring justice into the world. And to buns.',
+    product: 125,
+    price: 6210,
+    scaling: 1.12,
+  },
+];
+
+const producers = producerData.map(producer => ({ ...producer, count: 0 }));
+export default producers;
diff --git a/src/ducks/game.js b/src/ducks/game.js
@@ -0,0 +1,32 @@
+import { TICK, CLICK, BUY_PRODUCER } from './types';
+import producers from '../definitions/producers';
+
+// redefine producers here to attach bound buy functions to producers here
+const reducer = (state = { money: 0, interval: 1000, producers }, action) => {
+  switch (action.type) {
+    case BUY_PRODUCER: {
+      const newProducers = [...state.producers];
+      const producer = state.producers[action.id];
+      // interesting thought, bind id, and price to buy function here
+      newProducers[action.id] = { ...producer, count: producer.count + 1 };
+      const newMoney = state.money - action.price;
+      return { ...state, producers: newProducers, money: newMoney };
+    }
+    case TICK: {
+      const newMoney = state.producers.reduce((sum, producer) =>
+        sum + (producer.count * producer.product)
+      , state.money);
+      return { ...state, money: newMoney };
+    }
+    case CLICK: {
+      return { ...state, money: state.money + 1 };
+    }
+    default: return state;
+  }
+};
+
+export const click = () => ({ type: CLICK });
+export const tick = () => ({ type: TICK });
+export const buyProducer = (id, price) => ({ type: BUY_PRODUCER, id, price });
+
+export default reducer;
diff --git a/src/ducks/index.js b/src/ducks/index.js
@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import game from './game';
+
+const allReducers = combineReducers({
+  game,
+});
+
+const mainReducer = (state, action) => allReducers(state, action);
+
+export default mainReducer;
diff --git a/src/ducks/types.js b/src/ducks/types.js
@@ -0,0 +1,6 @@
+//  engine
+export const TICK = 'engine/TICK';
+
+//  gameplay
+export const CLICK = 'game/CLICK';
+export const BUY_PRODUCER = 'game/BUY_PRODUCER';
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Lato', sans-serif;
+  font-weight: 300;
+  color: #777777;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import IndexContainer from './containers/Index';
+import root from './ducks';
+import './index.css';
+
+import configureStore from './store';
+
+const store = configureStore();
+
+if (module.hot) {
+  module.hot.accept('./ducks', () => {
+    const nextRoot = require('./ducks');
+    store.replaceReducer(nextRoot);
+  });
+}
+
+ReactDOM.render(
+  <Provider store={store}>
+    <IndexContainer />
+  </Provider>
+  , document.getElementById('root')
+);
diff --git a/src/selectors/perTickSelector.js b/src/selectors/perTickSelector.js
@@ -0,0 +1,6 @@
+import { createSelector } from 'reselect';
+
+const producerSelector = state => state.game.producers;
+
+export const moneyPerTickSelector = createSelector(producerSelector,
+  producers => producers.reduce((sum, producer) => sum + (producer.count * producer.product), 0));
diff --git a/src/store.js b/src/store.js
@@ -0,0 +1,8 @@
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import root from './ducks';
+
+const enhancer = applyMiddleware(thunk);
+export default function configureStore(initialState = {}) {
+  return createStore(root, initialState, enhancer);
+}
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "extends": "eslint-config-airbnb",
 +  "env": {"browser":true}
 +}