Instantly share code, notes, and snippets.

View renderActions.js
class Game extends Compoent {
...
renderActions() {
const { history } = this.state;
const selectedCell = this.getSelectedCell();
const prefilled = selectedCell && selectedCell.get('prefilled');
return (
<div className="actions">
<div className="action" onClick={history.size ? this.undo : null}>
<ReloadIcon />Undo
View eraseSelected.js
class Game extends Compoent {
...
eraseSelected = () => {
const selectedCell = this.getSelectedCell();
if (!selectedCell) return;
this.fillNumber(false);
}
fillSelectedWithSolution = () => {
const { board, solution } = this.state;
View redo.js
class Game extends Compoent {
...
redo = () => {
const { history } = this.state;
let { historyOffSet } = this.state;
if (history.size) {
historyOffSet = Math.min(history.size - 1, historyOffSet + 1);
const board = history.get(historyOffSet);
this.setState({ board, historyOffSet });
}
View updateBoard.js
import { List } from 'immutable';
class Game extends Compoent {
constructor(props) {
super(props);
this.generateGame();
}
generateGame = (finalCount = 20) => {
// get a filled puzzle generated
View renderNumberControl.js
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
View getNumberValueCount.js
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']);
View fillNumber.js
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({
View NumberControl.js
const NumberControl = ({ number, onClick, completionPercentage }) => (
<div
key={number}
className="number"
onClick={onClick}
>
<div>{number}</div>
<CirclularProgress percent={completionPercentage} />
<style jsx>{NumberControlStyle}</style>
</div>
View renderCell.js
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) {
View makeBoard.js
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;
}