Finish first version of idea comparator

src/index.js

@@ -11,10 +11,11 @@ function shuffleArray(array) {
 }
 
 class Decision {
-  constructor(choiceA, choiceB) {
-    this.choiceA = choiceA;
-    this.choiceB = choiceB;
-    this.result = null;
+  constructor(indexA, indexB, choices) {
+    this.indexA = indexA;
+    this.indexB = indexB;
+    this.choiceA = choices[indexA];
+    this.choiceB = choices[indexB];
   }
 
   static createDecisions(choices) {
@@ -22,7 +23,7 @@ class Decision {
     for (var i = 0; i < choices.length; i++) {
       for (var j = 0; j < choices.length; j++) {
         if (i !== j) {
-          let d = new Decision(choices[i], choices[j]);
+          let d = new Decision(i, j, choices);
           decisions.push(d);
         }
       }
@@ -39,13 +40,16 @@ class Options extends React.Component {
       choicesText: null,
       choices: [],
       decisions: null,
-      warnings: null,
+      decisionsMade: null,
+      currentDecision: null,
     };
   }
 
   startChoosing() {
     this.setState({
       decisions: Decision.createDecisions(this.state.choices),
+      decisionsMade: [],
+      currentDecision: 0,
     });
   }
 
@@ -64,20 +68,49 @@ class Options extends React.Component {
     });
   }
 
-  renderChoosing() {
-    const decisions = this.state.decisions;
-    const decisionsToRender = decisions.map((decision, index) => {
-      return (
-        <li key={index}>
-          {decision.choiceA} - {decision.choiceB}
-        </li>
-      );
+  makeChoice(i) {
+    this.setState({
+      currentDecision: this.state.currentDecision + 1,
+      decisionsMade: this.state.decisionsMade.concat([i]),
     });
+  }
+
+  renderChoosing() {
+    const current = this.state.currentDecision;
+    const decision = this.state.decisions[current];
 
     return (
       <div className="pure-g">
-        <div className="pure-u-1">
-          <ul>{decisionsToRender}</ul>
+        <div className="pure-u-1 space-1">
+          <div className="pure-u-9-24">
+            <p>{decision.choiceA}</p>
+          </div>
+          <div className="pure-u-6-24" />
+          <div className="pure-u-9-24">
+            <p>{decision.choiceB}</p>
+          </div>
+        </div>
+        <div className="pure-u-1 space-1">
+          <button
+            className="pure-button pure-u-9-24 button-warning"
+            onClick={() => this.makeChoice(decision.indexA)}
+          >
+            a
+          </button>
+          <div className="pure-u-1-24" />
+          <button
+            className="pure-button pure-u-4-24 button-secondary"
+            onClick={() => this.makeChoice(-1)}
+          >
+            neutral
+          </button>
+          <div className="pure-u-1-24" />
+          <button
+            className="pure-button pure-u-9-24 button-warning"
+            onClick={() => this.makeChoice(decision.indexB)}
+          >
+            b
+          </button>
         </div>
       </div>
     );
@@ -152,11 +185,53 @@ class Options extends React.Component {
     );
   }
 
+  renderResult() {
+    let choices = this.state.choices.map((choice, index) => {
+      return {
+        choice: choice,
+        count: 0,
+      };
+    });
+
+    for (const i of this.state.decisionsMade) {
+      if (i !== -1) {
+        choices[i].count += 1;
+      }
+    }
+
+    choices.sort((a, b) => b.count - a.count);
+
+    let choicesToRender = choices.map((choice, index) => {
+      return (
+        <tr key={index}>
+          <td>{choice.choice}</td>
+          <td>{choice.count}</td>
+        </tr>
+      );
+    });
+
+    return (
+      <div className="pure-u-1">
+        <table class="pure-table space-1">
+          <thead>
+            <tr>
+              <th>Choice</th>
+              <th>Count</th>
+            </tr>
+          </thead>
+          <tbody>{choicesToRender}</tbody>
+        </table>
+      </div>
+    );
+  }
+
   render() {
     if (!this.state.decisions) {
       return this.renderSpecifyChoices();
-    } else {
+    } else if (this.state.currentDecision < this.state.decisions.length) {
       return this.renderChoosing();
+    } else {
+      return this.renderResult();
     }
   }
 }