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