Add congratulation message

views/application.coffee

@@ -29,11 +29,17 @@ class Nikoli.Game
     @board.querySelector('.reset').addEventListener('click', @reset.bind(this))
     @board.querySelector('.newgame').addEventListener('click', @newgame.bind(this))
 
+    congratulations = document.createElement 'div'
+    congratulations.innerHTML = 'Congratulations!'
+    congratulations.classList.add 'congratulations'
+    congratulations.classList.add 'hide'
+    @board.appendChild congratulations
+
   check: ->
     errors = @errors()
 
     if errors.length == 0
-      alert 'Congratulations!'
+      @board.querySelector('.congratulations').classList.add('show')
     else
       alert errors.map((el) -> el.message).join()
 
@@ -52,6 +58,8 @@ class Nikoli.Game
     @newgame() unless @game?
 
   newgame: ->
+    @board.querySelector('.congratulations').classList.remove('show')
+
     xmlhttp = new XMLHttpRequest()
     xmlhttp.open("GET", "#{@url}/#{@file}.json")
 

views/application.scss

@@ -62,6 +62,20 @@ ul {
   font-size: 1.2em;
 }
 
+.congratulations {
+  background-color: #4a4;
+  color: #060;
+  font-weight: bold;
+  padding: 20px 0;
+  margin: 10px 0;
+  border-radius: 3px;
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
 .white {
   background-color: #fff;
 }
@@ -79,8 +93,12 @@ ul {
 }
 
 .akari {
-  .black {
+  .white {
     background-color: #222;
+    color: #fff;
+  }
+  .black {
+    background-color: #fff;
   }
   .light {
     box-shadow: 0 0 10px 5px #ffb inset;