goldensunliu

const cell = {
  value: 9,
  notes: Set([1,2,3]),
  prefilled: false
}

goldensunliu

class Game extends Compoent {
...  
  getSelectedCell() {
    const { board } = this.state;
    const selected = board.get('selected');
    return selected && board.get('puzzle').getIn([selected.x, selected.y]);
  }

  selectCell = (x, y) => {
    let { board } = this.state

goldensunliu

    getSelectedCell() {
        const { board } = this.state
        const selected = board.get('selected')
        return selected && board.get('puzzle').getIn([selected.x,selected.y])
    }

    renderCell(cell, x, y) {
        const { board } = this.state
        const selected = this.getSelectedCell()
        const sameValue = selected && selected.get('value') && value === selected.get('value')

goldensunliu

const puzzle = [
  [cell, cell, cell, cell, cell, cell, cell, cell, cell],
  [cell, cell, cell, cell, cell, cell, cell, cell, cell],
  [cell, cell, cell, cell, cell, cell, cell, cell, cell],
  [cell, cell, cell, cell, cell, cell, cell, cell, cell],
  ...
]

goldensunliu

import { List, fromJS } from 'immutable';
/**
 * make size 9 array of 0s
 * @returns {Array}
 */
function makeCountObject() {
  const countObj = [];
  for (let i = 0; i < 10; i += 1) countObj.push(0);
  return countObj;
}

goldensunliu

export function isPeer(a, b) {
  if (!a || !b) return false;
  const squareA = ((Math.floor(a.x / 3)) * 3) + Math.floor(a.y / 3);
  const squareB = ((Math.floor(b.x / 3)) * 3) + Math.floor(b.y / 3);
  return a.x === b.x || a.y === b.y || squareA === squareB;
}

class Game extends Compoent {
...  
  isConflict(i, j) {

goldensunliu

const NumberControl = ({ number, onClick, completionPercentage }) => (
  <div
    key={number}
    className="number"
    onClick={onClick}
  >
    <div>{number}</div>
    <CirclularProgress percent={completionPercentage} />
    <style jsx>{NumberControlStyle}</style>
  </div>

goldensunliu

import { Set } from 'immutable';
/**
 * give the coordinate update the current board with a number choice
 * @param x
 * @param y
 * @param number
 * @param fill whether to set or unset
 * @param board the immutable board given to change
 */
function updateBoardWithNumber({

goldensunliu

function getNumberOfGroupsAssignedForNumber(number, groups) {
  return groups.reduce((accumulator, row) =>
    accumulator + (row.get(number) > 0 ? 1 : 0), 0);
}
class Game extends Compoent {
...  
  // get the min between its completion in rows, columns and squares.
  getNumberValueCount(number) {
    const rows = this.state.board.getIn(['choices', 'rows']);
    const columns = this.state.board.getIn(['choices', 'columns']);

goldensunliu

class Game extends Compoent {
...  
  renderNumberControl() {
    const selectedCell = this.getSelectedCell();
    const prefilled = selectedCell && selectedCell.get('prefilled');
    return (
      <div className="control">
        {range(9).map((i) => {
          const number = i + 1;
          // handles binding single click and double click callbacks