formatted files according to prettier configuration
This commit is contained in:
MonkeyGG2
@@ -1,386 +1,401 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Error 404</title>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<title>Error 404</title>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
|
||||
|
||||
<body>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
|
||||
|
||||
body {
|
||||
background:repeating-linear-gradient(0deg,#0E0D0E 25%,#0E0D0E 50%,#171819 50%,#171819 75%);
|
||||
background-size:10px 10px;
|
||||
height:100vh;
|
||||
width:100vw;
|
||||
font-size: 5vw;
|
||||
overflow:hidden;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
font-family: 'Fira Mono', monospace;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.wisedom {
|
||||
font-family: url(VGA.tff);
|
||||
font-weight: 400;
|
||||
text-rendering: optimizelegibility;
|
||||
color: #009400;
|
||||
letter-spacing: 0px;
|
||||
font-size: 40px;
|
||||
min-height: 50px;
|
||||
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
|
||||
border-right: 3px solid #009400;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
border-color: transparent
|
||||
}
|
||||
}
|
||||
.glitch {
|
||||
font-size: 10vw;
|
||||
position:relative;
|
||||
color:#fff;
|
||||
}
|
||||
.line:not(:first-child) {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
.line:nth-child(1) {
|
||||
animation:clip 3000ms -300ms linear infinite,glitch1 500ms -184ms linear infinite;
|
||||
}
|
||||
@keyframes glitch1 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(2px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(5px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(1px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}.line:nth-child(2) {
|
||||
animation:clip 3000ms -600ms linear infinite,glitch2 500ms -740ms linear infinite;
|
||||
}
|
||||
@keyframes glitch2 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(5px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(-1px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-1px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}.line:nth-child(3) {
|
||||
animation:clip 3000ms -900ms linear infinite,glitch3 500ms -333ms linear infinite;
|
||||
}
|
||||
@keyframes glitch3 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-2px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(3px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(0px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}.line:nth-child(4) {
|
||||
animation:clip 3000ms -1200ms linear infinite,glitch4 500ms -733ms linear infinite;
|
||||
}
|
||||
@keyframes glitch4 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-4px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(5px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(0px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}.line:nth-child(5) {
|
||||
animation:clip 3000ms -1500ms linear infinite,glitch5 500ms -896ms linear infinite;
|
||||
}
|
||||
@keyframes glitch5 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-3px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(5px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(3px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}.line:nth-child(6) {
|
||||
animation:clip 3000ms -1800ms linear infinite,glitch6 500ms -815ms linear infinite;
|
||||
}
|
||||
@keyframes glitch6 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-4px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(-4px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-3px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}.line:nth-child(7) {
|
||||
animation:clip 3000ms -2100ms linear infinite,glitch7 500ms -34ms linear infinite;
|
||||
}
|
||||
@keyframes glitch7 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(2px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(5px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-3px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}.line:nth-child(8) {
|
||||
animation:clip 3000ms -2400ms linear infinite,glitch8 500ms -842ms linear infinite;
|
||||
}
|
||||
@keyframes glitch8 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(4px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(1px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-4px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}.line:nth-child(9) {
|
||||
animation:clip 3000ms -2700ms linear infinite,glitch9 500ms -751ms linear infinite;
|
||||
}
|
||||
@keyframes glitch9 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(1px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(2px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-4px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}.line:nth-child(10) {
|
||||
animation:clip 3000ms -3000ms linear infinite,glitch10 500ms -648ms linear infinite;
|
||||
}
|
||||
@keyframes glitch10 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-3px);
|
||||
color:#4E9A26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(2px);
|
||||
color:#AC1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(3px);
|
||||
color:#fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
}
|
||||
}@keyframes clip {
|
||||
0% {
|
||||
clip-path:polygon(0 100%,100% 100%,100% 120%,0 120%);
|
||||
}
|
||||
100% {
|
||||
clip-path:polygon(0 -20%,100% -20%,100% 0%,0 0);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 10px 20px;
|
||||
background-color: #00fa00;
|
||||
color: #000;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: 0s;
|
||||
}
|
||||
body {
|
||||
background: repeating-linear-gradient(0deg, #0e0d0e 25%, #0e0d0e 50%, #171819 50%, #171819 75%);
|
||||
background-size: 10px 10px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
font-size: 5vw;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'Fira Mono', monospace;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
.wisedom {
|
||||
font-family: url(VGA.tff);
|
||||
font-weight: 400;
|
||||
text-rendering: optimizelegibility;
|
||||
color: #009400;
|
||||
letter-spacing: 0px;
|
||||
font-size: 40px;
|
||||
min-height: 50px;
|
||||
animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
|
||||
border-right: 3px solid #009400;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="glitch">
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
</div>
|
||||
<span class="wisedom"></span>
|
||||
<h6><a href="/">Return home?</a></h6>
|
||||
<script>
|
||||
const wiseness = ["Welcome to the land of Nothing!", "Here there is absolutely nothing for you.", "I recommend you to go back home", "Please. Go.", "Why are you here?", "I will not repeat this once more.", "GO. NOW."]
|
||||
const element = document.getElementsByClassName('wisedom')[0];
|
||||
const button = document.getElementsByTagName('a')[0];
|
||||
|
||||
let currentTextIndex = 0;
|
||||
let charIndex = 0;
|
||||
|
||||
function type() {
|
||||
let text = wiseness[currentTextIndex];
|
||||
let typeSpeed = 100;
|
||||
|
||||
if (charIndex < text.length) {
|
||||
element.innerHTML += text.charAt(charIndex);
|
||||
charIndex++;
|
||||
setTimeout(type, typeSpeed);
|
||||
} else {
|
||||
setTimeout(deleteText, 3000); // wait 1 second before deleting the text
|
||||
}
|
||||
}
|
||||
|
||||
function deleteText() {
|
||||
let text = wiseness[currentTextIndex];
|
||||
let deleteSpeed = 100;
|
||||
|
||||
if (charIndex > 0) {
|
||||
element.innerHTML = text.substring(0, charIndex - 1);
|
||||
charIndex--;
|
||||
setTimeout(deleteText, deleteSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(type, 2000);
|
||||
</script>
|
||||
</body>
|
||||
@keyframes blink {
|
||||
50% {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.glitch {
|
||||
font-size: 10vw;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
.line:not(:first-child) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.line:nth-child(1) {
|
||||
animation: clip 3000ms -300ms linear infinite, glitch1 500ms -184ms linear infinite;
|
||||
}
|
||||
@keyframes glitch1 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(2px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(5px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(1px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.line:nth-child(2) {
|
||||
animation: clip 3000ms -600ms linear infinite, glitch2 500ms -740ms linear infinite;
|
||||
}
|
||||
@keyframes glitch2 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(5px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(-1px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(-1px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.line:nth-child(3) {
|
||||
animation: clip 3000ms -900ms linear infinite, glitch3 500ms -333ms linear infinite;
|
||||
}
|
||||
@keyframes glitch3 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(-2px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(3px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(0px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.line:nth-child(4) {
|
||||
animation: clip 3000ms -1200ms linear infinite, glitch4 500ms -733ms linear infinite;
|
||||
}
|
||||
@keyframes glitch4 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(-4px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(5px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(0px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.line:nth-child(5) {
|
||||
animation: clip 3000ms -1500ms linear infinite, glitch5 500ms -896ms linear infinite;
|
||||
}
|
||||
@keyframes glitch5 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(-3px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(5px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(3px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.line:nth-child(6) {
|
||||
animation: clip 3000ms -1800ms linear infinite, glitch6 500ms -815ms linear infinite;
|
||||
}
|
||||
@keyframes glitch6 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(-4px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(-4px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(-3px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.line:nth-child(7) {
|
||||
animation: clip 3000ms -2100ms linear infinite, glitch7 500ms -34ms linear infinite;
|
||||
}
|
||||
@keyframes glitch7 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(2px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(5px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(-3px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.line:nth-child(8) {
|
||||
animation: clip 3000ms -2400ms linear infinite, glitch8 500ms -842ms linear infinite;
|
||||
}
|
||||
@keyframes glitch8 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(4px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(1px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(-4px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.line:nth-child(9) {
|
||||
animation: clip 3000ms -2700ms linear infinite, glitch9 500ms -751ms linear infinite;
|
||||
}
|
||||
@keyframes glitch9 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(1px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(2px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(-4px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.line:nth-child(10) {
|
||||
animation: clip 3000ms -3000ms linear infinite, glitch10 500ms -648ms linear infinite;
|
||||
}
|
||||
@keyframes glitch10 {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform: translateX(-3px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform: translateX(2px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform: translateX(3px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes clip {
|
||||
0% {
|
||||
clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
|
||||
}
|
||||
100% {
|
||||
clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
</html>
|
||||
a {
|
||||
padding: 10px 20px;
|
||||
background-color: #00fa00;
|
||||
color: #000;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: 0s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
</style>
|
||||
<div class="glitch">
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
<div class="line">Error 404</div>
|
||||
</div>
|
||||
<span class="wisedom"></span>
|
||||
<h6><a href="/">Return home?</a></h6>
|
||||
<script>
|
||||
const wiseness = [
|
||||
'Welcome to the land of Nothing!',
|
||||
'Here there is absolutely nothing for you.',
|
||||
'I recommend you to go back home',
|
||||
'Please. Go.',
|
||||
'Why are you here?',
|
||||
'I will not repeat this once more.',
|
||||
'GO. NOW.',
|
||||
];
|
||||
const element = document.getElementsByClassName('wisedom')[0];
|
||||
const button = document.getElementsByTagName('a')[0];
|
||||
|
||||
let currentTextIndex = 0;
|
||||
let charIndex = 0;
|
||||
|
||||
function type() {
|
||||
let text = wiseness[currentTextIndex];
|
||||
let typeSpeed = 100;
|
||||
|
||||
if (charIndex < text.length) {
|
||||
element.innerHTML += text.charAt(charIndex);
|
||||
charIndex++;
|
||||
setTimeout(type, typeSpeed);
|
||||
} else {
|
||||
setTimeout(deleteText, 3000); // wait 1 second before deleting the text
|
||||
}
|
||||
}
|
||||
|
||||
function deleteText() {
|
||||
let text = wiseness[currentTextIndex];
|
||||
let deleteSpeed = 100;
|
||||
|
||||
if (charIndex > 0) {
|
||||
element.innerHTML = text.substring(0, charIndex - 1);
|
||||
charIndex--;
|
||||
setTimeout(deleteText, deleteSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(type, 2000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+2
-5
@@ -23,10 +23,7 @@
|
||||
"1v1.LOL": {
|
||||
"path": "1v1-lol",
|
||||
"aliases": [],
|
||||
"categories": [
|
||||
"online",
|
||||
"battle"
|
||||
]
|
||||
"categories": ["online", "battle"]
|
||||
},
|
||||
"10 minutes till dawn": {
|
||||
"path": "10-minutes-till-dawn",
|
||||
@@ -881,4 +878,4 @@
|
||||
"proxy": false, // proxy only works when self-hosted
|
||||
"proxyPath": "http://localhost:8080" // absolute or relative path to proxy; proxy must be set to true for this setting to have any effect
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -44,7 +44,7 @@
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
@@ -62,4 +62,4 @@
|
||||
|
||||
.hexagonGrid .row .hexagon:hover::after {
|
||||
background: var(--bg);
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -140,4 +140,4 @@ section {
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
+475
-472
File diff suppressed because it is too large
Load Diff
@@ -1,150 +1,144 @@
|
||||
/*--------------------
|
||||
Vars
|
||||
--------------------*/
|
||||
const deg = a => Math.PI / 180 * a;
|
||||
const deg = (a) => (Math.PI / 180) * a;
|
||||
const rand = (v1, v2) => Math.floor(v1 + Math.random() * (v2 - v1));
|
||||
const opt = {
|
||||
particles: window.width / 500 ? 250 : 125,
|
||||
noiseScale: 0.005,
|
||||
angle: Math.PI / 180 * -90,
|
||||
h1: rand(0, 360),
|
||||
h2: rand(0, 360),
|
||||
s1: rand(20, 90),
|
||||
s2: rand(20, 90),
|
||||
l1: rand(30, 80),
|
||||
l2: rand(30, 80),
|
||||
strokeWeight: 2,
|
||||
tail: 82 };
|
||||
particles: window.width / 500 ? 250 : 125,
|
||||
noiseScale: 0.005,
|
||||
angle: (Math.PI / 180) * -90,
|
||||
h1: rand(0, 360),
|
||||
h2: rand(0, 360),
|
||||
s1: rand(20, 90),
|
||||
s2: rand(20, 90),
|
||||
l1: rand(30, 80),
|
||||
l2: rand(30, 80),
|
||||
strokeWeight: 2,
|
||||
tail: 82,
|
||||
};
|
||||
|
||||
changeTitleColor();
|
||||
|
||||
const Particles = [];
|
||||
let time = 0;
|
||||
document.body.addEventListener("click", () => {
|
||||
if (inGame) {
|
||||
return;
|
||||
}
|
||||
opt.h1 = rand(0, 360);
|
||||
opt.h2 = rand(0, 360);
|
||||
opt.s1 = rand(20, 90);
|
||||
opt.s2 = rand(20, 90);
|
||||
opt.l1 = rand(30, 80);
|
||||
opt.l2 = rand(30, 80);
|
||||
opt.angle += deg(random(60, 60)) * (Math.random() > 0.5 ? 1 : -1);
|
||||
setTimeout(() => {
|
||||
changeTitleColor();
|
||||
}, 120);
|
||||
document.body.addEventListener('click', () => {
|
||||
if (inGame) {
|
||||
return;
|
||||
}
|
||||
opt.h1 = rand(0, 360);
|
||||
opt.h2 = rand(0, 360);
|
||||
opt.s1 = rand(20, 90);
|
||||
opt.s2 = rand(20, 90);
|
||||
opt.l1 = rand(30, 80);
|
||||
opt.l2 = rand(30, 80);
|
||||
opt.angle += deg(random(60, 60)) * (Math.random() > 0.5 ? 1 : -1);
|
||||
setTimeout(() => {
|
||||
changeTitleColor();
|
||||
}, 120);
|
||||
|
||||
for (let p of Particles) {
|
||||
p.randomize();
|
||||
}
|
||||
for (let p of Particles) {
|
||||
p.randomize();
|
||||
}
|
||||
});
|
||||
|
||||
/*--------------------
|
||||
Particle
|
||||
--------------------*/
|
||||
class Particle {
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.lx = x;
|
||||
this.ly = y;
|
||||
this.vx = 0;
|
||||
this.vy = 0;
|
||||
this.ax = 0;
|
||||
this.ay = 0;
|
||||
this.hueSem = Math.random();
|
||||
this.hue = this.hueSem > 0.5 ? 20 + opt.h1 : 20 + opt.h2;
|
||||
this.sat = this.hueSem > 0.5 ? opt.s1 : opt.s2;
|
||||
this.light = this.hueSem > 0.5 ? opt.l1 : opt.l2;
|
||||
this.maxSpeed = this.hueSem > 0.5 ? 3 : 2;
|
||||
}
|
||||
|
||||
randomize() {
|
||||
this.hueSem = Math.random();
|
||||
this.hue = this.hueSem > 0.5 ? 20 + opt.h1 : 20 + opt.h2;
|
||||
this.sat = this.hueSem > 0.5 ? opt.s1 : opt.s2;
|
||||
this.light = this.hueSem > 0.5 ? opt.l1 : opt.l2;
|
||||
this.maxSpeed = this.hueSem > 0.5 ? 3 : 2;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.follow();
|
||||
|
||||
this.vx += this.ax;
|
||||
this.vy += this.ay;
|
||||
|
||||
var p = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
|
||||
var a = Math.atan2(this.vy, this.vx);
|
||||
var m = Math.min(this.maxSpeed, p);
|
||||
this.vx = Math.cos(a) * m;
|
||||
this.vy = Math.sin(a) * m;
|
||||
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
this.ax = 0;
|
||||
this.ay = 0;
|
||||
|
||||
this.edges();
|
||||
}
|
||||
|
||||
follow() {
|
||||
let angle =
|
||||
noise(
|
||||
this.x * opt.noiseScale,
|
||||
this.y * opt.noiseScale,
|
||||
time * opt.noiseScale) *
|
||||
|
||||
Math.PI *
|
||||
0.5 +
|
||||
opt.angle;
|
||||
|
||||
this.ax += Math.cos(angle);
|
||||
this.ay += Math.sin(angle);
|
||||
}
|
||||
|
||||
updatePrev() {
|
||||
this.lx = this.x;
|
||||
this.ly = this.y;
|
||||
}
|
||||
|
||||
edges() {
|
||||
if (this.x < 0) {
|
||||
this.x = width;
|
||||
this.updatePrev();
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.lx = x;
|
||||
this.ly = y;
|
||||
this.vx = 0;
|
||||
this.vy = 0;
|
||||
this.ax = 0;
|
||||
this.ay = 0;
|
||||
this.hueSem = Math.random();
|
||||
this.hue = this.hueSem > 0.5 ? 20 + opt.h1 : 20 + opt.h2;
|
||||
this.sat = this.hueSem > 0.5 ? opt.s1 : opt.s2;
|
||||
this.light = this.hueSem > 0.5 ? opt.l1 : opt.l2;
|
||||
this.maxSpeed = this.hueSem > 0.5 ? 3 : 2;
|
||||
}
|
||||
if (this.x > width) {
|
||||
this.x = 0;
|
||||
this.updatePrev();
|
||||
}
|
||||
if (this.y < 0) {
|
||||
this.y = height;
|
||||
this.updatePrev();
|
||||
}
|
||||
if (this.y > height) {
|
||||
this.y = 0;
|
||||
this.updatePrev();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
stroke(`hsla(${this.hue}, ${this.sat}%, ${this.light}%, .5)`);
|
||||
line(this.x, this.y, this.lx, this.ly);
|
||||
this.updatePrev();
|
||||
}}
|
||||
randomize() {
|
||||
this.hueSem = Math.random();
|
||||
this.hue = this.hueSem > 0.5 ? 20 + opt.h1 : 20 + opt.h2;
|
||||
this.sat = this.hueSem > 0.5 ? opt.s1 : opt.s2;
|
||||
this.light = this.hueSem > 0.5 ? opt.l1 : opt.l2;
|
||||
this.maxSpeed = this.hueSem > 0.5 ? 3 : 2;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.follow();
|
||||
|
||||
this.vx += this.ax;
|
||||
this.vy += this.ay;
|
||||
|
||||
var p = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
|
||||
var a = Math.atan2(this.vy, this.vx);
|
||||
var m = Math.min(this.maxSpeed, p);
|
||||
this.vx = Math.cos(a) * m;
|
||||
this.vy = Math.sin(a) * m;
|
||||
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
this.ax = 0;
|
||||
this.ay = 0;
|
||||
|
||||
this.edges();
|
||||
}
|
||||
|
||||
follow() {
|
||||
let angle =
|
||||
noise(this.x * opt.noiseScale, this.y * opt.noiseScale, time * opt.noiseScale) * Math.PI * 0.5 + opt.angle;
|
||||
|
||||
this.ax += Math.cos(angle);
|
||||
this.ay += Math.sin(angle);
|
||||
}
|
||||
|
||||
updatePrev() {
|
||||
this.lx = this.x;
|
||||
this.ly = this.y;
|
||||
}
|
||||
|
||||
edges() {
|
||||
if (this.x < 0) {
|
||||
this.x = width;
|
||||
this.updatePrev();
|
||||
}
|
||||
if (this.x > width) {
|
||||
this.x = 0;
|
||||
this.updatePrev();
|
||||
}
|
||||
if (this.y < 0) {
|
||||
this.y = height;
|
||||
this.updatePrev();
|
||||
}
|
||||
if (this.y > height) {
|
||||
this.y = 0;
|
||||
this.updatePrev();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
stroke(`hsla(${this.hue}, ${this.sat}%, ${this.light}%, .5)`);
|
||||
line(this.x, this.y, this.lx, this.ly);
|
||||
this.updatePrev();
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Setup
|
||||
--------------------*/
|
||||
function setup() {
|
||||
let canvas = createCanvas(windowWidth, windowHeight);
|
||||
canvas.parent("particles");
|
||||
let canvas = createCanvas(windowWidth, windowHeight);
|
||||
canvas.parent('particles');
|
||||
|
||||
for (let i = 0; i < opt.particles; i++) {
|
||||
Particles.push(new Particle(Math.random() * width, Math.random() * height));
|
||||
}
|
||||
strokeWeight(opt.strokeWeight);
|
||||
for (let i = 0; i < opt.particles; i++) {
|
||||
Particles.push(new Particle(Math.random() * width, Math.random() * height));
|
||||
}
|
||||
strokeWeight(opt.strokeWeight);
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
@@ -153,24 +147,28 @@ Draw
|
||||
|
||||
let inGame = false;
|
||||
function draw() {
|
||||
if (!inGame && document.visibilityState == "visible") {
|
||||
time++;
|
||||
background(0, 100 - opt.tail);
|
||||
|
||||
for (let p of Particles) {
|
||||
p.update();
|
||||
p.render();
|
||||
}
|
||||
}
|
||||
if (!inGame && document.visibilityState == 'visible') {
|
||||
time++;
|
||||
background(0, 100 - opt.tail);
|
||||
|
||||
for (let p of Particles) {
|
||||
p.update();
|
||||
p.render();
|
||||
}
|
||||
} else {
|
||||
background(0);
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Resize
|
||||
--------------------*/
|
||||
function windowResized() {
|
||||
resizeCanvas(windowWidth, windowHeight);
|
||||
resizeCanvas(windowWidth, windowHeight);
|
||||
}
|
||||
|
||||
function changeTitleColor() {
|
||||
document.getElementById("title").style.backgroundImage = `linear-gradient(hsl(${opt.h1 + 20}, ${opt.s1}%, ${opt.l1}%), hsl(${opt.h2}, ${opt.s2}%, ${opt.l2}%))`;
|
||||
}
|
||||
document.getElementById('title').style.backgroundImage = `linear-gradient(hsl(${opt.h1 + 20}, ${opt.s1}%, ${
|
||||
opt.l1
|
||||
}%), hsl(${opt.h2}, ${opt.s2}%, ${opt.l2}%))`;
|
||||
}
|
||||
|
||||
+96
-84
@@ -1,36 +1,46 @@
|
||||
// hexagons will be used as a separate theme later
|
||||
|
||||
function changeLoadingTip() {
|
||||
const tips = ["Press CTRL+C to cloak your current tab","Press CTRL+M to mask your current tab", "Press CTRL+B to go back to the home page", "Join our discord server!", "Make sure to enable popups for automatic cloak", "Why are you here?"]
|
||||
const element = document.getElementsByClassName("loading-tip")[0];
|
||||
const tips = [
|
||||
'Press CTRL+C to cloak your current tab',
|
||||
'Press CTRL+M to mask your current tab',
|
||||
'Press CTRL+B to go back to the home page',
|
||||
'Join our discord server!',
|
||||
'Make sure to enable popups for automatic cloak',
|
||||
'Why are you here?',
|
||||
];
|
||||
const element = document.getElementsByClassName('loading-tip')[0];
|
||||
|
||||
element.textContent = "Loading... \n" + tips[Math.floor(Math.random() * tips.length)];
|
||||
element.textContent = 'Loading... \n' + tips[Math.floor(Math.random() * tips.length)];
|
||||
}
|
||||
|
||||
changeLoadingTip();
|
||||
$("#everything-else").hide();
|
||||
$('#everything-else').hide();
|
||||
|
||||
let changeTip = setInterval(() => {
|
||||
changeLoadingTip();
|
||||
}, 3000);
|
||||
|
||||
$(window).on("load", () => {
|
||||
$(".track").attr("stroke", "url(#grad2)");
|
||||
$(".worm1").hide();
|
||||
$(".worm2").hide();
|
||||
$(window).on('load', () => {
|
||||
$('.track').attr('stroke', 'url(#grad2)');
|
||||
$('.worm1').hide();
|
||||
$('.worm2').hide();
|
||||
clearInterval(changeTip);
|
||||
|
||||
$(".loading").fadeOut({
|
||||
$('.loading').fadeOut({
|
||||
duration: 300,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
$("#everything-else").fadeIn({
|
||||
duration: 500,
|
||||
easing: "swing"
|
||||
}, 200);
|
||||
$('#everything-else').fadeIn(
|
||||
{
|
||||
duration: 500,
|
||||
easing: 'swing',
|
||||
},
|
||||
200
|
||||
);
|
||||
hexagonGrid();
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@@ -46,27 +56,27 @@ let particlesArray;
|
||||
let mouse = {
|
||||
x: null,
|
||||
y: null,
|
||||
radius: 170
|
||||
}
|
||||
radius: 170,
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', function(event) {
|
||||
window.addEventListener('mousemove', function (event) {
|
||||
mouse.x = event.x;
|
||||
mouse.y = event.y;
|
||||
mouse.radius = 170;
|
||||
});
|
||||
|
||||
document.onmousemove = (function(_) {
|
||||
var onmousestop = function() {
|
||||
mouse.radius = 0;
|
||||
}, thread;
|
||||
document.onmousemove = (function (_) {
|
||||
var onmousestop = function () {
|
||||
mouse.radius = 0;
|
||||
},
|
||||
thread;
|
||||
|
||||
return function() {
|
||||
return function () {
|
||||
clearTimeout(thread);
|
||||
thread = setTimeout(onmousestop, 10);
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
class Particle {
|
||||
constructor(x, y, directionX, directionY, size, color) {
|
||||
this.x = x;
|
||||
@@ -124,11 +134,11 @@ function init() {
|
||||
particlesArray = [];
|
||||
let numberOfParticles = (cvs.height * cvs.width) / 9000;
|
||||
for (let i = 0; i < numberOfParticles * 0.25; i++) {
|
||||
let size = (Math.random() * 35) + 1;
|
||||
let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
|
||||
let y = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
|
||||
let directionX = (Math.random() * 5) - 2.5;
|
||||
let directionY = (Math.random() * 5) - 2.5;
|
||||
let size = Math.random() * 35 + 1;
|
||||
let x = Math.random() * (innerWidth - size * 2 - size * 2) + size * 2;
|
||||
let y = Math.random() * (innerWidth - size * 2 - size * 2) + size * 2;
|
||||
let directionX = Math.random() * 5 - 2.5;
|
||||
let directionY = Math.random() * 5 - 2.5;
|
||||
let color = '#a3f6fd';
|
||||
particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
|
||||
}
|
||||
@@ -138,10 +148,12 @@ function connect() {
|
||||
let opacityValue = 1;
|
||||
for (let i = 0; i < particlesArray.length; i++) {
|
||||
for (let j = i; j < particlesArray.length; j++) {
|
||||
let distance = ((particlesArray[i].x - particlesArray[j].x) * (particlesArray[i].x - particlesArray[j].x)) + ((particlesArray[i].y - particlesArray[j].y) * (particlesArray[i].y - particlesArray[j].y));
|
||||
let distance =
|
||||
(particlesArray[i].x - particlesArray[j].x) * (particlesArray[i].x - particlesArray[j].x) +
|
||||
(particlesArray[i].y - particlesArray[j].y) * (particlesArray[i].y - particlesArray[j].y);
|
||||
|
||||
if (distance < (cvs.width/ 7) * (cvs.height / 7)) {
|
||||
opacityValue = 1 - (distance / 20000);
|
||||
if (distance < (cvs.width / 7) * (cvs.height / 7)) {
|
||||
opacityValue = 1 - distance / 20000;
|
||||
ctx.strokeStyle = 'rgba(159, 253, 50,' + opacityValue + ')';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
@@ -162,14 +174,14 @@ function animate() {
|
||||
connect();
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
window.addEventListener('resize', function () {
|
||||
cvs.width = innerWidth;
|
||||
cvs.height = this.innerHeight;
|
||||
mouse.radius = 170;
|
||||
init();
|
||||
});
|
||||
|
||||
window.addEventListener('mouseout', function() {
|
||||
window.addEventListener('mouseout', function () {
|
||||
mouse.x = undefined;
|
||||
mouse.y = undefined;
|
||||
});
|
||||
@@ -179,71 +191,71 @@ animate();
|
||||
|
||||
// HEXAGON GRID
|
||||
function hexagonGrid() {
|
||||
const HEXAGON_GRID = document.getElementsByClassName("hexagonGrid")[0];
|
||||
const CONTAINER = HEXAGON_GRID.parentNode;
|
||||
const HEXAGON_GRID = document.getElementsByClassName('hexagonGrid')[0];
|
||||
const CONTAINER = HEXAGON_GRID.parentNode;
|
||||
|
||||
let wall = {
|
||||
width: CONTAINER.offsetWidth,
|
||||
height: CONTAINER.offsetHeight
|
||||
};
|
||||
let wall = {
|
||||
width: CONTAINER.offsetWidth,
|
||||
height: CONTAINER.offsetHeight,
|
||||
};
|
||||
|
||||
let rowsNumber = Math.ceil(wall.height / 80);
|
||||
let columnsNumber = Math.ceil(wall.width / 100) + 1;
|
||||
let rowsNumber = Math.ceil(wall.height / 80);
|
||||
let columnsNumber = Math.ceil(wall.width / 100) + 1;
|
||||
|
||||
HEXAGON_GRID.innerHTML = "";
|
||||
HEXAGON_GRID.innerHTML = '';
|
||||
|
||||
for (let i = 0; i < rowsNumber; i++) {
|
||||
let row = document.createElement("div");
|
||||
row.className = "row";
|
||||
HEXAGON_GRID.appendChild(row);
|
||||
}
|
||||
|
||||
let rows = HEXAGON_GRID.querySelectorAll(".row");
|
||||
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
for (let j = 0; j < columnsNumber; j++) {
|
||||
let hexagon = document.createElement("div");
|
||||
hexagon.className = "hexagon";
|
||||
rows[i].appendChild(hexagon);
|
||||
for (let i = 0; i < rowsNumber; i++) {
|
||||
let row = document.createElement('div');
|
||||
row.className = 'row';
|
||||
HEXAGON_GRID.appendChild(row);
|
||||
}
|
||||
|
||||
let rows = HEXAGON_GRID.querySelectorAll('.row');
|
||||
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
for (let j = 0; j < columnsNumber; j++) {
|
||||
let hexagon = document.createElement('div');
|
||||
hexagon.className = 'hexagon';
|
||||
rows[i].appendChild(hexagon);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hexagonGrid();
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
hexagonGrid();
|
||||
window.addEventListener('resize', function () {
|
||||
hexagonGrid();
|
||||
});
|
||||
|
||||
// FPS METER
|
||||
(function () {
|
||||
let previousTime = Date.now();
|
||||
let frames = 0;
|
||||
let refreshRate = 1000;
|
||||
let previousTime = Date.now();
|
||||
let frames = 0;
|
||||
let refreshRate = 1000;
|
||||
|
||||
let fpsMeter = document.createElement("div");
|
||||
fpsMeter.id = "fpsMeter";
|
||||
document.body.appendChild(fpsMeter);
|
||||
let fpsMeter = document.createElement('div');
|
||||
fpsMeter.id = 'fpsMeter';
|
||||
document.body.appendChild(fpsMeter);
|
||||
|
||||
requestAnimationFrame(function loop() {
|
||||
const TIME = Date.now();
|
||||
frames++;
|
||||
if (TIME > previousTime + refreshRate) {
|
||||
let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
|
||||
previousTime = TIME;
|
||||
frames = 0;
|
||||
fpsMeter.innerHTML = "FPS: " + fps * (1000 / refreshRate);
|
||||
}
|
||||
requestAnimationFrame(loop);
|
||||
});
|
||||
requestAnimationFrame(function loop() {
|
||||
const TIME = Date.now();
|
||||
frames++;
|
||||
if (TIME > previousTime + refreshRate) {
|
||||
let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
|
||||
previousTime = TIME;
|
||||
frames = 0;
|
||||
fpsMeter.innerHTML = 'FPS: ' + fps * (1000 / refreshRate);
|
||||
}
|
||||
requestAnimationFrame(loop);
|
||||
});
|
||||
|
||||
fpsMeter.style.position = "fixed";
|
||||
fpsMeter.style.top = "25px";
|
||||
fpsMeter.style.right = "25px";
|
||||
fpsMeter.style.background = "rgba(0, 0, 0, 0.5)";
|
||||
fpsMeter.style.padding = "10px";
|
||||
fpsMeter.style.color = "rgba(255, 255, 255, 0.75)";
|
||||
fpsMeter.style.fontFamily = "Monospace";
|
||||
fpsMeter.style.fontSize = "24px";
|
||||
fpsMeter.style.zIndex = "10000";
|
||||
fpsMeter.style.position = 'fixed';
|
||||
fpsMeter.style.top = '25px';
|
||||
fpsMeter.style.right = '25px';
|
||||
fpsMeter.style.background = 'rgba(0, 0, 0, 0.5)';
|
||||
fpsMeter.style.padding = '10px';
|
||||
fpsMeter.style.color = 'rgba(255, 255, 255, 0.75)';
|
||||
fpsMeter.style.fontFamily = 'Monospace';
|
||||
fpsMeter.style.fontSize = '24px';
|
||||
fpsMeter.style.zIndex = '10000';
|
||||
})();
|
||||
|
||||
+121
-103
@@ -3,131 +3,149 @@ let games;
|
||||
let themes;
|
||||
|
||||
function changeLoadingTip() {
|
||||
const tips = ["Welcome to the land of Nothing!", "Here there is absolutely nothing for you.", "Just gotta wait for it to load", "Shouldn't take any longer", "Why are you here?", "Just one more minute", "Go read a book :)"];
|
||||
const element = document.getElementsByClassName("loading-tip")[0];
|
||||
const tips = [
|
||||
'Welcome to the land of Nothing!',
|
||||
'Here there is absolutely nothing for you.',
|
||||
'Just gotta wait for it to load',
|
||||
"Shouldn't take any longer",
|
||||
'Why are you here?',
|
||||
'Just one more minute',
|
||||
'Go read a book :)',
|
||||
];
|
||||
const element = document.getElementsByClassName('loading-tip')[0];
|
||||
|
||||
element.textContent = "Loading... \n" + tips[Math.floor(Math.random() * tips.length)];
|
||||
element.textContent = 'Loading... \n' + tips[Math.floor(Math.random() * tips.length)];
|
||||
}
|
||||
|
||||
changeLoadingTip();
|
||||
$("#everything-else, #page-loader, .games, .proxy, .settings, .cloaklaunch").hide();
|
||||
$('#everything-else, #page-loader, .games, .proxy, .settings, .cloaklaunch').hide();
|
||||
|
||||
let changeTip = setInterval(() => {
|
||||
changeLoadingTip();
|
||||
}, 3000);
|
||||
|
||||
fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
|
||||
// removing all the comments from the jsonc file
|
||||
let json = JSON.parse(jsonc.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => g ? "" : m));
|
||||
games = json["games"];
|
||||
themes = json["themes"];
|
||||
config = json["config"];
|
||||
|
||||
let gamesList = $("#gamesList");
|
||||
for (game in games) {
|
||||
gamesList.append(`<li url="games/${games[game]["path"]}" ${games[game]["aliases"] ? "aliases=\"" + games[game]["aliases"].join(',') + "\"" : ''}>${game} <span class="star">★</span> </li>`);
|
||||
}
|
||||
fetch('./config.jsonc')
|
||||
.then((e) => e.text())
|
||||
.then((jsonc) => {
|
||||
// removing all the comments from the jsonc file
|
||||
let json = JSON.parse(jsonc.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => (g ? '' : m)));
|
||||
games = json['games'];
|
||||
themes = json['themes'];
|
||||
config = json['config'];
|
||||
|
||||
let starredGamesList = JSON.parse(localStorage.getItem('starredGamesList')) || [];
|
||||
const stars = document.querySelectorAll('.star');
|
||||
stars.forEach(star => {
|
||||
star.addEventListener('click', function (event) {
|
||||
let gamesList = $('#gamesList');
|
||||
for (game in games) {
|
||||
gamesList.append(
|
||||
`<li url="games/${games[game]['path']}" ${
|
||||
games[game]['aliases'] ? 'aliases="' + games[game]['aliases'].join(',') + '"' : ''
|
||||
}>${game} <span class="star">★</span> </li>`
|
||||
);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
star.classList.toggle('filled');
|
||||
|
||||
const gameItem = star.parentNode;
|
||||
var gameName = gameItem.textContent;
|
||||
const isStarred = starredGamesList.includes(gameName);
|
||||
let starredGamesList = JSON.parse(localStorage.getItem('starredGamesList')) || [];
|
||||
const stars = document.querySelectorAll('.star');
|
||||
stars.forEach((star) => {
|
||||
star.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
star.classList.toggle('filled');
|
||||
|
||||
if (isStarred) {
|
||||
starredGamesList = starredGamesList.filter(gameName => gameName !== gameName);
|
||||
const gameItem = star.parentNode;
|
||||
var gameName = gameItem.textContent;
|
||||
const isStarred = starredGamesList.includes(gameName);
|
||||
|
||||
//THIS DOES NOT PUT THE GAME BACK IN ORDER ACCORDING TO THE WAY THE USER SORTED IT
|
||||
//so for the weird ppl that sort by reverse alphabetical it should act pretty weird
|
||||
//this is bc im layz and copy pasted this alphabetical sort thing, ill implement based off users sort later
|
||||
const gameItem = star.closest('li');
|
||||
const parent = gameItem.parentNode;
|
||||
if (isStarred) {
|
||||
starredGamesList = starredGamesList.filter((gameName) => gameName !== gameName);
|
||||
|
||||
const originalPosition = Array.from(parent.children)
|
||||
.sort((a, b) => a.textContent.localeCompare(b.textContent))
|
||||
.findIndex(item => item === gameItem);
|
||||
//THIS DOES NOT PUT THE GAME BACK IN ORDER ACCORDING TO THE WAY THE USER SORTED IT
|
||||
//so for the weird ppl that sort by reverse alphabetical it should act pretty weird
|
||||
//this is bc im layz and copy pasted this alphabetical sort thing, ill implement based off users sort later
|
||||
const gameItem = star.closest('li');
|
||||
const parent = gameItem.parentNode;
|
||||
|
||||
parent.removeChild(gameItem);
|
||||
const originalPosition = Array.from(parent.children)
|
||||
.sort((a, b) => a.textContent.localeCompare(b.textContent))
|
||||
.findIndex((item) => item === gameItem);
|
||||
|
||||
parent.insertBefore(gameItem, parent.children[originalPosition]);
|
||||
} else {
|
||||
starredGamesList.unshift(gameName);
|
||||
}
|
||||
parent.removeChild(gameItem);
|
||||
|
||||
localStorage.setItem('starredGamesList', JSON.stringify(starredGamesList));
|
||||
updateGameList();
|
||||
parent.insertBefore(gameItem, parent.children[originalPosition]);
|
||||
} else {
|
||||
starredGamesList.unshift(gameName);
|
||||
}
|
||||
|
||||
localStorage.setItem('starredGamesList', JSON.stringify(starredGamesList));
|
||||
updateGameList();
|
||||
});
|
||||
});
|
||||
// Pushes all starred games to the top
|
||||
function updateGameList() {
|
||||
const gamesList = document.getElementById('gamesList');
|
||||
const children = Array.from(gamesList.children);
|
||||
|
||||
children.forEach((gameItem) => {
|
||||
const currentGameName = gameItem.textContent;
|
||||
const stars = gameItem.querySelector('.star');
|
||||
|
||||
if (starredGamesList.includes(currentGameName)) {
|
||||
stars.classList.add('filled');
|
||||
gamesList.insertBefore(gameItem, gamesList.firstChild);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateGameList();
|
||||
|
||||
$('#gamesList li').on('click', function () {
|
||||
let url = $(this).attr('url');
|
||||
inGame = true;
|
||||
$('#everything-else').fadeOut();
|
||||
$('#page-loader').fadeIn();
|
||||
$('#page-loader iframe').attr('src', url);
|
||||
$('#page-loader iframe')[0].focus();
|
||||
currentMenu = $('#page-loader');
|
||||
});
|
||||
});
|
||||
// Pushes all starred games to the top
|
||||
function updateGameList() {
|
||||
const gamesList = document.getElementById('gamesList');
|
||||
const children = Array.from(gamesList.children);
|
||||
|
||||
children.forEach(gameItem => {
|
||||
const currentGameName = gameItem.textContent;
|
||||
const stars = gameItem.querySelector('.star');
|
||||
|
||||
if (starredGamesList.includes(currentGameName)) {
|
||||
stars.classList.add('filled');
|
||||
gamesList.insertBefore(gameItem, gamesList.firstChild);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateGameList();
|
||||
|
||||
$("#gamesList li").on("click", function() {
|
||||
let url = $(this).attr("url");
|
||||
inGame = true;
|
||||
$("#everything-else").fadeOut();
|
||||
$("#page-loader").fadeIn();
|
||||
$("#page-loader iframe").attr("src", url);
|
||||
$("#page-loader iframe")[0].focus();
|
||||
currentMenu = $("#page-loader");
|
||||
});
|
||||
});
|
||||
|
||||
$(window).on("load", () => {
|
||||
$(".track").attr("stroke", "url(#grad2)");
|
||||
$(".worm1").hide();
|
||||
$(".worm2").hide();
|
||||
$(window).on('load', () => {
|
||||
$('.track').attr('stroke', 'url(#grad2)');
|
||||
$('.worm1').hide();
|
||||
$('.worm2').hide();
|
||||
clearInterval(changeTip);
|
||||
|
||||
$(".loading").fadeOut({
|
||||
$('.loading').fadeOut({
|
||||
duration: 300,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
$("#everything-else").fadeIn({
|
||||
duration: 500,
|
||||
easing: "swing"
|
||||
}, 200);
|
||||
$('#everything-else').fadeIn(
|
||||
{
|
||||
duration: 500,
|
||||
easing: 'swing',
|
||||
},
|
||||
200
|
||||
);
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
jQuery.fn.extend({showModal: function() {
|
||||
return this.each(function() {
|
||||
if(this.tagName=== "DIALOG"){
|
||||
this.showModal();
|
||||
}
|
||||
});
|
||||
}});
|
||||
jQuery.fn.extend({
|
||||
showModal: function () {
|
||||
return this.each(function () {
|
||||
if (this.tagName === 'DIALOG') {
|
||||
this.showModal();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
(function () {
|
||||
let previousTime = Date.now();
|
||||
let frames = 0;
|
||||
let refreshRate = 1000;
|
||||
|
||||
let fpsMeter = document.createElement("div");
|
||||
fpsMeter.id = "fpsMeter";
|
||||
let fpsMeter = document.createElement('div');
|
||||
fpsMeter.id = 'fpsMeter';
|
||||
document.body.appendChild(fpsMeter);
|
||||
|
||||
requestAnimationFrame(function loop() {
|
||||
@@ -137,21 +155,21 @@ jQuery.fn.extend({showModal: function() {
|
||||
let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
|
||||
previousTime = TIME;
|
||||
frames = 0;
|
||||
fpsMeter.innerHTML = "FPS: " + fps * (1000 / refreshRate);
|
||||
fpsMeter.innerHTML = 'FPS: ' + fps * (1000 / refreshRate);
|
||||
}
|
||||
requestAnimationFrame(loop);
|
||||
});
|
||||
|
||||
fpsMeter.style.position = "fixed";
|
||||
fpsMeter.style.top = "2.5%";
|
||||
fpsMeter.style.right = "1%";
|
||||
fpsMeter.style.zIndex = "50";
|
||||
fpsMeter.style.background = "rgba(0, 0, 0, 0.5)";
|
||||
fpsMeter.style.opacity = "0.5";
|
||||
fpsMeter.style.padding = "10px";
|
||||
fpsMeter.style.color = "rgba(255, 255, 255, 0.75)";
|
||||
fpsMeter.style.position = 'fixed';
|
||||
fpsMeter.style.top = '2.5%';
|
||||
fpsMeter.style.right = '1%';
|
||||
fpsMeter.style.zIndex = '50';
|
||||
fpsMeter.style.background = 'rgba(0, 0, 0, 0.5)';
|
||||
fpsMeter.style.opacity = '0.5';
|
||||
fpsMeter.style.padding = '10px';
|
||||
fpsMeter.style.color = 'rgba(255, 255, 255, 0.75)';
|
||||
fpsMeter.style.fontFamily = "'Flexi IBM VGA True (437', monospace";
|
||||
fpsMeter.style.fontSize = "24px";
|
||||
fpsMeter.style.zIndex = "10000";
|
||||
fpsMeter.style.pointerEvents = "none";
|
||||
})();
|
||||
fpsMeter.style.fontSize = '24px';
|
||||
fpsMeter.style.zIndex = '10000';
|
||||
fpsMeter.style.pointerEvents = 'none';
|
||||
})();
|
||||
|
||||
+2
-4
@@ -1,7 +1,5 @@
|
||||
{
|
||||
"typeAcquisition": {
|
||||
"include": [
|
||||
"jquery"
|
||||
]
|
||||
"include": ["jquery"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user