Separated pong classes, added diff to webpack to remind me to try precompile public assetsstarted-on-error-page-pong

10 files changed, 160 insertions, 136 deletions

diff --git a/config/webpack.config.js b/config/webpack.config.js
index ffb16190093..5b97734e0d8 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -52,6 +52,7 @@ var config = {
     vue_pipelines:        './vue_pipelines_index/index.js',
     issue_show:           './issue_show/index.js',
     group:                './group.js',
+    '../../../public/javascripts/pong': '../../../public/javascripts/pong',
   },
 
   output: {
@@ -155,6 +156,7 @@ var config = {
       'empty_states':   path.join(ROOT_PATH, 'app/views/shared/empty_states'),
       'icons':          path.join(ROOT_PATH, 'app/views/shared/icons'),
       'vendor':         path.join(ROOT_PATH, 'vendor/assets/javascripts'),
+      'public':         path.join(ROOT_PATH, 'public/javascripts'),
       'vue$':           'vue/dist/vue.esm.js',
     }
   }
diff --git a/public/javascripts/pong.js b/public/javascripts/pong.js
deleted file mode 100644
index abe2c0347c0..00000000000
--- a/public/javascripts/pong.js
+++ /dev/null
@@ -1,136 +0,0 @@
-const KEY_SYMBOLS = {
-  SPACE: Symbol('SPACE'),
-  LEFT: Symbol('LEFT'),
-  RIGHT: Symbol('RIGHT'),
-};
-
-const KEY_MAP = new Map([
-  [32, KEY_SYMBOLS.SPACE],
-  [37, KEY_SYMBOLS.LEFT],
-  [39, KEY_SYMBOLS.RIGHT],
-]);
-
-class Keyboard {
-  init() {
-    document.addEventListener('keydown', this.readInput.bind(this));
-  }
-
-  readInput(event) {
-    const keyCode = event.which || event.keyCode;
-
-    switch (KEY_MAP.get(keyCode)) {
-      case KEY_SYMBOLS.SPACE:
-        break;
-      case KEY_SYMBOLS.LEFT:
-      case KEY_SYMBOLS.RIGHT:
-        break;
-    }
-  }
-}
-
-class User {
-  constructor(paddle) {
-    this.paddle = new Paddle(paddle, 'bottom');
-    this.keyboard = new Keyboard();
-  }
-}
-
-class Computer {
-  constructor(paddle) {
-    this.paddle = new Paddle(paddle, 'top');
-  }
-}
-
-class Paddle {
-  constructor(element) {
-    this.element;
-  }
-}
-
-class Ball {
-  contructor(element) {
-    this.element = element;
-  }
-
-  start() {
-    return true;
-  }
-}
-
-class Score {
-  constructor(element) {
-    this.element = element;
-    this.points = parseInt(element.innerText);
-  }
-
-  start() {
-    this.points = Math.floor(this.points * 0.925);
-
-    this.element.innerText = this.points;
-
-    return this.points === 0;
-  }
-}
-
-class Pong {
-  constructor(container, ball, score, userPaddle, computerPaddle) {
-    this.container = container;
-
-    this.score = new Score(score);
-    this.ball = new Ball(ball);
-    this.user = new User(userPaddle);
-    this.computer = new Computer(computerPaddle);
-  }
-
-  init() {
-    this.setContainer();
-
-    setTimeout(this.start.bind(this, this.play.bind(this)), 250);
-  }
-
-  start(done) {
-    let returnValues = [];
-
-    returnValues.push(
-      this.score.start(),
-      this.ball.start()
-      // this.user.start(),
-      // this.computer.start(),
-    );
-
-    if (returnValues.indexOf(false) === -1) return done();
-
-    window.requestAnimationFrame(this.start.bind(this, done));
-  }
-
-  play(done) {
-    // this.score.nextFrame.call(this.score);
-    // this.user.nextFrame.call(this.user);
-    // this.computer.nextFrame.call(this.computer);
-    // this.ball.nextFrame.call(this.ball);
-
-    window.requestAnimationFrame(this.play.bind(this));
-  }
-
-  setContainer() {
-    this.container.classList.add('game-active');
-  }
-}
-
-const logo = document.getElementById('logo');
-const errorCode = document.getElementById('error-code');
-const container = document.getElementById('container');
-const userPaddle = document.getElementById('user');
-const computerPaddle = document.getElementById('computer');
-
-const pong = new Pong(
-  container,
-  logo,
-  errorCode,
-  userPaddle,
-  computerPaddle
-);
-
-setTimeout(() => {
-  pong.init();
-}, 2000);
diff --git a/public/javascripts/pong/ball.js b/public/javascripts/pong/ball.js
new file mode 100644
index 00000000000..2faeec16497
--- /dev/null
+++ b/public/javascripts/pong/ball.js
@@ -0,0 +1,11 @@
+class Ball {
+  contructor(element) {
+    this.element = element;
+  }
+
+  start() {
+    return true;
+  }
+}
+
+export default Ball;
diff --git a/public/javascripts/pong/computer.js b/public/javascripts/pong/computer.js
new file mode 100644
index 00000000000..96cbc4e7a60
--- /dev/null
+++ b/public/javascripts/pong/computer.js
@@ -0,0 +1,9 @@
+import Paddle from './paddle';
+
+class Computer {
+  constructor(paddle) {
+    this.paddle = new Paddle(paddle, 'top');
+  }
+}
+
+export default Computer;
diff --git a/public/javascripts/pong/game.js b/public/javascripts/pong/game.js
new file mode 100644
index 00000000000..81e2e994be5
--- /dev/null
+++ b/public/javascripts/pong/game.js
@@ -0,0 +1,52 @@
+import Score from './score';
+import Ball from './ball';
+import User from './user';
+import Computer from './computer';
+
+class Game {
+  constructor(container, ball, score, userPaddle, computerPaddle) {
+    this.container = container;
+
+    this.score = new Score(score);
+    this.ball = new Ball(ball);
+    this.user = new User(userPaddle);
+    this.computer = new Computer(computerPaddle);
+  }
+
+  init() {
+    this.setContainer();
+
+    // Temporary, should `start` when an space or arrow key is pressed.
+    setTimeout(this.start.bind(this, this.play.bind(this)), 250);
+  }
+
+  start(done) {
+    let returnValues = [];
+
+    returnValues.push(
+      this.score.start(),
+      this.ball.start()
+      // this.user.start(),
+      // this.computer.start(),
+    );
+
+    if (returnValues.indexOf(false) === -1) return done();
+
+    window.requestAnimationFrame(this.start.bind(this, done));
+  }
+
+  play(done) {
+    // this.score.nextFrame.call(this.score);
+    // this.user.nextFrame.call(this.user);
+    // this.computer.nextFrame.call(this.computer);
+    // this.ball.nextFrame.call(this.ball);
+
+    window.requestAnimationFrame(this.play.bind(this));
+  }
+
+  setContainer() {
+    this.container.classList.add('game-active');
+  }
+}
+
+export default Game;
diff --git a/public/javascripts/pong/index.js b/public/javascripts/pong/index.js
new file mode 100644
index 00000000000..9701fc4e681
--- /dev/null
+++ b/public/javascripts/pong/index.js
@@ -0,0 +1,17 @@
+import Game from './game';
+
+const logo = document.getElementById('logo');
+const errorCode = document.getElementById('error-code');
+const container = document.getElementById('container');
+const userPaddle = document.getElementById('user');
+const computerPaddle = document.getElementById('computer');
+
+const game = new Game(
+  container,
+  logo,
+  errorCode,
+  userPaddle,
+  computerPaddle
+);
+
+game.init();
diff --git a/public/javascripts/pong/keyboard.js b/public/javascripts/pong/keyboard.js
new file mode 100644
index 00000000000..723b412bc72
--- /dev/null
+++ b/public/javascripts/pong/keyboard.js
@@ -0,0 +1,35 @@
+const KEY_SYMBOLS = {
+  SPACE: Symbol('SPACE'),
+  LEFT: Symbol('LEFT'),
+  RIGHT: Symbol('RIGHT'),
+};
+
+const KEY_MAP = new Map([
+  [32, KEY_SYMBOLS.SPACE],
+  [37, KEY_SYMBOLS.LEFT],
+  [39, KEY_SYMBOLS.RIGHT],
+]);
+
+class Keyboard {
+  init() {
+    document.addEventListener('keydown', this.readInput.bind(this));
+  }
+
+  readInput(event) {
+    const keyCode = event.which || event.keyCode;
+
+    switch (KEY_MAP.get(keyCode)) {
+      case KEY_SYMBOLS.SPACE:
+        break;
+      case KEY_SYMBOLS.LEFT:
+      case KEY_SYMBOLS.RIGHT:
+        break;
+    }
+  }
+}
+
+export {
+  KEY_SYMBOLS,
+  KEY_MAP,
+  Keyboard as default,
+};
diff --git a/public/javascripts/pong/paddle.js b/public/javascripts/pong/paddle.js
new file mode 100644
index 00000000000..a33b3f5615b
--- /dev/null
+++ b/public/javascripts/pong/paddle.js
@@ -0,0 +1,7 @@
+class Paddle {
+  constructor(element) {
+    this.element;
+  }
+}
+
+export default Paddle;
diff --git a/public/javascripts/pong/score.js b/public/javascripts/pong/score.js
new file mode 100644
index 00000000000..9462bcc4911
--- /dev/null
+++ b/public/javascripts/pong/score.js
@@ -0,0 +1,16 @@
+class Score {
+  constructor(element) {
+    this.element = element;
+    this.points = parseInt(element.innerText);
+  }
+
+  start() {
+    this.points = Math.floor(this.points * 0.925);
+
+    this.element.innerText = this.points;
+
+    return this.points === 0;
+  }
+}
+
+export default Score;
diff --git a/public/javascripts/pong/user.js b/public/javascripts/pong/user.js
new file mode 100644
index 00000000000..6864ae91fe2
--- /dev/null
+++ b/public/javascripts/pong/user.js
@@ -0,0 +1,11 @@
+import Keyboard from './keyboard';
+import Paddle from './paddle';
+
+class User {
+  constructor(paddle) {
+    this.paddle = new Paddle(paddle, 'bottom');
+    this.keyboard = new Keyboard();
+  }
+}
+
+export default User;