<!doctype html>
<!--

  File        : templates/index.html
  Maintainer  : Felix C. Stegerman <flx@obfusk.net>
  Date        : 2020-09-08

  Copyright   : Copyright (C) 2020  Felix C. Stegerman
  Version     : v0.2.1
  License     : AGPLv3+

-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Sokoban(g)</title>
    <link rel="stylesheet" href="css/bootstrap-flatly.min.css" />
<!--<link rel="stylesheet" href="css/bootstrap-darkly.min.css" />-->
    <style>
      #game, .zoom  { max-height: calc(100vh - 200px); }
      #game         { overflow: auto; }
      .zoom         { object-fit: contain; max-width: 100%; }
      #CANVAS       { display: block; border: 1px solid black;
                      background-color: #666; }
      .nowrap       { display: inline-block; }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
<!--<script src="js/popper-1.16.0.min.js"></script>-->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="js/alert.js"></script>
    <script src="coffee/bigbang.js?t={{ now }}"></script>
    <script src="coffee/sokobang.js?t={{ now }}"></script>
    <script src="coffee/start.js?t={{ now }}"></script>
  </head>
  <body class="text-center">
    <div id="images" class="d-none">
      <img id="goal_img"        src="img/goal.png"        alt="IMG" />
      <img id="object_goal_img" src="img/object_goal.png" alt="IMG" />
      <img id="object_img"      src="img/object.png"      alt="IMG" />
      <img id="person_goal_img" src="img/person_goal.png" alt="IMG" />
      <img id="person_img"      src="img/person.png"      alt="IMG" />
      <img id="wall_img"        src="img/wall.png"        alt="IMG" />
    </div>
    <div class="container">
      <div class="row justify-content-center p-1">
        <div id="controls" class="card col-lg-9">
          <div class="card-body form-inline justify-content-center align-items-end p-2">
            <span class="form-group m-1">
              <label for="sets">Set</label>
              &nbsp;
              <select class="form-control" id="sets"></select>
            </span>
            <span class="form-group m-1">
              <label for="levels">Level</label>
              &nbsp;
              <select class="form-control" id="levels"></select>
            </span>
            <span class="nowrap m-1">
              <button class="btn btn-primary" id="play">Play</button>
              <button class="btn btn-primary" id="next">Next »</button>
            </span>
            <span class="form-group m-1 form-check form-check-inline w-auto pb-1">
              <input class="form-check-input" type="checkbox" id="zoom">
              <label class="form-check-label" for="zoom">Zoom out</label>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div id="game">
      <canvas id="CANVAS" class="m-auto"></canvas>
    </div>
    <div class="container">
      <div class="row justify-content-center p-1">
        <div id="data-and-buttons" class="card col-lg-9">
          <div class="card-body p-2">
            <div id="data">
              <span class="nowrap">
                <span id="set">?</span>
                <label>Level</label>
                <span id="level" class="badge badge-info">?</span>
                <span id="completed" class="badge badge-success">✓</span>
              </span>
              <span class="nowrap">
                »
                <span id="moves" class="badge badge-info">?</span>
                <label>Moves</label>
                <span id="pushes" class="badge badge-info">?</span>
                <label>Pushes</label>
              </span>
            </div>
            <div id="buttons" class="mt-1">
              <button id="left"  class="btn btn-lg btn-outline-primary">⇦</button>
              <button id="down"  class="btn btn-lg btn-outline-primary">⇩</button>
              <button id="up"    class="btn btn-lg btn-outline-primary">⇧</button>
              <button id="right" class="btn btn-lg btn-outline-primary">⇨</button>
              <button id="undo"  class="btn btn-lg btn-outline-primary">u</button>
            </div>
          </div>
        </div>
      </div>
      <div class="row justify-content-center px-1 pt-0 pb-1">
        <div class="alert alert-light col-lg-9 mb-0" role="alert">
          Push all the red gems to the green goal squares (using as
          few moves and pushes as possible).  Use your keyboard's
          <strong>arrow keys</strong> or the <strong>arrow
          buttons</strong> or <strong>click/tap</strong> to the
          left/right of or above/below the "warehouse keeper" to move;
          press <strong>u</strong> to undo the last move.
        </div>
      </div>
      <hr/>
    </div>
    <footer class="mb-3 mx-3">
      <small>
        <span class="nowrap">
          © 2020 Felix C. Stegerman
        </span>
        <a href="https://ko-fi.com/obfusk"
          target="_blank" rel="noopener"
          class="btn btn-outline-primary btn-sm py-0">♥ Support</a>
        <span class="nowrap">
          » <a href="https://github.com/obfusk/sokobang"
              target="_blank" rel="noopener">Code</a>:
          <a href="https://www.gnu.org/licenses/agpl-3.0.html"
            target="_blank" rel="noopener">AGPLv3+</a>
          + <a href="#" data-toggle="modal"
              data-target="#licenses-modal">Dependencies</a>
        </span>
        <span class="nowrap">
          » <a href="README.ksokoban.txt" target="_blank"
              rel="noopener">Images &amp; Levels</a>
        </span>
        <span class="nowrap">
          » <a href="privacy.txt" target="_blank"
              rel="noopener">Privacy</a>
        </span>
      </small>
    </footer>
    <div class="modal" tabindex="-1" role="dialog" id="alert-modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">[...]</h5>
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body d-flex justify-content-end">
            <button id="alert-ok" class="btn btn-primary">OK</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal text-left" tabindex="-1" role="dialog"
        id="licenses-modal">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Open Source Licenses</h5>
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            {% for k, v in DEPS|dictsort %}
              {% set name = v.get("name", k) %}
              <h6>
                <a href="{{ v.url }}" target="_blank" rel="noopener">
                  {{ name }}
                </a>
              </h6>
              <iframe class="w-100" src="licenses/{{ name }}.txt">
              </iframe>
              {% if not loop.last %}<br/><br/>{% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
