621049c3d505543b2fcfcbffa3fa70e3e080047b
[stouyapi.git] / 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     <?php if ($json->inAppPurchases): ?>
51     <strong>* Includes in-app purchases</strong><br/><br/>
52     <?php endif ?>
53     <?= nl2br(htmlspecialchars($json->description)) ?>
54    </p>
55   </section>
56
57   <section class="media">
58    <h2>Screenshots</h2>
59    <div class="content">
60     <?php foreach ($json->mediaTiles as $tile): ?>
61      <?php if ($tile->type == 'image'): ?>
62       <img src="<?= htmlspecialchars($tile->urls->full) ?>" alt="Screenshot of <?= htmlspecialchars($json->title); ?>"/>
63      <?php elseif ($tile->type == 'video'): ?>
64       <video controls="">
65        <source src="<?= htmlspecialchars($tile->url) ?>"/>
66       </video>
67      <?php endif ?>
68     <?php endforeach ?>
69    </div>
70   </section>
71
72   <section class="buttons">
73    <h2>Links</h2>
74    <?php if ($apkDownloadUrl): ?>
75    <div>
76     <a href="<?= $apkDownloadUrl ?>">Download .apk</a>
77     <p>
78      Version <?= $json->version->number ?>, published
79      <?= gmdate('Y-m-d', $json->version->publishedAt) ?>
80     </p>
81    </div>
82    <?php endif ?>
83    <?php if ($internetArchiveUrl): ?>
84    <div>
85     <a href="<?= $internetArchiveUrl ?>">Internet Archive page</a>
86    </div>
87    <?php endif ?>
88    <div>
89     <form method="post" action="<?= htmlspecialchars($pushUrl) ?>" id="push" onsubmit="pushToMyOuya();return false;">
90      <button name="push" type="submit" class="push-to-my-ouya">
91       <img src="../push-to-my-ouya.png" width="335" height="63"
92            alt="Push to my OUYA"
93       />
94      </button>
95     </form>
96    </div>
97   </section>
98
99   <nav>
100    <?php foreach ($navLinks as $url => $title): ?>
101     <a rel="up" href="<?= htmlspecialchars($url) ?>"><?= htmlspecialchars($title) ?></a>
102    <?php endforeach ?>
103   </nav>
104
105   <div style="display: none" class="popup" id="push-success">
106    <a class="close" href="#" onclick="this.parentNode.style.display='none';return false;">⊗</a>
107    <strong><?= htmlspecialchars($json->title); ?></strong>
108    will start downloading to your OUYA within the next few minutes
109   </div>
110   <div style="display: none" class="popup" id="push-error">
111    <a class="close" href="#" onclick="this.parentNode.style.display='none';return false;">⊗</a>
112    <strong>Push error</strong>
113    <p>error message</p>
114   </div>
115
116   <script type="text/javascript">
117    function pushToMyOuya() {
118        var form = document.getElementById("push");
119        var req = new XMLHttpRequest();
120        req.addEventListener("load", pushToMyOuyaComplete);
121        req.open("POST", form.action);
122        req.send();
123    }
124    function pushToMyOuyaComplete() {
125        if (this.status / 100 == 2) {
126            document.getElementById('push-success').style.display = "";
127        } else {
128            var err = document.getElementById('push-error');
129            err.getElementsByTagName("p")[0].textContent = this.responseText;
130            err.style.display = "";
131        }
132    }
133   </script>
134  </body>
135 </html>