crosswords/js/uiGrid.js

var UI_CELLS = [];

function uiCreateCell(cellData, x, y) {
    var cell = dCreate("div");

    cell.className = R.klass.cell.item;
    if (cellData.isBlack) {
        cell.classList.add(R.klass.cell.black);
    } else if (cellData.definitions !== null) {
        cell.classList.add(R.klass.cell.definition);
        var cellContent =dCreate("span");
        for (var i =0, nbDefinitions = cellData.definitions.length; i < nbDefinitions; i++) {
            var definition = cellData.definitions[i]
                ,domDefinition = dCreate("span");
            domDefinition.dataset.x = x;
            domDefinition.dataset.y = y;
            domDefinition.dataset.definition = i;
            domDefinition.className = R.klass.cell.definitions.item;
            domDefinition.innerHTML = definition.text.join("<br/>");
            cellContent.appendChild(domDefinition);
        }
        cell.appendChild(cellContent);
    } else {
        cell.classList.add(R.klass.cell.letter);
    }
    return cell;
}

function uiCreateGrid() {
    var frag = document.createDocumentFragment();

    dGet(R.id.scoreboard.header.title).textContent = GRID.title;
    dGet(R.id.scoreboard.header.difficulty).textContent = GRID.difficulty;
    for (var i =0; i < GRID.height; i++) {
        var line = dCreate("div");

        line.className = R.klass.line;
        frag.appendChild(line);
        for (var j =0; j < GRID.width; j++) {
            var cell = uiCreateCell(GRID.grid[j][i], j, i);
            cell.dataset.x = j;
            cell.dataset.y = i;
            line.appendChild(cell);
            UI_CELLS.push({
                x: j
                ,y: i
                ,dom: cell
                ,data: GRID.grid[j][i]
            });
        }
    }
    for (var i =0; i < GRID.height; i++) {
        for (var j =0; j < GRID.width; j++) {
            var cell = UI_CELLS[i *GRID.width +j];
            if (cell.data.definitions) {
                cell.data.definitions.forEach(function(d) {
                    switch (d.direction) {
                        case Definition.RIGHT_VERTICAL:
                            UI_CELLS[i *GRID.width +j +1].dom.classList.add(R.klass.cell.definitions.rightVertical);
                        break;

                        case Definition.RIGHT_HORIZONTAL:
                            UI_CELLS[i *GRID.width +j +1].dom.classList.add(R.klass.cell.definitions.rightHorizontal);
                        break;

                        case Definition.BOTTOM_VERTICAL:
                            UI_CELLS[(i +1) *GRID.width +j].dom.classList.add(R.klass.cell.definitions.bottomVertical);
                        break;

                        case Definition.BOTTOM_HORIZONTAL:
                            UI_CELLS[(i +1) *GRID.width +j].dom.classList.add(R.klass.cell.definitions.bottomHorizontal);
                        break;
                    }
                });
            }
        }
    }
    onGridUpdated();
    var gridContainer = dGet(R.id.grid);
    gridContainer.textContent = "";
    gridContainer.appendChild(frag);
}

function onGridUpdated() {
    UI_CELLS.forEach(function(i) {
        if (!i.data.definitions && !i.data.isBlack) {
            if (i.data.letter) {
                i.dom.textContent = i.data.letter;
                if (i.data.found) {
                    var className = i.dom.className;
                    i.dom.classList.add(R.klass.cell.found);
                    i.dom.classList.remove(R.klass.cell.wrong);
                    i.dom.style.color = i.data.found.color;
                }
            } else {
                i.dom.textContent = "";
            }
        }
    });
}

function moveInput(cell) {
    var input = dGet(R.id.input);
    input.style.top = cell.dom.offsetTop +"px";
    input.style.left = cell.dom.offsetLeft +"px";
    input.focus();
}

function gridClickDelegate(e) {
    var target = e.target;
    while (target && (target.dataset && !target.dataset.x))
        target = target.parentElement;
    if (target && target.dataset && target.dataset.x && target.dataset.y) {
        var clickedCell = UI_CELLS[parseInt(target.dataset.x, 10) +parseInt(target.dataset.y, 10) *GRID.width];
        if (clickedCell.data.isBlack) {
            unselect();
        } else {
            if (clickedCell.data.definitions) {
                var first = true;
                unselect();
                if (clickedCell.data.definitions[target.dataset.definition]) {
                    clickedCell.data.definitions[target.dataset.definition].word.forEach(function(coordinates) {
                        select(coordinates[0], coordinates[1]);
                        if (first && !UI_CELLS[coordinates[0] +coordinates[1] *GRID.width].data.found) {
                            CURRENTINPUT = UI_CELLS[coordinates[0] +coordinates[1] *GRID.width];
                            CURRENTINPUT.dom.classList.add(R.klass.cell.currentInput);
                        }
                        first = false;
                    });
                }
            } else {
                var words = GRID.getWord(clickedCell.x, clickedCell.y);
                unselect();
                words.forEach(function (word) {
                    word.forEach(function (coordinates) {
                        select(coordinates[0], coordinates[1]);
                    });
                });
                target.classList.add(R.klass.cell.currentInput);
                CURRENTINPUT = clickedCell;
            }
            // Display mobile / tablet keyboard
            moveInput(CURRENTINPUT);
        }
    }
}