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

Library filtering and display enhancements (#214)

Browse Source 
* Implement infinite scrolling and paging (selected via preference) (closes #202)
* Display game counts on more filter types (closes #194)
* Make game counts larger (closes #194)
* Include age groups in filtering (closes #200)
* Add sorting options (closes #145)
This commit is contained in:
Michael Green
2023-12-07 13:20:53 +11:00
committed by GitHub
parent 9288eb8f12
commit e7239c428b
32 changed files with 1659 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
gaseous-server/wwwroot/.DS_Store vendored
View File

Binary file not shown.

2
gaseous-server/wwwroot/index.html
View File

@@ -5,7 +5,7 @@
<script src="/api/v1.1/System/VersionFile"></script>
<link type="text/css" rel="stylesheet" dat-href="/styles/style.css" />
<script src="/scripts/jquery-3.6.0.min.js"></script>
<script src="/scripts/moment.js"></script>
<script src="/scripts/moment-with-locales.min.js"></script>
<link href="/styles/select2.min.css" rel="stylesheet" />
<link href="/styles/dropzone.min.css" rel="stylesheet" type="text/css" />
<script src="/scripts/jquery.lazy.min.js"></script>

193
gaseous-server/wwwroot/pages/dialogs/userprofile.html
View File

@@ -1,8 +1,79 @@
<div id="properties_toc">
<div id="properties_profile_toc_general" name="properties_profile_toc_item" onclick="ProfileSelectTab('general');">Account</div>
<div id="properties_profile_toc_general" name="properties_profile_toc_item" onclick="ProfileSelectTab('general');">Preferences</div>
<div id="properties_profile_toc_account" name="properties_profile_toc_item" onclick="ProfileSelectTab('account');">Account</div>
</div>
<div id="properties_bodypanel">
<div id="properties_bodypanel_general" name="properties_profile_tab" style="display: none;">
<h3>Game Library</h3>
<table style="width: 100%;">
<tr>
<th>
Library
</th>
</tr>
<tr>
<td>
Pagination mode:
</td>
</tr>
<tr>
<td>
<select id="profile_pref-LibraryPagination" data-pref="LibraryPagination" onchange="SavePrefValue_Value(this);">
<option value="infinite">Infinite scrolling</option>
<option value="paged">Paged</option>
</select>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<th>
Game Icons
</th>
</tr>
<tr>
<td>
<input type="checkbox" id="profile_pref_LibraryShowGameTitle" data-pref="LibraryShowGameTitle" onchange="SavePrefValue_Checkbox(this);"><label for="profile_pref_LibraryShowGameTitle"> Show title</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="profile_pref_LibraryShowGameRating" data-pref="LibraryShowGameRating" onchange="SavePrefValue_Checkbox(this);"><label for="profile_pref_LibraryShowGameRating"> Show rating</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="profile_pref_LibraryShowGameClassification" data-pref="LibraryShowGameClassification" onchange="SavePrefValue_Checkbox(this);"><label for="profile_pref_LibraryShowGameClassification"> Show age classification badges</label>
</td>
</tr>
<tr>
<td>
<table id="profile_pref_LibraryClassificationBadgeSelect">
<tr>
<td>Use classification badges from:</td>
</tr>
<tr>
<td>
<select id="profile_pref_LibraryPrimaryClassificationBadge" data-primary="primary" onchange="SavePrefValue_ClassBadge(this);">
</select>
</td>
</tr>
<tr>
<td>Fallback to classification badges from:</td>
</tr>
<tr>
<td>
<select id="profile_pref_LibraryFallbackClassificationBadge" onchange="SavePrefValue_ClassBadge(this);">
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="properties_bodypanel_account" name="properties_profile_tab" style="display: none;">
<h3>Reset Password</h3>
<table style="width: 100%;">
<tr>
@@ -55,6 +126,125 @@
}
}
function GetPrefInitialValues() {
var paginationMode = document.getElementById('profile_pref-LibraryPagination');
paginationMode.value = GetPreference('LibraryPagination', 'infinite');
ConfigurePrefInitialValue_Checkbox("LibraryShowGameTitle", GetPreference("LibraryShowGameTitle", true));
ConfigurePrefInitialValue_Checkbox("LibraryShowGameRating", GetPreference("LibraryShowGameRating", true));
ConfigurePrefInitialValue_Checkbox("LibraryShowGameClassification", GetPreference("LibraryShowGameClassification", true));
var primary = document.getElementById('profile_pref_LibraryPrimaryClassificationBadge');
var secondary = document.getElementById('profile_pref_LibraryFallbackClassificationBadge');
PopulateClassificationMenus(primary);
PopulateClassificationMenus(secondary, true);
var classificationOrder = JSON.parse(GetPreference("LibraryGameClassificationDisplayOrder", JSON.stringify([ "ESRB" ])));
primary.value = classificationOrder[0];
if (classificationOrder[1]) {
secondary.value = classificationOrder[1];
}
for (var i = 0; i < secondary.childNodes.length; i++) {
if (secondary.childNodes[i].value == primary.value) {
secondary.childNodes[i].setAttribute('disabled', 'disabled');
} else {
secondary.childNodes[i].removeAttribute('disabled');
}
}
}
function PopulateClassificationMenus(targetSelector, IsSecondary) {
targetSelector.innerHTML = '';
if (IsSecondary == true) {
var defaultOpt = document.createElement('option');
defaultOpt.value = '-';
defaultOpt.innerHTML = 'None';
targetSelector.appendChild(defaultOpt);
}
for (const [key, value] of Object.entries(ClassificationBoards)) {
var opt = document.createElement('option');
opt.value = key;
opt.innerHTML = value;
targetSelector.appendChild(opt);
}
}
function ConfigurePrefInitialValue_Checkbox(ValueName, ValueSetting) {
var valueCheckbox = document.getElementById("profile_pref_" + ValueName);
if (ValueSetting == "true" || ValueSetting == true) {
valueCheckbox.checked = true;
updateDisplay(ValueName, true);
} else {
valueCheckbox.checked = false;
updateDisplay(ValueName, false);
}
}
function SavePrefValue_Checkbox(e) {
var ValueName = e.getAttribute("data-pref");
SetPreference(ValueName, e.checked);
updateDisplay(ValueName, e.checked);
executeFilter1_1(1);
}
function SavePrefValue_Value(e) {
var ValueName = e.getAttribute("data-pref");
SetPreference(ValueName, e.value);
executeFilter1_1(1);
}
function updateDisplay(ValueName, ValueSetting) {
switch(ValueName) {
case "LibraryShowGameClassification":
var badgeSelector = document.getElementById("profile_pref_LibraryClassificationBadgeSelect");
if (ValueSetting == true || ValueSetting == "true") {
badgeSelector.style.display = '';
} else {
badgeSelector.style.display = 'none';
}
break;
}
}
function SavePrefValue_ClassBadge(e) {
var primary = document.getElementById('profile_pref_LibraryPrimaryClassificationBadge');
var secondary = document.getElementById('profile_pref_LibraryFallbackClassificationBadge');
if (e.getAttribute('data-primary') == 'primary') {
// reset secondary to "none" if the same board is selected in both
if (primary.value == secondary.value) {
secondary.value = '-';
}
// disable in secondary board selected in primary
for (var i = 0; i < secondary.childNodes.length; i++) {
if (secondary.childNodes[i].value == primary.value) {
secondary.childNodes[i].setAttribute('disabled', 'disabled');
} else {
secondary.childNodes[i].removeAttribute('disabled');
}
}
}
// save values
var model = [];
if (secondary.value == '-') {
model = [ primary.value ];
} else {
model = [ primary.value, secondary.value ];
}
SetPreference('LibraryGameClassificationDisplayOrder', JSON.stringify(model));
executeFilter1_1(1);
}
function checkPasswordsMatch() {
var oldPassword = document.getElementById('profile_oldpassword').value;
var newPassword = document.getElementById('profile_newpassword').value;
@@ -129,4 +319,5 @@
}
ProfileSelectTab('general');
GetPrefInitialValues();
</script>

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

@@ -35,6 +35,9 @@
<div id="gamesummary">
<div id="gamesummary_cover"></div>
<div id="gamesummary_firstrelease">
<h3>First Released</h3>
</div>
<div id="gamesumarry_genres">
<h3>Genres</h3>
</div>
@@ -83,6 +86,10 @@
</div>
</div>
</div>
<div id="gamesummarysimilar">
<h3>Similar Games</h3>
<div id="gamesummarysimilarcontent"></div>
</div>
</div>
</div>
@@ -234,6 +241,16 @@
}
gameSummaryCover.appendChild(gameImage);
// load release date
var gameSummaryRelease = document.getElementById('gamesummary_firstrelease');
if (result.firstReleaseDate) {
var firstRelease = document.createElement('p');
firstRelease.innerHTML = '<p>' + moment(result.firstReleaseDate).format('LL') + ' (' + moment(result.firstReleaseDate).fromNow() + ')</p>';
gameSummaryRelease.appendChild(firstRelease);
} else {
gameSummaryRelease.setAttribute('style', 'display: none;');
}
// load ratings
var gameSummaryRatings = document.getElementById('gamesummary_ratings');
if (result.ageRatings) {
@@ -344,6 +361,26 @@
gamescreenshots.setAttribute('style', 'display: none;');
}
// load similar
var gameSummarySimilar = document.getElementById('gamesummarysimilar');
ajaxCall('/api/v1.1/Games/' + gameId + '/Related', 'GET', function (result) {
if (result.games.length > 0) {
var gameSummarySimilarContent = document.getElementById('gamesummarysimilar');
for (var i = 0; i < result.games.length; i++) {
var similarObject = renderGameIcon(result.games[i], false, false, false, null, true);
gameSummarySimilarContent.appendChild(similarObject);
}
$('.lazy').Lazy({
scrollDirection: 'vertical',
effect: 'fadeIn',
visibleOnly: true
});
} else {
gameSummarySimilar.setAttribute('style', 'display: none;');
}
});
// load roms
loadRoms();
});

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

@@ -2,9 +2,34 @@
<div id="bgImage_Opacity"></div>
</div>
<div id="games_home">
<div id="games_filter_scroller">
<div id="games_filter"></div>
<div id="games_library"></div>
</div>
<div id="games_home">
<div id="games_home_box">
<div id="games_library_controls">
<div id="games_library_orderby" class="games_library_controlblock">
<span>Order by: </span>
<select id="games_library_orderby_select" onchange="executeFilter1_1();">
<option selected="selected" value="NameThe">Name, The</option>
<option value="Name">Name</option>
<option value="Rating">User Rating</option>
<option value="RatingCount">User Rating Count</option>
</select>
<select id="games_library_orderby_direction_select" onchange="executeFilter1_1();">
<option selected="selected" value="Ascending">Ascending</option>
<option value="Descending">Descending</option>
</select>
</div>
<div id="games_library_recordcount" class="games_library_controlblock"></div>
</div>
<div id="games_library"></div>
<div id="games_library_pagerstore" style="display: none;">0</div>
</div>
</div>
<div id="games_pager" style="display: none;">
&lt; 1 2 3 4 5 &gt;
</div>
<script type="text/javascript">

203
gaseous-server/wwwroot/scripts/filterformating.js
View File

@@ -19,9 +19,25 @@
panel.appendChild(containerPanelSearch);
panel.appendChild(buildFilterPanelHeader('userrating', 'User Rating'));
panel.appendChild(buildFilterPanelHeader('userrating', 'User Rating', true, false));
var containerPanelUserRating = document.createElement('div');
containerPanelUserRating.id = 'filter_panel_box_userrating';
containerPanelUserRating.className = 'filter_panel_box';
var containerPanelUserRatingCheckBox = document.createElement('input');
containerPanelUserRatingCheckBox.id = 'filter_panel_userrating_enabled';
containerPanelUserRatingCheckBox.type = 'checkbox';
containerPanelUserRatingCheckBox.setAttribute('oninput', 'executeFilterDelayed();');
var ratingEnabledCookie = getCookie('filter_panel_userrating_enabled');
if (ratingEnabledCookie) {
if (ratingEnabledCookie == "true") {
containerPanelUserRatingCheckBox.checked = true;
} else {
containerPanelUserRatingCheckBox.checked = false;
}
}
containerPanelUserRating.appendChild(containerPanelUserRatingCheckBox);
var containerPanelUserRatingMinField = document.createElement('input');
var minRatingCookie = getCookie('filter_panel_userrating_min');
if (minRatingCookie) {
@@ -72,7 +88,23 @@
buildFilterPanel(panel, 'theme', 'Themes', result.themes, true, false);
}
if (result.agegroupings) {
if (result.agegroupings.length > 1) {
buildFilterPanel(panel, 'agegroupings', 'Age Groups', result.agegroupings, true, false);
}
}
targetElement.appendChild(panel);
// set order by values
var orderByCookie = getCookie('games_library_orderby_select');
if (orderByCookie) {
document.getElementById('games_library_orderby_select').value = orderByCookie;
}
var orderByDirectionCookie = getCookie('games_library_orderby_direction_select');
if (orderByDirectionCookie) {
document.getElementById('games_library_orderby_direction_select').value = orderByDirectionCookie;
}
}
function buildFilterPanel(targetElement, headerString, friendlyHeaderString, valueList, showToggle, initialDisplay) {
@@ -80,7 +112,6 @@ function buildFilterPanel(targetElement, headerString, friendlyHeaderString, val
var displayCookie = getCookie('filter_panel_box_' + headerString);
if (displayCookie) {
initialDisplay = (displayCookie === 'true');
console.log(displayCookie);
}
targetElement.appendChild(buildFilterPanelHeader(headerString, friendlyHeaderString, showToggle, initialDisplay));
@@ -92,14 +123,13 @@ function buildFilterPanel(targetElement, headerString, friendlyHeaderString, val
}
for (var i = 0; i < valueList.length; i++) {
var tags;
switch(headerString) {
case 'platform':
tags = [
{
'label': valueList[i].gameCount
}
];
break;
if (valueList[i].gameCount) {
tags = [
{
'label': valueList[i].gameCount
}
];
}
containerPanel.appendChild(buildFilterPanelItem(headerString, valueList[i].id, valueList[i].name, tags));
}
@@ -201,85 +231,6 @@ function executeFilterDelayed() {
filterExecutor = setTimeout(executeFilter1_1, 1000);
}
function executeFilter() {
// build filter lists
var queries = [];
var platforms = '';
var genres = '';
var searchString = document.getElementById('filter_panel_search');
if (searchString.value.length > 0) {
queries.push('name=' + searchString.value);
}
setCookie(searchString.id, searchString.value);
var minUserRating = 0;
var minUserRatingInput = document.getElementById('filter_panel_userrating_min');
if (minUserRatingInput.value) {
minUserRating = minUserRatingInput.value;
queries.push('minrating=' + minUserRating);
}
setCookie(minUserRatingInput.id, minUserRatingInput.value);
var maxUserRating = 100;
var maxUserRatingInput = document.getElementById('filter_panel_userrating_max');
if (maxUserRatingInput.value) {
maxUserRating = maxUserRatingInput.value;
queries.push('maxrating=' + maxUserRating);
}
setCookie(maxUserRatingInput.id, maxUserRatingInput.value);
queries.push(GetFilterQuery('platform'));
queries.push(GetFilterQuery('genre'));
queries.push(GetFilterQuery('gamemode'));
queries.push(GetFilterQuery('playerperspective'));
queries.push(GetFilterQuery('theme'));
var queryString = '';
for (var i = 0; i < queries.length; i++) {
if (queries[i].length > 0) {
if (queryString.length == 0) {
queryString = '?';
} else {
queryString += '&';
}
queryString += queries[i];
}
}
console.log('Query string = ' + queryString);
ajaxCall('/api/v1.0/Games' + queryString, 'GET', function (result) {
var gameElement = document.getElementById('games_library');
formatGamesPanel(gameElement, result);
});
}
function GetFilterQuery(filterName) {
var Filters = document.getElementsByName('filter_' + filterName);
var queryString = '';
for (var i = 0; i < Filters.length; i++) {
if (Filters[i].checked) {
setCookie(Filters[i].id, true);
if (queryString.length > 0) {
queryString += ',';
}
queryString += Filters[i].getAttribute('filter_id');
} else {
setCookie(Filters[i].id, false);
}
}
if (queryString.length > 0) {
queryString = filterName + '=' + queryString;
}
return queryString;
}
function buildFilterTag(tags) {
// accepts an array of numbers + classes for styling (optional)
// example [ { label: "G: 13", class: "tag_Green" }, { label: "R: 17", class: "tag_Orange" } ]
@@ -301,12 +252,23 @@ function buildFilterTag(tags) {
return boundingDiv;
}
function executeFilter1_1() {
console.log("Execute filter 1.1");
function executeFilter1_1(pageNumber, pageSize) {
if (!pageNumber) {
pageNumber = 1;
}
if (!pageSize) {
pageSize = 30;
}
// user ratings
var userRatingEnabled = document.getElementById('filter_panel_userrating_enabled');
var minUserRating = -1;
var minUserRatingInput = document.getElementById('filter_panel_userrating_min');
if (minUserRatingInput.value) {
minUserRating = minUserRatingInput.value;
userRatingEnabled.checked = true;
}
setCookie(minUserRatingInput.id, minUserRatingInput.value);
@@ -314,15 +276,51 @@ function executeFilter1_1() {
var maxUserRatingInput = document.getElementById('filter_panel_userrating_max');
if (maxUserRatingInput.value) {
maxUserRating = maxUserRatingInput.value;
userRatingEnabled.checked = true;
}
setCookie(maxUserRatingInput.id, maxUserRatingInput.value);
if (minUserRating == -1 && maxUserRating == -1) {
userRatingEnabled.checked = false;
}
if (userRatingEnabled.checked == false) {
setCookie("filter_panel_userrating_enabled", false);
minUserRating = -1;
minUserRatingInput.value = "";
setCookie(minUserRatingInput.id, minUserRatingInput.value);
maxUserRating = -1;
maxUserRatingInput.value = "";
setCookie(maxUserRatingInput.id, maxUserRatingInput.value);
} else {
setCookie("filter_panel_userrating_enabled", true);
}
// get order by
var orderBy = document.getElementById('games_library_orderby_select').value;
setCookie('games_library_orderby_select', orderBy);
var orderByDirection = true;
var orderByDirectionSelect = document.getElementById('games_library_orderby_direction_select').value;
if (orderByDirectionSelect == "Ascending") {
orderByDirection = true;
} else {
orderByDirection = false;
}
setCookie('games_library_orderby_direction_select', orderByDirectionSelect);
// build filter model
var ratingAgeGroups = GetFilterQuery1_1('agegroupings');
var ratingIncludeUnrated = false;
if (ratingAgeGroups.includes("0")) {
ratingIncludeUnrated = true;
}
var model = {
"Name": document.getElementById('filter_panel_search').value,
"Platform": GetFilterQuery1_1('platform'),
"Genre": GetFilterQuery1_1('genre'),
"GameMode": GetFilterQuery1_1('gamemmode'),
"GameMode": GetFilterQuery1_1('gamemode'),
"PlayerPerspective": GetFilterQuery1_1('playerperspective'),
"Theme": GetFilterQuery1_1('theme'),
"GameRating": {
@@ -330,31 +328,24 @@ function executeFilter1_1() {
"MinimumRatingCount": -1,
"MaximumRating": maxUserRating,
"MaximumRatingCount": -1,
"IncludeUnrated": true
"IncludeUnrated": !userRatingEnabled
},
"GameAgeRating": {
"AgeGroupings": [
"Child",
"Teen",
"Mature",
"Adult"
],
"IncludeUnrated": true
"AgeGroupings": ratingAgeGroups,
"IncludeUnrated": ratingIncludeUnrated
},
"Sorting": {
"SortBy": "NameThe",
"SortAscenting": true
"SortBy": orderBy,
"SortAscending": orderByDirection
}
};
console.log('Search model = ' + JSON.stringify(model));
ajaxCall(
'/api/v1.1/Games',
'/api/v1.1/Games?pageNumber=' + pageNumber + '&pageSize=' + pageSize,
'POST',
function (result) {
var gameElement = document.getElementById('games_library');
formatGamesPanel(gameElement, result);
formatGamesPanel(gameElement, result, pageNumber, pageSize);
},
function (error) {
console.log('An error occurred: ' + JSON.stringify(error));

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

@@ -1,31 +1,230 @@
function formatGamesPanel(targetElement, result) {
targetElement.innerHTML = '';
for (var i = 0; i < result.length; i++) {
var game = renderGameIcon(result[i], true, false);
targetElement.appendChild(game);
var ClassificationBoards = {
"ESRB": "Entertainment Software Rating Board (ESRB)",
"PEGI": "Pan European Game Information (PEGI)",
"CERO": "Computer Entertainment Rating Organisation (CERO)",
"USK": "Unterhaltungssoftware Selbstkontrolle (USK)",
"GRAC": "Game Rating and Administration Committee (GRAC)",
"CLASS_IND": "Brazilian advisory rating system",
"ACB": "Australian Classification Board (ACB)"
};
function formatGamesPanel(targetElement, result, pageNumber, pageSize) {
console.log("Displaying page: " + pageNumber);
console.log("Page size: " + pageSize);
var pageMode = GetPreference('LibraryPagination', 'infinite');
if (pageNumber == 1 || pageMode == 'paged') {
targetElement.innerHTML = '';
}
$('.lazy').Lazy({
scrollDirection: 'vertical',
effect: 'fadeIn',
visibleOnly: true
});
var pagerCheck = document.getElementById('games_library_pagerstore');
if (pageNumber == 1) {
pagerCheck.innerHTML = "0";
}
if (pageNumber > Number(pagerCheck.innerHTML) || pageMode == 'paged') {
pagerCheck.innerHTML = pageNumber;
document.getElementById('games_library_recordcount').innerHTML = result.count + ' games';
var existingLoadPageButton = document.getElementById('games_library_loadmore');
if (existingLoadPageButton) {
existingLoadPageButton.parentNode.removeChild(existingLoadPageButton);
}
// setup preferences
var showTitle = GetPreference("LibraryShowGameTitle", true);
var showRatings = GetPreference("LibraryShowGameRating", true);
var showClassification = GetPreference("LibraryShowGameClassification", true);
var classificationDisplayOrderString = GetPreference("LibraryGameClassificationDisplayOrder", JSON.stringify([ "ESRB" ]));
var classificationDisplayOrder = JSON.parse(classificationDisplayOrderString);
if (showTitle == "true") { showTitle = true; } else { showTitle = false; }
if (showRatings == "true") { showRatings = true; } else { showRatings = false; }
if (showClassification == "true") { showClassification = true; } else { showClassification = false; }
for (var i = 0; i < result.games.length; i++) {
var game = renderGameIcon(result.games[i], showTitle, showRatings, showClassification, classificationDisplayOrder, false);
targetElement.appendChild(game);
}
$('.lazy').Lazy({
scrollDirection: 'vertical',
effect: 'fadeIn',
visibleOnly: true
});
var pager = document.getElementById('games_pager');
pager.style.display = 'none';
switch(pageMode) {
case 'infinite':
if (result.games.length == pageSize) {
var loadPageButton = document.createElement("div");
loadPageButton.id = 'games_library_loadmore';
loadPageButton.innerHTML = 'Load More';
loadPageButton.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber + 1) + ', ' + pageSize + ');');
loadPageButton.setAttribute('data-pagenumber', Number(pageNumber + 1));
loadPageButton.setAttribute('data-pagesize', pageSize);
targetElement.appendChild(loadPageButton);
}
break;
case 'paged':
if (result.count > pageSize) {
// add some padding to the bottom of the games list
var loadPageButton = document.createElement("div");
loadPageButton.id = 'games_library_padding';
targetElement.appendChild(loadPageButton);
var pageCount = Math.ceil(result.count / pageSize);
// add previous page button
var prevPage = document.createElement('span');
prevPage.innerHTML = '&lt;';
if (pageNumber == 1) {
prevPage.className = 'games_pager_number_disabled';
} else {
prevPage.className = 'games_pager_number';
prevPage.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber - 1) + ');');
}
// add page numbers
var pageNumbers = document.createElement('span');
for (var i = 1; i <= pageCount; i++) {
var pageNum = document.createElement('span');
if (Number(pagerCheck.innerHTML) == i) {
pageNum.className = 'games_pager_number_disabled';
} else {
pageNum.className = 'games_pager_number';
pageNum.setAttribute('onclick', 'executeFilter1_1(' + i + ');');
}
pageNum.innerHTML = i;
pageNumbers.appendChild(pageNum);
}
// add next page button
var nextPage = document.createElement('span');
nextPage.innerHTML = '&gt;';
if (pageNumber == pageCount) {
nextPage.className = 'games_pager_number_disabled';
} else {
nextPage.className = 'games_pager_number';
nextPage.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber + 1) + ');');
}
pager.innerHTML = '';
pager.appendChild(prevPage);
pager.appendChild(pageNumbers);
pager.appendChild(nextPage);
pager.style.display = '';
}
break;
}
}
}
function renderGameIcon(gameObject, showTitle, showRatings) {
function isScrolledIntoView(elem) {
if (elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
}
function IsInView() {
var loadElement = document.getElementById('games_library_loadmore');
if (loadElement) {
if (isScrolledIntoView(loadElement)) {
var pageNumber = Number(document.getElementById('games_library_loadmore').getAttribute('data-pagenumber'));
var pageSize = document.getElementById('games_library_loadmore').getAttribute('data-pagesize');
executeFilter1_1(pageNumber, pageSize);
}
}
}
$(window).scroll(IsInView);
function renderGameIcon(gameObject, showTitle, showRatings, showClassification, classificationDisplayOrder, useSmallCover) {
var gameBox = document.createElement('div');
gameBox.className = 'game_tile';
gameBox.id = "game_tile_" + gameObject.id;
if (useSmallCover == true) {
gameBox.className = 'game_tile game_tile_small';
} else {
gameBox.className = 'game_tile';
}
gameBox.setAttribute('onclick', 'window.location.href = "/index.html?page=game&id=' + gameObject.id + '";');
var gameImageBox = document.createElement('div');
gameImageBox.className = 'game_tile_box';
var gameImage = document.createElement('img');
gameImage.className = 'game_tile_image lazy';
if (useSmallCover == true) {
gameImage.className = 'game_tile_image game_tile_image_small lazy';
} else {
gameImage.className = 'game_tile_image lazy';
}
gameImage.src = '/images/unknowngame.png';
if (gameObject.cover) {
gameImage.setAttribute('data-src', '/api/v1.1/Games/' + gameObject.id + '/cover/image');
} else {
gameImage.src = '/images/unknowngame.png';
gameImage.className = 'game_tile_image unknown';
}
gameBox.appendChild(gameImage);
gameImageBox.appendChild(gameImage);
var classificationPath = '';
var displayClassification = false;
var shownClassificationBoard = '';
if (showClassification == true) {
for (var b = 0; b < classificationDisplayOrder.length; b++) {
if (shownClassificationBoard == '') {
for (var c = 0; c < gameObject.ageRatings.length; c++) {
if (gameObject.ageRatings[c].category == classificationDisplayOrder[b]) {
shownClassificationBoard = classificationDisplayOrder[b];
displayClassification = true;
classificationPath = '/api/v1.1/Ratings/Images/' + classificationDisplayOrder[b] + '/' + getKeyByValue(AgeRatingStrings, gameObject.ageRatings[c].rating) + '/image.svg';
}
}
} else {
break;
}
}
}
if (gameObject.totalRating || displayClassification == true) {
var gameImageRatingBanner = document.createElement('div');
gameImageRatingBanner.className = 'game_tile_box_ratingbanner';
if (showRatings == true || displayClassification == true) {
if (showRatings == true) {
if (gameObject.totalRating) {
var gameImageRatingBannerLogo = document.createElement('img');
gameImageRatingBannerLogo.src = '/images/IGDB_logo.svg';
gameImageRatingBannerLogo.setAttribute('style', 'filter: invert(100%); height: 10px; margin-right: 5px; padding-top: 4px;');
gameImageRatingBanner.appendChild(gameImageRatingBannerLogo);
var gameImageRatingBannerValue = document.createElement('span');
gameImageRatingBannerValue.innerHTML = Math.floor(gameObject.totalRating) + '% / ' + gameObject.totalRatingCount;
gameImageRatingBanner.appendChild(gameImageRatingBannerValue);
}
}
gameImageBox.appendChild(gameImageRatingBanner);
if (displayClassification == true) {
var gameImageClassificationLogo = document.createElement('img');
gameImageClassificationLogo.src = classificationPath;
gameImageClassificationLogo.className = 'rating_image_overlay';
gameImageBox.appendChild(gameImageClassificationLogo);
}
}
}
gameBox.appendChild(gameImageBox);
if (showTitle == true) {
var gameBoxTitle = document.createElement('div');
@@ -34,19 +233,5 @@ function renderGameIcon(gameObject, showTitle, showRatings) {
gameBox.appendChild(gameBoxTitle);
}
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.1/Games/' + gameObject.id + '/agerating/' + gameObject.ageRatings.ids[i] + '/image';
ratingImage.className = 'rating_image_mini';
ratingsSection.appendChild(ratingImage);
}
gameBox.appendChild(ratingsSection);
}
}
return gameBox;
}

62
gaseous-server/wwwroot/scripts/main.js
View File

@@ -1,4 +1,8 @@
function ajaxCall(endpoint, method, successFunction, errorFunction, body) {
var locale = window.navigator.userLanguage || window.navigator.language;
console.log(locale);
moment.locale(locale);
function ajaxCall(endpoint, method, successFunction, errorFunction, body) {
$.ajax({
// Our sample url to make request
@@ -409,4 +413,60 @@ function GetTaskFriendlyName(TaskName, options) {
default:
return TaskName;
}
}
function getKeyByValue(object, value) {
return Object.keys(object).find(key => object[key] === value);
}
function GetPreference(Setting, DefaultValue) {
if (userProfile.userPreferences) {
for (var i = 0; i < userProfile.userPreferences.length; i++) {
if (userProfile.userPreferences[i].setting == Setting) {
return userProfile.userPreferences[i].value.toString();
}
}
}
SetPreference(Setting, DefaultValue);
return DefaultValue;
}
function SetPreference(Setting, Value) {
var model = [
{
"setting": Setting,
"value": Value.toString()
}
];
ajaxCall(
'/api/v1.1/Account/Preferences',
'POST',
function(result) {
SetPreference_Local(Setting, Value);
},
function(error) {
SetPreference_Local(Setting, Value);
},
JSON.stringify(model)
);
}
function SetPreference_Local(Setting, Value) {
if (userProfile.userPreferences) {
var prefFound = false;
for (var i = 0; i < userProfile.userPreferences.length; i++) {
if (userProfile.userPreferences[i].setting == Setting) {
userProfile.userPreferences[i].value = Value;
prefFound = true;
break;
}
}
if (prefFound == false) {
userProfile.userPreferences.push(model);
}
}
}

2
gaseous-server/wwwroot/scripts/moment-with-locales.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

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

@@ -187,12 +187,28 @@ h3 {
z-index: -100;
}
#games_filter_scroller {
position: fixed;
width: 210px;
overflow-y: hidden;
overflow-x: hidden;
overscroll-behavior: contain;
top: 60px;
bottom: 20px;
/* margin-right: 10px; */
}
#games_filter {
width: 200px;
border-style: solid;
/* border-style: solid;
border-width: 1px;
border-color: #2b2b2b;
margin-right: 10px;
border-color: #2b2b2b; */
overflow: hidden;
}
#games_filter_scroller:hover {
overflow-y: auto;
}
.filter_header {
@@ -266,8 +282,51 @@ input[id='filter_panel_userrating_max'] {
}
#games_home {
display: flex;
display: absolute;
margin-left: 210px;
margin-top: 20px;
right: 20px;
}
#games_home_box {
display: relative;
}
#games_pager {
position: fixed;
bottom: 50px;
left: 50%;
transform: translate(-50%, 0);
border-style: solid;
border-width: 1px;
border-radius: 7px;
border-color: rgba(0, 22, 56, 0.8);
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
font-size: 18px;
font-family: Commodore64;
background-color: rgba(0, 22, 56, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
-webkit-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
-moz-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
}
.games_pager_number {
padding: 5px;
}
.games_pager_number:hover {
background-color: blue;
cursor: pointer;
}
.games_pager_number_disabled {
padding: 5px;
color: grey;
}
.filter_panel_item {
@@ -285,18 +344,52 @@ input[id='filter_panel_userrating_max'] {
margin-right: 15px;
}
#games_library {
width: 90%;
#games_library_controls {
display: absolute;
border-style: solid;
border-width: 1px;
border-color: #2b2b2b;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
text-align: right;
}
.games_library_controlblock {
margin-left: 20px;
display: inline-block;
}
#games_library {
display: block;
/* width: 90%; */
/* border-style: solid;
border-width: 1px;
border-color: #2b2b2b; */
/* padding: 10px; */
}
#games_library_loadmore {
display: block;
width: 100%;
text-align: center;
padding-top: 10px;
height: 50px;
}
#games_library_padding {
display: block;
width: 100%;
text-align: center;
padding-top: 10px;
height: 100px;
}
.game_tile {
padding: 5px;
display: inline-block;
width: 220px;
min-height: 200px;
align-items: center;
justify-content: center;
text-align: center;
@@ -308,6 +401,12 @@ input[id='filter_panel_userrating_max'] {
border: 1px solid transparent;
}
.game_tile_small {
min-height: 50px;
min-width: 50px;
width: 105px;
}
.game_tile:hover {
cursor: pointer;
text-decoration: underline;
@@ -318,19 +417,57 @@ input[id='filter_panel_userrating_max'] {
border: 1px solid #2b2b2b;
}
.game_tile_image {
.game_tile_small:hover {
cursor: pointer;
text-decoration: underline;
background-color: #2b2b2b;
border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border: 1px solid #2b2b2b;
}
.game_tile_box {
position: relative;
display: inline-block;
max-width: 200px;
max-height: 200px;
}
.game_tile_box_ratingbanner {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
height: 19px;
background-color: rgba(0, 22, 56, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.game_tile_image {
max-width: 200px;
min-width: 150px;
max-height: 200px;
min-height: 200px;
background-color: transparent;
box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
-webkit-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
-moz-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
}
.game_tile_image, .unknown {
background-color: white;
background-color: transparent;
}
.game_tile_image_small {
min-width: 50px;
min-height: 50px;
max-width: 100px;
max-height: 100px;
}
@@ -408,10 +545,18 @@ input[id='filter_panel_userrating_max'] {
}
.rating_image_mini {
display: inline-block;
max-width: 32px;
max-height: 32px;
margin-right: 10px;
margin-right: 5px;
margin-bottom: 5px;
}
.rating_image_overlay {
position: absolute;
max-width: 32px;
max-height: 32px;
left: 5px;
bottom: 5px;
}
#gamescreenshots {
@@ -947,7 +1092,7 @@ button:disabled {
top: 0px;
right: 0px;
text-align: center;
font-size: 8px;
font-size: 10px;
}
.tagBoxItem {