scorecard-4p: added the new 4p version

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

@@ -0,0 +1,158 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+import { Scorecard, getStoreDAO } from "./models.js";
+
+const storeDao = getStoreDAO();
+
+export class FinskaScorecardController extends Controller {
+  static targets = ["score1Input", "score2Input", "score3Input", "score4Input", "scoreTable"];
+  
+  connect() {
+    this._undoStack = [];
+    this._scorecard = storeDao.loadOrCreate();
+    this.updateTable();
+  }
+  
+  updateTable() {
+    let tableBody = this.scoreTableTarget;
+    let tableRows = tableBody.querySelectorAll("tr");
+    let pairs = this._scorecard.pairs();
+    
+    for (let pairIndex = 0; pairIndex < pairs.length; pairIndex++) {
+      let tableRow;
+      if (pairIndex >= tableRows.length) {
+        tableRow = this._appendRow();
+      } else {
+        tableRow = tableRows[pairIndex];
+      }
+      
+      this._updateRow(tableRow, pairs[pairIndex])
+    }
+    
+    // Remove any extra rows
+    for (let i = pairs.length; i < tableRows.length; i++) {
+      tableBody.removeChild(tableRows[i]);
+    }
+    
+    console.log(JSON.stringify(this._scorecard.toJson()));
+  }
+  
+  _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) {
+    scoreCell.classList.value = "";
+    totalCell.classList.value = "";
+    
+    if (score != null) {
+      scoreCell.textContent = score.score;
+      totalCell.textContent = score.total;      
+    } else {
+      scoreCell.textContent = "";
+      totalCell.textContent = "";        
+    }
+  }
+  
+  _appendRow() {
+    let newRow = document.createElement("tr");
+    newRow.classList.add("score-entry");
+
+    for (let i = 0; i < 8; i++) {
+      newRow.appendChild(document.createElement("td"));
+    }
+
+    this.scoreTableTarget.appendChild(newRow);
+    return newRow;
+  }
+  
+  addScore1() {
+    this._addScore(this.score1InputTarget, this.score2InputTarget,
+                   this._scorecard.addPlayer1Score.bind(this._scorecard),
+                   this._scorecard.removeLastPlayer1Score.bind(this._scorecard));
+  }
+
+  addScore2() {
+    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) {
+    let score = parseInt(inputElem.value);
+    if (isNaN(score)) {
+      score = 0;
+    }
+
+    addScoreFn(score);
+    this._undoStack.push(queueUndoFn);
+    
+    inputElem.value = "";
+    
+    storeDao.save(this._scorecard);
+    this.updateTable();
+    
+    focusToInputElem.focus();
+  }
+  
+  score1KeyDown(e) {
+    this._handleKeyDown(e, this.addScore1.bind(this));
+  }
+  
+  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") {
+      e.preventDefault();
+      addScoreFn();
+    }
+  }
+  
+  undoLast() {
+    if (this._undoStack.length === 0) {
+      return;
+    }
+    
+    (this._undoStack.pop())();
+    
+    storeDao.save(this._scorecard);
+    this.updateTable();
+  }
+  
+  resetAll() {
+    if (!confirm("Really reset?")) {
+      return;
+    }
+    
+    this._scorecard.reset();
+    storeDao.clear();
+    this._undoStack = [];
+    this.updateTable();
+  }
+}