diff --git a/404.html b/404.html index 3d95aeeb..d3e2bb07 100644 --- a/404.html +++ b/404.html @@ -1,386 +1,401 @@ + + Error 404 + - - Error 404 - + + -
-
Error 404
-
Error 404
-
Error 404
-
Error 404
-
Error 404
-
Error 404
-
Error 404
-
Error 404
-
Error 404
-
- -
Return home?
- - + @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); + } + } - \ No newline at end of file + a { + padding: 10px 20px; + background-color: #00fa00; + color: #000; + border-radius: 5px; + text-decoration: none; + cursor: pointer; + transition: 0s; + } + + a:hover { + filter: brightness(90%); + } + +
+
Error 404
+
Error 404
+
Error 404
+
Error 404
+
Error 404
+
Error 404
+
Error 404
+
Error 404
+
Error 404
+
+ +
Return home?
+ + + diff --git a/config.jsonc b/config.jsonc index 5702385c..82cb209e 100644 --- a/config.jsonc +++ b/config.jsonc @@ -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 } -} \ No newline at end of file +} diff --git a/css/loading-hexagon.css b/css/loading-hexagon.css index 7c5d2f9c..f36ec28d 100644 --- a/css/loading-hexagon.css +++ b/css/loading-hexagon.css @@ -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); -} \ No newline at end of file +} diff --git a/css/loading.css b/css/loading.css index ac0f5e8d..4f047001 100644 --- a/css/loading.css +++ b/css/loading.css @@ -140,4 +140,4 @@ section { top: 0; left: 0; overflow: hidden; -} \ No newline at end of file +} diff --git a/css/style.css b/css/style.css index d869127e..54e4302e 100644 --- a/css/style.css +++ b/css/style.css @@ -2,727 +2,730 @@ @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@500&display=swap'); :root { - --bg: #202020; - --block-color: #2b2b2b; - --button-color: #373737; - --games-color: #373737a6; - --hover-color: #3c3c3c; - --scrollbar-color: #434343; - --scroll-track-color: #111; - --font-color: #dcddde; - --font-family: 'Assistant', sans-serif; + --bg: #202020; + --block-color: #2b2b2b; + --button-color: #373737; + --games-color: #373737a6; + --hover-color: #3c3c3c; + --scrollbar-color: #434343; + --scroll-track-color: #111; + --font-color: #dcddde; + --font-family: 'Assistant', sans-serif; + --displacement: -0.1rem; + --tremble: -10deg; + --trembleF: 5deg; - --displacement: -0.1rem; - --tremble: -10deg; - --trembleF: 5deg; + --iPos: 50%; + --bPos: -75%; + --fPos: -50%; - --iPos: 50%; - --bPos: -75%; - --fPos: -50%; + --time: 250ms; - --time: 250ms; - - /*not sure where these vars are used*/ - --input-color: #99A3BA; - --input-border: #CDD9ED; - --input-background: #fff; - --input-placeholder: #CBD1DC; - --input-border-focus: #275EFE; - --group-color: var(--input-color); - --group-border: var(--input-border); - --group-background: #EEF4FF; - --group-color-focus: #fff; - --group-border-focus: var(--input-border-focus); - --group-background-focus: #678EFE; + /*not sure where these vars are used*/ + --input-color: #99a3ba; + --input-border: #cdd9ed; + --input-background: #fff; + --input-placeholder: #cbd1dc; + --input-border-focus: #275efe; + --group-color: var(--input-color); + --group-border: var(--input-border); + --group-background: #eef4ff; + --group-color-focus: #fff; + --group-border-focus: var(--input-border-focus); + --group-background-focus: #678efe; } ::-webkit-scrollbar { - width: 20px; + width: 20px; } ::-webkit-scrollbar-thumb { - background: var(--scrollbar-color); - 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); - transition: all 0.2s ease-in; + background: var(--scrollbar-color); + background-clip: content-box; + border-radius: 16px; + border: 2.9px solid transparent; + 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; } ::-webkit-scrollbar-thumb:hover { - background-color: var(--hover-color); + background-color: var(--hover-color); } ::-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 { - background: var(--bg); + background: var(--bg); } body { - margin: 0; - padding: 0; - box-sizing: border-box; - animation: fadein 1s; - color: var(--font-color) + margin: 0; + padding: 0; + box-sizing: border-box; + animation: fadein 1s; + color: var(--font-color); } body.noscript { - display: none; + display: none; } #noscript-text { - display: block; - position: absolute; - top: 0; - left: 0; - margin: 0; - padding: 0; - box-sizing: border-box; - height: 100vh; - width: 100vw; - background-color: black; - color: white; - z-index: 999; + display: block; + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + box-sizing: border-box; + height: 100vh; + width: 100vw; + background-color: black; + color: white; + z-index: 999; } #particles { - position: absolute; - z-index: 0; - background: var(--bg); - margin: 0; - top: 0; - left: 0; - height: 100vh; - width: 100vw; - overflow: hidden; - filter: blur(2px); + position: absolute; + z-index: 0; + background: var(--bg); + margin: 0; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + overflow: hidden; + filter: blur(2px); } #everything-else { - display: grid; + display: grid; } .homepage, .games, -.settings -{ - position: absolute; - top: 0; - left: 0; - margin-top: 11rem; - width: 100vw; - display: flex; - justify-content: center; - align-items: center; - z-index: 10; +.settings { + position: absolute; + top: 0; + left: 0; + margin-top: 11rem; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + z-index: 10; } .cloaklaunch { - color: var(--font-color); - text-align: center; - font-size: 200%; - padding: 30vh 0; - position: absolute; - width: 100vw; - height: 100vh; - background-color: var(--games-color); - border: 50px, solid, var(--bg); - cursor: pointer; - + color: var(--font-color); + text-align: center; + font-size: 200%; + padding: 30vh 0; + position: absolute; + width: 100vw; + height: 100vh; + background-color: var(--games-color); + border: 50px, solid, var(--bg); + cursor: pointer; } .games { - flex-direction: column; - top: 2.5%; + flex-direction: column; + top: 2.5%; } .setting-bg { - width: 75%; - background-color: var(--games-color); - height: 70vh; - overflow-y: scroll; - text-align: center; + width: 75%; + background-color: var(--games-color); + height: 70vh; + overflow-y: scroll; + text-align: center; } #title { - z-index: 50; - position: relative; - display: inline-block; - justify-self: center; - text-align: center; - width: fit-content; - height: fit-content; - margin-top: 2.5rem; - font-size: 6rem; - font-weight: 100; - font-family: 'Trispace', sans-serif; - letter-spacing: 5px; - color: transparent; - -webkit-background-clip: text; - background-clip: text; - pointer-events: none; + z-index: 50; + position: relative; + display: inline-block; + justify-self: center; + text-align: center; + width: fit-content; + height: fit-content; + margin-top: 2.5rem; + font-size: 6rem; + font-weight: 100; + font-family: 'Trispace', sans-serif; + letter-spacing: 5px; + color: transparent; + -webkit-background-clip: text; + background-clip: text; + pointer-events: none; } #gamesList { - list-style: none; - padding: 0; - margin: 0; - z-index: 10; - width: 75%; - height: 60vh; - font-family: var(--font-family); - overflow-y: scroll; + list-style: none; + padding: 0; + margin: 0; + z-index: 10; + width: 75%; + height: 60vh; + font-family: var(--font-family); + overflow-y: scroll; } #gamesList li { - padding: 1.4%; - transition: all 0.2s ease-in; - letter-spacing: 1px; - background-color: var(--games-color); + padding: 1.4%; + transition: all 0.2s ease-in; + letter-spacing: 1px; + background-color: var(--games-color); } #gamesList li:hover, #gamesList li:focus, #gamesList .active { - background-color: var(--hover-color); + background-color: var(--hover-color); } .star { - cursor: pointer; - color: #ccc; - float: right; + cursor: pointer; + color: #ccc; + float: right; } .filled { - color: gold; + color: gold; } .searchbar { - display: flex; - width: 75%; - justify-content: center; - margin-bottom: 5px; + display: flex; + width: 75%; + justify-content: center; + margin-bottom: 5px; } .randgame { - cursor: pointer; - width: 15%; - border: none; - margin-left: 4px; - font-size: 100%; - font-family: var(--font-family); - color: var(--font-color); - background-color: var(--block-color); - + cursor: pointer; + width: 15%; + border: none; + margin-left: 4px; + font-size: 100%; + font-family: var(--font-family); + color: var(--font-color); + background-color: var(--block-color); } #search { - all: unset; - margin-right: 4px; - width: 70%; - padding: 1rem; - font-family: var(--font-family); - color: var(--font-color); - background-color: var(--block-color); + all: unset; + margin-right: 4px; + width: 70%; + padding: 1rem; + font-family: var(--font-family); + color: var(--font-color); + background-color: var(--block-color); } -#sort, #keybind-slot-1 { - all: unset; - margin: 0; - border: none; - background-color: var(--block-color); - color: var(--font-color); - font-size: 1rem; - font-family: var(--font-family); - padding: 1rem; - width: 15%; +#sort, +#keybind-slot-1 { + all: unset; + margin: 0; + border: none; + background-color: var(--block-color); + color: var(--font-color); + font-size: 1rem; + font-family: var(--font-family); + padding: 1rem; + width: 15%; } -.keySlot{ - margin: 0; - border: none; - background-color: var(--bg); - color: var(--font-color); - font-size: 1rem; - font-family: var(--font-family); - padding: 1rem; - width: 20%; - cursor: pointer; +.keySlot { + margin: 0; + border: none; + background-color: var(--bg); + color: var(--font-color); + font-size: 1rem; + font-family: var(--font-family); + padding: 1rem; + width: 20%; + cursor: pointer; } logo img { - z-index: 50; - position: fixed; - top: -2.5%; - left: -1%; - scale: 0.45; - pointer-events: painted; - transition: all 0.2s ease-in-out; + z-index: 50; + position: fixed; + top: -2.5%; + left: -1%; + scale: 0.45; + pointer-events: painted; + transition: all 0.2s ease-in-out; } logo img:hover { - filter: brightness(80%); - transform: scale(0.95); - cursor: pointer; + filter: brightness(80%); + transform: scale(0.95); + cursor: pointer; } -img[alt="MonkeyGG2 Icon"] { - filter: brightness(110%); +img[alt='MonkeyGG2 Icon'] { + filter: brightness(110%); } -img[alt="Proxy Icon"] { - margin: -1rem 0; +img[alt='Proxy Icon'] { + margin: -1rem 0; } @media screen and (max-height: 700px) { - .card .img-container { - margin: 1rem 0; - max-width: 128px; - max-height: 128px; - } - .card .img-container>img,svg { - max-width: 128px; - max-height: 128px; - } - logo img { - top: -4%; - left: -2%; - } - .card p { - font-size: 1rem; - } - .card h5 { - font-size: 1.8rem; - } - #gamesList li { - font-size: 0.95rem; - } - #gamesList { - height: 55vh; - } + .card .img-container { + margin: 1rem 0; + max-width: 128px; + max-height: 128px; + } + .card .img-container > img, + svg { + max-width: 128px; + max-height: 128px; + } + logo img { + top: -4%; + left: -2%; + } + .card p { + font-size: 1rem; + } + .card h5 { + font-size: 1.8rem; + } + #gamesList li { + font-size: 0.95rem; + } + #gamesList { + height: 55vh; + } } .card .img-container { - max-width: 256px; - max-height: 256px; - margin: 2rem 0; - display: inline-flex; - justify-content: center; - align-items: center; + max-width: 256px; + max-height: 256px; + margin: 2rem 0; + display: inline-flex; + justify-content: center; + align-items: center; } -.card .img-container>img, +.card .img-container > img, svg { - width: 100%; + width: 100%; } .card-row { - display: flex; - flex-direction: row; - width: 75%; + display: flex; + flex-direction: row; + width: 75%; } .column { - text-align: center; - float: left; - width: 33%; - padding: 0 10px; + text-align: center; + float: left; + width: 33%; + padding: 0 10px; } .column button { - text-decoration: none; - background: transparent; - border: none; - color: var(--font-color); - padding: 0; - margin: 0; + text-decoration: none; + background: transparent; + border: none; + color: var(--font-color); + padding: 0; + margin: 0; } .card { - box-shadow: var(--button-color) 0 4px 8px 0; - padding: 12px; - text-align: center; - background-color: var(--button-color); - border-radius: 50px; - font-size: 1.2rem; - text-decoration: none; - color: var(--font-color); - font-family: var(--font-family); - transition: all 0.2s ease-in; - cursor: pointer; + box-shadow: var(--button-color) 0 4px 8px 0; + padding: 12px; + text-align: center; + background-color: var(--button-color); + border-radius: 50px; + font-size: 1.2rem; + text-decoration: none; + color: var(--font-color); + font-family: var(--font-family); + transition: all 0.2s ease-in; + cursor: pointer; } .card h5 { - font-size: 2rem; - letter-spacing: 1px; - margin: 2px; + font-size: 2rem; + letter-spacing: 1px; + margin: 2px; } .card:hover { - background-color: var(--hover-color); - transform: scale(1.05); + background-color: var(--hover-color); + transform: scale(1.05); } #page-loader iframe { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 999; - margin: 0; - padding: 0; - border: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 999; + margin: 0; + padding: 0; + border: 0; } .switch { - margin: auto; - display: inline-block; + margin: auto; + display: inline-block; } .switch__wrapper p { - display: inline-block; + display: inline-block; } .switch__wrapper { - text-align: center; - margin: 5%; - display: flex; - align-items: center; - justify-content: center; - width: 4rem; - height: 2rem; - border: 2px solid red; - border-radius: 99rem; - transform-origin: left center; - animation: checked__wrapper var(--time)-100ms ease-in forwards; - mix-blend-mode: lighten; + text-align: center; + margin: 5%; + display: flex; + align-items: center; + justify-content: center; + width: 4rem; + height: 2rem; + border: 2px solid red; + border-radius: 99rem; + transform-origin: left center; + animation: checked__wrapper var(--time)-100ms ease-in forwards; + mix-blend-mode: lighten; } .switch__wrapper::before, .switch__wrapper::after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - border: 2px solid #000; - border-radius: inherit; - transform-origin: inherit; - animation: inherit; - mix-blend-mode: inherit; + content: ''; + position: absolute; + width: 100%; + height: 100%; + border: 2px solid #000; + border-radius: inherit; + transform-origin: inherit; + animation: inherit; + mix-blend-mode: inherit; } .switch__wrapper::before { - --tremble: -12deg; - --trembleF: -7deg; - border-color: lime; + --tremble: -12deg; + --trembleF: -7deg; + border-color: lime; } .switch__wrapper::after { - --tremble: -8deg; - --trembleF: -4deg; - border-color: blue; + --tremble: -8deg; + --trembleF: -4deg; + border-color: blue; } .switch__toggle { - width: 1.5rem; - height: 1.5rem; - border-radius: 99rem; - box-shadow: inset 0 0 0 2px #fff; - transform-origin: inherit; - animation: checked__toggle var(--time) ease-in forwards; + width: 1.5rem; + height: 1.5rem; + border-radius: 99rem; + box-shadow: inset 0 0 0 2px #fff; + transform-origin: inherit; + animation: checked__toggle var(--time) ease-in forwards; } -input:active+.switch__wrapper .switch__toggle { - width: 1.6rem; +input:active + .switch__wrapper .switch__toggle { + width: 1.6rem; } -input:checked+.switch__wrapper { - transform-origin: right center; - animation-name: checked__wrapper--r; - background-color: var(--block-color); +input:checked + .switch__wrapper { + transform-origin: right center; + animation-name: checked__wrapper--r; + background-color: var(--block-color); } -input:checked+.switch__wrapper .switch__toggle { - background: #fff; - animation-name: checked__toggle--r; +input:checked + .switch__wrapper .switch__toggle { + background: #fff; + animation-name: checked__toggle--r; } @keyframes checked__wrapper { + 0%, + 45%, + 100% { + transform: rotateY(0deg); + } - 0%, - 45%, - 100% { - transform: rotateY(0deg); - } + 48% { + transform: translateX(var(--displacement)); + filter: blur(0); + } - 48% { - transform: translateX(var(--displacement)); - filter: blur(0); - } + 55% { + transform: rotateZ(var(--tremble)); + filter: blur(1px); + } - 55% { - transform: rotateZ(var(--tremble)); - filter: blur(1px); - } - - 65% { - transform: rotateZ(var(--trembleF)); - } + 65% { + transform: rotateZ(var(--trembleF)); + } } @keyframes checked__wrapper--r { + 0%, + 45%, + 100% { + transform: rotateY(0deg); + } - 0%, - 45%, - 100% { - transform: rotateY(0deg); - } + 48% { + transform: translateX(calc(-1 * var(--displacement))); + filter: blur(0); + } - 48% { - transform: translateX(calc(-1 * var(--displacement))); - filter: blur(0); - } + 55% { + transform: rotateZ(calc(-1 * var(--tremble))); + filter: blur(1px); + } - 55% { - transform: rotateZ(calc(-1 * var(--tremble))); - filter: blur(1px); - } - - 65% { - transform: rotateZ(calc(-1 * var(--trembleF))); - } + 65% { + transform: rotateZ(calc(-1 * var(--trembleF))); + } } @keyframes checked__toggle { - 0% { - background: #fff; - transform: translateX(var(--iPos)) scale(1.25, 1); - } + 0% { + background: #fff; + transform: translateX(var(--iPos)) scale(1.25, 1); + } - 45% { - background: #fff; - transform: translateX(var(--bPos)) scale(1, 1); - } + 45% { + background: #fff; + transform: translateX(var(--bPos)) scale(1, 1); + } - 50% { - background: transparent; - transform: translateX(var(--bPos)) scale(0.5, 1.1); - } + 50% { + background: transparent; + transform: translateX(var(--bPos)) scale(0.5, 1.1); + } - 65% { - transform: translateX(var(--bPos)) scale(1, 1); - } + 65% { + transform: translateX(var(--bPos)) scale(1, 1); + } - 100% { - transform: translateX(var(--fPos)); - } + 100% { + transform: translateX(var(--fPos)); + } } @keyframes checked__toggle--r { - 0% { - background: transparent; - transform: translateX(calc(-1 * var(--iPos))) scale(1.25, 1); - } + 0% { + background: transparent; + transform: translateX(calc(-1 * var(--iPos))) scale(1.25, 1); + } - 45% { - background: transparent; - transform: translateX(calc(-1 * var(--bPos))) scale(1, 1); - } + 45% { + background: transparent; + transform: translateX(calc(-1 * var(--bPos))) scale(1, 1); + } - 50% { - background: #fff; - transform: translateX(calc(-1 * var(--bPos))) scale(0.5, 1.1); - } + 50% { + background: #fff; + transform: translateX(calc(-1 * var(--bPos))) scale(0.5, 1.1); + } - 65% { - transform: translateX(calc(-1 * var(--bPos))) scale(1, 1); - } + 65% { + transform: translateX(calc(-1 * var(--bPos))) scale(1, 1); + } - 100% { - transform: translateX(calc(-1 * var(--fPos))); - } + 100% { + transform: translateX(calc(-1 * var(--fPos))); + } } /*input*/ .text-field { - border: 1px solid var(--bg); - border-radius: 3px; - padding: 10px; - width: 50%; - margin-bottom: 10px; - font-size: 16px; - outline: none; - background-color: var(--games-color); - color: var(--font-color); + border: 1px solid var(--bg); + border-radius: 3px; + padding: 10px; + width: 50%; + margin-bottom: 10px; + font-size: 16px; + outline: none; + background-color: var(--games-color); + color: var(--font-color); } /* Submit button styles */ .submit-button { - background-color: var(--button-color); - color: var(--font-color); - border: none; - border-radius: 3px; - padding: 10px 20px; - font-size: 16px; - cursor: pointer; - width: 20%; + background-color: var(--button-color); + color: var(--font-color); + border: none; + border-radius: 3px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + width: 20%; } /* Hover effect for the button */ -.submit-button:hover, .save-button:hover { - background-color: var(--hover-color); +.submit-button:hover, +.save-button:hover { + background-color: var(--hover-color); } .save-button { - background-color: var(--button-color); - color: var(--font-color); - border-radius: 12px; - border: solid transparent; - padding: 10px; - font-size: 16px; - cursor: pointer; - width: 20%; + background-color: var(--button-color); + color: var(--font-color); + border-radius: 12px; + border: solid transparent; + padding: 10px; + font-size: 16px; + cursor: pointer; + width: 20%; } h4 { - font-family: 'Trispace', sans-serif; - font-size: 2.5rem; - font-weight: 900; + font-family: 'Trispace', sans-serif; + font-size: 2.5rem; + font-weight: 900; } .setting h5 { - font-family: 'Trispace', sans-serif; - font-size: 1.5rem; - font-weight: 1000; - margin: 0 0 1% 0; + font-family: 'Trispace', sans-serif; + font-size: 1.5rem; + font-weight: 1000; + margin: 0 0 1% 0; } .setting { - margin: 5% 0; + margin: 5% 0; } button.in-game-button { - cursor: pointer; - position: absolute; - z-index: 9999; - top: 61px; - left: 0; - width: 75px; - height: 50px; - background: var(--hover-color); - border-radius: 0 290486px 290486px 0; - color: #000; - padding: 0 10px; - line-height: 50px; - min-height: 50px; - 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); - display: flex; - align-items: center; - justify-content: center + cursor: pointer; + position: absolute; + z-index: 9999; + top: 61px; + left: 0; + width: 75px; + height: 50px; + background: var(--hover-color); + border-radius: 0 290486px 290486px 0; + color: #000; + padding: 0 10px; + line-height: 50px; + min-height: 50px; + border: none; + border-bottom: 3px solid var(--font-color); + will-change: transform; + 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; } button.in-game-button svg { - pointer-events: none; - color: var(--font-color); - margin-right: .625rem; - display: inline-block + pointer-events: none; + color: var(--font-color); + margin-right: 0.625rem; + display: inline-block; } button.in-game-button img { - pointer-events: none; - width: 33px + pointer-events: none; + 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 + right: 0; + border-radius: 290486px 0 0 290486px; + left: auto; } #refresh:not(hover) { - transform: translateX(32px); + transform: translateX(32px); } #refresh:hover { - transform: translateX(0px); + transform: translateX(0px); } #refresh svg { - margin-right: 0; - margin-left: 0.625rem; - rotate: 180deg; + margin-right: 0; + margin-left: 0.625rem; + rotate: 180deg; } #disabled { - background: var(--button-color); - filter: brightness(80%); - padding: 0; - font-family: var(--font-family); - font-size: 1.5rem; - max-width: 20vw; - text-align: center; - color: red; + background: var(--button-color); + filter: brightness(80%); + padding: 0; + font-family: var(--font-family); + font-size: 1.5rem; + max-width: 20vw; + text-align: center; + color: red; } #disabled[open] { - animation: fade 0.2s ease-in-out forwards; + animation: fade 0.2s ease-in-out forwards; } #disabled div { - padding: 3rem; + padding: 3rem; } #disabled::backdrop { - pointer-events: disabled; - backdrop-filter: blur(5px); + pointer-events: disabled; + backdrop-filter: blur(5px); } @keyframes fade { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 100% { - opacity: 0.9; - } -} \ No newline at end of file + 100% { + opacity: 0.9; + } +} diff --git a/js/bg.js b/js/bg.js index d5d5f41a..41178948 100644 --- a/js/bg.js +++ b/js/bg.js @@ -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}%))`; -} \ No newline at end of file + document.getElementById('title').style.backgroundImage = `linear-gradient(hsl(${opt.h1 + 20}, ${opt.s1}%, ${ + opt.l1 + }%), hsl(${opt.h2}, ${opt.s2}%, ${opt.l2}%))`; +} diff --git a/js/loading-hexagon.js b/js/loading-hexagon.js index fb44a03f..e4440474 100644 --- a/js/loading-hexagon.js +++ b/js/loading-hexagon.js @@ -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'; })(); diff --git a/js/loading.js b/js/loading.js index bae82ebb..5a16464d 100644 --- a/js/loading.js +++ b/js/loading.js @@ -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(`
  • ${game} ★
    • `); - } +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( + `
  • ${game} ★
    • ` + ); + } - 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"; -})(); \ No newline at end of file + fpsMeter.style.fontSize = '24px'; + fpsMeter.style.zIndex = '10000'; + fpsMeter.style.pointerEvents = 'none'; +})(); diff --git a/jsconfig.json b/jsconfig.json index 9ec9c2b7..9ec57fd5 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,7 +1,5 @@ { "typeAcquisition": { - "include": [ - "jquery" - ] + "include": ["jquery"] } -} \ No newline at end of file +}