diff --git a/examples/node/game_of_life/receiver.js b/examples/node/game_of_life/receiver.js index a795d77..7b2589c 100644 --- a/examples/node/game_of_life/receiver.js +++ b/examples/node/game_of_life/receiver.js @@ -10,6 +10,12 @@ module.exports = class Receiver { } listen(socket){ + socket.on('game_of_life.build', (data) => { + let matrix = document.getElementById("matrix"); + $(matrix).html(''); + this.renderMatrix(matrix, JSON.parse(data.answer)); + }); + socket.on('game_of_life.*', (data) => { console.log("data received", data); let time = new Date().toLocaleString(); @@ -17,4 +23,16 @@ module.exports = class Receiver { }); } + renderMatrix(matrix, fields){ + fields.forEach((y) => { + let row = document.createElement("div"); + $(row).addClass('clearfix'); + matrix.appendChild(row); + y.forEach((x) => { + let alive_css = x.alive ? ' alive' : ''; + $(row).append('
'); + }); + }); + } + } diff --git a/examples/node/public/game_of_life.html b/examples/node/public/game_of_life.html index e49dcc6..2fa3f20 100644 --- a/examples/node/public/game_of_life.html +++ b/examples/node/public/game_of_life.html @@ -10,15 +10,13 @@ #matrix .cell { width: 50px; height: 50px; + background-color: #ddd; + float: left; } - #matrix .cell .alive { + #matrix .cell.alive { background-color: #333; } - - #matrix .cell .dead { - background-color: #ddd; - } diff --git a/examples/server/game_of_life/world.rb b/examples/server/game_of_life/world.rb index 0b2301f..247d685 100644 --- a/examples/server/game_of_life/world.rb +++ b/examples/server/game_of_life/world.rb @@ -10,7 +10,7 @@ def create srand set_each_field_with_index do |x, y| cell = Cell.new(self, x, y) - cell.alive = rand(3) == 2 + cell.alive = rand(4) == 0 cell end end