Helps with scenario games to plan engineer hires and HQ type.
Set the commodity prices at the top of the table to the starting prices in your game.
Switch between the HQ types using the buttons at the top right of the page.
Hire engineers and plan your resource grabs based on the expenses predicted by this model.
Win
The metal mine, quarry, and solar condenser show all possible production, which is rare in regular gameplay.
No production multipliers are accounted for.
Scientific HQ type still lists the input resources, when they can be
Steer clear of some react anti-patterns used in this project. If you want to contribute small changes please submit a PR. If you want to contribute large changes, please do so by forking, citing this repo, publishing so that I can do the same with yours.
1. Clone this repo:
git clone --depth 1 https://github.com/developit/preact-boilerplate.git my-app
cd my-app2. Make it your own:
rm -rf .git && git init && npm initℹ️ This re-initializes the repo and sets up your NPM project.
3. Install the dependencies:
npm installYou're done installing! Now let's get started developing.
4. Start a live-reload development server:
npm run devThis is a full web server nicely suited to your project. Any time you make changes within the
srcdirectory, it will rebuild and even refresh your browser.
5. Testing with mocha, karma, chai, sinon via phantomjs:
npm test🌟 This also instruments the code in
src/using isparta, giving you pretty code coverage statistics at the end of your tests! If you want to see detailed coverage information, a full HTML report is placed intocoverage/.
6. Generate a production build in ./build:
npm run buildYou can now deploy the contents of the
builddirectory to production!Surge.sh Example:
surge ./build -d my-app.surge.shNetlify Example:
netlify deploy
5. Start local production server with serve:
npm startThis is to simulate a production (CDN) server with gzip. It just serves up the contents of
./build.
Apps are built up from simple units of functionality called Components. A Component is responsible for rendering a small part of an application, given some input data called props, generally passed in as attributes in JSX. A component can be as simple as:
class Link extends Component {
render({ to, children }) {
return <a href={ to }>{ children }</a>;
}
}
// usage:
<Link to="/">Home</Link>This project is set up to support CSS Modules. By default, styles in src/style are global (not using CSS Modules) to make global declarations, imports and helpers easy to declare. Styles in src/components are loaded as CSS Modules via Webpack's css-loader. Modular CSS namespaces class names, and when imported into JavaScript returns a mapping of canonical (unmodified) CSS classes to their local (namespaced/suffixed) counterparts.
When imported, this LESS/CSS:
.redText { color:red; }
.blueText { color:blue; }... returns the following map:
import styles from './style.css';
console.log(styles);
// {
// redText: 'redText_local_9gt72',
// blueText: 'blueText_local_9gt72'
// }Note that the suffix for local classNames is generated based on an md5 hash of the file. Changing the file changes the hash.
💁 This project contains a basic two-page app with URL routing.
Pages are just regular components that get mounted when you navigate to a certain URL. Any URL parameters get passed to the component as props.
Defining what component(s) to load for a given URL is easy and declarative. You can even mix-and-match URL parameters and normal props.
<Router>
<A path="/" />
<B path="/b" id="42" />
<C path="/c/:id" />
</Router>This project includes preact-compat alias in as react and react-dom right out-of-the-box. This means you can install and use third-party React components, and they will use Preact automatically! It also means that if you don't install third-party React components, preact-compat doesn't get included in your JavaScript bundle - it's free if you don't use it 👍
MIT