{% extends 'layout.twig' %}

{% block body %}
  <script type="text/javascript" src="javascripts/gamescript.js"></script>
  <br/>
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span1"></div>
      <div class="span5">
        <canvas id="mycanvas" style="border:2px solid #000;"></canvas>
      </div>
      <div class="span6">
        <br><h1>PIANUINO</h1> <br><h2>Projet Arduino 2019<br></h2><br>
        <font size="+2"><span>Score :&nbsp; </span><span id="score"></span></font><br><br>
        <font size="+2"><span>Temps :&nbsp; </span><span id="time"></span></font><br><br>
        <input class="span4" type="text" placeholder="Temps limite en secondes" id="tl">
        <button class="span3 btn btn-success" onclick="loadcanvas();">Start !</button><br><br>
        <div><b><u>Instructions</u>:</b><br>
          Indique le temps wesh wesh que tu veux passer dans ce super jeu.<br>
          Le temps par défaut sera de 10 secondes<br><br>
          Appuis sur les petits boutons du Arduino pour jouer ta musique favorite<br><br><br><br>
          <i>Créé par un groupe<br></i>
        </div><br>
        <audio id="sample" src="resources/furelise.mp3" preload></audio>
      </div>
    </div>
  </div>


  <script>

    const ul = document.getElementById("list");

    var ws = new WebSocket('ws://localhost:40510');
    // event emmited when connected
    ws.onopen = function () {
      console.log('websocket is connected ...')
      // sending a send event to websocket server
      ws.send('connected')
    }
    // event emmited when receiving message
    ws.onmessage = function (ev) {
      console.log(ev.data);
      update(parseInt(ev.data.substr(1)));
    }
  </script>
{% endblock %}
