aheh/monkeygg2.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatted files according to prettier configuration

Browse Source
This commit is contained in:
MonkeyGG2
2023-11-29 22:10:11 -05:00
parent 7cec51861b
commit bf398e1788
9 changed files with 1225 additions and 1184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
404.html
+52 -37
View File
@@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Error 404</title> <title>Error 404</title>
</head> </head>
@@ -10,7 +9,7 @@
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400'); @import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
body { body {
background:repeating-linear-gradient(0deg,#0E0D0E 25%,#0E0D0E 50%,#171819 50%,#171819 75%); background: repeating-linear-gradient(0deg, #0e0d0e 25%, #0e0d0e 50%, #171819 50%, #171819 75%);
background-size: 10px 10px; background-size: 10px 10px;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
@@ -31,13 +30,13 @@
letter-spacing: 0px; letter-spacing: 0px;
font-size: 40px; font-size: 40px;
min-height: 50px; 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; border-right: 3px solid #009400;
} }
@keyframes blink { @keyframes blink {
50% { 50% {
border-color: transparent border-color: transparent;
} }
} }
.glitch { .glitch {
@@ -63,11 +62,11 @@
} }
85% { 85% {
transform: translateX(2px); transform: translateX(2px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(5px); transform: translateX(5px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(1px); transform: translateX(1px);
@@ -76,7 +75,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}.line:nth-child(2) { }
.line:nth-child(2) {
animation: clip 3000ms -600ms linear infinite, glitch2 500ms -740ms linear infinite; animation: clip 3000ms -600ms linear infinite, glitch2 500ms -740ms linear infinite;
} }
@keyframes glitch2 { @keyframes glitch2 {
@@ -89,11 +89,11 @@
} }
85% { 85% {
transform: translateX(5px); transform: translateX(5px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(-1px); transform: translateX(-1px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(-1px); transform: translateX(-1px);
@@ -102,7 +102,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}.line:nth-child(3) { }
.line:nth-child(3) {
animation: clip 3000ms -900ms linear infinite, glitch3 500ms -333ms linear infinite; animation: clip 3000ms -900ms linear infinite, glitch3 500ms -333ms linear infinite;
} }
@keyframes glitch3 { @keyframes glitch3 {
@@ -115,11 +116,11 @@
} }
85% { 85% {
transform: translateX(-2px); transform: translateX(-2px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(3px); transform: translateX(3px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(0px); transform: translateX(0px);
@@ -128,7 +129,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}.line:nth-child(4) { }
.line:nth-child(4) {
animation: clip 3000ms -1200ms linear infinite, glitch4 500ms -733ms linear infinite; animation: clip 3000ms -1200ms linear infinite, glitch4 500ms -733ms linear infinite;
} }
@keyframes glitch4 { @keyframes glitch4 {
@@ -141,11 +143,11 @@
} }
85% { 85% {
transform: translateX(-4px); transform: translateX(-4px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(5px); transform: translateX(5px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(0px); transform: translateX(0px);
@@ -154,7 +156,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}.line:nth-child(5) { }
.line:nth-child(5) {
animation: clip 3000ms -1500ms linear infinite, glitch5 500ms -896ms linear infinite; animation: clip 3000ms -1500ms linear infinite, glitch5 500ms -896ms linear infinite;
} }
@keyframes glitch5 { @keyframes glitch5 {
@@ -167,11 +170,11 @@
} }
85% { 85% {
transform: translateX(-3px); transform: translateX(-3px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(5px); transform: translateX(5px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(3px); transform: translateX(3px);
@@ -180,7 +183,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}.line:nth-child(6) { }
.line:nth-child(6) {
animation: clip 3000ms -1800ms linear infinite, glitch6 500ms -815ms linear infinite; animation: clip 3000ms -1800ms linear infinite, glitch6 500ms -815ms linear infinite;
} }
@keyframes glitch6 { @keyframes glitch6 {
@@ -193,11 +197,11 @@
} }
85% { 85% {
transform: translateX(-4px); transform: translateX(-4px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(-4px); transform: translateX(-4px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(-3px); transform: translateX(-3px);
@@ -206,7 +210,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}.line:nth-child(7) { }
.line:nth-child(7) {
animation: clip 3000ms -2100ms linear infinite, glitch7 500ms -34ms linear infinite; animation: clip 3000ms -2100ms linear infinite, glitch7 500ms -34ms linear infinite;
} }
@keyframes glitch7 { @keyframes glitch7 {
@@ -219,11 +224,11 @@
} }
85% { 85% {
transform: translateX(2px); transform: translateX(2px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(5px); transform: translateX(5px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(-3px); transform: translateX(-3px);
@@ -232,7 +237,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}.line:nth-child(8) { }
.line:nth-child(8) {
animation: clip 3000ms -2400ms linear infinite, glitch8 500ms -842ms linear infinite; animation: clip 3000ms -2400ms linear infinite, glitch8 500ms -842ms linear infinite;
} }
@keyframes glitch8 { @keyframes glitch8 {
@@ -245,11 +251,11 @@
} }
85% { 85% {
transform: translateX(4px); transform: translateX(4px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(1px); transform: translateX(1px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(-4px); transform: translateX(-4px);
@@ -258,7 +264,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}.line:nth-child(9) { }
.line:nth-child(9) {
animation: clip 3000ms -2700ms linear infinite, glitch9 500ms -751ms linear infinite; animation: clip 3000ms -2700ms linear infinite, glitch9 500ms -751ms linear infinite;
} }
@keyframes glitch9 { @keyframes glitch9 {
@@ -271,11 +278,11 @@
} }
85% { 85% {
transform: translateX(1px); transform: translateX(1px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(2px); transform: translateX(2px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(-4px); transform: translateX(-4px);
@@ -284,7 +291,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}.line:nth-child(10) { }
.line:nth-child(10) {
animation: clip 3000ms -3000ms linear infinite, glitch10 500ms -648ms linear infinite; animation: clip 3000ms -3000ms linear infinite, glitch10 500ms -648ms linear infinite;
} }
@keyframes glitch10 { @keyframes glitch10 {
@@ -297,11 +305,11 @@
} }
85% { 85% {
transform: translateX(-3px); transform: translateX(-3px);
color:#4E9A26; color: #4e9a26;
} }
90% { 90% {
transform: translateX(2px); transform: translateX(2px);
color:#AC1212; color: #ac1212;
} }
95% { 95% {
transform: translateX(3px); transform: translateX(3px);
@@ -310,7 +318,8 @@
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
}@keyframes clip { }
@keyframes clip {
0% { 0% {
clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%); clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
} }
@@ -332,7 +341,6 @@
a:hover { a:hover {
filter: brightness(90%); filter: brightness(90%);
} }
</style> </style>
<div class="glitch"> <div class="glitch">
<div class="line">Error 404</div> <div class="line">Error 404</div>
@@ -348,7 +356,15 @@
<span class="wisedom"></span> <span class="wisedom"></span>
<h6><a href="/">Return home?</a></h6> <h6><a href="/">Return home?</a></h6>
<script> <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 element = document.getElementsByClassName('wisedom')[0];
const button = document.getElementsByTagName('a')[0]; const button = document.getElementsByTagName('a')[0];
@@ -382,5 +398,4 @@
setTimeout(type, 2000); setTimeout(type, 2000);
</script> </script>
</body> </body>
</html> </html>
config.jsonc
+1 -4
View File
@@ -23,10 +23,7 @@
"1v1.LOL": { "1v1.LOL": {
"path": "1v1-lol", "path": "1v1-lol",
"aliases": [], "aliases": [],
"categories": [ "categories": ["online", "battle"]
"online",
"battle"
]
}, },
"10 minutes till dawn": { "10 minutes till dawn": {
"path": "10-minutes-till-dawn", "path": "10-minutes-till-dawn",
css/loading-hexagon.css
+2 -2
View File
@@ -32,7 +32,7 @@
} }
.hexagonGrid .row .hexagon::before { .hexagonGrid .row .hexagon::before {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -44,7 +44,7 @@
} }
.hexagonGrid .row .hexagon::after { .hexagonGrid .row .hexagon::after {
content: ""; content: '';
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 4px; right: 4px;
css/style.css
+43 -40
View File
@@ -12,7 +12,6 @@
--font-color: #dcddde; --font-color: #dcddde;
--font-family: 'Assistant', sans-serif; --font-family: 'Assistant', sans-serif;
--displacement: -0.1rem; --displacement: -0.1rem;
--tremble: -10deg; --tremble: -10deg;
--trembleF: 5deg; --trembleF: 5deg;
@@ -24,17 +23,17 @@
--time: 250ms; --time: 250ms;
/*not sure where these vars are used*/ /*not sure where these vars are used*/
--input-color: #99A3BA; --input-color: #99a3ba;
--input-border: #CDD9ED; --input-border: #cdd9ed;
--input-background: #fff; --input-background: #fff;
--input-placeholder: #CBD1DC; --input-placeholder: #cbd1dc;
--input-border-focus: #275EFE; --input-border-focus: #275efe;
--group-color: var(--input-color); --group-color: var(--input-color);
--group-border: var(--input-border); --group-border: var(--input-border);
--group-background: #EEF4FF; --group-background: #eef4ff;
--group-color-focus: #fff; --group-color-focus: #fff;
--group-border-focus: var(--input-border-focus); --group-border-focus: var(--input-border-focus);
--group-background-focus: #678EFE; --group-background-focus: #678efe;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -46,7 +45,7 @@
background-clip: content-box; background-clip: content-box;
border-radius: 16px; border-radius: 16px;
border: 2.9px solid transparent; 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; transition: all 0.2s ease-in;
} }
@@ -55,7 +54,13 @@
} }
::-webkit-scrollbar-track { ::-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 { html {
@@ -67,7 +72,7 @@ body {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
animation: fadein 1s; animation: fadein 1s;
color: var(--font-color) color: var(--font-color);
} }
body.noscript { body.noscript {
@@ -108,8 +113,7 @@ body.noscript {
.homepage, .homepage,
.games, .games,
.settings .settings {
{
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -132,7 +136,6 @@ body.noscript {
background-color: var(--games-color); background-color: var(--games-color);
border: 50px, solid, var(--bg); border: 50px, solid, var(--bg);
cursor: pointer; cursor: pointer;
} }
.games { .games {
@@ -217,7 +220,6 @@ body.noscript {
font-family: var(--font-family); font-family: var(--font-family);
color: var(--font-color); color: var(--font-color);
background-color: var(--block-color); background-color: var(--block-color);
} }
#search { #search {
@@ -230,7 +232,8 @@ body.noscript {
background-color: var(--block-color); background-color: var(--block-color);
} }
#sort, #keybind-slot-1 { #sort,
#keybind-slot-1 {
all: unset; all: unset;
margin: 0; margin: 0;
border: none; border: none;
@@ -270,11 +273,11 @@ logo img:hover {
cursor: pointer; cursor: pointer;
} }
img[alt="MonkeyGG2 Icon"] { img[alt='MonkeyGG2 Icon'] {
filter: brightness(110%); filter: brightness(110%);
} }
img[alt="Proxy Icon"] { img[alt='Proxy Icon'] {
margin: -1rem 0; margin: -1rem 0;
} }
@@ -284,7 +287,8 @@ img[alt="Proxy Icon"] {
max-width: 128px; max-width: 128px;
max-height: 128px; max-height: 128px;
} }
.card .img-container>img,svg { .card .img-container > img,
svg {
max-width: 128px; max-width: 128px;
max-height: 128px; max-height: 128px;
} }
@@ -405,7 +409,7 @@ svg {
.switch__wrapper::before, .switch__wrapper::before,
.switch__wrapper::after { .switch__wrapper::after {
content: ""; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -453,7 +457,6 @@ input:checked+.switch__wrapper .switch__toggle {
} }
@keyframes checked__wrapper { @keyframes checked__wrapper {
0%, 0%,
45%, 45%,
100% { 100% {
@@ -476,7 +479,6 @@ input:checked+.switch__wrapper .switch__toggle {
} }
@keyframes checked__wrapper--r { @keyframes checked__wrapper--r {
0%, 0%,
45%, 45%,
100% { 100% {
@@ -574,7 +576,8 @@ input:checked+.switch__wrapper .switch__toggle {
} }
/* Hover effect for the button */ /* Hover effect for the button */
.submit-button:hover, .save-button:hover { .submit-button:hover,
.save-button:hover {
background-color: var(--hover-color); background-color: var(--hover-color);
} }
@@ -623,60 +626,60 @@ button.in-game-button {
border: none; border: none;
border-bottom: 3px solid var(--font-color); border-bottom: 3px solid var(--font-color);
will-change: transform; will-change: transform;
animation: bounceY 2s .5s; animation: bounceY 2s 0.5s;
transition: transform .5s cubic-bezier(.55, 0, .1, 1); transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center justify-content: center;
} }
button.in-game-button svg { button.in-game-button svg {
pointer-events: none; pointer-events: none;
color: var(--font-color); color: var(--font-color);
margin-right: .625rem; margin-right: 0.625rem;
display: inline-block display: inline-block;
} }
button.in-game-button img { button.in-game-button img {
pointer-events: none; pointer-events: none;
width: 33px width: 33px;
} }
button.in-game-button:active { button.in-game-button:active {
background: #aaa background: #aaa;
} }
button.in-game-button[attr-active=true] { button.in-game-button[attr-active='true'] {
transform: translateX(0) transform: translateX(0);
} }
button.in-game-button:not(hover) { button.in-game-button:not(hover) {
transform: translateX(-32px) transform: translateX(-32px);
} }
button.in-game-button:hover, button.in-game-button:hover,
button.in-game-button:active { button.in-game-button:active {
transform: translateX(0px) transform: translateX(0px);
} }
@media (max-height: 350px) and (orientation: landscape) { @media (max-height: 350px) and (orientation: landscape) {
button.in-game-button[attr-active=true] { button.in-game-button[attr-active='true'] {
transform: translateX(-75px) transform: translateX(-75px);
} }
} }
button.in-game-button[attr-snapped=true] svg { button.in-game-button[attr-snapped='true'] svg {
display: none display: none;
} }
button.in-game-button[attr-snapped=true] img { button.in-game-button[attr-snapped='true'] img {
transform: translate(-5px) transform: translate(-5px);
} }
#refresh { #refresh {
right: 0; right: 0;
border-radius: 290486px 0 0 290486px; border-radius: 290486px 0 0 290486px;
left: auto left: auto;
} }
#refresh:not(hover) { #refresh:not(hover) {
js/bg.js
+15 -17
View File
@@ -1,12 +1,12 @@
/*-------------------- /*--------------------
Vars 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 rand = (v1, v2) => Math.floor(v1 + Math.random() * (v2 - v1));
const opt = { const opt = {
particles: window.width / 500 ? 250 : 125, particles: window.width / 500 ? 250 : 125,
noiseScale: 0.005, noiseScale: 0.005,
angle: Math.PI / 180 * -90, angle: (Math.PI / 180) * -90,
h1: rand(0, 360), h1: rand(0, 360),
h2: rand(0, 360), h2: rand(0, 360),
s1: rand(20, 90), s1: rand(20, 90),
@@ -14,13 +14,14 @@ const opt = {
l1: rand(30, 80), l1: rand(30, 80),
l2: rand(30, 80), l2: rand(30, 80),
strokeWeight: 2, strokeWeight: 2,
tail: 82 }; tail: 82,
};
changeTitleColor(); changeTitleColor();
const Particles = []; const Particles = [];
let time = 0; let time = 0;
document.body.addEventListener("click", () => { document.body.addEventListener('click', () => {
if (inGame) { if (inGame) {
return; return;
} }
@@ -90,14 +91,7 @@ class Particle {
follow() { follow() {
let angle = let angle =
noise( noise(this.x * opt.noiseScale, this.y * opt.noiseScale, time * opt.noiseScale) * Math.PI * 0.5 + opt.angle;
this.x * opt.noiseScale,
this.y * opt.noiseScale,
time * opt.noiseScale) *
Math.PI *
0.5 +
opt.angle;
this.ax += Math.cos(angle); this.ax += Math.cos(angle);
this.ay += Math.sin(angle); this.ay += Math.sin(angle);
@@ -131,15 +125,15 @@ class Particle {
stroke(`hsla(${this.hue}, ${this.sat}%, ${this.light}%, .5)`); stroke(`hsla(${this.hue}, ${this.sat}%, ${this.light}%, .5)`);
line(this.x, this.y, this.lx, this.ly); line(this.x, this.y, this.lx, this.ly);
this.updatePrev(); this.updatePrev();
}} }
}
/*-------------------- /*--------------------
Setup Setup
--------------------*/ --------------------*/
function setup() { function setup() {
let canvas = createCanvas(windowWidth, windowHeight); let canvas = createCanvas(windowWidth, windowHeight);
canvas.parent("particles"); canvas.parent('particles');
for (let i = 0; i < opt.particles; i++) { for (let i = 0; i < opt.particles; i++) {
Particles.push(new Particle(Math.random() * width, Math.random() * height)); Particles.push(new Particle(Math.random() * width, Math.random() * height));
@@ -153,7 +147,7 @@ Draw
let inGame = false; let inGame = false;
function draw() { function draw() {
if (!inGame && document.visibilityState == "visible") { if (!inGame && document.visibilityState == 'visible') {
time++; time++;
background(0, 100 - opt.tail); background(0, 100 - opt.tail);
@@ -161,6 +155,8 @@ function draw() {
p.update(); p.update();
p.render(); p.render();
} }
} else {
background(0);
} }
} }
@@ -172,5 +168,7 @@ function windowResized() {
} }
function changeTitleColor() { 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}%))`;
} }
js/loading-hexagon.js
+56 -44
View File
@@ -1,36 +1,46 @@
// hexagons will be used as a separate theme later // hexagons will be used as a separate theme later
function changeLoadingTip() { 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 tips = [
const element = document.getElementsByClassName("loading-tip")[0]; '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(); changeLoadingTip();
$("#everything-else").hide(); $('#everything-else').hide();
let changeTip = setInterval(() => { let changeTip = setInterval(() => {
changeLoadingTip(); changeLoadingTip();
}, 3000); }, 3000);
$(window).on("load", () => { $(window).on('load', () => {
$(".track").attr("stroke", "url(#grad2)"); $('.track').attr('stroke', 'url(#grad2)');
$(".worm1").hide(); $('.worm1').hide();
$(".worm2").hide(); $('.worm2').hide();
clearInterval(changeTip); clearInterval(changeTip);
$(".loading").fadeOut({ $('.loading').fadeOut({
duration: 300, duration: 300,
complete: () => { complete: () => {
setTimeout(() => { setTimeout(() => {
$("#everything-else").fadeIn({ $('#everything-else').fadeIn(
{
duration: 500, duration: 500,
easing: "swing" easing: 'swing',
}, 200); },
200
);
hexagonGrid(); hexagonGrid();
}, 100); }, 100);
} },
}); });
}); });
@@ -46,8 +56,8 @@ let particlesArray;
let mouse = { let mouse = {
x: null, x: null,
y: null, y: null,
radius: 170 radius: 170,
} };
window.addEventListener('mousemove', function (event) { window.addEventListener('mousemove', function (event) {
mouse.x = event.x; mouse.x = event.x;
@@ -58,7 +68,8 @@ window.addEventListener('mousemove', function(event) {
document.onmousemove = (function (_) { document.onmousemove = (function (_) {
var onmousestop = function () { var onmousestop = function () {
mouse.radius = 0; mouse.radius = 0;
}, thread; },
thread;
return function () { return function () {
clearTimeout(thread); clearTimeout(thread);
@@ -66,7 +77,6 @@ document.onmousemove = (function(_) {
}; };
})(); })();
class Particle { class Particle {
constructor(x, y, directionX, directionY, size, color) { constructor(x, y, directionX, directionY, size, color) {
this.x = x; this.x = x;
@@ -124,11 +134,11 @@ function init() {
particlesArray = []; particlesArray = [];
let numberOfParticles = (cvs.height * cvs.width) / 9000; let numberOfParticles = (cvs.height * cvs.width) / 9000;
for (let i = 0; i < numberOfParticles * 0.25; i++) { for (let i = 0; i < numberOfParticles * 0.25; i++) {
let size = (Math.random() * 35) + 1; let size = Math.random() * 35 + 1;
let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2); let x = Math.random() * (innerWidth - size * 2 - size * 2) + size * 2;
let y = (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 directionX = Math.random() * 5 - 2.5;
let directionY = (Math.random() * 5) - 2.5; let directionY = Math.random() * 5 - 2.5;
let color = '#a3f6fd'; let color = '#a3f6fd';
particlesArray.push(new Particle(x, y, directionX, directionY, size, color)); particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
} }
@@ -138,10 +148,12 @@ function connect() {
let opacityValue = 1; let opacityValue = 1;
for (let i = 0; i < particlesArray.length; i++) { for (let i = 0; i < particlesArray.length; i++) {
for (let j = i; j < particlesArray.length; j++) { 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)) { if (distance < (cvs.width / 7) * (cvs.height / 7)) {
opacityValue = 1 - (distance / 20000); opacityValue = 1 - distance / 20000;
ctx.strokeStyle = 'rgba(159, 253, 50,' + opacityValue + ')'; ctx.strokeStyle = 'rgba(159, 253, 50,' + opacityValue + ')';
ctx.lineWidth = 1; ctx.lineWidth = 1;
ctx.beginPath(); ctx.beginPath();
@@ -179,31 +191,31 @@ animate();
// HEXAGON GRID // HEXAGON GRID
function hexagonGrid() { function hexagonGrid() {
const HEXAGON_GRID = document.getElementsByClassName("hexagonGrid")[0]; const HEXAGON_GRID = document.getElementsByClassName('hexagonGrid')[0];
const CONTAINER = HEXAGON_GRID.parentNode; const CONTAINER = HEXAGON_GRID.parentNode;
let wall = { let wall = {
width: CONTAINER.offsetWidth, width: CONTAINER.offsetWidth,
height: CONTAINER.offsetHeight height: CONTAINER.offsetHeight,
}; };
let rowsNumber = Math.ceil(wall.height / 80); let rowsNumber = Math.ceil(wall.height / 80);
let columnsNumber = Math.ceil(wall.width / 100) + 1; let columnsNumber = Math.ceil(wall.width / 100) + 1;
HEXAGON_GRID.innerHTML = ""; HEXAGON_GRID.innerHTML = '';
for (let i = 0; i < rowsNumber; i++) { for (let i = 0; i < rowsNumber; i++) {
let row = document.createElement("div"); let row = document.createElement('div');
row.className = "row"; row.className = 'row';
HEXAGON_GRID.appendChild(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 i = 0; i < rows.length; i++) {
for (let j = 0; j < columnsNumber; j++) { for (let j = 0; j < columnsNumber; j++) {
let hexagon = document.createElement("div"); let hexagon = document.createElement('div');
hexagon.className = "hexagon"; hexagon.className = 'hexagon';
rows[i].appendChild(hexagon); rows[i].appendChild(hexagon);
} }
} }
@@ -221,8 +233,8 @@ window.addEventListener('resize', function() {
let frames = 0; let frames = 0;
let refreshRate = 1000; let refreshRate = 1000;
let fpsMeter = document.createElement("div"); let fpsMeter = document.createElement('div');
fpsMeter.id = "fpsMeter"; fpsMeter.id = 'fpsMeter';
document.body.appendChild(fpsMeter); document.body.appendChild(fpsMeter);
requestAnimationFrame(function loop() { requestAnimationFrame(function loop() {
@@ -232,18 +244,18 @@ window.addEventListener('resize', function() {
let fps = Math.round((frames * refreshRate) / (TIME - previousTime)); let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
previousTime = TIME; previousTime = TIME;
frames = 0; frames = 0;
fpsMeter.innerHTML = "FPS: " + fps * (1000 / refreshRate); fpsMeter.innerHTML = 'FPS: ' + fps * (1000 / refreshRate);
} }
requestAnimationFrame(loop); requestAnimationFrame(loop);
}); });
fpsMeter.style.position = "fixed"; fpsMeter.style.position = 'fixed';
fpsMeter.style.top = "25px"; fpsMeter.style.top = '25px';
fpsMeter.style.right = "25px"; fpsMeter.style.right = '25px';
fpsMeter.style.background = "rgba(0, 0, 0, 0.5)"; fpsMeter.style.background = 'rgba(0, 0, 0, 0.5)';
fpsMeter.style.padding = "10px"; fpsMeter.style.padding = '10px';
fpsMeter.style.color = "rgba(255, 255, 255, 0.75)"; fpsMeter.style.color = 'rgba(255, 255, 255, 0.75)';
fpsMeter.style.fontFamily = "Monospace"; fpsMeter.style.fontFamily = 'Monospace';
fpsMeter.style.fontSize = "24px"; fpsMeter.style.fontSize = '24px';
fpsMeter.style.zIndex = "10000"; fpsMeter.style.zIndex = '10000';
})(); })();
js/loading.js
+67 -49
View File
@@ -3,36 +3,49 @@ let games;
let themes; let themes;
function changeLoadingTip() { 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 tips = [
const element = document.getElementsByClassName("loading-tip")[0]; '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(); changeLoadingTip();
$("#everything-else, #page-loader, .games, .proxy, .settings, .cloaklaunch").hide(); $('#everything-else, #page-loader, .games, .proxy, .settings, .cloaklaunch').hide();
let changeTip = setInterval(() => { let changeTip = setInterval(() => {
changeLoadingTip(); changeLoadingTip();
}, 3000); }, 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 // removing all the comments from the jsonc file
let json = JSON.parse(jsonc.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => g ? "" : m)); let json = JSON.parse(jsonc.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => (g ? '' : m)));
games = json["games"]; games = json['games'];
themes = json["themes"]; themes = json['themes'];
config = json["config"]; config = json['config'];
let gamesList = $("#gamesList"); let gamesList = $('#gamesList');
for (game in games) { 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')) || []; let starredGamesList = JSON.parse(localStorage.getItem('starredGamesList')) || [];
const stars = document.querySelectorAll('.star'); const stars = document.querySelectorAll('.star');
stars.forEach(star => { stars.forEach((star) => {
star.addEventListener('click', function (event) { star.addEventListener('click', function (event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
star.classList.toggle('filled'); star.classList.toggle('filled');
@@ -42,7 +55,7 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
const isStarred = starredGamesList.includes(gameName); const isStarred = starredGamesList.includes(gameName);
if (isStarred) { 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 //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 //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) const originalPosition = Array.from(parent.children)
.sort((a, b) => a.textContent.localeCompare(b.textContent)) .sort((a, b) => a.textContent.localeCompare(b.textContent))
.findIndex(item => item === gameItem); .findIndex((item) => item === gameItem);
parent.removeChild(gameItem); parent.removeChild(gameItem);
@@ -70,7 +83,7 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
const gamesList = document.getElementById('gamesList'); const gamesList = document.getElementById('gamesList');
const children = Array.from(gamesList.children); const children = Array.from(gamesList.children);
children.forEach(gameItem => { children.forEach((gameItem) => {
const currentGameName = gameItem.textContent; const currentGameName = gameItem.textContent;
const stars = gameItem.querySelector('.star'); const stars = gameItem.querySelector('.star');
@@ -83,51 +96,56 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
updateGameList(); updateGameList();
$("#gamesList li").on("click", function() { $('#gamesList li').on('click', function () {
let url = $(this).attr("url"); let url = $(this).attr('url');
inGame = true; inGame = true;
$("#everything-else").fadeOut(); $('#everything-else').fadeOut();
$("#page-loader").fadeIn(); $('#page-loader').fadeIn();
$("#page-loader iframe").attr("src", url); $('#page-loader iframe').attr('src', url);
$("#page-loader iframe")[0].focus(); $('#page-loader iframe')[0].focus();
currentMenu = $("#page-loader"); currentMenu = $('#page-loader');
}); });
}); });
$(window).on("load", () => { $(window).on('load', () => {
$(".track").attr("stroke", "url(#grad2)"); $('.track').attr('stroke', 'url(#grad2)');
$(".worm1").hide(); $('.worm1').hide();
$(".worm2").hide(); $('.worm2').hide();
clearInterval(changeTip); clearInterval(changeTip);
$(".loading").fadeOut({ $('.loading').fadeOut({
duration: 300, duration: 300,
complete: () => { complete: () => {
setTimeout(() => { setTimeout(() => {
$("#everything-else").fadeIn({ $('#everything-else').fadeIn(
{
duration: 500, duration: 500,
easing: "swing" easing: 'swing',
}, 200); },
200
);
}, 100); }, 100);
} },
}); });
}); });
jQuery.fn.extend({showModal: function() { jQuery.fn.extend({
showModal: function () {
return this.each(function () { return this.each(function () {
if(this.tagName=== "DIALOG"){ if (this.tagName === 'DIALOG') {
this.showModal(); this.showModal();
} }
}); });
}}); },
});
(function () { (function () {
let previousTime = Date.now(); let previousTime = Date.now();
let frames = 0; let frames = 0;
let refreshRate = 1000; let refreshRate = 1000;
let fpsMeter = document.createElement("div"); let fpsMeter = document.createElement('div');
fpsMeter.id = "fpsMeter"; fpsMeter.id = 'fpsMeter';
document.body.appendChild(fpsMeter); document.body.appendChild(fpsMeter);
requestAnimationFrame(function loop() { requestAnimationFrame(function loop() {
@@ -137,21 +155,21 @@ jQuery.fn.extend({showModal: function() {
let fps = Math.round((frames * refreshRate) / (TIME - previousTime)); let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
previousTime = TIME; previousTime = TIME;
frames = 0; frames = 0;
fpsMeter.innerHTML = "FPS: " + fps * (1000 / refreshRate); fpsMeter.innerHTML = 'FPS: ' + fps * (1000 / refreshRate);
} }
requestAnimationFrame(loop); requestAnimationFrame(loop);
}); });
fpsMeter.style.position = "fixed"; fpsMeter.style.position = 'fixed';
fpsMeter.style.top = "2.5%"; fpsMeter.style.top = '2.5%';
fpsMeter.style.right = "1%"; fpsMeter.style.right = '1%';
fpsMeter.style.zIndex = "50"; fpsMeter.style.zIndex = '50';
fpsMeter.style.background = "rgba(0, 0, 0, 0.5)"; fpsMeter.style.background = 'rgba(0, 0, 0, 0.5)';
fpsMeter.style.opacity = "0.5"; fpsMeter.style.opacity = '0.5';
fpsMeter.style.padding = "10px"; fpsMeter.style.padding = '10px';
fpsMeter.style.color = "rgba(255, 255, 255, 0.75)"; fpsMeter.style.color = 'rgba(255, 255, 255, 0.75)';
fpsMeter.style.fontFamily = "'Flexi IBM VGA True (437', monospace"; fpsMeter.style.fontFamily = "'Flexi IBM VGA True (437', monospace";
fpsMeter.style.fontSize = "24px"; fpsMeter.style.fontSize = '24px';
fpsMeter.style.zIndex = "10000"; fpsMeter.style.zIndex = '10000';
fpsMeter.style.pointerEvents = "none"; fpsMeter.style.pointerEvents = 'none';
})(); })();
jsconfig.json
+1 -3
View File
@@ -1,7 +1,5 @@
{ {
"typeAcquisition": { "typeAcquisition": {
"include": [ "include": ["jquery"]
"jquery"
]
} }
} }