index.html

---
layout: default
---

  {% assign games = site.data.games | sort: 'name'  %}
  <div class="row">
  {% for game in games %}
  {% assign loopindex = forloop.index | modulo: 4 %}
  {% if loopindex == 1 %}
  </div>
  <div class="row">  
  {% endif %}
  <div class="col-md-3">
    <div class="thumbnail">
      <a href="#" data-toggle="modal" data-target="#app-{{game.appid}}">
        {% if game.appid %}
        <img src="http://cdn.akamai.steamstatic.com/steam/apps/{{game.appid}}/header.jpg?" alt="">
        {% endif %}
        {% if game.header %}
        <img src="{{game.header}}" alt="">
        {% endif %}
      </a>
      <!--<button onclick="get_info({{game.appid}})">Get Info </button>-->
    </div>
  </div>

  <div id="app-{{game.appid}}" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">{{ game.name }}</h4>
        </div>
        <div class="modal-body">
          <!--<div>{{ game.position | default: 'Standing' }}</div>
          <div>{{ game.type | default: 'Game' }}</div>-->
          {% if game.trailer %}
          <div class="embed-responsive embed-responsive-16by9">
            {% if game.trailer contains 'youtube' %}
            <iframe width="1088" height="612" src="{{game.trailer}}" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe>
            {% else %}
            <video src="{{game.trailer}}" class="embed-responsive-item" controls preload="none" poster="{{game.trailer_thumbnail}}"></video>
            {% endif %}
          </div>
          <p>{{game.about_the_game}}</p>
          {% endif %}
        </div>
        <div class="modal-footer">
          <a href="steam://store/{{game.appid}}" class="btn btn-default">Launch</a>
          <a href="http://store.steampowered.com/app/{{game.appid}}" class="btn btn-default">View in Steam</a>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

    {% endfor %}
    </div>
  </div>

<script>
  function get_info(app_id) {
    $.get('http://store.steampowered.com/api/appdetails/?appids=' + app_id, function(data) {
      var game = data[app_id].data;
      console.log(JSON.stringify({trailer: game.movies[0].webm.max, trailer_thumbnail: game.movies[0].thumbnail, about_the_game: game.about_the_game}));
    });
  }
  </script>