Судоку в AnuglarJS - PullRequest
Новая
       13

Судоку в AnuglarJS

0 голосов
/ 01 апреля 2020

Итак, у меня есть генератор судоку, при доступе через API он генерирует плату Судоку (массив JSON), которая затем с AngularJS и ng-repeat в таблице. Я отображаю плату Судоку на страницы.

Пока это то, что у меня есть. Чего я хочу добиться, так это выделить все элементы, которые находятся внутри поля, а также строку и столбец. Теперь строка и столбец выделены, но как я могу также выделить элементы, которые отмечены желтым цветом на рисунке ниже, потому что эти элементы принадлежат прямоугольнику: enter image description here

Вот мой HTML код: 

<body ng-app="Sudoku">
<!--    SUDOKU BOARD    -->
<div class="sudoku-game" ng-controller="SudokuController">
    <table class="sudoku-board" ng-init="getSudoku()">
        <tbody>
            <tr ng-repeat="sudoku in sudokuGrid track by $index" ng-init="row = $index" class="sudoku-row" ng-class="{'highlight':rowSelected === row}">
                <td ng-repeat="number in sudoku track by $index" ng-init="col = $index" class="sudoku-col" ng-class="{'highlight':colSelected === col}">
                    <div class="sudoku-cell" ng-class="{'selected':isSelected === ((row*10) + col)}" ng-click="selectedCell(row, col)" ng-keyup="insertNum($event)" tabindex="1">
                        <span class="prevalued" ng-if="number !== null" ng-bind="number"></span>
                        <span class="emptycell" ng-if="number === null" ng-bind="emptyCell"></span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Это мой код в JavaScript для функции selectedCell (row, col) 

$scope.getCellPosition = function (row, col) {
    return (row * 10) + col;
}

$scope.selectedCell = function (row, col) {
    $scope.isSelected = $scope.getCellPosition(row, col);
    $scope.rowSelected = row;
    $scope.colSelected = col;
    console.log($scope.isSelected);
}

Вот как Я получаю данные для доски Судоку из API в формате JSON: 

[
  [
    9,
    2,
    null,
    null,
    null,
    null,
    null,
    3,
    8
  ],
  [
    5,
    4,
    3,
    9,
    null,
    null,
    7,
    null,
    null
  ],
  [
    null,
    null,
    null,
    3,
    null,
    null,
    null,
    null,
    null
  ],
  [
    1,
    7,
    null,
    null,
    3,
    9,
    4,
    5,
    null
  ],
  [
    8,
    3,
    5,
    null,
    1,
    null,
    null,
    9,
    null
  ],
  [
    null,
    9,
    2,
    5,
    7,
    6,
    null,
    1,
    3
  ],
  [
    null,
    1,
    8,
    null,
    null,
    5,
    null,
    2,
    null
  ],
  [
    null,
    null,
    null,
    6,
    null,
    null,
    null,
    7,
    null
  ],
  [
    null,
    null,
    4,
    2,
    null,
    null,
    null,
    8,
    null
  ]
]

1 Ответ

1 голос
/ 01 апреля 2020

Вы можете добавить класс подсветки к ячейке, находящейся в квадрате выбранной ячейки: 

<div class="sudoku-cell" ng-class="{
  'selected':isSelected === ((row*10) + col),
  'highlight': isHighlight(row, col),
}" ng-click="selectedCell(row, col)" ng-keyup="insertNum($event)" tabindex="1">

В вашем js: 

$scope.isHighlight = function (row, col) {
  // Add debugging functions
  //
  console.log({
    row,
    rowSelected: $scope.rowSelected,
    col,
    colSelected: $scope.colSelected,
  });
  // Return the boolean
  //
  return Math.floor(row / 3) === Math.floor($scope.rowSelected / 3) 
    && Math.floor(col / 3) === Math.floor($scope.colSelected / 3)
}
...