feat: further updates to the game detail page

gaseous-server/wwwroot/pages/game.html

@@ -1,16 +1,59 @@
-<div id="mainbody"></div>
+<div id="bgImage"></div>
+<div id="gamepage">
+    
+    <div id="gamesummary">
+        <div id="gamesummary_cover"></div>
+        <div id="gamesummary_ratings">
+            <h3>Age Ratings</h3>
+        </div>
+    </div>
 
-<div id="gamesummary"></div>
+    <div id="mainbody">
+        <div id="gametitle"><h1 id="gametitle_label"></h1></div>
+        <div id="gamescreenshots">
+            <div id="gamescreenshots_main"></div>
+            <div id="gamescreenshots_gallery"></div>
+        </div>
+        <div id="gamesummarytext"><span id="gamesummarytext_label"></span>
+    </div>
 
+    
+</div>
 <script type="text/javascript">
     const urlParams = new URLSearchParams(window.location.search);
     var gameId = urlParams.get('id');
+    var artworks = null;
+    var artworksPosition = 0;
+    var artworksTimer = null;
 
     ajaxCall('/api/v1/Games/' + gameId, 'GET', function (result) {
         // populate games page
-        var gameSummary = document.getElementById('gamesummary');
+        
+        // get name
+        var gameTitleLabel = document.getElementById('gametitle_label');
+        gameTitleLabel.innerHTML = result.name;
+
+        // get summary
+        var gameSummaryLabel = document.getElementById('gamesummarytext_label');
+        if (result.summary || result.storyline) {
+            if (result.summary) {
+                gameSummaryLabel.innerHTML = result.summary;
+            } else {
+                gameSummaryLabel.innerHTML = result.storyline;
+            }
+        } else {
+            gameSummaryLabel.setAttribute('style', 'display: none;');
+        }
+
+        // load artwork
+        if (result.artworks) {
+            artworks = result.artworks.ids;
+            artworksPostition = 0;
+            rotateBackground();
+        }
 
         // load cover
+        var gameSummaryCover = document.getElementById('gamesummary_cover');
         var gameImage = document.createElement('img');
         gameImage.className = 'game_cover_image';
         if (result.cover) {
@@ -19,18 +62,50 @@
             gameImage.src = '/images/unknowngame.png';
             gameImage.className = 'game_cover_image unknown';
         }
-        gameSummary.appendChild(gameImage);
+        gameSummaryCover.appendChild(gameImage);
 
         // load ratings
-        var gameRatings = document.createElement('div');
+        var gameSummaryRatings = document.getElementById('gamesummary_ratings');
         if (result.ageRatings) {
+            var gameRatings = document.createElement('div');
             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);
+            gameSummaryRatings.appendChild(gameRatings);
+        } else {
+            gameSummaryRatings.setAttribute('style', 'display: none;');
+        }
+
+        // load screenshots
+        var gameScreenshots = document.getElementById('gamescreenshots');
+        if (result.screenshots) {
+            var gameScreenshots_Main = document.getElementById('gamescreenshots_main');
+            gameScreenshots_Main.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/screenshots/' + result.screenshots.ids[0] + '/image"); background-position: center; background-repeat: no-repeat; background-size: contain;)');
+
+            var gameScreenshots_Gallery = document.getElementById('gamescreenshots_gallery');
+            for (var i = 0; i < result.screenshots.ids.length; i++) {
+                var screenshotItem = document.createElement('div');
+                screenshotItem.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/screenshots/' + result.screenshots.ids[i] + '/image"); background-position: center; background-repeat: no-repeat; background-size: contain;)');
+                screenshotItem.className = 'gamescreenshosts_gallery_item';
+                gameScreenshots_Gallery.appendChild(screenshotItem);
+            }
+        } else {
+            gamescreenshots.setAttribute('style', 'display: none;');
         }
     });
+
+    function rotateBackground() {
+        if (artworks) {
+            artworksPosition += 1;
+            if (artworks[artworksPosition] == null) {
+                artworksPosition = 0;
+            }
+            var bg = document.getElementById('bgImage');
+            bg.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/artwork/' + artworks[artworksPosition] + '/image"); background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(10px); -webkit-filter: blur(10px);');
+            artworksTimer = setTimeout(rotateBackground, 2500);
+        }
+    }
 </script>

gaseous-server/wwwroot/pages/home.html

@@ -1,5 +1,7 @@
-<div id="games_filter"></div>
+<div id="games_home">
-<div id="games_library"></div>
+    <div id="games_filter"></div>
+    <div id="games_library"></div>
+</div>
 
 <script type="text/javascript">
     ajaxCall('/api/v1/Filter', 'GET', function (result) {

gaseous-server/wwwroot/scripts/gamesformating.js

@@ -30,12 +30,15 @@ function renderGameIcon(gameObject, showTitle, showRatings) {
 
     if (showRatings == true) {
         if (gameObject.ageRatings) {
+            var ratingsSection = document.createElement('div');
+            ratingsSection.id = 'ratings_section';
             for (var i = 0; i < gameObject.ageRatings.ids.length; i++) {
                 var ratingImage = document.createElement('img');
                 ratingImage.src = '/api/v1/Games/' + gameObject.id + '/agerating/' + gameObject.ageRatings.ids[i] + '/image';
                 ratingImage.className = 'rating_image_mini';
-                gameBox.appendChild(ratingImage);
+                ratingsSection.appendChild(ratingImage);
             }
+            gameBox.appendChild(ratingsSection);
         }
     }
 

gaseous-server/wwwroot/styles/style.css

@@ -8,6 +8,12 @@
     font-size: 13px;
 }
 
+h3 {
+    text-decoration: underline;
+    text-decoration-color: #916b01;
+    text-decoration-thickness: 3px;
+}
+
 #banner_icon {
     background-color: white;
     position: fixed;
@@ -47,10 +53,11 @@
 }
 
 #content {
-    display: flex;
+    margin-top: 35px;
-    padding-top: 45px;
+    padding-top: 5px;
     padding-left: 5px;
     padding-right: 5px;
+    z-index: -100;
 }
 
 #games_filter {
@@ -89,6 +96,11 @@ input[id='filter_panel_search'] {
     width: 160px;
 }
 
+#games_home {
+    display: flex;
+    margin-top: 20px;
+}
+
 .filter_panel_item {
     display: flex;
     padding: 3px;
@@ -132,11 +144,52 @@ input[id='filter_panel_search'] {
     background-color: white;
 }
 
+#bgImage {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: -100;
+}
+
+#gamepage {
+    top: 0px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 90%;
+    min-width: 800px;
+    max-width: 1122px;
+
+    padding: 20px;
+    background: rgba(56, 56, 56, 0.7);
+}
+
+#mainbody {
+    margin-right: 300px;
+}
+
+#gamesummary {
+    float: right;
+    margin-left: 30px;
+    width: 280px;
+}
+
+.game_cover_image {
+    display: block;
+    max-width: 250px;
+    max-height: 350px;
+    width: 100%;
+}
+
 .rating_image {
     display: inline-block;
     max-width: 72px;
     max-height: 72px;
-    margin-right: 10px;
+    margin-right: 20px;
+    margin-bottom: 20px;
 }
 
 .rating_image_mini {
@@ -146,8 +199,30 @@ input[id='filter_panel_search'] {
     margin-right: 2px;
 }
 
-.game_cover_image {
+#gamescreenshots {
-    display: block;
+    background-color: black;
-    max-width: 250px;
+    padding: 10px;
-    max-height: 350px;
+    height: 350px;
+    margin-bottom: 20px;
+}
+
+#gamescreenshots_main {
+    width: 100%;
+    height: 290px;
+    margin-bottom: 10px;
+}
+
+#gamescreenshots_gallery {
+    left: 0px;
+    right: 0px;
+    height: 50px;
+    overflow-x: scroll;
+    text-align: center;
+}
+
+.gamescreenshosts_gallery_item {
+    display: inline-block;
+    height: 50px;
+    width: 70px;
+    margin-right: 10px;
 }