refactor: Use data attribute instead of id for cell tagging (#50)

* id=(3,4) -> data-xy=3,4

* prettier + dist

* inputElement.name

* Update crossword-gridview.mjs

---------

Co-authored-by: Misha Kaletsky <[email protected]>

src/cell-map.mjs

@@ -2,17 +2,26 @@ import { assert } from './helpers.mjs';
 
 //  Internally used map of Crossword model data to DOM elements.
 class CellMap {
+  /** @type {Record<string, any>} */
   #modelCells = {};
 
-  //  Adds a Cell <-> Cell Element mapping.
+  /**
+   * Adds a Cell <-> Cell Element mapping.
+   * @param {*} modelCell
+   * @param {HTMLDivElement} cellElement
+   */
   add(modelCell, cellElement) {
     assert(modelCell, 'modelCell is null or undefined');
     assert(cellElement, 'cellElement is null or undefined');
-    // cellElement.id set in CrosswordController.#newCellElement()
-    this.#modelCells[cellElement.id] = modelCell;
+    // cellElement.dataset.xy set in CrosswordController.#newCellElement()
+    this.#modelCells[cellElement.dataset.xy] = modelCell;
   }
 
-  //  Gets the DOM element for a modelCell.
+  /**
+   * Gets the DOM element for a modelCell.
+   * @param {*} modelCell
+   * @returns {HTMLDivElement}
+   */
   cellElement = (modelCell) => {
     assert(typeof modelCell === 'object', 'Cell is not an object');
     // modelCell.cellElement set in CrosswordController.#newCellElement()
@@ -25,7 +34,7 @@ class CellMap {
       case 'string':
         return this.#modelCells[cellElement];
       case 'object':
-        return this.#modelCells[cellElement.id];
+        return this.#modelCells[cellElement.dataset.xy];
       default:
         assert(true, 'Unexpected type for "cellElement"');
         break;

src/crossword-gridview.mjs

@@ -55,15 +55,15 @@ function newCrosswordGridView(document, model, cellMap) {
 
 /**
  * Build a crossword grid _cell_ DOM element with child elements.
- * @param {*} document the root node of the [DOM](https://en.wikipedia.org/wiki/Document_Object_Model#DOM_tree_structure)
- * @param {*} modelCell the representation of this grid cell in the  _crosswordModel_.
- * @returns the DOM element for the _cell_
+ * @param {Document} document the root node of the [DOM](https://en.wikipedia.org/wiki/Document_Object_Model#DOM_tree_structure)
+ * @param {HTMLDivElement} modelCell the representation of this grid cell in the  _crosswordModel_.
+ * @returns {HTMLDivElement} the DOM element for the _cell_
  */
 function newCellElement(document, modelCell) {
   let cellElement = document.createElement('div');
   // Identify cellElement with id of associated modelCell.
   // This simplifies implementation of CellMap
-  cellElement.id = modelCell;
+  cellElement.dataset.xy = modelCell;
   addClass(cellElement, 'cwcell');
   //  eslint-disable-next-line no-param-reassign
   modelCell.cellElement = cellElement;
@@ -77,8 +77,8 @@ function newCellElement(document, modelCell) {
 
   //  Light cells also need an input.
   const inputElement = document.createElement('input');
-  // 'id' is not used, but assignment silences chromium-dev-tools issue.
-  inputElement.id = `input-${modelCell}`;
+  // 'name' is not used, but assignment silences chromium-dev-tools issue.
+  inputElement.name = `input-${modelCell}`;
   inputElement.maxLength = 1;
   inputElement.size = 1;
   if (modelCell.answer) {

src/crossword-model.mjs

@@ -67,7 +67,7 @@ function buildCellGrid(crosswordModel) {
         x,
         y,
         toString: () => {
-          return `(${x},${y})`;
+          return `${x},${y}`;
         },
       };
     }