diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..900b426
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+build/
+public/gameoflife/
+*.test.js
+registerServiceWorker.js
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..9a726b1
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+ "parser": "babel-eslint",
+ "plugins": [
+ "react"
+ ],
+ "extends": "airbnb",
+ "rules": {
+ "semi": ["error", "never"]
+ },
+ "env": {
+ "browser": true,
+ "es6": true,
+ "node": true
+ // "mocha": true
+ // "mongo": true
+ // "commonjs": true
+ }
+}
diff --git a/package.json b/package.json
index a655181..b484266 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,12 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "antd": "^2.12.1",
+ "eslint": "^3.19.0",
+ "eslint-config-airbnb": "^15.0.2",
+ "eslint-plugin-import": "^2.6.1",
+ "eslint-plugin-jsx-a11y": "^5.1.1",
+ "eslint-plugin-react": "^7.1.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10"
@@ -10,6 +16,7 @@
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
+ "surge": "surge build paulhoskinson.surge.sh",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
diff --git a/public/gameoflife/gameoflife.css b/public/gameoflife/gameoflife.css
new file mode 100644
index 0000000..c060ec9
--- /dev/null
+++ b/public/gameoflife/gameoflife.css
@@ -0,0 +1,53 @@
+.cell {
+ height: 8px;
+ width: 8px;
+
+ margin: 0;
+ padding: 0;
+ border-style: none;
+}
+
+.cell-0 { background-color: #000; }
+
+.cell-1 { background-color: #fc0; }
+.cell-2 { background-color: #f90; }
+.cell-3 { background-color: #f50; }
+.cell-4 { background-color: #f00; }
+.cell-5 { background-color: #c00; }
+.cell-6 { background-color: #900; }
+.cell-7 { background-color: #00c; }
+
+body {
+ font-size: 100%;
+ font-family: sans-serif;
+ text-align: center;
+ max-width: 1000px;
+ margin: auto;
+ background: #2f496e;
+ color: #eee;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+h1 {
+}
+
+button {
+ margin: 5px;
+ padding: 8px;
+ background-color: #333;
+ color: #fff;
+ border-color: #666;
+ font-size: 1.1em;
+}
+
+table {
+ background-color: #000;
+ margin: auto;
+ border-collapse: collapse;
+ border-style: solid;
+ border-width: 2px;
+ border-color: #888;
+}
diff --git a/public/gameoflife/gameoflife.html b/public/gameoflife/gameoflife.html
new file mode 100644
index 0000000..70a1e7f
--- /dev/null
+++ b/public/gameoflife/gameoflife.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/gameoflife/gameoflife.js b/public/gameoflife/gameoflife.js
new file mode 100644
index 0000000..589f100
--- /dev/null
+++ b/public/gameoflife/gameoflife.js
@@ -0,0 +1,307 @@
+// CONSTANTS
+const ROWS = 50; // height of board
+const COLS = 120; // width
+const STEP_INTERVAL = 50; // milliseconds
+const RANDOM_DENSITY = 0.37;
+
+// LIBRARIES: React, Redux, React-Redux
+const { Component } = React;
+const { PropTypes } = React;
+const { createStore } = Redux;
+const { combineReducers } = Redux;
+const { Provider } = ReactRedux;
+const { connect } = ReactRedux;
+
+// MISC FUNCTIONS
+
+// Computes next state of board from current state
+const advanceBoardHelper = (current) => {
+ let next = [];
+ let row, col;
+ for (row = 0; row < ROWS; row++) {
+ next.push([]);
+ for (col = 0; col < COLS; col++) {
+ const neighbours = (() => {
+ const rowUp = row === 0 ? ROWS - 1 : row - 1;
+ const rowDown = row === ROWS - 1 ? 0 : row + 1;
+ const colLeft = col === 0 ? COLS - 1 : col - 1;
+ const colRight = col === COLS - 1 ? 0 : col + 1;
+ let num = 0;
+ num += current[rowUp][colLeft] > 0 ? 1 : 0;
+ num += current[rowUp][col] > 0 ? 1 : 0;
+ num += current[rowUp][colRight] > 0 ? 1 : 0;
+ num += current[row][colLeft] > 0 ? 1 : 0;
+ num += current[row][colRight] > 0 ? 1 : 0;
+ num += current[rowDown][colLeft] > 0 ? 1 : 0;
+ num += current[rowDown][col] > 0 ? 1 : 0;
+ num += current[rowDown][colRight] > 0 ? 1 : 0;
+ return num;
+ })();
+ if (current[row][col] > 0) {
+ switch (neighbours) {
+ case 0:
+ case 1:
+ next[row].push(0);
+ break;
+ case 2:
+ case 3:
+ next[row].push(current[row][col] === 7 ? 7 : current[row][col] + 1);
+ break;
+ case 4:
+ case 5:
+ case 6:
+ case 7:
+ case 8:
+ next[row].push(0);
+ break;
+ }
+ } else {
+ next[row].push(neighbours == 3 ? 1 : 0);
+ }
+ }
+ }
+ return next;
+};
+
+// Randomizes or clears board
+const initializeBoardHelper = (randomize = true) => {
+ let i, j;
+ let board = [];
+ for (i = 0; i < ROWS; i++) {
+ board.push([]);
+ for (j = 0; j < COLS; j++) {
+ board[i].push(randomize ? (Math.random() < RANDOM_DENSITY ? 1 : 0) : 0);
+ }
+ }
+ return board;
+};
+
+// Activate or deactivate a specific cell
+const changeCellHelper = (state, cellRow, cellCol, newAge) => {
+ let boardCopy = [];
+ for (let i = 0; i < ROWS; i++) {
+ boardCopy.push(state[i].slice());
+ }
+ boardCopy[cellRow][cellCol] = newAge;
+ return boardCopy;
+}
+
+// ACTION CREATORS
+
+const advanceBoard = () => {
+ return {
+ type: "ADVANCE_BOARD"
+ };
+};
+
+const initializeBoard = (randomize) => {
+ return {
+ type: "INITIALIZE_BOARD",
+ board: initializeBoardHelper(randomize)
+ };
+};
+
+const simulationStart = () => ({type: "SIMULATION_START"});
+const simulationPause = () => ({type: "SIMULATION_PAUSE"});
+
+const cellOn = (row, col) => ({
+ type: "CELL_ON",
+ row,
+ col
+});
+const cellOff = (row, col) => ({
+ type: "CELL_OFF",
+ row,
+ col
+});
+
+// COMPONENTS
+
+// Responsible for the auto advance timer.
+// This component only mounts while simulation is
+// running and unmounts while paused
+let intervalID;
+class AutoStep extends Component {
+ constructor(props) {
+ super(props);
+ intervalID = setInterval(props.tick, STEP_INTERVAL);
+ }
+ componentWillUnmount() {
+ clearInterval(intervalID);
+ }
+ render() {
+ return null;
+ }
+}
+
+// All the control buttons
+const Controls = ({ simulating, tick, reinitialize, start, pause }) => (
+
+ {simulating &&
}
+ {simulating ? (
) : (
)}
+
+
+
+
{
+ if (e.buttons === 0) {
+ return;
+ }
+ if (e.buttons === 1 && age === 0) {
+ handleLeftClick(rowIndex, colIndex);
+ return;
+ }
+ if (e.buttons === 2 && age > 0) {
+ handleRightClick(rowIndex, colIndex);
+ return;
+ }
+ }}
+ onMouseDown={(e) => {
+ if (e.button === 0 && age === 0) {
+ handleLeftClick(rowIndex, colIndex);
+ } else if (e.button === 2 && age > 0) {
+ handleRightClick(rowIndex, colIndex);
+ }
+ }}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ }}
+ />
+);
+
+const Board = ({ board, tick, handleLeftClick, handleRightClick }) => (
+
+
+ {board.map((row, rowIndex) => (
+
+ {row.map((age, colIndex) => (
+ |
+ ))}
+
+ ))}
+
+
+);
+Board.propTypes = {
+ board: PropTypes.array.isRequired,
+ handleLeftClick: PropTypes.func.isRequired,
+ handleRightClick: PropTypes.func.isRequired
+};
+const mapStateToBoardProps = ({ board }) => ({ board });
+const mapDispatchToBoardProps = (dispatch) => {
+ return {
+ handleLeftClick: (row, col) => dispatch(cellOn(row, col)),
+ handleRightClick: (row, col) => dispatch(cellOff(row, col))
+ }
+};
+const BoardContainer = connect(mapStateToBoardProps, mapDispatchToBoardProps)(Board);
+
+const GenerationCounter = ({ generation }) => (
+
+ Generation: {generation}
+
+);
+GenerationCounter.propTypes = {
+ generation: PropTypes.number.isRequired,
+};
+const mapStateToGenerationCounterProps = ({ generation }) => ({ generation });
+const GenerationCounterContainer = connect(mapStateToGenerationCounterProps)(GenerationCounter);
+
+const GameOfLifeApp = () => (
+
+ Conway's Game of Life (React/Redux)
+
+
+
+
+);
+
+// REDUCERS
+
+const boardReducer = (state = [], action) => {
+ switch (action.type) {
+ case "ADVANCE_BOARD":
+ return advanceBoardHelper(state);
+ case "INITIALIZE_BOARD":
+ return action.board;
+ case "CELL_ON":
+ return changeCellHelper(state, action.row, action.col, 1);
+ case "CELL_OFF":
+ return changeCellHelper(state, action.row, action.col, 0);
+ default:
+ return state;
+ }
+};
+
+const simulatingReducer = (state = true, action) => {
+ switch (action.type) {
+ case "SIMULATION_START":
+ return true;
+ case "SIMULATION_PAUSE":
+ return false;
+ default:
+ return state;
+ }
+};
+
+const generationReducer = (state = 0, action) => {
+ switch (action.type) {
+ case "ADVANCE_BOARD":
+ return state += 1;
+ case "INITIALIZE_BOARD":
+ return 0;
+ default:
+ return state;
+ }
+};
+
+const reducers = combineReducers({
+ board: boardReducer,
+ simulating: simulatingReducer,
+ generation: generationReducer
+});
+
+// APPLICATION WRAPPER
+
+const initialState = {
+ board: initializeBoardHelper(true),
+ simulating: true,
+ generation: 0
+};
+
+ReactDOM.render(
+
+
+ ,
+ document.getElementById('app')
+);
diff --git a/public/manifest.json b/public/manifest.json
index be607e4..4d5817b 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
{
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "Portfolio",
+ "name": "Portfolio of Web Programming",
"icons": [
{
"src": "favicon.ico",
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index d7d52a7..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-class App extends Component {
- render() {
- return (
-
-
- 
- Welcome to React
-
-
- To get started, edit src/App.js and save to reload.
-
-
+
+
+ Welcome to React
+
+
+ To get started, edit src/App.js and save to reload.
+
+
+
+
+ Portfolio Projects
+
+
+ { projectList.length > 0 && (
+ projectList.map(project => (
+
+ 
+
+ {project.description}
+
+ ))
+ )}
+
+ |