{% extends "base.html" %}
{% block title %}Visit Page{% endblock %}
{% block head %}
    <script>var name = '{{ name }}';</script>
    <script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
    <script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>
    <script src="static/js/web_socket.js"></script>
    <script src="static/js/game.js"></script>
{% endblock %}
{% block content %}
    <table class="game-holder">
        <tr>
            <td>
                <canvas class='bg-canvas' id="gameCanvas" width="0" height="0"></canvas>
            </td>
            <td>
                <table class="score fixed">
                    <tr>
                        <td>
                            Speed
                        </td>
                        <td id="hero-speed"></td>
                    </tr>
                    <tr>
                        <td>
                            Life Count
                        </td>
                        <td id="hero-lifes"></td>
                    </tr>
                </table>
                <table id="scorecardHeroes" class="fixed">
                    <thead>
                    <tr>
                        <th>Gamer</th>
                        <th>Name</th>
                        <th>Hits</th>
                        <th>Deaths</th>
                        <th>Total</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
{% endblock %}