updated sudoku and added keynote

sudoku/src/index.css

@@ -1,20 +1,15 @@
 html, body {
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	background-color: #efeae1;
-}
-#container {
-	margin: 0 auto;
-	text-align: center;
-}
-#board {
-	display: inline-block;
+	background-color: #D2E1BC;
 }
 h1 {
 	font-weight: 300;
 }
-table {
+table.sudoku-table {
 	border-collapse: collapse;
 	border-spacing: 0;
+	margin-left: auto;
+	margin-right: auto;
 }
 td {
 	padding: 0;
@@ -45,11 +40,6 @@ input.sudoku-cell {
 input.sudoku-cell:hover:not([readonly]) {
 	border-color: #584b4f;
 }
-button.sudoku-control {
-	margin: 10px 5px;
-	display: inline;
-	outline: 0;
-}
 input[readonly] {
 	background-color: #dce1ea;
 }

sudoku/src/index.js

@@ -1,179 +1,132 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import {List, fromJS} from 'immutable';
 
-function makeCountObject() {
-  const countObj = [];
-  for (let i = 0; i < 10; i++) countObj.push(0);
-  return countObj;
-}
-
-function makeBoard({puzzle}) {
-  const rows = Array.from(Array(9).keys()).map(() => makeCountObject());
-  const columns = Array.from(Array(9).keys()).map(() => makeCountObject());
-  const squares = Array.from(Array(9).keys()).map(() => makeCountObject());
-  const result = puzzle.map((row, i) => (
-    row.map((cell, j) => {
-      if (cell) {
-        rows[i][cell] += 1;
-        comlumns[j][cell] += 1;
-        squares[((Math.floor( i / 3 )) * 3) + Math.floor( j / 3 )][cell] += 1;
-      }
-      return {
-        value: puzzle[i][j] > 0 ? puzzle[i][j] : null,
-        prefelled: !!puzzle[i][j],
-      };
-    })
-  ));
-  return fromJS({puzzle: result, selected: false, choices: { rows, columns, squares } });
-}
+class Cell extends React.Component {
 
-class Game extends Component {
   constructor(props) {
     super(props);
-    this.generateGame();
+  }
+
+  render() {
+    return (
+      <td>
+          <input type = "text"
+                        value = {this.props.value}
+                        readOnly = {this.props.readonly}
+                        className="sudoku-cell" />
+      </td>
+    )
   }
 }
 
-// class Cell extends React.Component {
-//   render() {
-//     return (
-//           <td>
-//             <input type="text"
-//                   value = {this.props.value}
-//                   onChange={this.handleChange}
-//                   className="sudoku-cell" />
-//           </td>
-//         );
-//   }
-// }
-//
-// function makeBoard({puzzle}) {
-//
-//
-// }
-//
-//
-//
-//
-// class Puzzle extends React.Component {
-//
-//   // makeNineByNine () {
-//   //   var table = []
-//   //   for (let i = 0; i < 9; i++) {
-//   //     let children = []
-//   //     for (let j = 0; j < 9; j++) {
-//   //       children.push(<td>{<Cell />}</td>)
-//   //     }
-//   //     table.push(<tr>{columns}<tr>);
-//   //   }
-//   //   return (table)
-//   // }
-//
-//
-//
-//
-//
-//   render() {
-//     return (
-//       <Cell />
-//       // <table>
-//       //
-//       // </table>
-//     )
-//   }
-// }
-//
-// ReactDOM.render(
-//   //<Cell />,
-//   <Puzzle />,
-//   document.getElementById('root')
-// )
-//
-//
-//
+class Puzzle extends React.Component {
+  render() {
+    return (
+        <table className = "sudoku-table">
+            <tr>
+                <Cell />
+                <Cell value={1} readonly={'readonly'}/>
+                <Cell value={6} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+                <Cell />
+                <Cell value={2} readonly={'readonly'}/>
+                <Cell value={4} readonly={'readonly'}/>
+                <Cell />
+            </tr>
+            <tr>
+                <Cell value={3} readonly={'readonly'}/>
+                <Cell value={2} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+                <Cell />
+                <Cell value={9} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+                <Cell />
+            </tr>
+            <tr>
+                <Cell />
+                <Cell value={4} readonly={'readonly'}/>
+                <Cell />
+                <Cell value={1} readonly={'readonly'}/>
+                <Cell />
+                <Cell value={3} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+                <Cell />
+            </tr>
+            <tr>
+                <Cell />
+                <Cell />
+                <Cell value={5} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+                <Cell />
+                <Cell />
+                <Cell value={6} readonly={'readonly'}/>
+                <Cell value={9} readonly={'readonly'}/>
+            </tr>
+            <tr>
+                <Cell />
+                <Cell />
+                <Cell value={9} readonly={'readonly'}/>
+                <Cell />
+                <Cell value={5} readonly={'readonly'}/>
+                <Cell />
+                <Cell value={3} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+            </tr>
+            <tr>
+                <Cell value={6} readonly={'readonly'}/>
+                <Cell value={3} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+                <Cell />
+                <Cell />
+                <Cell value={8} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+            </tr>
+            <tr>
+                <Cell />
+                <Cell />
+                <Cell />
+                <Cell value={3} readonly={'readonly'}/>
+                <Cell />
+                <Cell value={6} readonly={'readonly'}/>
+                <Cell />
+                <Cell value={1} readonly={'readonly'}/>
+                <Cell />
+            </tr>
+            <tr>
+                <Cell />
+                <Cell />
+                <Cell />
+                <Cell value={4} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+                <Cell />
+                <Cell value={7} readonly={'readonly'}/>
+                <Cell value={2} readonly={'readonly'}/>
+            </tr>
+            <tr>
+                <Cell />
+                <Cell />
+                <Cell value={4} readonly={'readonly'}/>
+                <Cell value={9} readonly={'readonly'}/>
+                <Cell />
+                <Cell />
+                <Cell value={6} readonly={'readonly'}/>
+                <Cell value={8} readonly={'readonly'}/>
+                <Cell />
+            </tr>
+        </table>
+    )
+  }
 
+}
 
-// class Puzzle extends React.Component {
-//   constructor(props) {
-//     super(props);
-//     this.state = {
-//       squares: Array(9).fill(null),
-//     };
-//   }
-//   renderSquare(i) {
-//     return <Cell value= {i} />;
-//   }
-//
-//   createCellMatrix() {
-// 		var generated = this.state.board;
-// 		var board = {};
-//
-// 		for (var i = 65; i <= 73; i++) {
-// 			var quadrant = String.fromCharCode(i);
-//
-// 			for (var j = 1; j <= 9; j++) {
-// 				var cell = quadrant + '' + j;
-//
-// 				if (generated[cell] !== undefined) {
-// 					board[cell] = {};
-// 					board[cell] = generated[cell];
-// 				}
-// 				else {
-// 					board[cell] = '';
-// 				}
-// 			}
-// 		}
-//
-//     this.setState({
-// 			cells: board
-// 		});
-//
-// 		return board;
-// 	}
-//   getCells2D() {
-// 		var cells = values(this.state.cells);
-// 		var cells2D = [];
-// 		var i, j, chunk = 9;
-//
-// 		for (i = 0, j = cells.length; i < j; i += chunk) {
-// 			cells2D.push(cells.slice(i, i + chunk));
-// 		}
-//
-// 		return cells2D;
-// 	}
-//   render() {
-//     return (
-//       <div>
-//         {this.getCells2D()}
-//       </div>
-//     );
-//   }
-//
-// }
-//
-// class Cell extends React.Component {
-//   constructor(props) {
-//     super(props);
-//     this.state = {
-//       value: props,
-//     };
-//   }
-//
-//   render() {
-//     return (
-//       <td>
-//         <input type="text"
-//               value = {this.props.value}
-//               onChange={this.handleChange}
-//               className="sudoku-square" />
-//       </td>
-//     );
-//   };
-// }
-//
-// ReactDOM.render(
-//   <Puzzle />,
-//   document.getElementById('root')
-// );
+ReactDOM.render(<Puzzle />, document.getElementById("root"));