List of all ouya games
[stouyapi.git] / data / templates / allgames.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>List of all OUYA games</title>
6   <meta name="generator" content="stouyapi"/>
7   <link rel="stylesheet" type="text/css" href="../datatables/datatables.min.css"/>
8   <link rel="stylesheet" type="text/css" href="../datatables/jquery.dataTables.yadcf.css"/>
9   <link rel="stylesheet" type="text/css" href="../ouya-allgames.css"/>
10   <link rel="icon" href="../favicon.ico"/>
11  </head>
12  <body class="allgames">
13   <header>
14    <h1>List of all OUYA games</h1>
15    <img class="ouyalogo" src="../ouya-logo.grey.svg" alt="OUYA logo" width="50"/>
16   </header>
17
18   <table id="allouyagames" class="display">
19    <thead>
20     <tr>
21      <th>Game title</th>
22      <th>Developer</th>
23      <th>Age</th>
24      <th>Players</th>
25      <th>Genres</th>
26      <th>Release</th>
27     </tr>
28    </thead>
29    <tbody>
30     <?php foreach ($games as $game): ?>
31      <tr>
32       <td>
33        <a href="<?= htmlspecialchars($game->detailUrl) ?>">
34         <?= htmlspecialchars($game->title) ?>
35        </a>
36       </td>
37       <td><?= htmlspecialchars($game->developer) ?></td>
38       <td><?= htmlspecialchars($game->suggestedAge) ?></td>
39       <td><?= htmlspecialchars(implode(', ', $game->players)) ?></td>
40       <td><?= htmlspecialchars(implode(', ', $game->genres)) ?></td>
41       <td><?= htmlspecialchars(gmdate('Y-m-d', $game->apkTimestamp)) ?></td>
42      </tr>
43     <?php endforeach; ?>
44    </tbody>
45   </table>
46
47   <nav>
48    <?php foreach ($navLinks as $url => $title): ?>
49     <a rel="up" href="<?= htmlspecialchars($url) ?>"><?= htmlspecialchars($title) ?></a>
50    <?php endforeach ?>
51   </nav>
52
53   <script type="text/javascript" src="../datatables/jquery-3.5.1.min.js"></script>
54   <script type="text/javascript" src="../datatables/datatables.min.js"></script>
55   <script type="text/javascript" src="../datatables/jquery.dataTables.yadcf.js"></script>
56   <script type="text/javascript">
57    $(document).ready(
58        function() {
59            var allOuyaGamesTable = $('#allouyagames').DataTable(
60                {
61                    paging: false,
62                    fixedHeader: true
63                }
64            );
65            yadcf.init(
66                allOuyaGamesTable,
67                [
68                    {
69                        column_number: 0,
70                        filter_type: "text",
71                        filter_default_label: "Filter game title",
72                    },
73                    {
74                        column_number: 1,
75                        filter_type: "text",
76                        filter_default_label: "Filter developer",
77                    },
78                    {
79                        column_number: 2,
80                        column_data_type: "text",
81                        data: ["Everyone", "9+", "12+", "17+"],
82                        filter_default_label: "Filter age"
83                    },
84                    {
85                        column_number: 3,
86                        column_data_type: "text",
87                        text_data_delimiter: ", ",
88                        filter_default_label: "Filter player number"
89                    },
90                    {
91                        column_number: 4,
92                        column_data_type: "text",
93                        text_data_delimiter: ", ",
94                        filter_default_label: "Filter genre"
95                    }
96                ]
97            );
98        }
99    );
100   </script>
101  </body>
102 </html>