Finish first version of idea comparator

src/index.css

@@ -1,81 +1,76 @@
 body {
-    color: #777;
+  color: #777;
 }
 
 /*
 The content `<div>` is where all your content goes.
 */
 .content {
-    margin: 0 auto;
-    padding: 0 2em;
-    max-width: 800px;
-    margin-bottom: 50px;
-    line-height: 1.6em;
+  margin: 0 auto;
+  padding: 0 2em;
+  max-width: 800px;
+  margin-bottom: 50px;
+  line-height: 1.6em;
 }
 
 .header {
-     margin: 0;
-     color: #333;
-     text-align: center;
-     padding: 2.5em 2em 0;
-     border-bottom: 1px solid #eee;
- }
-    .header h1 {
-        margin: 0.2em 0;
-        font-size: 3em;
-        font-weight: 300;
-    }
-     .header h2 {
-        font-weight: 300;
-        color: #ccc;
-        padding: 0;
-        margin-top: 0;
-    }
-
-.content-subhead {
-    margin: 50px 0 20px 0;
-    font-weight: 300;
-    color: #888;
+  margin: 0;
+  color: #333;
+  text-align: center;
+  padding: 2.5em 2em 0;
+  border-bottom: 1px solid #eee;
+}
+.header h1 {
+  margin: 0.2em 0;
+  font-size: 3em;
+  font-weight: 300;
+}
+.header h2 {
+  font-weight: 300;
+  color: #ccc;
+  padding: 0;
+  margin-top: 0;
 }
 
-.board-row:after {
-  clear: both;
-  content: "";
-  display: table;
+.content-subhead {
+  margin: 50px 0 20px 0;
+  font-weight: 300;
+  color: #888;
 }
 
 .space-1 {
   margin-top: 1em;
 }
 
-.square {
-  background: #fff;
-  border: 1px solid #999;
-  float: left;
-  font-size: 24px;
-  font-weight: bold;
-  line-height: 34px;
-  height: 34px;
-  margin-right: -1px;
-  margin-top: -1px;
-  padding: 0;
-  text-align: center;
-  width: 34px;
-}
-
-.square:focus {
-  outline: none;
-}
-
 .kbd-navigation .square:focus {
   background: #ddd;
 }
 
-.game {
-  display: flex;
-  flex-direction: row;
+.button-success,
+.button-error,
+.button-warning,
+.button-secondary {
+  color: white;
+  border-radius: 4px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
-.game-info {
-  margin-left: 20px;
+.button-success {
+  background: rgb(28, 184, 65);
+  /* this is a green */
+}
+
+.button-error {
+  background: rgb(202, 60, 60);
+  /* this is a maroon */
+}
+
+.button-warning {
+  background: rgb(223, 117, 20);
+  /* this is an orange */
+}
+
+.button-secondary {
+  background: rgb(66, 184, 221);
+  /* this is a light blue */
 }

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();
     }
   }
 }