Files
gaseous-server/gaseous-server/wwwroot/pages/game.html
Michael Green c396a81c1b Implement Bulk Change Function (#44)
* feat: added Sega 32X and Sega CD mappings

* feat: added lazy loading to the main game library

* fix: using full file name when loading roms into the emulator #43

* feat: introduced bulk rom matching #25

* fix: xss fix
2023-08-04 10:30:22 +10:00

600 lines
26 KiB
HTML

<div id="bgImage">
<div id="bgImage_Opacity"></div>
</div>
<div id="gamepage">
<div id="gametitle">
<h1 id="gametitle_label"></h1>
<p id="gamedeveloper_label"></p>
<p id="gametitle_alts">
<span>Also known as: </span><span id="gametitle_alts_label"></span>
</p>
</div>
<div id="gamesummary">
<div id="gamesummary_cover"></div>
<div id="gamesumarry_genres">
<h3>Genres</h3>
</div>
<div id="gamesummary_developer">
<h3>Developers</h3>
</div>
<div id="gamesummary_publishers">
<h3>Publishers</h3>
</div>
<div id="gamesummary_ratings">
<h3>Age Ratings</h3>
</div>
</div>
<div id="mainbody">
<div id="gamescreenshots">
<div id="gamescreenshots_portal">
<div id="gamescreenshots_left_arrow" onclick="selectScreenshot_Prev();" class="gamescreenshots_arrows">&lt;</div>
<div id="gamescreenshots_right_arrow" 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="gamesummaryroms">
<span id="rom_edit" class="romlink" onclick="DisplayROMCheckboxes(true);">Edit</span>
<h3>ROM's/Images</h3>
<div id="rom_edit_panel" style="display: none;">
<div id="rom_edit_panel_center">
<button id="rom_edit_delete" class="redbutton" onclick="deleteGameRoms();">Delete</button>
<select id="rom_edit_fixplatform" style="width: 150px;"></select>
<select id="rom_edit_fixgame" style="width: 300px;"></select>
<button id="rom_edit_update" onclick="remapTitles();">Update</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var gameId = getQueryString('id', 'int');
var gameData;
var artworks = null;
var artworksPosition = 0;
var artworksTimer = null;
var selectedScreenshot = 0;
ajaxCall('/api/v1/Games/' + gameId, 'GET', function (result) {
// populate games page
gameData = result;
// get name
var gameTitleLabel = document.getElementById('gametitle_label');
gameTitleLabel.innerHTML = result.name;
// get alt name
var gameTitleAltLabel = document.getElementById('gametitle_alts');
if (result.alternativeNames) {
ajaxCall('/api/v1/Games/' + gameId + '/alternativename', 'GET', function (result) {
var altNames = '';
for (var i = 0; i < result.length; i++) {
if (altNames.length > 0) {
altNames += ', ';
}
altNames += result[i].name;
}
var gameTitleAltLabelText = document.getElementById('gametitle_alts_label');
gameTitleAltLabelText.innerHTML = altNames;
});
} else {
gameTitleAltLabel.setAttribute('style', 'display: none;');
}
// 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;
}
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;');
}
// load artwork
if (result.artworks) {
artworks = result.artworks.ids;
var startPos = randomIntFromInterval(0, result.artworks.ids.length);
artworksPosition = startPos;
rotateBackground();
} else {
if (result.cover) {
var bg = document.getElementById('bgImage');
bg.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/cover/image"); background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(10px); -webkit-filter: blur(10px);');
}
}
// load companies
var gameHeaderDeveloperLabel = document.getElementById('gamedeveloper_label');
var gameDeveloperLabel = document.getElementById('gamesummary_developer');
var gamePublisherLabel = document.getElementById('gamesummary_publishers');
var gameDeveloperLoaded = false;
var gamePublisherLoaded = false;
if (result.involvedCompanies) {
ajaxCall('/api/v1/games/' + gameId + '/companies', 'GET', function (result) {
var lstDevelopers = [];
var lstPublishers = [];
for (var i = 0; i < result.length; i++) {
var companyLabel = document.createElement('span');
companyLabel.className = 'gamegenrelabel';
companyLabel.innerHTML = result[i].company.name;
if (result[i].involvement.developer == true) {
if (!lstDevelopers.includes(result[i].company.name)) {
if (gameHeaderDeveloperLabel.innerHTML.length > 0) {
gameHeaderDeveloperLabel += ", ";
}
gameHeaderDeveloperLabel.innerHTML += result[i].company.name;
gameDeveloperLabel.appendChild(companyLabel);
lstDevelopers.push(result[i].company.name);
gameDeveloperLoaded = true;
}
} else {
if (result[i].involvement.publisher == true) {
if (!lstPublishers.includes(result[i].company.name)) {
lstPublishers.push(result[i].company.name);
gamePublisherLabel.appendChild(companyLabel);
gamePublisherLoaded = true;
}
}
}
}
if (gameDeveloperLoaded == false) {
gameHeaderDeveloperLabel.setAttribute('style', 'display: none;');
gameDeveloperLabel.setAttribute('style', 'display: none;');
}
if (gamePublisherLoaded == false) {
gamePublisherLabel.setAttribute('style', 'display: none;');
}
});
} else {
gameHeaderDeveloperLabel.setAttribute('style', 'display: none;');
gameDeveloperLabel.setAttribute('style', 'display: none;');
gamePublisherLabel.setAttribute('style', 'display: none;');
}
// load cover
var gameSummaryCover = document.getElementById('gamesummary_cover');
var gameImage = document.createElement('img');
gameImage.className = 'game_cover_image';
if (result.cover) {
gameImage.src = '/api/v1/Games/' + result.id + '/cover/image';
} else {
gameImage.src = '/images/unknowngame.png';
gameImage.className = 'game_cover_image unknown';
}
gameSummaryCover.appendChild(gameImage);
// load ratings
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);
}
gameSummaryRatings.appendChild(gameRatings);
} else {
gameSummaryRatings.setAttribute('style', 'display: none;');
}
// load genres
var gameSummaryGenres = document.getElementById('gamesumarry_genres');
if (result.genres) {
ajaxCall('/api/v1/Games/' + gameId + '/genre', 'GET', function (result) {
for (var i = 0; i < result.length; i++) {
var genreLabel = document.createElement('span');
genreLabel.className = 'gamegenrelabel';
genreLabel.innerHTML = result[i].name;
gameSummaryGenres.appendChild(genreLabel);
}
});
} else {
gameSummaryGenres.setAttribute('style', 'display: none;');
}
// load screenshots
var gameScreenshots = document.getElementById('gamescreenshots');
if (result.screenshots || result.videos) {
var gameScreenshots_Main = document.getElementById('gamescreenshots_main');
// load static screenshots
var gameScreenshots_Gallery = document.getElementById('gamescreenshots_gallery_panel');
var imageIndex = 0;
if (result.videos) {
imageIndex = result.videos.ids.length;
}
if (result.screenshots) {
for (var i = 0; i < result.screenshots.ids.length; i++) {
var screenshotItem = document.createElement('div');
screenshotItem.id = 'gamescreenshots_gallery_' + imageIndex;
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.setAttribute('imageid', imageIndex);
screenshotItem.setAttribute('imagetype', 0);
screenshotItem.className = 'gamescreenshots_gallery_item';
screenshotItem.setAttribute('onclick', 'selectScreenshot(' + imageIndex + ');');
gameScreenshots_Gallery.appendChild(screenshotItem);
imageIndex += 1;
}
}
// load videos
if (result.videos) {
ajaxCall('/api/v1/Games/' + gameId + '/videos', 'GET', function (result) {
var gameScreenshots_vGallery = document.getElementById('gamescreenshots_gallery_panel');
for (var i = 0; i < result.length; i++) {
var vScreenshotItem = document.createElement('div');
vScreenshotItem.id = 'gamescreenshots_gallery_' + i;
vScreenshotItem.setAttribute('name', 'gamescreenshots_gallery_item');
vScreenshotItem.setAttribute('style', 'background-image: url("https://i.ytimg.com/vi/' + result[i].videoId + '/hqdefault.jpg"); background-position: center; background-repeat: no-repeat; background-size: contain;)');
vScreenshotItem.setAttribute('imageid', i);
vScreenshotItem.setAttribute('imagetype', 1);
vScreenshotItem.setAttribute('imageref', result[i].videoId);
vScreenshotItem.className = 'gamescreenshots_gallery_item';
vScreenshotItem.setAttribute('onclick', 'selectScreenshot(' + i + ');');
var youtubeIcon = document.createElement('img');
youtubeIcon.src = '/images/YouTube.svg';
youtubeIcon.className = 'gamescreenshosts_gallery_item_youtube';
vScreenshotItem.appendChild(youtubeIcon);
gameScreenshots_vGallery.insertBefore(vScreenshotItem, gameScreenshots_vGallery.firstChild);
}
// sort items
var items = gameScreenshots_vGallery.childNodes;
var itemsArr = [];
for (var i in items) {
if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
itemsArr.push(items[i]);
}
}
itemsArr.sort(function (a, b) {
return Number(a.getAttribute('imageid')) == Number(b.getAttribute('imageid'))
? 0
: (Number(a.getAttribute('imageid')) > Number(b.getAttribute('imageid')) ? 1 : -1);
});
for (i = 0; i < itemsArr.length; ++i) {
gameScreenshots_vGallery.appendChild(itemsArr[i]);
}
selectScreenshot(0);
});
} else {
selectScreenshot(0);
}
} else {
gamescreenshots.setAttribute('style', 'display: none;');
}
// load roms
loadRoms();
});
function loadRoms(displayCheckboxes) {
var existingTable = document.getElementById('romtable');
if (existingTable) {
existingTable.remove();
}
var gameRoms = document.getElementById('gamesummaryroms');
ajaxCall('/api/v1/Games/' + gameId + '/roms', 'GET', function (result) {
if (result) {
result.sort((a, b) => a.platform.name.charCodeAt(0) - b.platform.name.charCodeAt(0));
var newTable = document.createElement('table');
newTable.id = 'romtable';
newTable.className = 'romtable';
newTable.setAttribute('cellspacing', 0);
newTable.appendChild(createTableRow(true, [['<input id="rom_mastercheck" type="checkbox" onclick="selectAllChecks();"/>', 'rom_checkbox_box_hidden', 'rom_edit_checkbox'], 'Name', 'Size', 'Media', '', '', '']));
var lastPlatform = '';
for (var i = 0; i < result.length; i++) {
if (result[i].platform.name != lastPlatform) {
lastPlatform = result[i].platform.name;
var platformRow = document.createElement('tr');
var platformHeader = document.createElement('th');
platformHeader.setAttribute('colspan', 6);
platformHeader.innerHTML = result[i].platform.name;
platformRow.appendChild(platformHeader);
newTable.appendChild(platformRow);
}
var launchButton = '';
if (result[i].emulator) {
launchButton = '<a href="/index.html?page=emulator&engine=' + result[i].emulator.type + '&core=' + result[i].emulator.core + '&platformid=' + result[i].platform.id + '&gameid=' + gameId + '&rompath=' + encodeURIComponent('/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/' + encodeURIComponent(result[i].name)) + '" class="romstart">Launch</a>';
}
var newRow = [
['<input type="checkbox" name="rom_checkbox" data-romid="' + result[i].id + '" />', 'rom_checkbox_box_hidden', 'rom_edit_checkbox'],
'<a href="/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/' + encodeURIComponent(result[i].name) +'" class="romlink">' + result[i].name + '</a>',
formatBytes(result[i].size, 2),
result[i].romTypeMedia,
result[i].mediaLabel,
launchButton,
'<div class="properties_button" onclick="showDialog(\'rominfo\', ' + result[i].id + ');">i</div>'
];
newTable.appendChild(createTableRow(false, newRow, 'romrow', 'romcell'));
}
gameRoms.appendChild(newTable);
if (displayCheckboxes == true) {
DisplayROMCheckboxes(true);
}
} else {
gameRoms.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, 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({ behavior: "smooth", block: "end", inline: "nearest" });
} else {
gameScreenshots_Items[i].classList.remove('gamescreenshosts_gallery_item_selected');
}
}
// set the screenshot
gameScreenshots_Main.innerHTML = '';
switch (gameScreenshots_Selected.getAttribute('imagetype')) {
case "0":
// screenshot
gameScreenshots_Main.setAttribute('style', gameScreenshots_Selected.getAttribute('style'));
break;
case "1":
// video
gameScreenshots_Main.setAttribute('style', '');
var videoIFrame = document.createElement('iframe');
videoIFrame.setAttribute('height', '290');
videoIFrame.setAttribute('width', '515');
videoIFrame.setAttribute('frameBorder', '0');
videoIFrame.setAttribute('src', 'https://www.youtube.com/embed/' + gameScreenshots_Selected.getAttribute('imageref') + '?autoplay=1&mute=1');
gameScreenshots_Main.appendChild(videoIFrame);
break;
}
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);
}
function DisplayROMCheckboxes(visible) {
var checkbox_boxes = document.getElementsByName('rom_edit_checkbox');
for (var i = 0; i < checkbox_boxes.length; i++) {
if (visible == true) {
checkbox_boxes[i].className = 'rom_checkbox_box';
} else {
checkbox_boxes[i].className = 'rom_checkbox_box_hidden';
}
}
var editButton = document.getElementById('rom_edit');
var deleteButton = document.getElementById('rom_edit_panel');
if (visible == true) {
editButton.innerHTML = 'Cancel';
deleteButton.style.display = '';
} else {
editButton.innerHTML = 'Edit';
document.getElementById('rom_mastercheck').checked = false;
deleteButton.style.display = 'none';
selectAllChecks(false);
}
editButton.setAttribute('onclick', 'DisplayROMCheckboxes(' + !visible + ');');
}
function selectAllChecks(value) {
var mastercheckbox = document.getElementById('rom_mastercheck');
var checkboxes = document.getElementsByName('rom_checkbox');
for (var i = 0; i < checkboxes.length; i++) {
if (value) {
checkboxes[i].checked = value;
} else {
checkboxes[i].checked = mastercheckbox.checked;
}
}
}
$('#rom_edit_fixplatform').select2({
minimumInputLength: 3,
placeholder: "Platform",
ajax: {
url: '/api/v1/Search/Platform',
data: function (params) {
var query = {
SearchString: params.term
}
// Query parameters will be ?SearchString=[term]
return query;
},
processResults: function (data) {
var arr = [];
for (var i = 0; i < data.length; i++) {
arr.push({
id: data[i].id,
text: data[i].name
});
}
return {
results: arr
};
}
}
});
$('#rom_edit_fixgame').select2({
minimumInputLength: 3,
templateResult: DropDownRenderGameOption,
placeholder: "Game",
ajax: {
url: '/api/v1/Search/Game',
data: function (params) {
fixplatform = $('#rom_edit_fixplatform').select2('data');
var query = {
PlatformId: fixplatform[0].id,
SearchString: params.term
}
// Query parameters will be ?SearchString=[term]
return query;
},
processResults: function (data) {
var arr = [];
for (var i = 0; i < data.length; i++) {
arr.push({
id: data[i].id,
text: data[i].name,
cover: data[i].cover
});
}
return {
results: arr
};
}
}
});
var remapCallCounter = 0;
function remapTitles() {
var fixplatform = $('#rom_edit_fixplatform').select2('data');
var fixgame = $('#rom_edit_fixgame').select2('data');
if (fixplatform[0] && fixgame[0]) {
var rom_checks = document.getElementsByName('rom_checkbox');
for (var i = 0; i < rom_checks.length; i++) {
if (rom_checks[i].checked == true) {
var romId = rom_checks[i].getAttribute('data-romid');
remapCallCounter += 1;
ajaxCall('/api/v1/Games/' + gameId + '/roms/' + romId + '?NewPlatformId=' + fixplatform[0].id + '&NewGameId=' + fixgame[0].id, 'PATCH', function (result) {
remapTitlesCallback();
});
}
}
}
}
function remapTitlesCallback() {
remapCallCounter = remapCallCounter - 1;
if (remapCallCounter <= 0) {
loadRoms(true);
remapCallCounter = 0;
}
}
function deleteGameRoms() {
var rom_checks = document.getElementsByName('rom_checkbox');
var itemsChecked = false;
for (var i = 0; i < rom_checks.length; i++) {
if (rom_checks[i].checked == true) {
itemsChecked = true;
break;
}
}
if (itemsChecked == true) {
showSubDialog('romsdelete');
}
}
function deleteGameRomsCallback() {
var rom_checks = document.getElementsByName('rom_checkbox');
for (var i = 0; i < rom_checks.length; i++) {
if (rom_checks[i].checked == true) {
var romId = rom_checks[i].getAttribute('data-romid');
remapCallCounter += 1;
ajaxCall('/api/v1/Games/' + gameId + '/roms/' + romId, 'DELETE', function (result) {
remapTitlesCallback();
});
}
}
}
</script>