window.onload = (event) => {
  var params = new URLSearchParams(window.location.search);
  var puzzle = params.get("p");
  if (puzzle === null) {
    return;
  }
  if (puzzle.length != 81) {
    console.log("Failure: puzzle url len is " + puzzle.length);
    return;
  }

  for (i = 0; i < 81; i++) {
    if (puzzle[i] != '.') {
      document.getElementById(i+1).innerText = puzzle[i]
    }
  }

  var marks_param = params.get("m");
  if (marks_param === null) {
    return;
  }
  var marks = marks_param.split(",");

  if (marks.length != 81) {
    console.log("Failure: marks url len is " + marks.length);
    return;
  }

  for (i = 0; i < 81; i++) {
    if (marks[i].length > 0) {
      var cell = document.getElementById(i+1);
      if (cell.innerHTML.trim().length > 0) {
        console.log("Pencil marks in cell with number: " + (i+1));
      } else {
        cell.innerHTML = "<span>" + marks[i] + "</span>";
      }

    }
  }
}