<%= render 'layouts/lobbyheader' %>
 <% provide(:button_text, 'Lobby') %>
 <% provide(:title_text, 'GAME') %>

 <canvas id ="game_canvas">
     'Your browser does not support the canvas element.'
 </canvas>

 <script>

  var canvas = document.getElementById("game_canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext('2d');
  var countIt = 50.1
  setInterval(drawGame,1000);
  function drawGame() {
     drawGameBackground(ctx);
     drawGameCountDown(ctx,countIt);
  }

  function drawGameBackground(ctx,countIt) {
     var x4 = .08 * window.innerWidth;            // x pos of title
     var y4 = .10 * window.innerHeight;            // y pos of title
     var x5 = .08 * window.innerWidth;            // x pos of "MaxProfit"
     var y5 = y4 + .05 * window.innerHeight;     // y pos of "Max Profit"
     var i = 0;
     var x = .06 * window.innerWidth;            // start of line
     var x1 = .07 * window.innerWidth;          //start of separators
     var y1 = .5 * window.innerHeight;         // top of separators
     var y2 = y1 + .025 * window.innerHeight;  // bottom of separators
     var z = .015 * window.innerWidth;    // increment between separators
     var x2 = z * 21;                    // end of line
     var y = y1 + (.0125 * window.innerHeight); //midpoint of sep line
     var x6 = x1 - 5;                // x start of the second lables
     var y3 = y2 + (.0125 * window.innerHeight);  // y pos of sec labels
     var x7 = .18 * window.innerWidth;            // x pos of the counter
     var y7 = .35 * window.innerHeight;           // y position ofcounter
     var s;                                // second
     var x4 = .08 * window.innerWidth;        // x position of "GAME"
     var y4 = .10 * window.innerHeight;       // y position of "GAME"
     ctx.fillStyle = "#ffffff";
     ctx.fill();
     ctx.font = "35px Rock Salt";
     ctx.fillText("GAME", x4, y4);
     ctx.font = "15px Tahoma";
     ctx.fillText("Max Profit: 10 000 000 Coins", x5, y5);
     ctx.beginPath();
     ctx.moveTo(x,y);
     ctx.lineTo(x2,y);
     ctx.lineWidth = .5;
     ctx.strokeStyle = "#000000";
     ctx.lineWidth = 1;
     ctx.stroke();
     while (i < 17){
        s = i + 1;
        ctx.font = "10px Tahoma";
        ctx.fillText(s + "s", x6, y3);
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x1,y2);
        x1 = x1 + z;
        x6 = x6 + z;
        ctx.strokeStyle = "#000000";
        ctx.lineWidth = 1;
        ctx.stroke();
        i++;
     }
  }

  function drawGameCountDown(ctx, countIt) {

         countIt = (countIt - .1).toFixed(1);
         ctx.fillStyle = "#ffffff";
         ctx.fill();
         ctx.font = "35px Tahoma";
         ctx.fillText(countIt, x7, y7);
  }