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

fixed proxy and settings and adjusted css for smaller screen sizes

Browse Source
This commit is contained in:
MonkeyGG2
2023-09-17 20:11:57 -04:00
parent 494c2f5d69
commit 0a293cf050
5 changed files with 149 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.jsonc
+2 -1
View File
@@ -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
}
}
css/style.css
+68 -8
View File
@@ -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%);
index.html
+58 -22
View File
@@ -91,8 +91,8 @@
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"
width="256" height="256" x="0" y="0" viewBox="0 0 512 512"
style="margin: 1rem 0;" xml:space="preserve">
width="256" height="256" x="0" y="0" viewBox="0 0 512 512" style="margin: 1rem 0;"
xml:space="preserve">
<defs>
<linearGradient id="a" x1="-38.17" x2="-29.916" y1="631.934" y2="623.68"
gradientTransform="matrix(21.3333 0 0 -21.3333 996.333 13791.667)"
@@ -124,8 +124,9 @@
d="M488.715 285.333C463.018 261.271 448 227.522 448 192c0-18.168 3.918-36.04 11.402-52.533 19.776 34.38 31.264 74.103 31.264 116.533.001 10.32-.771 19.995-1.951 29.333z"
style="--darkreader-inline-fill: #1f2223;" fill="#F2F2F2"
data-original="#f2f2f2" data-darkreader-inline-fill=""></path>
<circle cx="256" cy="149.333" r="106.667" style="--darkreader-inline-fill: #1f2223;"
fill="#F2F2F2" data-original="#f2f2f2" data-darkreader-inline-fill=""></circle>
<circle cx="256" cy="149.333" r="106.667"
style="--darkreader-inline-fill: #1f2223;" fill="#F2F2F2"
data-original="#f2f2f2" data-darkreader-inline-fill=""></circle>
<path
d="M52.598 139.467C60.082 155.96 64 173.832 64 192c0 35.251-14.844 68.836-40.258 92.868-1.428-9.247-2.409-18.764-2.409-28.868 0-42.43 11.489-82.152 31.265-116.533z"
style="--darkreader-inline-fill: #1f2223;" fill="#F2F2F2"
@@ -244,36 +245,71 @@
</div>
<div class="settings">
<div class="setting-bg">
<h1>Settings</h1>
<p>a dum description (add a better font later)</p>
<h4>Settings</h4>
<label class="switch">
<p>toggle switch??</p>
<input type="checkbox" id="toggle-1" hidden>
<div class="switch__wrapper">
<div class="switch__toggle"></div>
</div>
<p>input field??</p>
</label>
<div class="setting">
<button class="save-button">Download Game Data</button>
<button class="save-button">Upload Game Data</button>
</div>
<br><!--bad practice will fix in css later-->
<input class="text-field" type="text" placeholder="placeholder">
<button class="submit-button">sumbmit</button>
<div class="setting">
<h5>Cloak URL</h5>
<p>This site will appear in your history everytime you open MonkeyGG2.</p>
<input class="text-field" type="text" placeholder="https://classroom.google.com">
<button class="submit-button">Submit</button>
</div>
<div class="setting">
<h5>Mask URL</h5>
<p>This site's title and icon will replace MonkeyGG2's title and icon in your browser tab.</p>
<input class="text-field" type="text" placeholder="https://classroom.google.com">
<button class=submit-button>Submit</button>
</div>
<div class="setting">
<h5>Shortcuts</h5>
<p>Shortcuts will help some people navigate the site easier. DISCLAIMER!! Certain shortcuts such as
CTRL+R and CTRL+W cannot be overriden manually.</p>
<label class="switch">
<input type="checkbox" id="toggle-1" hidden>
<div class="switch__wrapper">
<div class="switch__toggle"></div>
</div>
</label>
</div>
<div class="setting">
<h5>Background</h5>
<p>Background can cause a lot of lag. Disable if your computer is diagnosed with low FPS.</p>
<label class="switch">
<input type="checkbox" id="toggle-2" hidden checked>
<div class="switch__wrapper">
<div class="switch__toggle"></div>
</div>
</label>
</div>
</div>
</div>
</section>
</section>
<section id="page-loader">
<iframe></iframe>
<button id="gameButton" class="in-game-button">
<svg class="svg-inline--fa fa-chevron-left fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg><!-- <i class="fas fa-chevron-left"></i> Font Awesome fontawesome.com -->
<svg class="svg-inline--fa fa-chevron-left fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"
data-fa-i2svg="">
<path fill="currentColor"
d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z">
</path>
</svg><!-- <i class="fas fa-chevron-left"></i> Font Awesome fontawesome.com -->
<img src="imgs/icon-256-256.png" width="36" height="36" alt="Logo">
</button>
<button id="refresh" class="in-game-button">
<img src="imgs/refresh.png" width="40" height="36" alt="Logo">
<svg class="svg-inline--fa fa-chevron-left fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="#565b65" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg><!-- <i class="fas fa-chevron-left"></i> Font Awesome fontawesome.com -->
<svg class="svg-inline--fa fa-chevron-left fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas"
data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"
data-fa-i2svg="">
<path fill="currentColor"
d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z">
</path>
</svg><!-- <i class="fas fa-chevron-left"></i> Font Awesome fontawesome.com -->
</button>
</section>
js/index.js
+16 -2
View File
@@ -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);
}
js/loading.js
+5 -3
View File
@@ -25,7 +25,7 @@ fetch("./config.jsonc").then((e) => e.text()).then((jsonc) => {
let gamesList = $("#gamesList");
for (game in games) {
gamesList.append(`<li url="games/${json[game["path"]]}" ${game["aliases"] ? "aliases=\"" + game["aliases"].join(',') + "\"" : ''}>${game}</li>`);
gamesList.append(`<li url="games/${games[game]["path"]}" ${games[game]["aliases"] ? "aliases=\"" + games[game]["aliases"].join(',') + "\"" : ''}>${game}</li>`);
}
$("#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";
})();
})();