Persist settings between reloads

README.md

@@ -1,7 +1,9 @@
 factorio-calc
 =============
 
-For all your obsessive optimizing needs
+For all your obsessive optimizing needs.
+
+https://rubyruy.github.io/factorio-calc/
 
 # Contribute a data source #
 
@@ -18,4 +20,4 @@ Additional data sources are welcome - the calculator should work just fine with
 
 ## See Also ##
 
-[Forum Thread](http://www.factorioforums.com/forum/viewtopic.php?f=5&t=4553)
+[Forum Thread](http://www.factorioforums.com/forum/viewtopic.php?f=5&t=4553)

calc.jsx

@@ -14,11 +14,12 @@ var Bulk = App.Bulk;
 
 class Calc extends React.Component {
   state = {
-    input: {recipe: "", ipm: 1 },
-    additionalInputs: [],
-    options: {
+    // Restore the inputs and options from persistent storage.
+    input:            JSON.parse(localStorage.getItem("input"))            || { recipe: "", ipm: 1 },
+    additionalInputs: JSON.parse(localStorage.getItem("additionalInputs")) || [],
+    options:          JSON.parse(localStorage.getItem("options"))          || {
       asslvl: "0.5",
-      smeltlvl: "1",
+      smeltlvl:"1",
       beltlvl: "5.7",
       difficulty: "normal",
       alwaysShowDecimals: false
@@ -37,6 +38,19 @@ class Calc extends React.Component {
     });
     var result = Calculator.calculateAndAnalyze(inputs, this.state.options);
     this.setState({result: result});
+
+    // Write the inputs and options to persistent storage.
+    localStorage.setItem("input",            JSON.stringify(this.state.input));
+    localStorage.setItem("additionalInputs", JSON.stringify(this.state.additionalInputs));
+    localStorage.setItem("options",          JSON.stringify(this.state.options));
+  }
+
+  getInputs() {
+    if (this.state.input.recipe) {
+      return _.union([this.state.input], this.state.additionalInputs);
+    } else {
+      return this.state.additionalInputs;
+    }
   }
 
   setInput = (input) => {
@@ -144,12 +158,4 @@ class Calc extends React.Component {
     </div>
     );
   }
-
-  getInputs() {
-    if (this.state.input.recipe) {
-      return _.union([this.state.input], this.state.additionalInputs);
-    } else {
-      return this.state.additionalInputs;
-    }
-  }
 };

index.html

@@ -22,7 +22,7 @@
 	<script src="https://unpkg.com/react@15/dist/react.js"></script>
 	<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/1.7.7/react-modal.js" integrity="sha256-wQ9go2p9/RzvdqC0RzS2djz4aujaK10VA5UnV9A5eXI=" crossorigin="anonymous"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/1.9.7/react-modal.min.js" integrity="sha256-1X9+oPwWzI4TxGrBeDiMTewsUZIe4gqha8D8hL9+fK8=" crossorigin="anonymous"></script>
 	<script src="bower_components/d3/d3.min.js"></script>
 	<script src="bower_components/lodash/lodash.js"></script>
 	<script src="bower_components/graphlib/dist/graphlib.core.js"></script>

input.jsx

@@ -1,49 +1,49 @@
- /* global React,App*/
+/* global React,App*/
 
 App.Input = class Input extends React.Component {
-    componentWillMount() {
-      this.recipes = App.getData.call();
-    }
+  componentWillMount() {
+    this.recipes = App.getData.call();
+  }
 
-    render() {
-        var self = this;
-        var onChangeRecipe = function(event) {
-            self.props.onChange({recipe: event.target.value, ipm: self.props.input.ipm});
-        };
-        var onChangeIpm = function(event) {
-            self.props.onChange({recipe: self.props.input.recipe, ipm: parseFloat(event.target.value)});
-        };
+  render() {
+    var self = this;
+    var onChangeRecipe = function (event) {
+      self.props.onChange({ recipe: event.target.value, ipm: self.props.input.ipm });
+    };
+    var onChangeIpm = function (event) {
+      self.props.onChange({ recipe: self.props.input.recipe, ipm: parseFloat(event.target.value) });
+    };
 
-        return (
-          <div>
-          <p>
-            Calculate the requirements for
+    return (
+      <div>
+        <p>
+          Calculate the requirements for
             <input
-              id="recipe"
-              type="text"
-              list="recipes"
-              placeholder="recipe name"
-              value={this.props.input.recipe}
-              onChange={onChangeRecipe}/>
-            <datalist id="recipes">
-            	{Object.keys(this.recipes).map(function(recipe) {
-                    return <option key={recipe}>{recipe}</option>;
-                })}
-            </datalist>
-            producing at a rate of
+            id="recipe"
+            type="text"
+            list="recipes"
+            placeholder="recipe name"
+            value={this.props.input.recipe}
+            onChange={onChangeRecipe} />
+          <datalist id="recipes">
+            {Object.keys(this.recipes).map(function (recipe) {
+              return <option key={recipe}>{recipe}</option>;
+            })}
+          </datalist>
+          producing at a rate of
             <input
-              id="ipm"
-              type="number"
-              min="0"
-              step="any"
-              value={this.props.input.ipm}
-              onChange={onChangeIpm}/>
-            item(s) / minute.
-            <button id="addAnother" onClick={ this.props.onAddAnother }>Add Another</button>
-            <button id="clear" onClick={ this.props.onClear }>Clear</button>
-            <button id="bulk" onClick={ this.props.onBulk }>Bulk</button>
-          </p>
-          </div>
-        );
-    }
+            id="ipm"
+            type="number"
+            min="0"
+            step="any"
+            value={this.props.input.ipm}
+            onChange={onChangeIpm} />
+          item(s) / minute.
+            <button id="addAnother" onClick={this.props.onAddAnother}>Add Another</button>
+          <button id="clear" onClick={this.props.onClear}>Clear</button>
+          <button id="bulk" onClick={this.props.onBulk}>Bulk</button>
+        </p>
+      </div>
+    );
+  }
 };

options.jsx

@@ -112,7 +112,6 @@ App.Options = class Options extends React.Component {
             <span className="glyphicon glyphicon-expand"></span>
             Show options
           </a>
-
         </p>
       );
     }

serve-github-pages.rb

@@ -10,5 +10,9 @@
 # Pass these values as command line arguments to httpd.
 ARGV.replace [File.expand_path('.', __dir__), '--port=8080']
 
+# Opens the GitHub Pages in the system default browser.
+# This has no effect when explorer.exe is not available, such as on Linux.
+system('explorer.exe', 'http://localhost:8080')
+
 # Start the http server.
 httpd