Fix behavioural difference from original game (cell overload++)

It is possible when resolving chain reactions that a cell will have atoms
added to it by multiple neighbouring explosions before its own explosion is
resolved. This means that a central cell could have more than 4 atoms in it
(potentially up to 7!), a side cell could have more than 3 (up to 5), and a
corner cell more than 2 (up to 3).

Our implementation originally discarded any atoms over the explosion
threshold, essentially causing us to lose matter. It was determined through
use of the debug mode and comparing with the original game that the original
does not do this.

The fix here is to allow a cell to be overloaded further, and when resolving
an explosion in a super-overloaded cell, leave behind any excess atoms in the
exploding cell.

Interestingly this reveals a display bug in the original game. Viewing the
game state at ?debug=84 and comparing to https://youtu.be/kEDjZyG2g-g?t=1m47s
the original game is failing to display the green atom present at (9, 4) after
that cell has exploded. This is however resolved by the next turn when 1 red
atom gets added to the cell, turning it into a 2-atom red cell (showing that
it is a display bug rather than a lost atom).

This would indicate the the original programmer also struggled somewhat with
these edge cases. :)

game.js

@@ -256,22 +256,20 @@ function nextPlayer() {
 }
 
 function addAtom(cell, playerId, postAdd) {
-	if(cell.dataset.atoms <= cell.dataset.maxAtoms) {
-		if(cell.dataset.playerId != -1 && cell.dataset.playerId != playerId) {
-			players[cell.dataset.playerId].atoms -= parseInt(cell.dataset.atoms);
-			players[playerId].atoms += parseInt(cell.dataset.atoms);
-			if(players[cell.dataset.playerId].atoms == 0) {
-				players[cell.dataset.playerId].alive = false;
-				document.getElementById('playerList').getElementsByClassName('player' + cell.dataset.playerId)[0].className += ' dead';
-			}
-		}
-		cell.dataset.playerId = playerId;
-		cell.dataset.atoms++;
-		players[playerId].atoms++;
-		if(cell.dataset.atoms > cell.dataset.maxAtoms) {
-			overloaded.push(cell);
+	if(cell.dataset.playerId != -1 && cell.dataset.playerId != playerId) {
+		players[cell.dataset.playerId].atoms -= parseInt(cell.dataset.atoms);
+		players[playerId].atoms += parseInt(cell.dataset.atoms);
+		if(players[cell.dataset.playerId].atoms == 0) {
+			players[cell.dataset.playerId].alive = false;
+			document.getElementById('playerList').getElementsByClassName('player' + cell.dataset.playerId)[0].className += ' dead';
 		}
 	}
+	cell.dataset.playerId = playerId;
+	cell.dataset.atoms++;
+	players[playerId].atoms++;
+	if(parseInt(cell.dataset.atoms) == parseInt(cell.dataset.maxAtoms) + 1) {
+		overloaded.push(cell);
+	}
 	drawAtoms(cell, function postDraw(e) {
 		this.removeEventListener('transitionend', postDraw);
 		postAdd();
@@ -292,9 +290,19 @@ function explodeCell(cell, postAdd) {
 	for(var atom; atom = atoms[0];) {
 		cell.removeChild(atom);
 	}
-	players[cell.dataset.playerId].atoms -= parseInt(cell.dataset.atoms);
+	players[cell.dataset.playerId].atoms -= parseInt(cell.dataset.maxAtoms) + 1;
+	var overflowAtoms = parseInt(cell.dataset.atoms) - (parseInt(cell.dataset.maxAtoms) + 1);
 	cell.dataset.atoms = 0;
-	cell.dataset.playerId = -1;
+	if(overflowAtoms == 0) {
+		cell.dataset.playerId = -1;
+	} else {
+		for(var i = 1; i <= overflowAtoms; i++) {
+			cell.dataset.atoms++;
+			var newAtom = document.createElement('div');
+			newAtom.className = 'atom atom' + i + ' player' + playerId + ' pos' + (overflowAtoms - i + 1);
+			cell.appendChild(newAtom);
+		}
+	}
 	var x = parseInt(cell.style.gridColumn, 10);
 	var y = parseInt(cell.style.gridRow, 10);
 	var neighbour;
@@ -352,7 +360,7 @@ function drawAtoms(cell, postTransition) {
 				newAtom.className = 'atom atom3 player' + cell.dataset.playerId + ' pos1';
 			});
 		});
-	} else if(cell.dataset.atoms >= 4) {
+	} else if(cell.dataset.atoms == 4) {
 		cell.getElementsByClassName('atom1')[0].className = 'atom atom1 player' + cell.dataset.playerId + ' pos4';
 		cell.getElementsByClassName('atom2')[0].className = 'atom atom2 player' + cell.dataset.playerId + ' pos3';
 		cell.getElementsByClassName('atom3')[0].className = 'atom atom3 player' + cell.dataset.playerId + ' pos2';
@@ -363,6 +371,15 @@ function drawAtoms(cell, postTransition) {
 				newAtom.className = 'atom atom4 player' + cell.dataset.playerId + ' pos1';
 			});
 		});
+	} else if(cell.dataset.atoms >= 5) {
+		console.log(cell.dataset.atoms + " at " + cell.id);
+		newAtom.className = 'atom atom5 player' + cell.dataset.playerId + ' pos1 size0';
+		cell.appendChild(newAtom);
+		window.requestAnimationFrame(function() {
+			window.requestAnimationFrame(function() {
+				newAtom.className = 'atom atom5 player' + cell.dataset.playerId + ' pos1';
+			});
+		});
 	}
 }