refactor: sped up game list loading code, plus many small bug fixes

This commit is contained in:
Michael Green
2023-06-27 23:31:29 +10:00
parent 3f269d802b
commit ee4e5d4037
12 changed files with 315 additions and 210 deletions

View File

@@ -0,0 +1 @@
<svg width="159" height="110" xmlns="http://www.w3.org/2000/svg"><path d="m154 17.5c-1.82-6.73-7.07-12-13.8-13.8-9.04-3.49-96.6-5.2-122 0.1-6.73 1.82-12 7.07-13.8 13.8-4.08 17.9-4.39 56.6 0.1 74.9 1.82 6.73 7.07 12 13.8 13.8 17.9 4.12 103 4.7 122 0 6.73-1.82 12-7.07 13.8-13.8 4.35-19.5 4.66-55.8-0.1-75z" fill="#f00"/><path d="m105 55-40.8-23.4v46.8z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 374 B

View File

@@ -11,14 +11,14 @@
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title>Gaseous</title>
<title>Gaseous Games</title>
</head>
<body>
<div id="banner_icon">
<img src="/images/logo.png" alt="Gaseous" id="banner_icon_image" />
</div>
<div id="banner_header">
<div id="banner_header_label"></div>
<div id="banner_header_label">Gaseous Games</div>
</div>
<div id="content">

View File

@@ -139,17 +139,19 @@
if (result.videos) {
imageIndex = result.videos.ids.length;
}
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 = 'gamescreenshosts_gallery_item';
screenshotItem.setAttribute('onclick', 'selectScreenshot(' + imageIndex + ');');
gameScreenshots_Gallery.appendChild(screenshotItem);
imageIndex += 1;
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
@@ -164,8 +166,14 @@
vScreenshotItem.setAttribute('imageid', i);
vScreenshotItem.setAttribute('imagetype', 1);
vScreenshotItem.setAttribute('imageref', result[i].videoId);
vScreenshotItem.className = 'gamescreenshosts_gallery_item';
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);
}
@@ -206,7 +214,7 @@
var newTable = document.createElement('table');
newTable.className = 'romtable';
newTable.setAttribute('cellspacing', 0);
newTable.appendChild(createTableRow(true, ['Name', 'Size', 'Media', '']));
newTable.appendChild(createTableRow(true, ['Name', 'Size', 'Media', '', '']));
var lastPlatform = '';
for (var i = 0; i < result.length; i++) {
@@ -224,7 +232,8 @@
'<a href="/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/file" class="romlink">' + result[i].name + '</a>',
formatBytes(result[i].size, 2),
result[i].romTypeMedia,
result[i].mediaLabel
result[i].mediaLabel,
'<a href="#" class="romlink">...</a>'
];
newTable.appendChild(createTableRow(false, newRow, 'romrow', 'romcell'));
}

View File

@@ -8,6 +8,11 @@
font-size: 13px;
}
@font-face {
font-family: Commodore64;
src: url('/fonts/Commodore Pixelized v1.2.ttf');
}
h3 {
border-bottom-style: solid;
/*border-bottom-color: #916b01;*/
@@ -48,11 +53,13 @@ h3 {
}
#banner_header_label {
font-family: Commodore64;
display: inline;
padding: 10px;
font-size: 18pt;
font-weight: 700;
color: #edeffa;
font-size: 16pt;
vertical-align: top;
/*color: #edeffa;*/
color: #7c70da;
}
#content {
@@ -193,7 +200,7 @@ input[id='filter_panel_search'] {
right: 0;
margin: auto;
width: 90%;
min-width: 800px;
min-width: 911px;
max-width: 1122px;
padding-top: 1px;
@@ -270,7 +277,7 @@ iframe {
white-space: nowrap;
}
.gamescreenshosts_gallery_item {
.gamescreenshots_gallery_item {
display: inline-block;
height: 50px;
width: 70px;
@@ -282,6 +289,14 @@ iframe {
cursor: pointer;
}
.gamescreenshosts_gallery_item_youtube {
max-height: 20px;
max-width: 20px;
float: right;
margin-top: 30px;
margin-right: 5px;
}
.gamescreenshots_arrows {
margin-top: 140px;
height: 50px;
@@ -290,7 +305,6 @@ iframe {
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 */