From eeb83bc96525bfcb38d614eb4f84f83b8e26a708 Mon Sep 17 00:00:00 2001 From: Christian Weiske Date: Sun, 10 May 2020 23:23:57 +0200 Subject: [PATCH] HTML frontend part 1: discover sections --- .gitignore | 1 + bin/build-html.php | 76 +++++++++++++++++++ data/templates/discover.tpl.php | 38 ++++++++++ www/ouya-discover.css | 129 ++++++++++++++++++++++++++++++++ 4 files changed, 244 insertions(+) create mode 100644 bin/build-html.php create mode 100644 data/templates/discover.tpl.php create mode 100644 www/ouya-discover.css diff --git a/.gitignore b/.gitignore index a383eb4..da64f16 100644 --- 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/discover/ diff --git a/bin/build-html.php b/bin/build-html.php new file mode 100644 index 0000000..e1f533f --- /dev/null +++ b/bin/build-html.php @@ -0,0 +1,76 @@ + + */ +$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 index 0000000..3c695f2 --- /dev/null +++ b/data/templates/discover.tpl.php @@ -0,0 +1,38 @@ + + + + OUYA: <?= htmlspecialchars($title); ?> + + + +
+

+
+ + +
+ title): ?> +

title) ?>

+ + +
+ tiles as $tile): ?> +
+

title) ?>

+ thumb != ''): ?> + + + type == 'app' && $tile->ratingCount > 0): ?> +

+ rating ?> + (ratingCount ?>) +

+ +
+ +
+ +
+ + + diff --git a/www/ouya-discover.css b/www/ouya-discover.css new file mode 100644 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; +} -- 2.30.2