Fix bug with balls being wrongfully removed

This was causing the game to continue while it should show a gameover
screen.

Author: janza

components/GameBoard.js

@@ -31,7 +31,11 @@ const GameOverScreen = ({ gameover }) => (
       fontFamily: 'Open sans, sans-serif',
       whiteSpace: 'nowrap',
       color: '#d50000',
-      fontWeight: 'bold'
+      fontWeight: 'bold',
+      zIndex: '2',
+      background: '#fff',
+      padding: '5px 20px',
+      border: '4px solid rgb(213, 0, 0)'
     }}
   >
     GAME OVER

lib/game.js

@@ -176,13 +176,13 @@ const game = (getBallLevel, sleepFunction, gameBoard) => {
     return [...dots]
   }
 
-  function cleanupDots (dots, cb) {
+  function cleanupDots (dots) {
     const map = {}
     const keep = {}
     for (let i = 0; i < 7; i++) {
       map[i] = {}
       keep[i] = {}
-      for (let j = -1; j < 7; j++) {
+      for (let j = -2; j < 7; j++) {
         map[i][j] = null
         keep[i][j] = true
       }
@@ -198,9 +198,9 @@ const game = (getBallLevel, sleepFunction, gameBoard) => {
         map[d.x >= 6 ? 6 : d.x + 1][d.y],
         map[d.x <= 0 ? 0 : d.x - 1][d.y],
         map[d.x][d.y >= 6 ? 6 : d.y + 1],
-        map[d.x][d.y <= 0 ? 0 : d.y - 1]
+        map[d.x][d.y <= -1 ? -1 : d.y - 1]
       ]
-        .filter(n => n && n.type === d.type)
+        .filter(n => n && n.type === d.type && n.key !== d .key)
         .reduce((l, d) => l.concat(checkTile(d)), [d])
     }
 
@@ -223,7 +223,7 @@ const game = (getBallLevel, sleepFunction, gameBoard) => {
               ball(newColoredDot.x, newColoredDot.y, newColoredDot.type + 1)
             )
           }
-          l.forEach((d, i) => {
+          l.forEach((d) => {
             keep[d.x][d.y] = false
             updateScore(state.score + (newColoredDot.type + 1) * 5)
           })

tests/game.test.js

@@ -24,12 +24,16 @@ const visualizeBalls = balls => {
 }
 
 const compareBoard = (t, board, game, msg) => {
+  if (board === 'gameover') {
+    t.deepEqual(game.gameover(), true, `${msg} is gameover`)
+    return
+  }
   const output = visualizeBalls(game.balls()).split('\n')
-  t.deepEqual(board.trim().split('\n'), output, msg)
+  t.deepEqual(output, board.trim().split('\n'), msg)
 }
 
-const testCommands = t => (commands, board) => {
-  const g = game(l => l, cb => cb())
+const testCommands = t => (commands, board, initBoard) => {
+  const g = game(l => l, cb => cb(), initBoard)
   commands.split('').forEach(command => {
     switch (command) {
       case 'l':
@@ -445,6 +449,21 @@ test('it executes commands correctly', t => {
 `
   )
 
+  executeCommands(
+    'ud',
+    `gameover`,
+    `
+.....0.
+.....3.
+.....3.
+.....2.
+.....2.
+....33.
+..3.102
+`.trim()
+  )
+
+
   t.end()
 })