diff --git a/gaseous-server/wwwroot/pages/game.html b/gaseous-server/wwwroot/pages/game.html index 82ed2b3..b36b000 100644 --- a/gaseous-server/wwwroot/pages/game.html +++ b/gaseous-server/wwwroot/pages/game.html @@ -1,6 +1,9 @@ 
+
- +

+ +
@@ -9,12 +12,22 @@
-

-
- +
+
<
+
>
+
+
+ +
+
+ + + +
-
@@ -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); + } \ No newline at end of file diff --git a/gaseous-server/wwwroot/styles/style.css b/gaseous-server/wwwroot/styles/style.css index 4715c9a..33cf6cd 100644 --- a/gaseous-server/wwwroot/styles/style.css +++ b/gaseous-server/wwwroot/styles/style.css @@ -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; } \ No newline at end of file