crosswords/js/uiGrid.js

var UI_CELLS = []
    ,SELECTED_INDEX = null;

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 getUiCell(x, y) {
    return UI_CELLS[x +y *GRID.width];
}

function isWordComplete(coordinates) {
    for (var i =0, nbCoords = coordinates.length; i < nbCoords; i++)
        if (!getUiCell(coordinates[i][0], coordinates[i][1]).data.complete)
            return false;
    return true;
}

function inputCell(x, y) {
    if (CURRENTINPUT)
        CURRENTINPUT.dom.classList.remove(R.klass.cell.currentInput);
    CURRENTINPUT = getUiCell(x, y);
    CURRENTINPUT.dom.classList.add(R.klass.cell.currentInput);

    // Display mobile / tablet keyboard
    moveInput(CURRENTINPUT);

    console.log("Current index: ", SELECTED_INDEX);
}

function uiSelectWritableCell(direction) {
    for (var i = SELECTED_INDEX +direction, nbCoords = SELECTED.length; i < nbCoords && i >= 0; i += direction) {
        if (!getUiCell(SELECTED[i].x, SELECTED[i].y).data.found) {
            inputCell(SELECTED[i].x, SELECTED[i].y);
            SELECTED_INDEX = i;
            return;
        }
    }
}

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]) {
                    var i =0;
                    clickedCell.data.definitions[target.dataset.definition].word.forEach(function(coordinates) {
                        select(coordinates[0], coordinates[1]);
                        if (first && !getUiCell(coordinates[0], coordinates[1]).data.found) {
                            SELECTED_INDEX = i;
                            inputCell(coordinates[0], coordinates[1]);
                        }
                        first = false;
                        i++;
                    });
                }
            } else {
                var words = GRID.getWord(clickedCell.x, clickedCell.y);

                unselect();
                // If we have a direction not complete starting with clickedCell
                for (var i =0, nbWord = words.length; i < nbWord; i++) {
                    for (var coordIndex =0, nbCoords = words[i].length; coordIndex < nbCoords; coordIndex++) {
                        if (getUiCell(words[i][coordIndex][0], words[i][coordIndex][1]).data.found)
                            continue;
                        if (words[i][coordIndex][0] == clickedCell.x && words[i][coordIndex][1] == clickedCell.y) {
                            words[i].forEach(function (coordinates) {
                                select(coordinates[0], coordinates[1]);
                            });
                            SELECTED_INDEX = coordIndex;
                            inputCell(clickedCell.x, clickedCell.y);
                            return;
                        }
                        break;
                    }
                }
                var index = 0;
                // We don't have a direction starting with clickedCell, try to find a new one
                for (var i =0, nbWords = words.length; i < nbWords; i++) {
                    if (isWordComplete(words[i]))
                        continue;
                    for (var j =0, nbCoords = words[0].length; j < nbCoords; j++) {
                        var coordinates = words[0][j];
                        select(coordinates[0], coordinates[1]);
                        if (coordinates[0] == clickedCell.x && coordinates[1] == clickedCell.y)
                            SELECTED_INDEX = j;
                    }
                    target.classList.add(R.klass.cell.currentInput);
                    inputCell(clickedCell.x, clickedCell.y);
                    return;
                }
            }
        }
    }
}