Letting go of react and redux dependencies.

.gitignore

@@ -3,6 +3,9 @@
 # dependencies
 /node_modules
 
+# generated bundles
+/dist
+
 # testing
 /coverage
 

.prettierrc

@@ -1,5 +1,5 @@
 {
   "semi": false,
   "singleQuote": true,
-  "printWidth": 100
+  "printWidth": 120
 }

README.md

@@ -1,3 +1,3 @@
-## react-redux-chip8
+## functional-ts-chip8
 
-A CHIP-8 emulator wrriten using React and Redux. This is still a work in progress.
+A CHIP-8 emulator wrriten using ES6 and Typescript. This is still a work in progress.

package.json

@@ -1,38 +1,46 @@
 {
-  "name": "react-redux-chip8",
+  "name": "functional-ts-chip8",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "axios": "^0.18.0",
-    "final-form": "^4.11.0",
-    "pure-rand": "^1.5.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "react-final-form": "^4.0.2",
-    "react-redux": "^5.1.1",
-    "react-scripts-ts": "3.1.0",
-    "redux": "^4.0.1",
-    "redux-saga": "^0.16.2",
-    "styled-components": "^4.1.1"
-  },
-  "scripts": {
-    "start": "NODE_PATH=./ react-scripts-ts start",
-    "build": "NODE_PATH=./ react-scripts-ts build",
-    "test": "NODE_PATH=./ react-scripts-ts test --env=jsdom",
-    "eject": "NODE_PATH=./ react-scripts-ts eject"
+    "pure-rand": "^1.5.0"
   },
   "devDependencies": {
     "@types/jest": "^23.3.9",
     "@types/node": "^10.12.9",
-    "@types/react": "^16.7.6",
-    "@types/react-dom": "^16.0.9",
-    "@types/react-redux": "^6.0.9",
-    "@types/styled-components": "^4.1.0",
+    "awesome-typescript-loader": "^5.2.1",
+    "copy-webpack-plugin": "^4.6.0",
+    "jest": "^23.6.0",
     "prettier": "^1.15.2",
     "prettier-tslint": "^0.4.0",
-    "redux-devtools": "^3.4.2",
+    "source-map-loader": "^0.2.4",
+    "ts-jest": "^23.10.5",
+    "tslint": "^5.11.0",
+    "tslint-config-prettier": "^1.17.0",
     "tslint-immutable": "^4.9.1",
-    "typesafe-actions": "^2.0.4",
-    "typescript": "^3.1.6"
+    "tslint-loader": "^3.5.4",
+    "typescript": "^3.1.6",
+    "webpack": "^4.26.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --port 9000 --inline --progress --profile --colors --watch --content-base src/ --mode development",
+    "build": "webpack --config webpack.config.js --mode production",
+    "test": "jest"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "ts",
+      "js"
+    ],
+    "moduleNameMapper": {
+      "src(.*)$": "<rootDir>/src/$1"
+    },
+    "transform": {
+      "\\.(ts)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+    },
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$"
   }
 }

src/chip8/emulator.ts

@@ -0,0 +1,94 @@
+import axios from 'axios'
+import { Chip8, chip8InitialState } from 'src/chip8/types'
+import { chip8NumberOfColumns, chip8NumberOfRows, numberOfCyclesUntilDraw } from 'src/constants'
+
+import { chip8 } from './chip8'
+
+// tslint:disable:no-mixed-interface
+// tslint:disable:readonly-keyword
+// tslint:disable:no-object-mutation
+// tslint:disable:no-this
+// tslint:disable:prefer-for-of
+// tslint:disable:no-let
+
+export interface Chip8Emulator {
+  chip8State: Chip8
+  animationRequestId: number | undefined
+
+  readonly pressKey: (key: string) => void
+  readonly releaseKey: (key: string) => void
+  readonly startGame: (gameName: string, canvasContext: CanvasRenderingContext2D) => Promise<void>
+  readonly stepFrame: (canvasContext: CanvasRenderingContext2D) => void
+  readonly reset: () => void
+}
+
+export const createChip8Emulator = (): Chip8Emulator => ({
+  chip8State: chip8InitialState,
+  animationRequestId: undefined,
+
+  pressKey(key: string): void {
+    this.chip8State = this.animationRequestId
+      ? chip8.pressKey(key)(this.chip8State)
+      : this.chip8State
+  },
+
+  releaseKey(key: string): void {
+    this.chip8State = this.animationRequestId
+      ? chip8.releaseKey(key)(this.chip8State)
+      : this.chip8State
+  },
+
+  async startGame(gameName: string, canvasContext: CanvasRenderingContext2D): Promise<void> {
+    const game = await getGameBytes(gameName)
+    const initialSeed = generateRandomSeed()
+
+    this.chip8State = chip8.initializeChip8(game, initialSeed)
+
+    this.animationRequestId = requestAnimationFrame(() => this.stepFrame(canvasContext))
+  },
+
+  stepFrame(canvasContext: CanvasRenderingContext2D): void {
+    for (let i = 0; i < numberOfCyclesUntilDraw; i++) {
+      const opcode = getNextOpcodeFromMemory(this.chip8State)
+      this.chip8State = chip8.emulateCpuCycle(opcode)(this.chip8State)
+    }
+
+    renderGraphics(this.chip8State.graphics, canvasContext)
+
+    this.animationRequestId = requestAnimationFrame(() => this.stepFrame(canvasContext))
+  },
+
+  reset(): void {
+    if (this.animationRequestId) {
+      window.cancelAnimationFrame(this.animationRequestId)
+
+      this.chip8State = chip8InitialState
+      this.animationRequestId = undefined
+    }
+  }
+})
+
+const getGameBytes = async (gameName: string): Promise<Uint8Array> => {
+  const buffer = await axios.get(`/roms/${gameName}`, { responseType: 'arraybuffer' })
+  return new Uint8Array(buffer.data)
+}
+
+const generateRandomSeed = (): number => Math.floor(Math.random() * 1000)
+
+const getNextOpcodeFromMemory = ({ memory, programCounter }: Chip8): number =>
+  (memory[programCounter] << 8) | memory[programCounter + 1]
+
+const renderGraphics = (graphics: Uint8Array, canvasContext: CanvasRenderingContext2D): void => {
+  canvasContext.fillStyle = '#000000'
+  canvasContext.fillRect(0, 0, chip8NumberOfColumns, chip8NumberOfRows)
+
+  for (let i = 0; i < graphics.length; i++) {
+    if (graphics[i]) {
+      const coordinateX = i % chip8NumberOfColumns
+      const coordinateY = Math.floor(i / chip8NumberOfColumns)
+
+      canvasContext.fillStyle = '#ffffff'
+      canvasContext.fillRect(coordinateX, coordinateY, 1, 1)
+    }
+  }
+}

src/chip8/index.ts

@@ -0,0 +1 @@
+export * from './emulator'

src/chip8/services/opcodes/graphics.ts → src/chip8/opcodes/graphics.ts

@@ -1,5 +1,4 @@
-import { Func1 } from 'redux'
-import { Chip8, ParsedOpcode } from 'src/chip8/types'
+import { Chip8, Func1, ParsedOpcode } from 'src/chip8/types'
 import { chip8NumberOfColumns, chip8NumberOfRows, chip8SpriteWidth } from 'src/constants'
 
 /*