added scoring...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

simplesnake/simplesnake.appcache

@@ -2,6 +2,6 @@ CACHE MANIFEST
 # Last Modified: 2017 Apr 15
 
 CACHE:
-simplesnake.html
 simplesnake.css
 simplesnake.js
+simplesnake.html

simplesnake/simplesnake.css

@@ -65,3 +65,17 @@ body {
 	border: solid 1px silver;
 }
 
+.simplesnake[score]:after {
+	position: absolute;
+	display: block;
+	text-align: center;
+	width: 100vw;
+	color: gray;
+	font-size: 2vh;
+	line-height: 3vh;
+
+	content: "Top score: " attr(snake) ": " attr(score) " " attr(state);
+
+	opacity: 0.9;
+}
+

simplesnake/simplesnake.js

@@ -407,6 +407,21 @@ function setup(snake, timer, size){
 		__HANDLER_SET = true
 	}
 
+	function showScore(color, age){
+		score = snake.__top_score = 
+			(!snake.__top_score || snake.__top_score.score < age) ?
+				{
+					color: color || '',
+					score: age || 0,
+				}
+				: snake.__top_score
+		snake._field.setAttribute('score', score.score)
+		snake._field.setAttribute('snake', score.color)
+		snake._field.setAttribute('state', (
+			score.score == age && score.color == color) ? '(current)' : '')
+	}
+
+	// setup the game...
 	return snake
 		.setup('.simplesnake', size)
 		.randomLevel()
@@ -415,19 +430,19 @@ function setup(snake, timer, size){
 
 		// stuff...
 		.appleEaten(function(color, age){ 
-			// XXX show score...
-			console.log(`Apple eaten by: ${color}: ${age}`)
 			this.apple() 
+			showScore(color, age)
 		})
 		.apple()
 		.apple()
 
 		// players...
 		.snakeKilled(function(color, age){ 
-			console.log(`Killed: ${color}: ${age}`)
 			this
 				.pause()
-				.snake(color, 3) })
+				.snake(color, 3) 
+			showScore(color, 3)
+		})
 		.snake('blue', 3)
 }