The official website for the open-source compatibility layer fpPS4
V25.4.13 Added a CHANGELOG.md and a Boosty donation button for red-prig ❤
+65
-28
+13
public_html/CHANGELOG.md
+13
public_html/CHANGELOG.md
···
1
+
# Changelog
2
+
3
+
All notable changes to this project will be documented in this file.
4
+
5
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Calendar Versioning](https://calver.org/): `YY.0M.0D`.
6
+
7
+
## 25.04.13
8
+
- Added a [changelog](https://fpps4.net/CHANGELOG.md) with Calender Versioning: `YY.0M.0D`
9
+
- Added a boosty donation button on the header of the compatibility list
10
+
- Made the winter themed snow only appear on December and January
11
+
- Made the background of the compatibility list on white mode a bit blueish
12
+
- This makes the snow visible on white mode, and it also looks pretty good :3
13
+
- Misc small cleanups to code
+13
-3
public_html/_parts/required.js
+13
-3
public_html/_parts/required.js
···
129
129
// snowContainer.outerHTML = snowContainerHTML;
130
130
131
131
function insert_snow(snow_size) {
132
-
let random_size = Math.floor(Math.random() * (snow_size - 2) + 2);
132
+
let random_size = Math.floor(Math.random() * (snow_size - 2) + 2);
133
133
134
134
const snowHTML = `
135
135
<svg style="position: fixed;" width="${random_size}px" height="${random_size}px" opacity="40%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
···
150
150
insert_snow(snow_size);
151
151
}
152
152
153
-
for (let snow of snowContainer.children) {
153
+
for (let snow of snowContainer.children) {
154
154
let random_acceleration = Math.floor(Math.random() * (18 - 8) + 8);
155
155
let random_pos_acceleration = (Math.random() * (2 - 0.3) + 0.3);
156
156
let id = 0;
···
194
194
await fetchHtml("/_parts/navbar.html", "#header");
195
195
await fetchHtml("/_parts/footer.html", "#footer");
196
196
adjustScreenSize();
197
-
snow();
197
+
198
+
addSnow()
199
+
198
200
LightModeIconChange();
201
+
}
202
+
203
+
function addSnow() {
204
+
// Only show the snow if its around winter time (december and january)
205
+
let current_month = new Date().getMonth();
206
+
if (current_month === 11 || current_month === 0) {
207
+
snow();
208
+
}
199
209
}
+1
-1
public_html/app.js
+1
-1
public_html/app.js
-4
public_html/compatibility/app.js
-4
public_html/compatibility/app.js
···
199
199
let imageSource = "";
200
200
let imageText = "GAME";
201
201
let imageTextSize = 1.25;
202
-
203
-
if (issue.title === "Sonic Time Twisted") {
204
-
console.log(issue.issue_type)
205
-
}
206
202
207
203
switch(true) {
208
204
case issue.image && imageLoading && avifSupport && issue.issue_type === "Homebrew":
+7
-7
public_html/compatibility/index.html
+7
-7
public_html/compatibility/index.html
···
30
30
</style>
31
31
<link rel="stylesheet" href="./styles.css">
32
32
<link rel="icon" href="/_images/fpPS4Logo.png" type="image/png">
33
-
<script defer src="/_parts/required.js"></script>
34
-
<script defer src="./app.js"></script>
33
+
<script defer src="/_parts/required.js" type="application/javascript"></script>
34
+
<script defer src="./app.js" type="application/javascript"></script>
35
35
</head>
36
36
<body>
37
37
<header id="header"></header>
···
39
39
<h1 class="mainText">Game Compatibility List</h1>
40
40
<h3 class="smolMainText">These are the games that have been tested with <span style="color: #f0e74a;">fp</span>PS4.<br>Click on an image to view the game's GitHub issue.<br>The database is updated every 10 minutes.</h3>
41
41
<div class=progressContainer>
42
-
<div class="progressWrap"><span class="progressBarInfo" id="PlayableInfo"></span><span class="progr55essBarText">Playable</span><div class="progressBar" id="PlayableBar" style="background:#54A396;"></div></div>
42
+
<div class="progressWrap Playable"><span class="progressBarInfo" id="PlayableInfo"></span><span class="progressBarText">Playable</span><div class="progressBar" id="PlayableBar" style="background: var(--status-color)"></div></div>
43
43
<div class="progressRow">
44
-
<div class="progressWrap"><span class="progressBarInfo" id="MenusInfo"></span><span class="progressBarText">Menus</span><div class="progressBar" id="MenusBar" style="background:#4288B7;"></div></div>
45
-
<div class="progressWrap"><span class="progressBarInfo" id="IngameInfo"></span><span class="progressBarText">Ingame</span><div class="progressBar" id="IngameBar" style="background:#fabb44;"></div></div>
44
+
<div class="progressWrap Menus"><span class="progressBarInfo" id="MenusInfo"></span><span class="progressBarText">Menus</span><div class="progressBar" id="MenusBar" style="background: var(--status-color)"></div></div>
45
+
<div class="progressWrap Ingame"><span class="progressBarInfo" id="IngameInfo"></span><span class="progressBarText">Ingame</span><div class="progressBar" id="IngameBar" style="background: var(--status-color)"></div></div>
46
46
</div>
47
47
<div class="progressRow">
48
-
<div class="progressWrap"><span class="progressBarInfo" id="NothingInfo"></span><span class="progressBarText">Nothing</span><div class="progressBar" id="NothingBar" style="background:#1F2325;"></div></div>
49
-
<div class="progressWrap"><span class="progressBarInfo" id="BootsInfo"></span><span class="progressBarText">Boots</span><div class="progressBar" id="BootsBar" style="background:#F2766E;"></div></div>
48
+
<div class="progressWrap Nothing"><span class="progressBarInfo" id="NothingInfo"></span><span class="progressBarText">Nothing</span><div class="progressBar" id="NothingBar" style="background: var(--status-color)"></div></div>
49
+
<div class="progressWrap Boots"><span class="progressBarInfo" id="BootsInfo"></span><span class="progressBarText">Boots</span><div class="progressBar" id="BootsBar" style="background: var(--status-color)"></div></div>
50
50
</div></div>
51
51
<div class="searchContainer">
52
52
<div class="searchBarContainer">
+11
-4
public_html/compatibility/styles.css
+11
-4
public_html/compatibility/styles.css
···
28
28
--text: #2E3440;
29
29
--border: #b2b8c770;
30
30
--solidBorder: #b2b8c7;
31
-
--background: #ECEFF4;
31
+
--background: #919ca9;
32
32
--main0: #E5E9F0;
33
33
--main1: #D8DEE9;
34
34
--hover: #c6ccd9;
35
35
--selected: #b0b7c7;
36
36
}
37
37
.lightMode .lightmodeText{color: #eceff4}
38
-
39
38
/* .lightmode ::selection{background-color: #3864d4}
40
39
::selection {
41
40
background-color: yellow;
···
193
192
}
194
193
195
194
.searchBar:focus,
196
-
.pageSelector:focus {outline: none; background: var(--hover); transition: background 0.1s ease-in-out;}
195
+
.pageSelector:focus {
196
+
outline: none;
197
+
background: var(--hover);
198
+
transition: background 0.1s ease-in-out;
199
+
border-color: var(--hover);
200
+
}
197
201
.searchBar::placeholder {color: #8C8C8C; font-weight: 500;}
198
202
.pageSelector::placeholder {color: var(--text);}
199
-
.searchBar:hover, .pageSelector:hover {background-color: var(--hover);}
203
+
.searchBar:hover, .pageSelector:hover {
204
+
background-color: var(--hover);
205
+
border-color: var(--hover);
206
+
}
200
207
201
208
.optionButtons {
202
209
display: flex;