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

feat: added screenshot carosel

Browse Source
This commit is contained in:
Michael Green
2023-06-26 12:12:28 +10:00
parent c9dc1262b9
commit e6396d19e4
2 changed files with 179 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,8 @@
<div id="bgImage"></div>
<div id="gamepage">
<div id="gametitle"><h1 id="gametitle_label"></h1></div>
<div id="gamesummary">
<div id="gamesummary_cover"></div>
@@ -9,12 +12,22 @@
</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 id="gamescreenshots_portal">
<div id="gamescreenshots_left_arrow" style="float: left; margin-top: 145px;" onclick="selectScreenshot_Prev();" class="gamescreenshots_arrows">&lt;</div>
<div id="gamescreenshots_right_arrow" style="float: right; margin-top: 145px;" onclick="selectScreenshot_Next();" class="gamescreenshots_arrows">&gt;</div>
<div id="gamescreenshots_main"></div>
</div>
<div id="gamescreenshots_gallery">
<div id="gamescreenshots_gallery_panel"></div>
</div>
</div>
<div id="gamesummarytext">
<span id="gamesummarytext_label" class="line-clamp-4"></span>
<p id="gamesummarytext_label_button_expand" class="text_link" style="display: none;" onclick="document.querySelector('#gamesummarytext_label').classList.remove('line-clamp-4'); document.querySelector('#gamesummarytext_label_button_expand').setAttribute('style', 'display: none;'); document.querySelector('#gamesummarytext_label_button_contract').setAttribute('style', '');">Read more...</p>
<p id="gamesummarytext_label_button_contract" class="text_link" style="display: none;" onclick="document.querySelector('#gamesummarytext_label').classList.add('line-clamp-4'); document.querySelector('#gamesummarytext_label_button_expand').setAttribute('style', ''); document.querySelector('#gamesummarytext_label_button_contract').setAttribute('style', 'display: none;');">Read less...</p>
</div>
<div id="gamesummarytext"><span id="gamesummarytext_label"></span>
</div>
@@ -25,6 +38,7 @@
var artworks = null;
var artworksPosition = 0;
var artworksTimer = null;
var selectedScreenshot = 0;
ajaxCall('/api/v1/Games/' + gameId, 'GET', function (result) {
// populate games page
@@ -41,6 +55,15 @@
} else {
gameSummaryLabel.innerHTML = result.storyline;
}
if (gameSummaryLabel.offsetHeight < gameSummaryLabel.scrollHeight ||
gameSummaryLabel.offsetWidth < gameSummaryLabel.scrollWidth) {
// your element has overflow and truncated
// show read more / read less button
document.querySelector('#gamesummarytext_label_button_expand').setAttribute('style', '');
} else {
// your element doesn't overflow (not truncated)
}
} else {
gameSummaryLabel.setAttribute('style', 'display: none;');
}
@@ -83,15 +106,19 @@
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;)');
//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');
var gameScreenshots_Gallery = document.getElementById('gamescreenshots_gallery_panel');
for (var i = 0; i < result.screenshots.ids.length; i++) {
var screenshotItem = document.createElement('div');
screenshotItem.id = 'gamescreenshots_gallery_' + i;
screenshotItem.setAttribute('name', 'gamescreenshots_gallery_item');
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';
screenshotItem.setAttribute('onclick', 'selectScreenshot(' + i + ');');
gameScreenshots_Gallery.appendChild(screenshotItem);
}
selectScreenshot(0);
} else {
gamescreenshots.setAttribute('style', 'display: none;');
}
@@ -105,7 +132,51 @@
}
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);
artworksTimer = setTimeout(rotateBackground, 60000);
}
}
function selectScreenshot(index) {
var gameScreenshots_Main = document.getElementById('gamescreenshots_main');
var gameScreenshots_Selected = document.getElementById('gamescreenshots_gallery_' + index);
var gameScreenshots_Items = document.getElementsByName('gamescreenshots_gallery_item');
// set the selction class
for (var i = 0; i < gameScreenshots_Items.length; i++) {
if (gameScreenshots_Items[i].id == gameScreenshots_Selected.id) {
gameScreenshots_Items[i].classList.add('gamescreenshosts_gallery_item_selected');
gameScreenshots_Selected.scrollIntoView();
} else {
gameScreenshots_Items[i].classList.remove('gamescreenshosts_gallery_item_selected');
}
}
// set the screenshot
gameScreenshots_Main.setAttribute('style', gameScreenshots_Selected.getAttribute('style'));
selectedScreenshot = index;
}
function selectScreenshot_Next() {
var gameScreenshots_Items = document.getElementsByName('gamescreenshots_gallery_item');
selectedScreenshot += 1;
if (selectedScreenshot >= gameScreenshots_Items.length) {
selectedScreenshot = 0;
}
selectScreenshot(selectedScreenshot);
}
function selectScreenshot_Prev() {
var gameScreenshots_Items = document.getElementsByName('gamescreenshots_gallery_item');
selectedScreenshot = selectedScreenshot - 1;
if (selectedScreenshot < 0) {
selectedScreenshot = gameScreenshots_Items.length - 1;
}
selectScreenshot(selectedScreenshot);
}
</script>

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

@@ -96,6 +96,36 @@ input[id='filter_panel_search'] {
width: 160px;
}
/* width */
::-webkit-scrollbar {
width: 10px;
height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #383838;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.text_link {
}
.text_link:hover {
cursor: pointer;
text-decoration: underline;
}
#games_home {
display: flex;
margin-top: 20px;
@@ -168,13 +198,13 @@ input[id='filter_panel_search'] {
}
#mainbody {
margin-right: 300px;
margin-left: 270px;
}
#gamesummary {
float: right;
margin-left: 30px;
width: 280px;
float: left;
margin-right: 20px;
width: 250px;
}
.game_cover_image {
@@ -186,8 +216,8 @@ input[id='filter_panel_search'] {
.rating_image {
display: inline-block;
max-width: 72px;
max-height: 72px;
max-width: 64px;
max-height: 64px;
margin-right: 20px;
margin-bottom: 20px;
}
@@ -202,7 +232,7 @@ input[id='filter_panel_search'] {
#gamescreenshots {
background-color: black;
padding: 10px;
height: 350px;
/*height: 350px;*/
margin-bottom: 20px;
}
@@ -215,9 +245,17 @@ input[id='filter_panel_search'] {
#gamescreenshots_gallery {
left: 0px;
right: 0px;
height: 50px;
height: 65px;
overflow-x: scroll;
text-align: center;
overflow-y: hidden;
white-space: normal;
}
#gamescreenshots_gallery_panel {
display: block;
height: 50px;
margin-bottom: 10px;
white-space: nowrap;
}
.gamescreenshosts_gallery_item {
@@ -225,4 +263,57 @@ input[id='filter_panel_search'] {
height: 50px;
width: 70px;
margin-right: 10px;
white-space: nowrap;
border-color: black;
border-style: solid;
border-width: 2px;
}
.gamescreenshots_arrows {
margin-top: 140px;
height: 50px;
width: 30px;
font-size: 40px;
background-color: #383838;
color: black;
text-align: center;
user-select: none; /* standard syntax */
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
.gamescreenshots_arrows:hover {
cursor: pointer;
background-color: #555;
}
#gamescreenshots_left_arrow {
float: left;
}
#gamescreenshots_right_arrow {
float: right;
}
.gamescreenshosts_gallery_item:hover {
border-color: lightblue;
}
.gamescreenshosts_gallery_item_selected {
border-color: white;
}
#gamesummarytext_label {
}
.line-clamp-4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
/* truncate to 4 lines */
-webkit-line-clamp: 4;
}