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;