The official website for the open-source compatibility layer fpPS4
Winter update :D
Added snowflakes, hopefully fixed the comp page silliness on mobile, removed hamburger menu.
+104
-22
+76
-1
public_html/_parts/required.js
+76
-1
public_html/_parts/required.js
···
115
115
})
116
116
}
117
117
118
+
function snow() {
119
+
const body = document.querySelector("body");
120
+
121
+
// const snowContainerHTML = `<div style="position: fixed; height: 100%; width: 100% " ></div>`;
122
+
const snowContainer = document.createElement('div');
123
+
snowContainer.style.position = "absolute";
124
+
snowContainer.style.height = "100%";
125
+
snowContainer.style.width = "100%";
126
+
snowContainer.style.pointerEvents = "none";
127
+
128
+
body.insertBefore(snowContainer, body.firstChild);
129
+
// snowContainer.outerHTML = snowContainerHTML;
130
+
131
+
function insert_snow(snow_size) {
132
+
let random_size = Math.floor(Math.random() * (snow_size - 2) + 2);
133
+
134
+
const snowHTML = `
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">
136
+
<circle cx="50" cy="50" r="50" fill="white"/>
137
+
</svg>`;
138
+
139
+
const snow = document.createElement('svg');
140
+
snowContainer.appendChild(snow);
141
+
snow.outerHTML = snowHTML;
142
+
}
143
+
144
+
let snow_amount = (window.innerWidth / 13 + window.innerHeight / 13) / 2;
145
+
let snow_size = (window.innerWidth / 230 + window.innerHeight / 230) / 2;
146
+
147
+
console.log(snow_amount)
148
+
console.log(snow_size)
149
+
for (let step = 0; step <= snow_amount; step++) {
150
+
insert_snow(snow_size);
151
+
}
152
+
153
+
for (let snow of snowContainer.children) {
154
+
let random_acceleration = Math.floor(Math.random() * (18 - 8) + 8);
155
+
let random_pos_acceleration = (Math.random() * (2 - 0.3) + 0.3);
156
+
let id = 0;
157
+
let pos_y = 0;
158
+
let pos_x = 0;
159
+
160
+
clearInterval(id);
161
+
id = setInterval(frame, random_acceleration);
162
+
163
+
let start_x = Math.floor(Math.random() * (window.innerWidth - (window.innerWidth / 20)));
164
+
let start_y = Math.floor(Math.random() * (window.innerHeight - (window.innerHeight / 20)));
165
+
166
+
function frame() {
167
+
// if it exceeds the browser's height,
168
+
if (start_y + pos_y >= window.innerHeight) {
169
+
start_x = Math.floor(Math.random() * (window.innerWidth - (window.innerWidth / 20)));
170
+
random_pos_acceleration = (Math.random() * (2 - 0.3) + 0.3);
171
+
pos_y = 0;
172
+
pos_x = 0;
173
+
start_y = 0;
174
+
175
+
} else if (start_x + (pos_x / 2) >= window.innerWidth){
176
+
start_y = Math.floor(Math.random() * (window.innerHeight - (window.innerHeight / 20)));
177
+
random_pos_acceleration = (Math.random() * (2 - 0.3) + 0.3);
178
+
pos_x = 0;
179
+
pos_y = 0;
180
+
start_x = 0;
181
+
182
+
} else {
183
+
pos_y += 1 + random_pos_acceleration;
184
+
pos_x += 0.7 + random_pos_acceleration;
185
+
snow.style.top = start_y + pos_y + 'px';
186
+
snow.style.left = start_x + pos_x + 'px';
187
+
}
188
+
}
189
+
}
190
+
}
191
+
118
192
async function init() {
119
193
// Header & Footer Load
120
194
await fetchHtml("/_parts/navbar.html", "#header");
121
195
await fetchHtml("/_parts/footer.html", "#footer");
122
-
196
+
adjustScreenSize();
197
+
snow();
123
198
LightModeIconChange();
124
199
}
+5
-1
public_html/app.js
+5
-1
public_html/app.js
+2
-2
public_html/compatibility/app.js
+2
-2
public_html/compatibility/app.js
···
52
52
datesButton = true;
53
53
document.getElementById('datesButton').classList.toggle('selected');
54
54
}
55
-
55
+
56
56
// Adjust screen size for mobile and 4k monitors for some reason
57
-
window.addEventListener('load', adjustScreenSize);
57
+
// window.addEventListener('load', adjustScreenSize);
58
58
window.addEventListener('resize', adjustScreenSize);
59
59
60
60
+3
-5
public_html/compatibility/index.html
+3
-5
public_html/compatibility/index.html
···
34
34
<script defer src="./app.js"></script>
35
35
</head>
36
36
<body>
37
-
<header id="header">
38
-
</header>
37
+
<header id="header"></header>
39
38
<main class="main">
40
39
<h1 class="mainText">Game Compatibility List</h1>
41
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>
42
41
<div class=progressContainer>
43
-
<div class="progressWrap"><span class="progressBarInfo" id="PlayableInfo"></span><span class="progressBarText">Playable</span><div class="progressBar" id="PlayableBar" style="background:#54A396;"></div></div>
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>
44
43
<div class="progressRow">
45
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>
46
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>
···
93
92
<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>
94
93
<br>
95
94
</main>
96
-
<footer id="footer">
97
-
</footer>
95
+
<footer id="footer"></footer>
98
96
</body>
99
97
</html>
+3
public_html/compatibility/styles.css
+3
public_html/compatibility/styles.css
+4
-2
public_html/index.html
+4
-2
public_html/index.html
···
31
31
<link rel="stylesheet" href="./style.css?v=01">
32
32
<link rel="stylesheet" href="./sizes.css">
33
33
<link rel="icon" href="/_images/fpPS4Logo.png" type="image/png">
34
+
<script defer src="/_parts/required.js"></script>
35
+
<script defer src="./app.js"></script>
34
36
</head>
35
37
<body>
38
+
<!--<div id="snowContainer" style="position: absolute"></div>-->
36
39
<div class="top">
37
40
<div class="top-text-container">
38
41
<h1 class="coming-soon">Work In Progress</h1>
···
40
43
<p class="progress-text">The offical website for the open-source<br>compatibility layer fpPS4</p>
41
44
<div class="topButtonContainer">
42
45
<a href="#learnmore" onclick="scrollToElement(event, 'learnmore')" class="button">Learn more</a>
43
-
<a href="https://fpps4.net/compatibility/" class="button">Compatibility</a>
46
+
<a href="/compatibility/" class="button">Compatibility</a>
44
47
</div>
45
48
</div>
46
49
</div>
···
64
67
</div>
65
68
</div>
66
69
</body>
67
-
<script src="./app.js"></script>
68
70
</html>
public_html/styles.css
public_html/styles.css
This is a binary file and will not be displayed.