In the first part of this blog, we modeled the logic of game of life using a calculation view and  a decision table, In this part let us expose the decision table to a front end UI using XSJS and create an interactive game as shown below.

UI_Cellgame.png

Wrapper SQL Script :

With just a decision table , we will not be able to generate consecutive generations of cells . To do so, we have to create a wrapper SQL script over the decision table. which will get the results from the decision table and update the source table ( cellgame table ).So, As and when the SQL Script Procedure is executed , cells for next generation will be updated to the cellgame table..

CREATE PROCEDURE “HANA_GARAGE”.”PLAY” () LANGUAGE SQLSCRIPT AS

BEGIN

CREATE GLOBAL TEMPORARY TABLE temp_table AS ( SELECT X,Y,S_NEW AS S FROM “_SYS_BIC”.”garage.gameoflife/GAME_RULES_DT/RV” ) WITH DATA;

UPDATE “HANA_GARAGE”.”CELLGAME” SET s = temp_table.S FROM “HANA_GARAGE”.”CELLGAME”,temp_table WHERE “HANA_GARAGE”.”CELLGAME”.X = temp_table.X AND “HANA_GARAGE”.”CELLGAME”.Y = temp_table.Y;

DROP TABLE temp_table;

END;

In the above SQL Script procedure , we store the results of the decision table in a Global temporary table and we use the temporary table to update the values in the source table ( CELLGAME table ). So, whenever the procedure is called , the source table ( CELLGAME  table ) is updated with next generation cells.


XSJS


The following server side javascript calls the procedure created in the previous step and the result of the source table is returned as a JSON.

var procedureCallSql = ‘CALL “HANA_GARAGE”.”PLAY”‘,

sqlSelect = ‘SELECT * FROM “HANA_GARAGE”.”CELLGAME”‘,

init = $.request.parameters.get(“initial”);

function close(closables) {

    var closable;

    var i;

    for (i = 0; i < closables.length; i++) {

              closable = closables[i];

              if(closable) {

                        closable.close();

              }

    }

}

function getCellValue(){

    var cells = [];

    var connection = $.db.getConnection();

    var statement = null;

    var resultSet = null;

    try{

              statement = connection.prepareStatement(sqlSelect);

              resultSet = statement.executeQuery();

              while (resultSet.next()) {

                        var cell = {};

                        cell.x = resultSet.getString(1)

                        cell.y = resultSet.getString(2);

                        cell.s = resultSet.getString(3);

                        cells.push(cell);

                        }

    } finally {

              close([resultSet, statement, connection]);

    }

    return cells;

}

function doGet() {

    try{

              $.response.contentType = “application/json”;

              $.response.setBody(JSON.stringify(getCellValue()));

    }

    catch(err){

              $.response.contentType = “text/plain”;

              $.response.setBody(“Error while executing query: [” + err.message + “]”);

              $.response.returnCode = 200;

    }

}

function callProcedure(sqlQuery){

    var connection = $.db.getConnection();

    var statement = null;

    var resultSet = null;

    try{

              statement = connection.prepareCall(sqlQuery);

              resultSet = statement.execute();

    } finally {

              close([resultSet, statement, connection]);

    }

    doGet();

}

if(init==1){

  doGet();

}else{

  callProcedure(procedureCallSql);

}



UI.

To visualize the output of the xsjs , we create a HTML page as shown below,

<!DOCTYPE html>

<html lang=”en”>

  <head>

    <title>Game Of Life</title>

<!–     <link href=”style.css” rel=”stylesheet”>

–>

<style>

body {

  background: #a0a0a0;

  padding: 20px;

}

table {

  margin: 0 auto;

  border-collapse: collapse;

  background: black;

}

td {

    width: 40px; height: 40px;

    background: white;

    border: 1px solid black;

}

td.live{

  background: black;

  border: 1px solid white;

}

button{

display:block;

margin:0 auto;

margin-top:20px;

}

</style>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script>

<SCRIPT TYPE=”text/javascript”>

$( document ).ready(function() {

var result = [];

tdTag = “<td”

tdTag2 = “></td>”,

tdTagBlack = ‘<td class=”live”></td>’,

htmlTag = “”,

trOpen = “<tr>”,

trEnd = “</tr>”;

$.get(“/garage/gameoflife/play.xsjs?initial=1”,function(data){

  result = data;

  console.log(result);

  for(i=3;i>=1;i–){

   htmlTag+= trOpen;

   for(j=1;j<=3;j++){

     htmlTag+= tdTag + ” id='”+j+””+i+”‘”+tdTag2;

     console.log(j,i);

   }

   htmlTag += trEnd;

  }

  var tableTag = $(“table”);

  tableTag.append(htmlTag);

  for(n=0;n<result.length;n++){

   var x = parseInt(result[n].x),

   y = parseInt(result[n].y),

   s = parseInt(result[n].s);

   if(s>0){

     var identifier = “td#”+x+””+y;

     $(identifier).addClass(“live”);

   }

  }

});

$(“button”).click(function(){

   $.get(“/garage/gameoflife/play.xsjs?initial=2”,function(data){

   result = data;

   for(n=0;n<result.length;n++){

       var x = parseInt(result[n].x),

       y = parseInt(result[n].y),

       s = parseInt(result[n].s);

       var identifier = “td#”+x+””+y;

       $(identifier).removeClass(“live”);

     }

     for(n=0;n<result.length;n++){

       var x = parseInt(result[n].x),

       y = parseInt(result[n].y),

       s = parseInt(result[n].s);

       if(s>0){

         var identifier = “td#”+x+””+y;

         $(identifier).addClass(“live”);

       }

     }

  });

});

});

</SCRIPT>

</head>

<body>

<table>

</table>

<button type=”button”>Play</button>

</body>

</html>

Here we use jQuery Get function to request the JSON from play.xsjs file. The resulting JSON is displayed as cells using javascript and CSS. Whenever the play button is clicked, a request is sent to play.xsjs and procedure is called by the xsjs . then the next generation cell pattern is passed to the UI in JSON format. UI creates cells based on the JSON result from xsjs .

Result:

Whenever the Play button is clicked , next generation cells are generated and displayed in the UI as shown below.

UI_Cellgame_2nd_gen.png

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply