The official website for the open-source compatibility layer fpPS4
Added Page selector + avif popup
Added an page selector at the bottom of the page an when you use an browser that doesn't support avif you will get an popup
+211
-8
private_html
private_html
This is a binary file and will not be displayed.
+144
-4
public_html/compatibility/app.js
+144
-4
public_html/compatibility/app.js
···
3
3
let sTimer;
4
4
let iTimer;
5
5
let pTimer;
6
+
let pbTimer;
7
+
let pfTimer;
8
+
let pmaxTimer;
9
+
let pminTimer;
6
10
let skeletonTimeout;
7
11
let tagFilter = [];
8
12
let oldestFilter = false;
···
12
16
let inputValue = 1;
13
17
let updatePageValue = false;
14
18
let noImagesLocked = false;
19
+
let maxValue;
15
20
16
21
function setCookie(name, value) {
17
22
var date = new Date();
···
90
95
console.log('AVIF IS NOT SUPPORTED D:');
91
96
avifSupport = false;
92
97
noImagesLocked = true;
98
+
window.alert("Hey! Your browser doesnt support avif, avif is an image format that has low file sizes while having high quality images. I will give you an N/A jpeg instead.");
93
99
imageButton();
94
100
};
95
101
···
144
150
};
145
151
146
152
// Header Load
147
-
fetch('https://fpps4.net/parts/navbar.html?v=1')
153
+
fetch('https://fpps4.net/parts/navbar.html')
148
154
.then(response => response.text())
149
155
.then(data => {
150
156
document.querySelector('#header').innerHTML = data;
···
205
211
document.querySelectorAll('.gameImage').forEach(gameImage => {
206
212
gameImage.setAttribute("loading", "lazy");
207
213
const data = gameImage.dataset.cusa;
208
-
gameImage.src = data.includes('CUSA') && imageLoading ? (avifSupport ? "../images/CUSA/" + data + ".avif" : "../images/NA.jpg") : (avifSupport ? "../images/NA.avif" : "../images/NA.jpg");
214
+
gameImage.src = data.includes('CUSA') && imageLoading ? (avifSupport ? "https://fpps4.net/images/CUSA/" + data + ".avif" : "https://fpps4.net/images/NA.jpg") : (avifSupport ? "https://fpps4.net/images/NA.avif" : "https://fpps4.net/images/NA.jpg");
209
215
});
210
216
}
211
217
···
352
358
};
353
359
};
354
360
361
+
const inputElement = document.getElementById('search2');
355
362
function updatePageSelector() {
356
-
const inputElement = document.getElementById('search2');
357
-
let maxValue = document.getElementById("totalPages").getAttribute('data');
363
+
search3.classList.add('selected');
364
+
maxValue = document.getElementById("totalPages").getAttribute('data');
358
365
if (updatePageValue === true) {
359
366
inputValue = 1;
360
367
updatePageValue = false;
368
+
document.getElementById('pageBarMin').classList.add('selected');
361
369
}
362
370
371
+
if (inputValue == 1) {
372
+
document.getElementById('pageBarMin').classList.add('selected');
373
+
search3.placeholder = '...';
374
+
search3.classList.remove('selected');
375
+
} else {
376
+
document.getElementById('pageBarMin').classList.remove('selected');
377
+
}
378
+
379
+
if (inputValue == maxValue) {
380
+
document.getElementById('pageBarMax').classList.add('selected');
381
+
search3.placeholder = '...';
382
+
search3.classList.remove('selected');
383
+
} else {
384
+
document.getElementById('pageBarMax').classList.remove('selected');
385
+
}
386
+
387
+
document.getElementById('pageBarMax').textContent = maxValue;
363
388
inputElement.placeholder = inputValue + "/" + maxValue;
364
389
365
390
inputElement.addEventListener('input', function(event) {
···
376
401
}
377
402
378
403
inputElement.placeholder = inputValue + "/" + maxValue;
404
+
search3.placeholder = inputValue;
379
405
pTimer = setTimeout(() => {
380
406
if (inputValue > 9) {
381
407
inputElement.style.padding = "0 0.3rem 0 0.7rem";
···
383
409
inputElement.style.padding = "";
384
410
}
385
411
inputElement.value = "";
412
+
search3.value = "";
386
413
pageNumber = inputValue;
387
414
UpdateSearchResults();
388
415
}, 500);
389
416
});
390
417
}
418
+
419
+
function pageBarBack() {
420
+
if (pageNumber > 1) {
421
+
clearTimeout(pbTimer);
422
+
inputValue--;
423
+
pageNumber--;
424
+
document.getElementById('pageBarMax').classList.remove('selected');
425
+
if (pageNumber == 1) {
426
+
search3.placeholder = '...';
427
+
search3.classList.remove('selected');
428
+
document.getElementById('pageBarMin').classList.add('selected');
429
+
} else {
430
+
search3.placeholder = pageNumber;
431
+
search3.classList.add('selected');
432
+
}
433
+
pbTimer = setTimeout(() => {
434
+
UpdateSearchResults();
435
+
}, 500);
436
+
}
437
+
}
438
+
439
+
function pageBarForward() {
440
+
maxValue = document.getElementById("totalPages").getAttribute('data');
441
+
if (inputValue < maxValue) {
442
+
clearTimeout(pfTimer);
443
+
inputValue++;
444
+
pageNumber++;
445
+
document.getElementById('pageBarMin').classList.remove('selected');
446
+
if (pageNumber == maxValue) {
447
+
search3.placeholder = '...';
448
+
search3.classList.remove('selected');
449
+
document.getElementById('pageBarMax').classList.add('selected');
450
+
} else {
451
+
search3.placeholder = inputValue;
452
+
search3.classList.add('selected');
453
+
}
454
+
pfTimer = setTimeout(() => {
455
+
UpdateSearchResults();
456
+
}, 500);
457
+
}
458
+
}
459
+
460
+
function pageBarMax() {
461
+
clearTimeout(pmaxTimer);
462
+
document.getElementById('pageBarMax').classList.add('selected');
463
+
document.getElementById('pageBarMin').classList.remove('selected');
464
+
inputValue = maxValue;
465
+
search3.placeholder = '...';
466
+
search3.classList.remove('selected');
467
+
pageNumber = maxValue;
468
+
pmaxTimer = setTimeout(() => {
469
+
UpdateSearchResults();
470
+
}, 400);
471
+
}
472
+
473
+
function pageBarMin() {
474
+
clearTimeout(pminTimer);
475
+
document.getElementById('pageBarMin').classList.add('selected');
476
+
document.getElementById('pageBarMax').classList.remove('selected');
477
+
search3.placeholder = '...';
478
+
search3.classList.remove('selected');
479
+
inputValue = 1;
480
+
pageNumber = 1;
481
+
pminTimer = setTimeout(() => {
482
+
UpdateSearchResults();
483
+
search3.placeholder = '...';
484
+
}, 400);
485
+
}
486
+
487
+
const search3 = document.getElementById("search3");
488
+
489
+
search3.addEventListener("click", function() {
490
+
if (search3.placeholder == '...') {
491
+
search3.placeholder = '';
492
+
}
493
+
});
494
+
495
+
search3.addEventListener("blur", function() {
496
+
if (search3.placeholder == '') {
497
+
search3.placeholder = '...';
498
+
}
499
+
});
500
+
501
+
search3.addEventListener('input', function(event) {
502
+
clearTimeout(pTimer);
503
+
inputValue = parseInt(search3.value, 10);
504
+
document.getElementById('pageBarMax').classList.remove('selected');
505
+
document.getElementById('pageBarMin').classList.remove('selected');
506
+
507
+
if (isNaN(parseFloat(inputValue))) {
508
+
inputValue = 1;
509
+
}
510
+
if (inputValue > maxValue) {
511
+
inputValue = maxValue;
512
+
} else if (inputValue < 1) {
513
+
inputValue = 1;
514
+
}
515
+
516
+
inputElement.placeholder = inputValue + "/" + maxValue;
517
+
search3.placeholder = inputValue;
518
+
pTimer = setTimeout(() => {
519
+
if (inputValue > 9) {
520
+
inputElement.style.padding = "0 0.3rem 0 0.7rem";
521
+
} else if (inputValue < 10) {
522
+
inputElement.style.padding = "";
523
+
}
524
+
inputElement.value = "";
525
+
search3.value = "";
526
+
search3.classList.add('selected');
527
+
pageNumber = inputValue;
528
+
UpdateSearchResults();
529
+
}, 500);
530
+
});
391
531
392
532
// Footer Load
393
533
fetch('https://fpps4.net/parts/footer.html')
+8
-1
public_html/compatibility/index.html
+8
-1
public_html/compatibility/index.html
···
59
59
<div class="gameContainer skeletonAnimation"></div>
60
60
<div class="gameContainer skeletonAnimation"></div>
61
61
</div>
62
+
<div class="pageBarContainer">
63
+
<img class="pageBarImage" id="pageBarBack" onclick="pageBarBack()" src="../images/arrow_back.svg" alt="">
64
+
<p class="pageBarButton" id="pageBarMin" onclick="pageBarMin()">1</p>
65
+
<input class="pageBarSearch" id="search3" autocomplete="off" type="number" min="1" placeholder="..." name="fpps4">
66
+
<p class="pageBarButton" id="pageBarMax" onclick="pageBarMax()">1</p>
67
+
<img class="pageBarImage" id="pageBarForward" onclick="pageBarForward()" src="../images/arrow_forward.svg" alt="">
68
+
</div>
62
69
<h5 style="text-align: center; font-size: 0.8rem;">Trademarks and logos displayed on this website are the property of their respective owners.<br> The use of any third-party trademarks, brand names, product names, and logos is for<br> informational purposes only and does not imply endorsement or sponsorship.</h5>
63
70
<br>
64
71
</main>
65
72
<footer id="footer"></footer>
66
-
<script defer src="app.js?v=1"></script>
73
+
<script defer src="app.js"></script>
67
74
</body>
68
75
</html>
+57
-3
public_html/compatibility/styles.css
+57
-3
public_html/compatibility/styles.css
···
190
190
width: 3rem;
191
191
border-radius: 0rem 0.6rem 0.6rem 0rem;
192
192
font-weight: 500;
193
+
}
194
+
195
+
input[type="number"] {
193
196
-moz-appearance: textfield;
194
197
appearance: textfield;
195
198
}
196
199
197
-
.pageSelector::-webkit-inner-spin-button,
198
-
.pageSelector::-webkit-outer-spin-button {
200
+
input[type="number"]::-webkit-inner-spin-button,
201
+
input[type="number"]::-webkit-outer-spin-button {
199
202
-webkit-appearance: none;
200
203
}
201
204
···
335
338
padding: 0 0 0.7rem;
336
339
}
337
340
341
+
.pageBarContainer {
342
+
display: flex;
343
+
padding: 0.8rem 0 1.5rem;
344
+
gap: 0.35rem;
345
+
text-align: center;
346
+
height: 2rem;
347
+
align-items: center;
348
+
user-select: none;
349
+
}
350
+
351
+
.pageBarImage {
352
+
height: 1.5rem;
353
+
width: 1.5rem;
354
+
padding: 0.38rem;
355
+
border-radius: 0.5rem;
356
+
user-select: none;
357
+
filter: invert(1);
358
+
cursor: pointer;
359
+
}
360
+
361
+
.pageBarButton,
362
+
.pageBarSearch {
363
+
height: 2rem;
364
+
width: 2rem;
365
+
border-radius: 0.5rem;
366
+
/* padding: 0.13rem; */
367
+
padding: 0.1rem;
368
+
font-size: 0.95rem;
369
+
}
370
+
371
+
.pageBarButton {
372
+
display: flex;
373
+
align-items: center;
374
+
justify-content: center;
375
+
cursor: pointer;
376
+
}
377
+
378
+
.pageBarSearch {
379
+
background: transparent;
380
+
border: transparent;
381
+
text-align: center;
382
+
}
383
+
.pageBarSearch:focus {outline: none; background: var(--hover); transition: background 0.1s ease-in-out;}
384
+
.pageBarSearch:hover, .pageBarButton:hover {background-color: var(--hover);}
385
+
.pageBarImage:hover{background-color: #00000014;}
386
+
.pageBarSearch::placeholder {color: var(--text);}
387
+
388
+
.lightMode .pageBarImage {filter: invert(0);}
389
+
338
390
@media screen and (max-width: 700px) {
339
391
.main {
340
392
width: 34rem;
···
358
410
.optionButton:hover {background: var(--main1);}
359
411
.progressWrap:hover, .progressWrapb:hover {background: var(--main1);}
360
412
.selected .progressBarInfo{opacity: 1;}
361
-
.menu-icon:hover, .gh-logo:hover, .dc-logo:hover, .lightModeButton:hover, .logo:hover {background-color: #00000000 !important};
413
+
.menu-icon:hover, .gh-logo:hover, .dc-logo:hover, .lightModeButton:hover, .logo:hover {background-color: #00000000 !important;}
414
+
.pageBarImage:hover {background-color: transparent !important;}
362
415
.gameDetails:hover .gameName {width: 23rem !important;}
363
416
.footerSeparator {display: flex !important;}
364
417
.footerContent:hover {background-color: #00000000 !important;}
418
+
.pageBarContainer {gap: 0.6rem;}
365
419
}
366
420
367
421
@media screen and (min-width: 550px) {
+1
public_html/images/arrow_back.svg
+1
public_html/images/arrow_back.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M655-80 255-480l400-400 56 57-343 343 343 343-56 57Z"/></svg>
+1
public_html/images/arrow_forward.svg
+1
public_html/images/arrow_forward.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m304-82-56-57 343-343-343-343 56-57 400 400L304-82Z"/></svg>
