Display error messages in a list below the grid

master
Guillaume Dott 2014-12-12 12:57:51 +01:00
parent f96725b822
commit ccf4492e88
2 changed files with 34 additions and 6 deletions

View File

@ -35,17 +35,41 @@ class Nikoli.Game
congratulations.classList.add 'hide' congratulations.classList.add 'hide'
@board.appendChild congratulations @board.appendChild congratulations
errors = document.createElement 'ul'
errors.classList.add 'errors'
errors.classList.add 'hide'
@board.appendChild errors
check: -> check: ->
errors = @errors() errors = @errors()
if errors.length == 0 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') @board.querySelector('.congratulations').classList.add('show')
else 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) -> generate: (game, solution = false, cell_class = Nikoli.Cell) ->
@game = game if game? @game = game if game?
@board.querySelector('.congratulations').classList.remove('show')
@board.querySelector('.errors').classList.remove('show')
@grid.innerHTML = '' @grid.innerHTML = ''
@game.forEach((row, i) => @game.forEach((row, i) =>
row_elem = new Nikoli.Row().create() row_elem = new Nikoli.Row().create()
@ -71,8 +95,6 @@ class Nikoli.Game
@newgame() unless @game? @newgame() unless @game?
newgame: -> newgame: ->
@board.querySelector('.congratulations').classList.remove('show')
xmlhttp = new XMLHttpRequest() xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET", "#{@url}/#{@file}.json") xmlhttp.open("GET", "#{@url}/#{@file}.json")

View File

@ -62,15 +62,21 @@ ul {
font-size: 1.2em; font-size: 1.2em;
} }
.congratulations { .congratulations, .errors {
background-color: #4a4;
color: #060;
font-weight: bold; font-weight: bold;
padding: 20px 0; padding: 20px 0;
margin: 10px 0; margin: 10px 0;
border-radius: 3px; border-radius: 3px;
display: none; display: none;
} }
.congratulations {
background-color: #4a4;
color: #060;
}
.errors {
background-color: #a44;
color: #600;
}
.show { .show {
display: block; display: block;