git.cweiske.de / stouyapi.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: f52520f)
HTML frontend part 1: discover sections
authorChristian Weiske <cweiske@cweiske.de>
Sun, 10 May 2020 21:23:57 +0000 (23:23 +0200)
committerChristian Weiske <cweiske@cweiske.de>
Sun, 10 May 2020 21:23:57 +0000 (23:23 +0200)
.gitignore patch | blob | history
bin/build-html.php [new file with mode: 0644] patch | blob
data/templates/discover.tpl.php [new file with mode: 0644] patch | blob
www/ouya-discover.css [new file with mode: 0644] patch | blob

diff --git a/.gitignore b/.gitignore
index a383eb431a15a6d6a8b2e9bd6a2d0289de35b50a..da64f1659f51213061ce3287bd6274fbd9ea126d 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ www/api/v1/discover-data/
 www/api/v1/discover.json
 www/api/v1/games/*/
 www/api/v1/search-data/
 www/api/v1/discover.json
 www/api/v1/games/*/
 www/api/v1/search-data/
+www/discover/
diff --git a/bin/build-html.php b/bin/build-html.php
new file mode 100644 (file)
index 0000000..e1f533f
--- /dev/null
+++ b/bin/build-html.php
@@ -0,0 +1,76 @@
+<?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;
+}
+?>
diff --git a/data/templates/discover.tpl.php b/data/templates/discover.tpl.php
new file mode 100644 (file)
index 0000000..3c695f2
--- /dev/null
+++ b/data/templates/discover.tpl.php
@@ -0,0 +1,38 @@
+<?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>
diff --git a/www/ouya-discover.css b/www/ouya-discover.css
new file mode 100644 (file)
index 0000000..82063be
--- /dev/null
+++ b/www/ouya-discover.css
@@ -0,0 +1,129 @@
+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;
+}
Static API to keep the OUYA Android gaming console running in 2019