sendnrw/gaseous-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: further updates to the game detail page

Browse Source
This commit is contained in:
Michael Green
2023-06-26 01:03:56 +10:00
parent f21a926758
commit c9dc1262b9
4 changed files with 171 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
gaseous-server/wwwroot/pages/game.html
View File

@@ -1,16 +1,59 @@
<div id="mainbody"></div>
<div id="bgImage"></div>
<div id="gamepage">
<div id="gamesummary"></div>
<div id="gamesummary">
<div id="gamesummary_cover"></div>
<div id="gamesummary_ratings">
<h3>Age Ratings</h3>
</div>
</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>

6
gaseous-server/wwwroot/pages/home.html
View File

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

5
gaseous-server/wwwroot/scripts/gamesformating.js
View File

@@ -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);
}
}

89
gaseous-server/wwwroot/styles/style.css
View File

@@ -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;
padding-top: 45px;
margin-top: 35px;
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 {
display: block;
max-width: 250px;
max-height: 350px;
#gamescreenshots {
background-color: black;
padding: 10px;
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;
}