scorecard-4p: added the new 4p version

site/scorecard-4p/index.html

@@ -20,6 +20,8 @@
     <tr>
       <td colspan="2">Player A</td>
       <td colspan="2">Player B</td>
+      <td colspan="2">Player C</td>
+      <td colspan="2">Player D</td>
     </tr>
     </thead>
     <tbody data-finska-scorecard-target="scoreTable">
@@ -40,6 +42,20 @@
         </form>
       </td>
       <td></td>
+      <td>
+        <form>
+      <input class="score-input" type="number"
+           data-finska-scorecard-target="score3Input" data-action="keydown->finska-scorecard#score3KeyDown">
+        </form>
+      </td>
+      <td></td>
+      <td>
+        <form>
+      <input class="score-input" type="number"
+           data-finska-scorecard-target="score4Input" data-action="keydown->finska-scorecard#score4KeyDown">
+        </form>
+      </td>
+      <td></td>
     </tr>
     </tfoot>
   </table>

site/scorecard-4p/scripts/controllers.js

@@ -4,7 +4,7 @@ import { Scorecard, getStoreDAO } from "./models.js";
 const storeDao = getStoreDAO();
 
 export class FinskaScorecardController extends Controller {
-  static targets = ["score1Input", "score2Input", "scoreTable"];
+  static targets = ["score1Input", "score2Input", "score3Input", "score4Input", "scoreTable"];
   
   connect() {
     this._undoStack = [];
@@ -38,9 +38,11 @@ export class FinskaScorecardController extends Controller {
   
   _updateRow(tableRow, pair) {
     let tds = tableRow.querySelectorAll("td");
-    
+
     this._updateCell(pair.p1, tds[0], tds[1]);
     this._updateCell(pair.p2, tds[2], tds[3]);
+    this._updateCell(pair.p3, tds[4], tds[5]);
+    this._updateCell(pair.p4, tds[6], tds[7]);
   }
   
   _updateCell(score, scoreCell, totalCell) {
@@ -59,11 +61,11 @@ export class FinskaScorecardController extends Controller {
   _appendRow() {
     let newRow = document.createElement("tr");
     newRow.classList.add("score-entry");
-    
+
-    for (let i = 0; i < 4; i++) {
+    for (let i = 0; i < 8; i++) {
       newRow.appendChild(document.createElement("td"));
     }
-    
+
     this.scoreTableTarget.appendChild(newRow);
     return newRow;
   }
@@ -75,10 +77,21 @@ export class FinskaScorecardController extends Controller {
   }
 
   addScore2() {
-    this._addScore(this.score2InputTarget, this.score1InputTarget,
+    this._addScore(this.score2InputTarget, this.score3InputTarget,
                    this._scorecard.addPlayer2Score.bind(this._scorecard),
                    this._scorecard.removeLastPlayer2Score.bind(this._scorecard));
-    
+  }
+
+  addScore3() {
+    this._addScore(this.score3InputTarget, this.score4InputTarget,
+                   this._scorecard.addPlayer3Score.bind(this._scorecard),
+                   this._scorecard.removeLastPlayer3Score.bind(this._scorecard));
+  }
+
+  addScore4() {
+    this._addScore(this.score4InputTarget, this.score1InputTarget,
+                   this._scorecard.addPlayer4Score.bind(this._scorecard),
+                   this._scorecard.removeLastPlayer4Score.bind(this._scorecard));
   }
   
   _addScore(inputElem, focusToInputElem, addScoreFn, queueUndoFn) {
@@ -105,6 +118,14 @@ export class FinskaScorecardController extends Controller {
   score2KeyDown(e) {
     this._handleKeyDown(e, this.addScore2.bind(this));
   }
+
+  score3KeyDown(e) {
+    this._handleKeyDown(e, this.addScore3.bind(this));
+  }
+
+  score4KeyDown(e) {
+    this._handleKeyDown(e, this.addScore4.bind(this));
+  }
   
   _handleKeyDown(e, addScoreFn) {
     if (e.key === "Enter") {

site/scorecard-4p/scripts/models.js

@@ -13,7 +13,9 @@ export class Scorecard {
   
   reset() {
     this._player1Scores = [];
-    this._player2Scores = [];    
+    this._player2Scores = [];
+    this._player3Scores = [];
+    this._player4Scores = [];
   }
   
   addPlayer1Score(newScore) {
@@ -29,7 +31,23 @@ export class Scorecard {
   }
   
   removeLastPlayer2Score() {
-    this._player2Scores.pop();    
+    this._player2Scores.pop();
+  }
+
+  addPlayer3Score(newScore) {
+    this._addScore(this._player3Scores, newScore);
+  }
+
+  removeLastPlayer3Score() {
+    this._player3Scores.pop();
+  }
+
+  addPlayer4Score(newScore) {
+    this._addScore(this._player4Scores, newScore);
+  }
+
+  removeLastPlayer4Score() {
+    this._player4Scores.pop();
   }
   
   _addScore(playerScores, newScore) {
@@ -46,19 +64,22 @@ export class Scorecard {
   }
   
   length() {
-    return Math.max(this._player1Scores.length, this._player2Scores.length);
+    return Math.max(this._player1Scores.length, this._player2Scores.length,
+                    this._player3Scores.length, this._player4Scores.length);
   }
   
   pairs() {
     let pairs = [];
-    
+
     for (let i = 0; i < this.length(); i++) {
       pairs.push({
         p1: (i < this._player1Scores.length ? this._player1Scores[i] : null),
         p2: (i < this._player2Scores.length ? this._player2Scores[i] : null),
+        p3: (i < this._player3Scores.length ? this._player3Scores[i] : null),
+        p4: (i < this._player4Scores.length ? this._player4Scores[i] : null),
       })
     }
-    
+
     return pairs;
   }
 
@@ -76,6 +97,8 @@ export class Scorecard {
       "version": 1,
       "p1": { "scores": this._player1Scores.map(p => p.score) },
       "p2": { "scores": this._player2Scores.map(p => p.score) },
+      "p3": { "scores": this._player3Scores.map(p => p.score) },
+      "p4": { "scores": this._player4Scores.map(p => p.score) },
     };
   }
   
@@ -83,6 +106,8 @@ export class Scorecard {
     let scorecard = new Scorecard();
     o["p1"]["scores"].forEach(x => scorecard.addPlayer1Score(x));
     o["p2"]["scores"].forEach(x => scorecard.addPlayer2Score(x));
+    if (o["p3"]) o["p3"]["scores"].forEach(x => scorecard.addPlayer3Score(x));
+    if (o["p4"]) o["p4"]["scores"].forEach(x => scorecard.addPlayer4Score(x));
     return scorecard;
   }
 }