From ccf4492e884c30762ba2f5f661337315d76a29a2 Mon Sep 17 00:00:00 2001
From: Guillaume Dott <guillaume+github@dott.fr>
Date: Fri, 12 Dec 2014 12:57:51 +0100
Subject: [PATCH] Display error messages in a list below the grid

---
 views/application.coffee | 28 +++++++++++++++++++++++++---
 views/application.scss   | 12 +++++++++---
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/views/application.coffee b/views/application.coffee
index 37508b2..e64fef2 100644
--- a/views/application.coffee
+++ b/views/application.coffee
@@ -35,17 +35,41 @@ class Nikoli.Game
     congratulations.classList.add 'hide'
     @board.appendChild congratulations
 
+    errors = document.createElement 'ul'
+    errors.classList.add 'errors'
+    errors.classList.add 'hide'
+    @board.appendChild errors
+
   check: ->
     errors = @errors()
 
     if errors.length == 0
+      [].forEach.call @board.querySelectorAll('.error'), (cell) ->
+        cell.classList.remove 'error'
+      @board.querySelector('.errors').classList.remove('show')
       @board.querySelector('.congratulations').classList.add('show')
     else
-      alert errors.map((el) -> el.message).join()
+      errors_elem = @board.querySelector('.errors')
+      errors_elem.innerHTML = ''
+
+      errors.forEach (error) =>
+        error_cell = @board.querySelector("[data-row=\"#{error.row}\"][data-column=\"#{error.column}\"]")
+        error_cell.classList.add 'error'
+
+        li = document.createElement('li')
+        li.innerHTML = error.message
+
+        errors_elem.appendChild li
+
+      @board.querySelector('.congratulations').classList.remove('show')
+      errors_elem.classList.add('show')
 
   generate: (game, solution = false, cell_class = Nikoli.Cell) ->
     @game = game if game?
 
+    @board.querySelector('.congratulations').classList.remove('show')
+    @board.querySelector('.errors').classList.remove('show')
+
     @grid.innerHTML = ''
     @game.forEach((row, i) =>
       row_elem = new Nikoli.Row().create()
@@ -71,8 +95,6 @@ class Nikoli.Game
     @newgame() unless @game?
 
   newgame: ->
-    @board.querySelector('.congratulations').classList.remove('show')
-
     xmlhttp = new XMLHttpRequest()
     xmlhttp.open("GET", "#{@url}/#{@file}.json")
 
diff --git a/views/application.scss b/views/application.scss
index 0e6a4e9..d3b4cb5 100644
--- a/views/application.scss
+++ b/views/application.scss
@@ -62,15 +62,21 @@ ul {
   font-size: 1.2em;
 }
 
-.congratulations {
-  background-color: #4a4;
-  color: #060;
+.congratulations, .errors {
   font-weight: bold;
   padding: 20px 0;
   margin: 10px 0;
   border-radius: 3px;
   display: none;
 }
+.congratulations {
+  background-color: #4a4;
+  color: #060;
+}
+.errors {
+  background-color: #a44;
+  color: #600;
+}
 
 .show {
   display: block;