feat: initial game detail page + updated age rating icons with SVG’s

gaseous-server/wwwroot/index.html

@@ -22,18 +22,19 @@
     </div>
 
     <div id="content">
-        <div id="games_filter"></div>
-        <div id="games_library"></div>
+        
     </div>
-    <script type="text/javascript">
-        ajaxCall('/api/v1/Filter', 'GET', function (result) {
-            var filterElement = document.getElementById('games_filter');
-            formatFilterPanel(filterElement, result);
-        });
 
-        ajaxCall('/api/v1/Games', 'GET', function (result) {
-            var gameElement = document.getElementById('games_library');
-            formatGamesPanel(gameElement, result);
+    <script type="text/javascript">
+        $(document).ready(function () {
+            const urlParams = new URLSearchParams(window.location.search);
+            var myParam = urlParams.get('page');
+
+            if (!myParam) {
+                myParam = 'home';
+            }
+
+            $('#content').load('/pages/' + myParam + '.html');
         });
     </script>
 </body>

gaseous-server/wwwroot/pages/game.html

@@ -0,0 +1,36 @@
+<div id="mainbody"></div>
+
+<div id="gamesummary"></div>
+
+<script type="text/javascript">
+    const urlParams = new URLSearchParams(window.location.search);
+    var gameId = urlParams.get('id');
+
+    ajaxCall('/api/v1/Games/' + gameId, 'GET', function (result) {
+        // populate games page
+        var gameSummary = document.getElementById('gamesummary');
+
+        // load cover
+        var gameImage = document.createElement('img');
+        gameImage.className = 'game_cover_image';
+        if (result.cover) {
+            gameImage.src = '/api/v1/Games/' + result.id + '/cover/image';
+        } else {
+            gameImage.src = '/images/unknowngame.png';
+            gameImage.className = 'game_cover_image unknown';
+        }
+        gameSummary.appendChild(gameImage);
+
+        // load ratings
+        var gameRatings = document.createElement('div');
+        if (result.ageRatings) {
+            for (var i = 0; i < result.ageRatings.ids.length; i++) {
+                var ratingImage = document.createElement('img');
+                ratingImage.src = '/api/v1/Games/' + result.id + '/agerating/' + result.ageRatings.ids[i] + '/image';
+                ratingImage.className = 'rating_image';
+                gameRatings.appendChild(ratingImage);
+            }
+            gameSummary.appendChild(gameRatings);
+        }
+    });
+</script>

gaseous-server/wwwroot/pages/home.html

@@ -0,0 +1,14 @@
+<div id="games_filter"></div>
+<div id="games_library"></div>
+
+<script type="text/javascript">
+    ajaxCall('/api/v1/Filter', 'GET', function (result) {
+        var filterElement = document.getElementById('games_filter');
+        formatFilterPanel(filterElement, result);
+    });
+
+    ajaxCall('/api/v1/Games', 'GET', function (result) {
+        var gameElement = document.getElementById('games_library');
+        formatGamesPanel(gameElement, result);
+    });
+</script>

gaseous-server/wwwroot/scripts/gamesformating.js

@@ -9,6 +9,7 @@
 function renderGameIcon(gameObject, showTitle, showRatings) {
     var gameBox = document.createElement('div');
     gameBox.className = 'game_tile';
+    gameBox.setAttribute('onclick', 'window.location.href = "/index.html?page=game&id=' + gameObject.id + '";');
 
     var gameImage = document.createElement('img');
     gameImage.className = 'game_tile_image';

gaseous-server/wwwroot/styles/style.css

@@ -132,9 +132,22 @@ input[id='filter_panel_search'] {
     background-color: white;
 }
 
+.rating_image {
+    display: inline-block;
+    max-width: 72px;
+    max-height: 72px;
+    margin-right: 10px;
+}
+
 .rating_image_mini {
     display: inline-block;
     max-width: 32px;
     max-height: 32px;
     margin-right: 2px;
+}
+
+.game_cover_image {
+    display: block;
+    max-width: 250px;
+    max-height: 350px;
 }