--- /dev/null
+<?php
+/**
+ * Take the generated JSON files and convert them to HTML for a browser
+ *
+ * @author Christian Weiske <cweiske@cweiske.de>
+ */
+$wwwDir = __DIR__ . '/../www/';
+$discoverDir = __DIR__ . '/../www/api/v1/discover-data/';
+$wwwDiscoverDir = $wwwDir . 'discover/';
+
+if (!is_dir($wwwDiscoverDir)) {
+ mkdir($wwwDiscoverDir, 0755);
+}
+
+foreach (glob($discoverDir . '*.json') as $discoverFile) {
+ $htmlFile = basename($discoverFile, '.json') . '.htm';
+ if ($htmlFile == 'discover.htm') {
+ $htmlFile = 'index.htm';
+ }
+ file_put_contents(
+ $wwwDiscoverDir . $htmlFile,
+ renderDiscoverFile($discoverFile)
+ );
+}
+
+function renderDiscoverFile($discoverFile)
+{
+ $json = json_decode(file_get_contents($discoverFile));
+
+ $title = $json->title;
+ $sections = [];
+ foreach ($json->rows as $row) {
+ $section = (object) [
+ 'title' => $row->title,
+ 'tiles' => [],
+ ];
+ foreach ($row->tiles as $tileId) {
+ $tileData = $json->tiles[$tileId];
+ if ($tileData->type == 'app') {
+ $section->tiles[] = (object) [
+ 'type' => $tileData->type,//app
+ 'thumb' => $tileData->image,
+ 'title' => $tileData->title,
+ 'rating' => $tileData->rating->average,
+ 'ratingCount' => $tileData->rating->count,
+ 'detailUrl' => '../game/' . str_replace(
+ 'ouya://launcher/details?app=',
+ '',
+ $tileData->url
+ ) . '.htm',
+ ];
+ } else {
+ $section->tiles[] = (object) [
+ 'type' => $tileData->type,//discover
+ 'thumb' => $tileData->image,
+ 'title' => $tileData->title,
+ 'detailUrl' => str_replace(
+ 'ouya://launcher/discover/',
+ '',
+ $tileData->url
+ ) . '.htm',
+ ];
+ }
+ }
+ $sections[] = $section;
+ }
+
+ $discoverTemplate = __DIR__ . '/../data/templates/discover.tpl.php';
+ ob_start();
+ include $discoverTemplate;
+ $html = ob_get_contents();
+ ob_end_clean();
+
+ return $html;
+}
+?>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>OUYA: <?= htmlspecialchars($title); ?></title>
+ <link rel="stylesheet" type="text/css" href="../ouya-discover.css"/>
+ </head>
+ <body class="discover">
+ <header>
+ <h1><?= htmlspecialchars($title); ?></h1>
+ </header>
+
+ <?php foreach ($sections as $section): ?>
+ <section class="row">
+ <?php if ($section->title): ?>
+ <h2><?= htmlspecialchars($section->title) ?></h2>
+ <?php endif ?>
+
+ <div class="tiles">
+ <?php foreach ($section->tiles as $tile): ?>
+ <section class="tile<?= ($tile->thumb == '') ? ' noimg' : '' ?>">
+ <h3 class="title"><a href="<?= htmlspecialchars($tile->detailUrl) ?>"><?= htmlspecialchars($tile->title) ?></a></h3>
+ <?php if ($tile->thumb != ''): ?>
+ <a href="<?= htmlspecialchars($tile->detailUrl) ?>"><img src="<?= htmlspecialchars($tile->thumb) ?>"/></a>
+ <?php endif ?>
+ <?php if ($tile->type == 'app' && $tile->ratingCount > 0): ?>
+ <p class="rating">
+ <span class="average average-<?= round($tile->rating) ?>"><?= $tile->rating ?></span>
+ <span class="count">(<?= $tile->ratingCount ?>)</span>
+ </p>
+ <?php endif ?>
+ </section>
+ <?php endforeach; ?>
+ </div>
+
+ </section>
+ <?php endforeach; ?>
+ </body>
+</html>
--- /dev/null
+body {
+ background-color: #333;
+ color: #CCC;
+ font-family: sans;
+ margin: 0;
+ padding: 0;
+ padding-top: 10ex;
+ padding-left: 5ex;
+}
+
+header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: black;
+ opacity: 0.5;
+ display: block;
+ width: 100%;
+ padding-left: 3ex;
+}
+
+h2 {
+ text-shadow: 2px 2px #555;
+ text-transform: uppercase;
+ margin-bottom: 0;
+ padding-left: 1ex;
+}
+a {
+ color: #CCC;
+}
+
+
+.tiles {
+ display: flex;
+ overflow-x: auto;
+ column-gap: 1em;
+ margin-bottom: 2ex;
+}
+
+.tile {
+ border: 0.5ex solid transparent;
+ width: 20vw;
+
+ display: flex;
+ flex-direction: column;
+}
+.tile:hover {
+ border: 0.5ex solid orange;
+}
+
+.tile > a {
+ order: -1;
+}
+.tile img {
+ width: 20vw;
+}
+h3 {
+ margin: 0;
+ font-weight: normal;
+}
+h3 a {
+ padding-left: 1ex;
+ padding-top: 1ex;
+ padding-bottom: 0ex;
+ display: block;
+ width: 100%;
+}
+.tile p {
+ margin: 0;
+ padding-left: 2ex;
+ font-size: 80%;
+}
+.average {
+ visibility: hidden;
+ font-size: 0;
+}
+.average:before {
+ visibility: visible;
+ font-size: 1rem;
+ color: orange;
+}
+.average:after {
+ visibility: visible;
+ font-size: 1rem;
+}
+.average-0:after {
+ content: "★★★★★";
+}
+.average-1:before {
+ content: "★";
+}
+.average-1:after {
+ content: "★★★★";
+}
+.average-2:before {
+ content: "★★";
+}
+.average-2:after {
+ content: "★★★";
+}
+.average-3:before {
+ content: "★★★";
+}
+.average-3:after {
+ content: "★★";
+}
+.average-4:before {
+ content: "★★★★";
+}
+.average-4:after {
+ content: "★";
+}
+.average-5:before {
+ content: "★★★★★";
+}
+
+.tile.noimg {
+}
+.tile.noimg h3 {
+ background-color: black;
+ background: linear-gradient(to top right, black, 70%, #4b6f67);
+}
+.tile.noimg h3 a {
+ padding-left: 0;
+ padding-top: 5ex;
+ padding-bottom: 5ex;
+ text-align: center;
+ text-transform: uppercase;
+}