Redo things the @kdex way

Brings this project out of ~2014 and into ~2017

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": "last 2 versions",
+        "node": "current"
+      }
+    }],
+    "stage-0"
+  ],
+  "plugins": ["transform-runtime"]
+}

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 sample/
 .DS_Store
+packages/
+*.log

LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Garen Torikian
+Copyright (c) 2017 Garen Torikian
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

index.html

@@ -17,7 +17,7 @@
 };
 </script>
 
-<script data-main="read_bgs_dat" src="src/vendor/require.js"></script>
+<script src="dist/index.js"></script>
 
 </head>
 

package.json

@@ -1,11 +1,29 @@
 {
   "name": "earthbound-battlebackgrounds",
   "version": "0.0.1",
-  "description": "Earthbound Battle Backgrounds",
-  "dependencies": {
-    "express": ">= 3.0.0 < 4"
+  "description": "Earthbound Battle Backgrounds, in your browser!",
+  "devDependencies": {
+    "babel-core": "^6.25.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.1.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.5.2",
+    "babel-preset-stage-0": "^6.24.1",
+    "babili-webpack-plugin": "^0.1.2",
+    "binary-loader": "^0.0.1",
+    "eslint": "^4.1.1",
+    "eslint-plugin-filenames": "^1.2.0",
+    "express": ">= 3.0.0 < 4",
+    "string.prototype.padstart": "^3.0.0",
+    "webpack": "^3.0.0"
+  },
+  "main": "dist/index.js",
+  "scripts": {
+    "compile": "webpack",
+    "dev": "NODE_ENV=development webpack -d --watch",
+    "lint": "eslint src",
+    "prepublish": "npm run compile"
   },
-  "main": "index",
   "engines": {
     "node": ">= 0.8.0"
   }

src/engine.js

@@ -1,53 +1,58 @@
-define(function(require, exports, module) {
-
-var BackgroundLayer = require("romlib/backgroundLayer");
-var frameId = -1;
-var Engine = exports.Engine = function() {
-
-};
-
-(function() {
-  // the animation loop
-  exports.start = function(layer1, layer2, fps, aspectRatio, frameskip, alpha) {
-    var tick = 0,
-        then = Date.now(), startTime = then, elapsed,
-        fpsInterval = 1000 / fps,
-        bitmap;
-
-    var canvas = document.getElementById("ebbb-holder");
-    var ctx = canvas.getContext("2d");
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    var canvasWidth = 256, canvasHeight = 256,
-        imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
-
-    function krakenFrame() {
-      frameId = requestAnimationFrame(krakenFrame);
-
-      var now = Date.now();
+let frameID = -1;
+export const SNES_WIDTH = 256;
+export const SNES_HEIGHT = 224;
+export default class Engine {
+  constructor(layers = [], {
+    fps = 30,
+    aspectRatio = 0,
+    frameSkip = 1,
+    alpha = [0.5, 0.5],
+    canvas = document.querySelector("canvas")
+  } = {}) {
+    this.layers = layers;
+    this.fps = fps;
+    this.aspectRatio = aspectRatio;
+    this.frameSkip = frameSkip;
+    this.alpha = alpha;
+    this.tick = 0;
+    this.canvas = canvas;
+  }
+  animate() {
+    let then = Date.now();
+    let elapsed;
+    const fpsInterval = 1000 / this.fps;
+    let bitmap;
+    const canvas = this.canvas;
+    const context = canvas.getContext("2d");
+    if (this.layers[0].entry && !this.layers[1].entry) {
+      this.alpha[0] = 1;
+      this.alpha[1] = 0;
+    }
+    if (!this.layers[0].entry && this.layers[1].entry) {
+      this.alpha[0] = 0;
+      this.alpha[1] = 1;
+    }
+    context.imageSmoothingEnabled = false;
+    canvas.width = SNES_WIDTH;
+    canvas.height = SNES_HEIGHT;
+    const image = context.getImageData(0, 0, canvas.width, canvas.height);
+    const drawFrame = () => {
+      frameID = requestAnimationFrame(drawFrame);
+      const now = Date.now();
       elapsed = now - then;
-
-      // console.log("Rendering tick " + tick);
       if (elapsed > fpsInterval) {
-          then = now - (elapsed % fpsInterval);
-
-          bitmap = layer1.overlayFrame(imageData.data, aspectRatio, tick, alpha, true);
-          bitmap = layer2.overlayFrame(bitmap, aspectRatio, tick, parseFloat(0.5), false);
-
-          tick += (frameskip);
-
-          imageData.data.set(bitmap);
-
-          ctx.putImageData(imageData, 0, 0);
+        then = now - (elapsed % fpsInterval);
+        for (let i = 0; i < this.layers.length; ++i) {
+          bitmap = this.layers[i].overlayFrame(image.data, this.aspectRatio, this.tick, this.alpha[i], i === 0);
+        }
+        this.tick += this.frameSkip;
+        image.data.set(bitmap);
+        context.putImageData(image, 0, 0);
       }
+    };
+    if (frameID > 0) {
+      global.cancelAnimationFrame(frameID);
     }
-
-    if (frameId > 0)
-      window.cancelAnimationFrame(frameId);
-    krakenFrame();
+    drawFrame();
+  }
 }
-
-}).call(Engine.prototype);
-
-});

src/index.js

@@ -0,0 +1,6 @@
+import ROM from "./rom/rom";
+import data from "../data/backgrounds.dat";
+export Engine from "./engine";
+export BackgroundLayer from "./rom/background_layer";
+const backgroundData = new Uint8Array(Array.from(data).map(x => x.charCodeAt(0)));
+new ROM(backgroundData);