formatted files according to prettier configuration
This commit is contained in:
MonkeyGG2
@@ -1,26 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<title>Error 404</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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;
|
||||
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;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'Fira Mono', monospace;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wisedom {
|
||||
@@ -31,291 +30,301 @@
|
||||
letter-spacing: 0px;
|
||||
font-size: 40px;
|
||||
min-height: 50px;
|
||||
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
|
||||
animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
|
||||
border-right: 3px solid #009400;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
border-color: transparent
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.glitch {
|
||||
font-size: 10vw;
|
||||
position:relative;
|
||||
color:#fff;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
.line:not(:first-child) {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.line:nth-child(1) {
|
||||
animation:clip 3000ms -300ms linear infinite,glitch1 500ms -184ms linear infinite;
|
||||
animation: clip 3000ms -300ms linear infinite, glitch1 500ms -184ms linear infinite;
|
||||
}
|
||||
@keyframes glitch1 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(2px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(2px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(5px);
|
||||
color:#AC1212;
|
||||
transform: translateX(5px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(1px);
|
||||
color:#fff;
|
||||
transform: translateX(1px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}.line:nth-child(2) {
|
||||
animation:clip 3000ms -600ms linear infinite,glitch2 500ms -740ms linear infinite;
|
||||
}
|
||||
.line:nth-child(2) {
|
||||
animation: clip 3000ms -600ms linear infinite, glitch2 500ms -740ms linear infinite;
|
||||
}
|
||||
@keyframes glitch2 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(5px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(5px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(-1px);
|
||||
color:#AC1212;
|
||||
transform: translateX(-1px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-1px);
|
||||
color:#fff;
|
||||
transform: translateX(-1px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}.line:nth-child(3) {
|
||||
animation:clip 3000ms -900ms linear infinite,glitch3 500ms -333ms linear infinite;
|
||||
}
|
||||
.line:nth-child(3) {
|
||||
animation: clip 3000ms -900ms linear infinite, glitch3 500ms -333ms linear infinite;
|
||||
}
|
||||
@keyframes glitch3 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-2px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(-2px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(3px);
|
||||
color:#AC1212;
|
||||
transform: translateX(3px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(0px);
|
||||
color:#fff;
|
||||
transform: translateX(0px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}.line:nth-child(4) {
|
||||
animation:clip 3000ms -1200ms linear infinite,glitch4 500ms -733ms linear infinite;
|
||||
}
|
||||
.line:nth-child(4) {
|
||||
animation: clip 3000ms -1200ms linear infinite, glitch4 500ms -733ms linear infinite;
|
||||
}
|
||||
@keyframes glitch4 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-4px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(-4px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(5px);
|
||||
color:#AC1212;
|
||||
transform: translateX(5px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(0px);
|
||||
color:#fff;
|
||||
transform: translateX(0px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}.line:nth-child(5) {
|
||||
animation:clip 3000ms -1500ms linear infinite,glitch5 500ms -896ms linear infinite;
|
||||
}
|
||||
.line:nth-child(5) {
|
||||
animation: clip 3000ms -1500ms linear infinite, glitch5 500ms -896ms linear infinite;
|
||||
}
|
||||
@keyframes glitch5 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-3px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(-3px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(5px);
|
||||
color:#AC1212;
|
||||
transform: translateX(5px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(3px);
|
||||
color:#fff;
|
||||
transform: translateX(3px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}.line:nth-child(6) {
|
||||
animation:clip 3000ms -1800ms linear infinite,glitch6 500ms -815ms linear infinite;
|
||||
}
|
||||
.line:nth-child(6) {
|
||||
animation: clip 3000ms -1800ms linear infinite, glitch6 500ms -815ms linear infinite;
|
||||
}
|
||||
@keyframes glitch6 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-4px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(-4px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(-4px);
|
||||
color:#AC1212;
|
||||
transform: translateX(-4px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-3px);
|
||||
color:#fff;
|
||||
transform: translateX(-3px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}.line:nth-child(7) {
|
||||
animation:clip 3000ms -2100ms linear infinite,glitch7 500ms -34ms linear infinite;
|
||||
}
|
||||
.line:nth-child(7) {
|
||||
animation: clip 3000ms -2100ms linear infinite, glitch7 500ms -34ms linear infinite;
|
||||
}
|
||||
@keyframes glitch7 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(2px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(2px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(5px);
|
||||
color:#AC1212;
|
||||
transform: translateX(5px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-3px);
|
||||
color:#fff;
|
||||
transform: translateX(-3px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}.line:nth-child(8) {
|
||||
animation:clip 3000ms -2400ms linear infinite,glitch8 500ms -842ms linear infinite;
|
||||
}
|
||||
.line:nth-child(8) {
|
||||
animation: clip 3000ms -2400ms linear infinite, glitch8 500ms -842ms linear infinite;
|
||||
}
|
||||
@keyframes glitch8 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(4px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(4px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(1px);
|
||||
color:#AC1212;
|
||||
transform: translateX(1px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-4px);
|
||||
color:#fff;
|
||||
transform: translateX(-4px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}.line:nth-child(9) {
|
||||
animation:clip 3000ms -2700ms linear infinite,glitch9 500ms -751ms linear infinite;
|
||||
}
|
||||
.line:nth-child(9) {
|
||||
animation: clip 3000ms -2700ms linear infinite, glitch9 500ms -751ms linear infinite;
|
||||
}
|
||||
@keyframes glitch9 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(1px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(1px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(2px);
|
||||
color:#AC1212;
|
||||
transform: translateX(2px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(-4px);
|
||||
color:#fff;
|
||||
transform: translateX(-4px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}.line:nth-child(10) {
|
||||
animation:clip 3000ms -3000ms linear infinite,glitch10 500ms -648ms linear infinite;
|
||||
}
|
||||
.line:nth-child(10) {
|
||||
animation: clip 3000ms -3000ms linear infinite, glitch10 500ms -648ms linear infinite;
|
||||
}
|
||||
@keyframes glitch10 {
|
||||
0% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
80% {
|
||||
transform:translateX(0);
|
||||
color:#fff;
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
85% {
|
||||
transform:translateX(-3px);
|
||||
color:#4E9A26;
|
||||
transform: translateX(-3px);
|
||||
color: #4e9a26;
|
||||
}
|
||||
90% {
|
||||
transform:translateX(2px);
|
||||
color:#AC1212;
|
||||
transform: translateX(2px);
|
||||
color: #ac1212;
|
||||
}
|
||||
95% {
|
||||
transform:translateX(3px);
|
||||
color:#fff;
|
||||
transform: translateX(3px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}@keyframes clip {
|
||||
}
|
||||
@keyframes clip {
|
||||
0% {
|
||||
clip-path:polygon(0 100%,100% 100%,100% 120%,0 120%);
|
||||
clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
|
||||
}
|
||||
100% {
|
||||
clip-path:polygon(0 -20%,100% -20%,100% 0%,0 0);
|
||||
clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -332,7 +341,6 @@
|
||||
a:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="glitch">
|
||||
<div class="line">Error 404</div>
|
||||
@@ -348,7 +356,15 @@
|
||||
<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 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];
|
||||
|
||||
@@ -381,6 +397,5 @@
|
||||
|
||||
setTimeout(type, 2000);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+1
-4
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
|
||||
+49
-46
@@ -12,7 +12,6 @@
|
||||
--font-color: #dcddde;
|
||||
--font-family: 'Assistant', sans-serif;
|
||||
|
||||
|
||||
--displacement: -0.1rem;
|
||||
--tremble: -10deg;
|
||||
--trembleF: 5deg;
|
||||
@@ -24,17 +23,17 @@
|
||||
--time: 250ms;
|
||||
|
||||
/*not sure where these vars are used*/
|
||||
--input-color: #99A3BA;
|
||||
--input-border: #CDD9ED;
|
||||
--input-color: #99a3ba;
|
||||
--input-border: #cdd9ed;
|
||||
--input-background: #fff;
|
||||
--input-placeholder: #CBD1DC;
|
||||
--input-border-focus: #275EFE;
|
||||
--input-placeholder: #cbd1dc;
|
||||
--input-border-focus: #275efe;
|
||||
--group-color: var(--input-color);
|
||||
--group-border: var(--input-border);
|
||||
--group-background: #EEF4FF;
|
||||
--group-background: #eef4ff;
|
||||
--group-color-focus: #fff;
|
||||
--group-border-focus: var(--input-border-focus);
|
||||
--group-background-focus: #678EFE;
|
||||
--group-background-focus: #678efe;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -46,7 +45,7 @@
|
||||
background-clip: content-box;
|
||||
border-radius: 16px;
|
||||
border: 2.9px solid transparent;
|
||||
box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
|
||||
box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25);
|
||||
transition: all 0.2s ease-in;
|
||||
}
|
||||
|
||||
@@ -55,7 +54,13 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: linear-gradient(90deg, var(--scrollbar-color), var(--scrollbar-color) 1px, var(--scroll-track-color) 0, var(--scroll-track-color));
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--scrollbar-color),
|
||||
var(--scrollbar-color) 1px,
|
||||
var(--scroll-track-color) 0,
|
||||
var(--scroll-track-color)
|
||||
);
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -67,7 +72,7 @@ body {
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
animation: fadein 1s;
|
||||
color: var(--font-color)
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
body.noscript {
|
||||
@@ -108,8 +113,7 @@ body.noscript {
|
||||
|
||||
.homepage,
|
||||
.games,
|
||||
.settings
|
||||
{
|
||||
.settings {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -132,7 +136,6 @@ body.noscript {
|
||||
background-color: var(--games-color);
|
||||
border: 50px, solid, var(--bg);
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.games {
|
||||
@@ -217,7 +220,6 @@ body.noscript {
|
||||
font-family: var(--font-family);
|
||||
color: var(--font-color);
|
||||
background-color: var(--block-color);
|
||||
|
||||
}
|
||||
|
||||
#search {
|
||||
@@ -230,7 +232,8 @@ body.noscript {
|
||||
background-color: var(--block-color);
|
||||
}
|
||||
|
||||
#sort, #keybind-slot-1 {
|
||||
#sort,
|
||||
#keybind-slot-1 {
|
||||
all: unset;
|
||||
margin: 0;
|
||||
border: none;
|
||||
@@ -242,7 +245,7 @@ body.noscript {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.keySlot{
|
||||
.keySlot {
|
||||
margin: 0;
|
||||
border: none;
|
||||
background-color: var(--bg);
|
||||
@@ -270,11 +273,11 @@ logo img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img[alt="MonkeyGG2 Icon"] {
|
||||
img[alt='MonkeyGG2 Icon'] {
|
||||
filter: brightness(110%);
|
||||
}
|
||||
|
||||
img[alt="Proxy Icon"] {
|
||||
img[alt='Proxy Icon'] {
|
||||
margin: -1rem 0;
|
||||
}
|
||||
|
||||
@@ -284,7 +287,8 @@ img[alt="Proxy Icon"] {
|
||||
max-width: 128px;
|
||||
max-height: 128px;
|
||||
}
|
||||
.card .img-container>img,svg {
|
||||
.card .img-container > img,
|
||||
svg {
|
||||
max-width: 128px;
|
||||
max-height: 128px;
|
||||
}
|
||||
@@ -315,7 +319,7 @@ img[alt="Proxy Icon"] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card .img-container>img,
|
||||
.card .img-container > img,
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -405,7 +409,7 @@ svg {
|
||||
|
||||
.switch__wrapper::before,
|
||||
.switch__wrapper::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -437,23 +441,22 @@ svg {
|
||||
animation: checked__toggle var(--time) ease-in forwards;
|
||||
}
|
||||
|
||||
input:active+.switch__wrapper .switch__toggle {
|
||||
input:active + .switch__wrapper .switch__toggle {
|
||||
width: 1.6rem;
|
||||
}
|
||||
|
||||
input:checked+.switch__wrapper {
|
||||
input:checked + .switch__wrapper {
|
||||
transform-origin: right center;
|
||||
animation-name: checked__wrapper--r;
|
||||
background-color: var(--block-color);
|
||||
}
|
||||
|
||||
input:checked+.switch__wrapper .switch__toggle {
|
||||
input:checked + .switch__wrapper .switch__toggle {
|
||||
background: #fff;
|
||||
animation-name: checked__toggle--r;
|
||||
}
|
||||
|
||||
@keyframes checked__wrapper {
|
||||
|
||||
0%,
|
||||
45%,
|
||||
100% {
|
||||
@@ -476,7 +479,6 @@ input:checked+.switch__wrapper .switch__toggle {
|
||||
}
|
||||
|
||||
@keyframes checked__wrapper--r {
|
||||
|
||||
0%,
|
||||
45%,
|
||||
100% {
|
||||
@@ -574,7 +576,8 @@ input:checked+.switch__wrapper .switch__toggle {
|
||||
}
|
||||
|
||||
/* Hover effect for the button */
|
||||
.submit-button:hover, .save-button:hover {
|
||||
.submit-button:hover,
|
||||
.save-button:hover {
|
||||
background-color: var(--hover-color);
|
||||
}
|
||||
|
||||
@@ -623,60 +626,60 @@ button.in-game-button {
|
||||
border: none;
|
||||
border-bottom: 3px solid var(--font-color);
|
||||
will-change: transform;
|
||||
animation: bounceY 2s .5s;
|
||||
transition: transform .5s cubic-bezier(.55, 0, .1, 1);
|
||||
animation: bounceY 2s 0.5s;
|
||||
transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button.in-game-button svg {
|
||||
pointer-events: none;
|
||||
color: var(--font-color);
|
||||
margin-right: .625rem;
|
||||
display: inline-block
|
||||
margin-right: 0.625rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button.in-game-button img {
|
||||
pointer-events: none;
|
||||
width: 33px
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
button.in-game-button:active {
|
||||
background: #aaa
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
button.in-game-button[attr-active=true] {
|
||||
transform: translateX(0)
|
||||
button.in-game-button[attr-active='true'] {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
button.in-game-button:not(hover) {
|
||||
transform: translateX(-32px)
|
||||
transform: translateX(-32px);
|
||||
}
|
||||
|
||||
button.in-game-button:hover,
|
||||
button.in-game-button:active {
|
||||
transform: translateX(0px)
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
@media(max-height: 350px) and (orientation:landscape) {
|
||||
button.in-game-button[attr-active=true] {
|
||||
transform: translateX(-75px)
|
||||
@media (max-height: 350px) and (orientation: landscape) {
|
||||
button.in-game-button[attr-active='true'] {
|
||||
transform: translateX(-75px);
|
||||
}
|
||||
}
|
||||
|
||||
button.in-game-button[attr-snapped=true] svg {
|
||||
display: none
|
||||
button.in-game-button[attr-snapped='true'] svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button.in-game-button[attr-snapped=true] img {
|
||||
transform: translate(-5px)
|
||||
button.in-game-button[attr-snapped='true'] img {
|
||||
transform: translate(-5px);
|
||||
}
|
||||
|
||||
#refresh {
|
||||
right: 0;
|
||||
border-radius: 290486px 0 0 290486px;
|
||||
left: auto
|
||||
left: auto;
|
||||
}
|
||||
|
||||
#refresh:not(hover) {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
/*--------------------
|
||||
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,
|
||||
angle: (Math.PI / 180) * -90,
|
||||
h1: rand(0, 360),
|
||||
h2: rand(0, 360),
|
||||
s1: rand(20, 90),
|
||||
@@ -14,13 +14,14 @@ const opt = {
|
||||
l1: rand(30, 80),
|
||||
l2: rand(30, 80),
|
||||
strokeWeight: 2,
|
||||
tail: 82 };
|
||||
tail: 82,
|
||||
};
|
||||
|
||||
changeTitleColor();
|
||||
|
||||
const Particles = [];
|
||||
let time = 0;
|
||||
document.body.addEventListener("click", () => {
|
||||
document.body.addEventListener('click', () => {
|
||||
if (inGame) {
|
||||
return;
|
||||
}
|
||||
@@ -90,14 +91,7 @@ class Particle {
|
||||
|
||||
follow() {
|
||||
let angle =
|
||||
noise(
|
||||
this.x * opt.noiseScale,
|
||||
this.y * opt.noiseScale,
|
||||
time * opt.noiseScale) *
|
||||
|
||||
Math.PI *
|
||||
0.5 +
|
||||
opt.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);
|
||||
@@ -131,15 +125,15 @@ class Particle {
|
||||
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");
|
||||
canvas.parent('particles');
|
||||
|
||||
for (let i = 0; i < opt.particles; i++) {
|
||||
Particles.push(new Particle(Math.random() * width, Math.random() * height));
|
||||
@@ -153,7 +147,7 @@ Draw
|
||||
|
||||
let inGame = false;
|
||||
function draw() {
|
||||
if (!inGame && document.visibilityState == "visible") {
|
||||
if (!inGame && document.visibilityState == 'visible') {
|
||||
time++;
|
||||
background(0, 100 - opt.tail);
|
||||
|
||||
@@ -161,6 +155,8 @@ function draw() {
|
||||
p.update();
|
||||
p.render();
|
||||
}
|
||||
} else {
|
||||
background(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -172,5 +168,7 @@ function windowResized() {
|
||||
}
|
||||
|
||||
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}%))`;
|
||||
}
|
||||
+64
-52
@@ -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({
|
||||
$('#everything-else').fadeIn(
|
||||
{
|
||||
duration: 500,
|
||||
easing: "swing"
|
||||
}, 200);
|
||||
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() {
|
||||
document.onmousemove = (function (_) {
|
||||
var onmousestop = function () {
|
||||
mouse.radius = 0;
|
||||
}, thread;
|
||||
},
|
||||
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,31 +191,31 @@ animate();
|
||||
|
||||
// HEXAGON GRID
|
||||
function hexagonGrid() {
|
||||
const HEXAGON_GRID = document.getElementsByClassName("hexagonGrid")[0];
|
||||
const HEXAGON_GRID = document.getElementsByClassName('hexagonGrid')[0];
|
||||
const CONTAINER = HEXAGON_GRID.parentNode;
|
||||
|
||||
let wall = {
|
||||
width: CONTAINER.offsetWidth,
|
||||
height: CONTAINER.offsetHeight
|
||||
height: CONTAINER.offsetHeight,
|
||||
};
|
||||
|
||||
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";
|
||||
let row = document.createElement('div');
|
||||
row.className = 'row';
|
||||
HEXAGON_GRID.appendChild(row);
|
||||
}
|
||||
|
||||
let rows = HEXAGON_GRID.querySelectorAll(".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";
|
||||
let hexagon = document.createElement('div');
|
||||
hexagon.className = 'hexagon';
|
||||
rows[i].appendChild(hexagon);
|
||||
}
|
||||
}
|
||||
@@ -211,7 +223,7 @@ function hexagonGrid() {
|
||||
|
||||
hexagonGrid();
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
window.addEventListener('resize', function () {
|
||||
hexagonGrid();
|
||||
});
|
||||
|
||||
@@ -221,8 +233,8 @@ window.addEventListener('resize', function() {
|
||||
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() {
|
||||
@@ -232,18 +244,18 @@ window.addEventListener('resize', 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 = "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';
|
||||
})();
|
||||
|
||||
+69
-51
@@ -3,36 +3,49 @@ 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) => {
|
||||
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 json = JSON.parse(jsonc.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => (g ? '' : m)));
|
||||
games = json['games'];
|
||||
themes = json['themes'];
|
||||
config = json['config'];
|
||||
|
||||
let gamesList = $("#gamesList");
|
||||
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>`);
|
||||
gamesList.append(
|
||||
`<li url="games/${games[game]['path']}" ${
|
||||
games[game]['aliases'] ? 'aliases="' + games[game]['aliases'].join(',') + '"' : ''
|
||||
}>${game} <span class="star">★</span> </li>`
|
||||
);
|
||||
}
|
||||
|
||||
let starredGamesList = JSON.parse(localStorage.getItem('starredGamesList')) || [];
|
||||
const stars = document.querySelectorAll('.star');
|
||||
stars.forEach(star => {
|
||||
stars.forEach((star) => {
|
||||
star.addEventListener('click', function (event) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
star.classList.toggle('filled');
|
||||
@@ -42,7 +55,7 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
|
||||
const isStarred = starredGamesList.includes(gameName);
|
||||
|
||||
if (isStarred) {
|
||||
starredGamesList = starredGamesList.filter(gameName => gameName !== gameName);
|
||||
starredGamesList = starredGamesList.filter((gameName) => gameName !== 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
|
||||
@@ -52,7 +65,7 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
|
||||
|
||||
const originalPosition = Array.from(parent.children)
|
||||
.sort((a, b) => a.textContent.localeCompare(b.textContent))
|
||||
.findIndex(item => item === gameItem);
|
||||
.findIndex((item) => item === gameItem);
|
||||
|
||||
parent.removeChild(gameItem);
|
||||
|
||||
@@ -70,7 +83,7 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
|
||||
const gamesList = document.getElementById('gamesList');
|
||||
const children = Array.from(gamesList.children);
|
||||
|
||||
children.forEach(gameItem => {
|
||||
children.forEach((gameItem) => {
|
||||
const currentGameName = gameItem.textContent;
|
||||
const stars = gameItem.querySelector('.star');
|
||||
|
||||
@@ -83,51 +96,56 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
|
||||
|
||||
updateGameList();
|
||||
|
||||
$("#gamesList li").on("click", function() {
|
||||
let url = $(this).attr("url");
|
||||
$('#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");
|
||||
$('#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({
|
||||
$('#everything-else').fadeIn(
|
||||
{
|
||||
duration: 500,
|
||||
easing: "swing"
|
||||
}, 200);
|
||||
easing: 'swing',
|
||||
},
|
||||
200
|
||||
);
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
jQuery.fn.extend({showModal: function() {
|
||||
return this.each(function() {
|
||||
if(this.tagName=== "DIALOG"){
|
||||
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';
|
||||
})();
|
||||
+1
-3
@@ -1,7 +1,5 @@
|
||||
{
|
||||
"typeAcquisition": {
|
||||
"include": [
|
||||
"jquery"
|
||||
]
|
||||
"include": ["jquery"]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user