Use Cell objects to generate grid

views/akari.coffee

@@ -9,7 +9,7 @@ class Nikoli.Akari extends Nikoli.Game
     for i in [0...solution.length]
       row = solution[i]
       for j in [0...row.length]
-        cell = new Nikoli.Cell(i, j, solution)
+        cell = new Nikoli.AkariCell(i, j, solution)
 
         if cell.value == -5
           errors.push {row: i, column: j, message: 'The light is illuminated by another one'}
@@ -23,23 +23,7 @@ class Nikoli.Akari extends Nikoli.Game
     errors
 
   generate: (game, solution = false) ->
-    @game = game if game?
+    super game, solution, Nikoli.AkariCell
-    @grid.innerHTML = @game.map((row, i) ->
-      '<div class="grid-row">' + row.map((cell, j) ->
-        data = "data-row=\"#{i}\" data-column=\"#{j}\""
-        if cell <= -2
-          if solution
-            color_class = if cell == -3
-              'black'
-            else if cell == -4
-              'light'
-            else if cell == -5
-              'black light'
-          "<div class=\"grid-cell empty #{color_class}\" #{data}>&nbsp;</div>"
-        else
-          "<div class=\"grid-cell white\" #{data}>#{if cell >= 0 then cell else '&nbsp;'}</div>"
-      ).join('') + '</div>'
-    ).join('')
 
     for cell in board.querySelectorAll('.empty')
       cell.addEventListener 'click', ((evenment) => @toggle evenment.target), false
@@ -79,6 +63,26 @@ class Nikoli.Akari extends Nikoli.Game
           if isNaN(value) then -1 else value
 
 class Nikoli.AkariCell extends Nikoli.Cell
+  create: (value, solution = false) ->
+    cell = super
+
+    if value >= -1
+      cell.classList.add 'white'
+      cell.innerHTML = value if value >= 0
+    else
+      cell.classList.add 'empty'
+
+      if solution
+        if value == -3
+          cell.classList.add 'black'
+        else if value == -4
+          cell.classList.add 'light'
+        else if value == -5
+          cell.classList.add 'black'
+          cell.classList.add 'light'
+
+    cell
+
   isIlluminated: ->
     @lightLeft() || @lightRight() || @lightUp() || @lightDown()
 

views/application.coffee

@@ -43,6 +43,19 @@ class Nikoli.Game
     else
       alert errors.map((el) -> el.message).join()
 
+  generate: (game, solution = false, cell_class = Nikoli.Cell) ->
+    @game = game if game?
+
+    @grid.innerHTML = ''
+    @game.forEach((row, i) =>
+      row_elem = new Nikoli.Row().create()
+      row.forEach((cell, j) ->
+        row_elem.appendChild new cell_class(i, j).create(cell))
+
+      @grid.appendChild row_elem)
+
+    return
+
   getFiles: ->
     xmlhttp = new XMLHttpRequest()
     xmlhttp.open("GET", "#{@url}.json")
@@ -70,9 +83,27 @@ class Nikoli.Game
   reset: ->
     @generate()
 
+class Nikoli.Row
+  create: ->
+    row = document.createElement 'div'
+    row.classList.add 'grid-row'
+
+    row
+
 class Nikoli.Cell
   constructor: (@x, @y, @game) ->
-    @value = @game[@x][@y] if @valid()
+    @value = @game[@x][@y] if @game? && @valid()
+
+  create: (value) ->
+    cell = document.createElement 'div'
+    cell.dataset.row = @x
+    cell.dataset.column = @y
+
+    cell.classList.add 'grid-cell'
+
+    cell.innerHTML = ' '
+
+    cell
 
   toString: -> "#{@x};#{@y}"
 
@@ -91,13 +122,6 @@ class Nikoli.Cell
       new Cell(@x, @y - 1, @game)
     ]
 
-  isPool: ->
-    [
-      new Cell(@x, @y + 1, @game),
-      new Cell(@x + 1, @y, @game),
-      new Cell(@x + 1, @y + 1, @game),
-    ].every (cell) => cell.valid(@value)
-
   valid: (value) ->
     0 <= @x < @game.length && 0 <= @y < @game[@x].length &&
       (!value? || value < 0 && @game[@x][@y] < 0 || value >= 0 && @game[@x][@y] >= 0)

views/hitori.coffee

@@ -11,7 +11,7 @@ class Nikoli.Hitori extends Nikoli.Game
     for i in [0...solution.length]
       row = solution[i]
       for j in [0...row.length]
-        cell = new Nikoli.Cell(i, j, solution)
+        cell = new Nikoli.HitoriCell(i, j, solution)
 
         if cell.value >= 0
           white_stream.calculate(cell) if white_stream.empty()
@@ -28,12 +28,7 @@ class Nikoli.Hitori extends Nikoli.Game
     errors
 
   generate: (game, solution = false) ->
-    @game = game if game?
+    super game, solution, Nikoli.HitoriCell
-    @grid.innerHTML = @game.map((row) ->
-      '<div class="grid-row">' + row.map((cell) ->
-        "<div class=\"grid-cell\">#{cell}</div>"
-      ).join('') + '</div>'
-    ).join('')
 
     for cell in board.querySelectorAll('.grid-cell')
       cell.addEventListener 'click', ((evenment) => @toggle evenment.target), false
@@ -56,3 +51,10 @@ class Nikoli.Hitori extends Nikoli.Game
           -1
         else
           parseInt(cell.innerHTML)
+
+class Nikoli.HitoriCell extends Nikoli.Cell
+  create: (value) ->
+    cell = super
+    cell.innerHTML = value
+
+    cell

views/nurikabe.coffee

@@ -11,7 +11,7 @@ class Nikoli.Nurikabe extends Nikoli.Game
     for i in [0...solution.length]
       row = solution[i]
       for j in [0...row.length]
-        cell = new Nikoli.Cell(i, j, solution)
+        cell = new Nikoli.NurikabeCell(i, j, solution)
 
         if cell.value < 0
           if black_stream.empty()
@@ -36,16 +36,7 @@ class Nikoli.Nurikabe extends Nikoli.Game
     errors
 
   generate: (game, solution = false) ->
-    @game = game if game?
+    super game, solution, Nikoli.NurikabeCell
-    @grid.innerHTML = @game.map((row) ->
-      '<div class="grid-row">' + row.map((cell) ->
-        if cell <= 0
-          color_class = 'black' if solution && cell == -1
-          "<div class=\"grid-cell empty #{color_class}\">&nbsp;</div>"
-        else
-          "<div class=\"grid-cell white\">#{cell}</div>"
-      ).join('') + '</div>'
-    ).join('')
 
     for cell in board.querySelectorAll('.empty')
       cell.addEventListener 'click', ((evenment) => @toggle evenment.target), false
@@ -71,3 +62,24 @@ class Nikoli.Nurikabe extends Nikoli.Game
             0
         else
           parseInt(cell.innerHTML)
+
+class Nikoli.NurikabeCell extends Nikoli.Cell
+  create: (value, solution = false) ->
+    cell = super
+
+    if value <= 0
+      cell.classList.add 'empty'
+      cell.classList.add 'black' if solution && value == -1
+    else
+      cell.classList.add 'white'
+      cell.innerHTML = value
+
+    cell
+
+  isPool: ->
+    [
+      new NurikabeCell(@x, @y + 1, @game),
+      new NurikabeCell(@x + 1, @y, @game),
+      new NurikabeCell(@x + 1, @y + 1, @game),
+    ].every (cell) => cell.valid(@value)
+

views/sudoku.coffee

@@ -9,7 +9,7 @@ class Nikoli.Sudoku extends Nikoli.Game
     for i in [0...solution.length]
       row = solution[i]
       for j in [0...row.length]
-        cell = new Nikoli.Cell(i, j, solution)
+        cell = new Nikoli.SudokuCell(i, j, solution)
 
         if cell.value == 0
           errors.push {row: i, column: j, message: 'The cell has no value.'}
@@ -19,17 +19,7 @@ class Nikoli.Sudoku extends Nikoli.Game
     errors
 
   generate: (game, solution = false) ->
-    @game = game if game?
+    super game, solution, Nikoli.SudokuCell
-    @grid.innerHTML = @game.map((row) ->
-      '<div class="grid-row">' + row.map((cell) ->
-        if cell <= 0
-          "<div class=\"grid-cell empty\"><input type=\"text\" #{if cell < 0 then "value=\"#{Math.abs(cell)}\""} /></div>"
-        else
-          "<div class=\"grid-cell white\">#{cell}</div>"
-      ).join('') + '</div>'
-    ).join('')
-
-    return
 
   toggle: (cell) ->
     if cell.classList.contains 'black'
@@ -51,3 +41,15 @@ class Nikoli.Sudoku extends Nikoli.Game
             if solution then -value else value
         else
           parseInt(cell.innerHTML)
+
+class Nikoli.SudokuCell extends Nikoli.Cell
+  create: (value) ->
+    cell = super
+    if value <= 0
+      cell.classList.add 'empty'
+      cell.innerHTML = "<input type=\"text\" #{if value < 0 then "value=\"#{Math.abs(value)}\"" else ''} />"
+    else
+      cell.classList.add 'white'
+      cell.innerHTML = value
+
+    cell