diff --git a/config.jsonc b/config.jsonc index ecaa6a06..0f4a4dd9 100644 --- a/config.jsonc +++ b/config.jsonc @@ -813,6 +813,7 @@ // coming soon }, "config": { - "proxy": true // proxy only works when self-hosted + "proxy": true, // 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/style.css b/css/style.css index 5d7c63bd..1a9b4d5b 100644 --- a/css/style.css +++ b/css/style.css @@ -108,12 +108,11 @@ body.noscript { .homepage, .games, -.proxy, .settings { position: absolute; top: 0; left: 0; - margin-top: 15rem; + margin-top: 11rem; width: 100vw; display: flex; justify-content: center; @@ -142,8 +141,8 @@ body.noscript { text-align: center; width: fit-content; height: fit-content; - margin-top: 3.5rem; - font-size: 128px; + margin-top: 2.5rem; + font-size: 6rem; font-weight: 100; font-family: 'Trispace', sans-serif; letter-spacing: 5px; @@ -165,7 +164,7 @@ body.noscript { } #gamesList li { - padding: 1rem; + padding: 1.4%; transition: all 0.2s ease-in; letter-spacing: 1px; background-color: var(--games-color); @@ -230,6 +229,34 @@ 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 { max-width: 256px; max-height: 256px; @@ -368,6 +395,7 @@ input:active+.switch__wrapper .switch__toggle { input:checked+.switch__wrapper { transform-origin: right center; animation-name: checked__wrapper--r; + background-color: var(--block-color); } input:checked+.switch__wrapper .switch__toggle { @@ -471,9 +499,7 @@ input:checked+.switch__wrapper .switch__toggle { } } - /*input*/ - .text-field { border: 1px solid var(--bg); border-radius: 3px; @@ -499,10 +525,38 @@ input:checked+.switch__wrapper .switch__toggle { } /* Hover effect for the button */ -.submit-button:hover { +.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%; +} + +h4 { + 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; +} + +.setting { + margin: 5% 0; +} + button.in-game-button { cursor: pointer; position: absolute; @@ -584,6 +638,12 @@ button.in-game-button[attr-snapped=true] img { transform: translateX(0px); } +#refresh svg { + margin-right: 0; + margin-left: 0.625rem; + rotate: 180deg; +} + #disabled { background: var(--button-color); filter: brightness(80%); diff --git a/index.html b/index.html index 8032536c..ce7adcff 100644 --- a/index.html +++ b/index.html @@ -91,8 +91,8 @@
+ width="256" height="256" x="0" y="0" viewBox="0 0 512 512" style="margin: 1rem 0;" + xml:space="preserve"> - +
-

Settings

-

a dum description (add a better font later)

+

Settings

- +
+ + +
-
- - - - +
+
Cloak URL
+

This site will appear in your history everytime you open MonkeyGG2.

+ + +
+
+
Mask URL
+

This site's title and icon will replace MonkeyGG2's title and icon in your browser tab.

+ + +
+
+
Shortcuts
+

Shortcuts will help some people navigate the site easier. DISCLAIMER!! Certain shortcuts such as + CTRL+R and CTRL+W cannot be overriden manually.

+ +
+
+
Background
+

Background can cause a lot of lag. Disable if your computer is diagnosed with low FPS.

+ +
- +
diff --git a/js/index.js b/js/index.js index f7639cc7..2c8d0eb8 100644 --- a/js/index.js +++ b/js/index.js @@ -10,9 +10,11 @@ $(".column button .card").on("click", function () { } $("#everything-else").fadeOut(300, () => { $("#page-loader").fadeIn(200); - $("#page-loader").attr("src", "/proxy"); + $("#page-loader iframe").attr("src", config["proxyPath"] || "/proxy"); + $("#page-loader iframe")[0].focus(); }); currentMenu = $("#page-loader"); + inGame = true; return; } @@ -24,6 +26,7 @@ $(".column button .card").on("click", function () { $("logo img").on("click", returnHome); $("#gameButton").on("click", returnHome); +$("#refresh").on("click", refreshPage); $("dialog").on("click", function (e) { if (!e.originalEvent.target.closest("div")) { @@ -293,8 +296,12 @@ function dragElement(elmnt) { function returnHome() { currentMenu.fadeOut(300, () => { $("#everything-else").fadeIn(200); + $(".games").hide(); + $(".homepage").fadeIn(200); }); currentMenu = $(".homepage"); + inGame = false; + console.log("e"); } /** @@ -303,5 +310,12 @@ function returnHome() { * @return {void} */ function refreshPage() { - location.reload(); + const oldUrl = $("#page-loader iframe").attr("src"); + console.log(oldUrl); + $("#page-loader iframe").attr("src", ""); + + // delay is needed for some reason + setTimeout(() => { + $("#page-loader iframe").attr("src", oldUrl); + }, 10); } \ No newline at end of file diff --git a/js/loading.js b/js/loading.js index ce4daba3..9f2016c5 100644 --- a/js/loading.js +++ b/js/loading.js @@ -25,7 +25,7 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => { let gamesList = $("#gamesList"); for (game in games) { - gamesList.append(`
  • ${game}
    • `); + gamesList.append(`
  • ${game}
    • `); } $("#gamesList li").on("click", function() { @@ -33,8 +33,9 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => { inGame = true; $("#everything-else").fadeOut(); $("#page-loader").fadeIn(); - $("#page-loader iframe")[0].src = url; + $("#page-loader iframe").attr("src", url); $("#page-loader iframe")[0].focus(); + currentMenu = $("#page-loader"); }); }); @@ -91,9 +92,10 @@ jQuery.fn.extend({showModal: function() { 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"; -})(); \ No newline at end of file +})(); \ No newline at end of file