Dallinger/Dallinger

{% extends "layout.html" %}

{% block stylesheets %}
    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet" type="text/css">
{% endblock %}

{% block head %}
    <meta charset="utf-8">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
{% endblock %}

{% block body %}
    <div class="container">
      <div class="heading">
        <h1 class="title">2048</h1>
        <div class="scores-container">
          <div class="score-container">0</div>
        </div>
      </div>

      <div class="above-game">
        <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
      </div>

      <div class="game-container">
        <div class="game-message">
          <p></p>
        </div>

        <div class="grid-container">
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
        </div>

        <div class="tile-container">

        </div>
      </div>

      <p class="game-explanation">
        <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
      </p>
    </div>
{% endblock %}

{% block libs %}
    {{ super() }}
    <script src="{{ url_for('static', filename='scripts/bind_polyfill.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/classlist_polyfill.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/animframe_polyfill.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/keyboard_input_manager.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/html_actuator.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/grid.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/tile.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/local_storage_manager.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/game_manager.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/application.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/experiment.js') }}"></script>
{% endblock %}

{% block scripts %}
    <script>
        create_agent();
    </script>
{% endblock %}