A Sudoku game made from Google's Dart language

Question

This is my first real web project and I have never touched JavaScript (barely touched CSS), so I just skipped that and went to dart for fun. Here's a live demo

The code for the dart file is down below. If you could help me improve the code in any way, that would be nice.

Sudoku.dart

import 'dart:html';


TableElement board;
var tbody;
var tableCell;
var currentRow = 0;
var currentCell = 0;
String puzzle = "200000060000075030048090100000300000300010009000008000001020570080730000090000004";
int counter = 0;


void main() {
   board = new TableElement();
   board..setAttribute("border", "1");
   tbody = board.createTBody();
  makeSudokuBoard();
  ChangeCurrentCell();
  window.onKeyDown.listen(mykeyDown);
  window.onKeyUp.listen(callCheckBoard);
  window.onClick.listen(clickDown);

}

void clickDown(Event e){
  CheckCurrentCell();  
  ChangeCurrentCell();
  CheckBoard();
}

void mykeyDown(Event e){
  if(e is KeyboardEvent){ 
    KeyboardEvent kevent = e;

    switch(e.keyCode){

      case 38:
        currentRow--;
        while(!CheckNextCell())currentRow--;

        ChangeCurrentCell();
        CheckBoard();
        break;
      case 40:
        currentRow++;
        while(!CheckNextCell())currentRow++;

        ChangeCurrentCell();
        CheckBoard();
        break;
      case 37:
        currentCell--;
        while(!CheckNextCell())currentCell--;
        ChangeCurrentCell();
        CheckBoard();
        break;
      case 39:
        currentCell++;
        while(!CheckNextCell())currentCell++;

        ChangeCurrentCell();
        CheckBoard();
        break;

      default:
        CheckCurrentCell();
        ChangeCurrentCell();
        CheckBoard();
        break;

    }
  }
}

void callCheckBoard(Event e){
  CheckBoard();
}

void CheckBoard(){
  var check = 0;
  TableRowElement r = board.rows[currentRow];
  bool worked = true;
  List<TableCellElement> c = r.cells;
  var current = tableCell.text;
  try{
    var foo = int.parse(current);
  }catch(e){
    worked = false;
  }

  if(current == ""){}
  else if(!(worked)){ChangeColor(); return;}
  else{

  for(var i = 0; i < c.length; i++){
    if(currentCell == i){}
    else if(current == c[i].text){
     ChangeColor();
     return;
    }

    for(var i = 0; i < board.rows.length; i++){

      if(i == currentRow){}
      else if(board.rows[i].cells[currentCell].text == current){

        ChangeColor();
        return;
      }
    }


        int boxRowOffset = (currentRow ~/ 3)*3;
        int boxColOffset = (currentCell ~/ 3)*3;
        for (int k = 0; k < 3; ++k) // box
            for (int m = 0; m < 3; ++m)
                if (currentCell == boxColOffset+m && currentRow == boxRowOffset+k){}
                else if(board.rows[boxRowOffset+k].cells[boxColOffset+m].text == current){
                  ChangeColor();
                  return;
                }



  }



  }
  for(var i = 0; i < board.rows.length; i++)
          {for(var j = 0; j < board.rows[i].cells.length; j++){

            if(board.rows[i].cells[j].text != "") check++;

          }
  tableCell.style.background = "";
  if(check == 81)
    document.querySelector("#pageTitle").text = "winner";
}}


void CheckCurrentCell(){
  List<TableRowElement> r = board.rows;
  for(var i = 0; i < r.length; i++){
   List<TableCellElement> c = r[i].cells;
     for(var j = 0; j < c.length; j++){
      if(c[j] == querySelector(":focus")){
        currentRow = i;
        currentCell = j;
      }
     }
  }

}

bool CheckNextCell(){

  if(currentRow == -1) currentRow = 8;
  else if(currentRow == 9) currentRow = 0;
  else if(currentCell == -1) currentCell = 8;
  else if(currentCell == 9) currentCell = 0;
  var tableRow = board.rows[currentRow];
  tableCell = tableRow.cells[currentCell];
  return tableCell.isContentEditable;

}

void ChangeCurrentCell() {
    if(currentRow == -1) currentRow = 8;
    if(currentRow == 9) currentRow = 0;
    if(currentCell == -1) currentCell = 8;
    if(currentCell == 9) currentCell = 0;
    var tableRow = board.rows[currentRow];
    tableCell = tableRow.cells[currentCell];
    tableCell.focus();

}

void ChangeColor(){

  //tableCell.style.color = "red";
  tableCell.style.background = "#f44";
}

void makeSudokuBoard(){


    for(var i = 0; i < 9; i++){

      TableRowElement rows = tbody.addRow();

      for(var j = 0; j < 9; j++){

        String puzzleplace = puzzle.substring(counter, counter+1);
        if(puzzleplace == "0"){ 

          rows.insertCell(j).text = "";
                rows.cells[j].setAttribute("contenteditable","true");


        }else{
        rows.insertCell(j).text = puzzleplace;
        rows.cells[j].setAttribute("contenteditable","false");
        rows.cells[j].classes.add("default");

        }
        rows.cells[j].setAttribute("onkeypress", "return (this.innerText.length <= 0)");
        counter++;
      }

    }

  document.querySelector('#container').append(board);


}

Answer 1

First, try running the code through the Dart Formatter.

Second, try putting all of the game logic into one or more classes. Most CS professors – and development professionals – hate to see top-level, mutable state.

Finally, it's good to always be reading more code than you're writing. You'll learn a lot. For a game like this you might want to look at Pop, Pop, Win!. It's a good example of separating game state from the game visualization.

If you're using the Dart Editor, you can open the sample by clicking on the link on the Welcome Page.

Keep up the hacking!

Answer 2

On Safari 7.0.4, once a you fill a cell with a number, you can never change the cell to any other number. I believe the bug is due to some kind of interaction with

• the contenteditable cell implicitly appending a <br> to whatever text is entered
• the return (this.innerText.length <= 0) handler for onkeypress.

If I use the DOM Inspector to remove either the <br> or the onkeypress handler, then I am able to edit the cell again.