data/templates/game.tpl.php

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   3  <head>
   4   <meta charset="utf-8"/>
   5   <title><?= htmlspecialchars($json->title); ?> - OUYA game</title>
   6   <meta name="generator" content="stouyapi"/>
   7   <meta name="author" content="<?= htmlspecialchars($json->developer->name) ?>"/>
   8   <link rel="stylesheet" type="text/css" href="../ouya-game.css"/>
   9   <link rel="icon" href="../favicon.ico"/>
  10  </head>
  11  <body class="game">
  12   <header>
  13    <img class="ouyalogo" src="../ouya-logo.grey.svg" alt="OUYA logo" width="50"/>
  14   </header>
  15   <section class="text">
  16    <h1><?= htmlspecialchars($json->title); ?></h1>
  17    <dl class="meta">
  18     <dt>Rating</dt>
  19     <dd class="rating">
  20      <span class="average average-<?= round($json->rating->average) ?>" title="<?= $json->rating->average ?>"><?= $json->rating->average ?></span>
  21      <span class="count">(<?= $json->rating->count ?>)</span>
  22     </dd>
  23
  24     <dt>Developer</dt>
  25     <dd class="company">
  26      <?php if ($appsJson->app->website): ?>
  27       <a href="<?= htmlspecialchars($appsJson->app->website) ?>"><?= htmlspecialchars($json->developer->name) ?></a>
  28      <?php else: ?>
  29       <?= htmlspecialchars($json->developer->name) ?>
  30      <?php endif ?>
  31     </dd>
  32
  33     <dt>Suggested age</dt>
  34     <dd class="contentRating">
  35      <?= htmlspecialchars($json->suggestedAge) ?>
  36     </dd>
  37
  38     <dt>Number of players</dt>
  39     <dd class="players">
  40      <?= htmlspecialchars(implode(', ', $json->gamerNumbers)) ?>
  41     </dd>
  42
  43     <dt>Download size</dt>
  44     <dd class="size">
  45      <?= number_format($json->apk->fileSize / 1024 / 1024, 2) ?> MiB
  46     </dd>
  47    </dl>
  48
  49    <p class="description">
  50     <?= nl2br(htmlspecialchars($json->description)) ?>
  51    </p>
  52   </section>
  53
  54   <section class="media">
  55    <h2>Screenshots</h2>
  56    <div class="content">
  57     <?php foreach ($json->mediaTiles as $tile): ?>
  58      <?php if ($tile->type == 'image'): ?>
  59       <img src="<?= htmlspecialchars($tile->urls->full) ?>" alt="Screenshot of <?= htmlspecialchars($json->title); ?>"/>
  60      <?php elseif ($tile->type == 'video'): ?>
  61       <video controls="">
  62        <source src="<?= htmlspecialchars($tile->url) ?>"/>
  63       </video>
  64      <?php endif ?>
  65     <?php endforeach ?>
  66    </div>
  67   </section>
  68
  69   <section class="buttons">
  70    <h2>Links</h2>
  71    <?php if ($apkDownloadUrl): ?>
  72    <div>
  73     <a href="<?= $apkDownloadUrl ?>">Download .apk</a>
  74     <p>
  75      Version <?= $json->version->number ?>, published
  76      <?= gmdate('Y-m-d', $json->version->publishedAt) ?>
  77     </p>
  78    </div>
  79    <?php endif ?>
  80    <?php if ($internetArchiveUrl): ?>
  81    <div>
  82     <a href="<?= $internetArchiveUrl ?>">Internet Archive page</a>
  83    </div>
  84    <?php endif ?>
  85    <div>
  86     <form method="post" action="<?= htmlspecialchars($pushUrl) ?>" id="push" onsubmit="pushToMyOuya();return false;">
  87      <button name="push" type="submit" class="push-to-my-ouya">
  88       <img src="../push-to-my-ouya.png" width="335" height="63"
  89            alt="Push to my OUYA"
  90       />
  91      </button>
  92     </form>
  93    </div>
  94   </section>
  95
  96   <nav>
  97    <?php foreach ($navLinks as $url => $title): ?>
  98     <a rel="up" href="<?= htmlspecialchars($url) ?>"><?= htmlspecialchars($title) ?></a>
  99    <?php endforeach ?>
 100   </nav>
 101
 102   <div style="display: none" class="popup" id="push-success">
 103    <a class="close" href="#" onclick="this.parentNode.style.display='none';return false;">⊗</a>
 104    <strong><?= htmlspecialchars($json->title); ?></strong>
 105    will start downloading to your OUYA within the next few minutes
 106   </div>
 107   <div style="display: none" class="popup" id="push-error">
 108    <a class="close" href="#" onclick="this.parentNode.style.display='none';return false;">⊗</a>
 109    <strong>Push error</strong>
 110    <p>error message</p>
 111   </div>
 112
 113   <script type="text/javascript">
 114    function pushToMyOuya() {
 115        var form = document.getElementById("push");
 116        var req = new XMLHttpRequest();
 117        req.addEventListener("load", pushToMyOuyaComplete);
 118        req.open("POST", form.action);
 119        req.send();
 120    }
 121    function pushToMyOuyaComplete() {
 122        if (this.status / 100 == 2) {
 123            document.getElementById('push-success').style.display = "";
 124        } else {
 125            var err = document.getElementById('push-error');
 126            err.getElementsByTagName("p")[0].textContent = this.responseText;
 127            err.style.display = "";
 128        }
 129    }
 130   </script>
 131  </body>
 132 </html>