[WIP] Add cheating page

2024-11-22 01:05:33 +00:00 · 2022-05-04 13:12:44 -07:00 · 2022-05-04 13:12:44 -07:00 · ac444c8bdd
commit ac444c8bdd
parent db554d5f32
11 changed files with 252 additions and 10 deletions
--- a/console.html
+++ b/console.html
@ -9,14 +9,29 @@
    <div id="main">
      <div id="titleBar">
        Mojo Console <img src="" id="logo" />
+        <div id="status" class="ready"><span class="dot"></span><span id="statusText">Ready</span></div>
      </div>
      <div id="right">
        <div id="sidebar">
+          <div class="sidebarItem" data-value="cheat">Cheating</div>
          <div class="sidebarItem" data-value="players">Players</div>
          <div class="sidebarItem" data-value="server">Server</div>
          <div class="sidebarItem" data-value="settings">Settings</div>
        </div>
-        <iframe id="content" src="pages/default.html"></iframe>
+        <iframe id="content" src="pages/cheat.html"></iframe>
+      </div>
+    </div>
+    <div id="message" class="hide" onclick="dismissMessage()">
+      <div id="messageBox" onclick="">
+        <div class="messageBoxTitle">
+          Server Response
+        </div>
+        <div id="messageContent">
+          Message!
+        </div>
+        <div>
+          <button style="margin-bottom: 1em;" onclick="dismissMessage()"> Dismiss </button>
+        </div>
      </div>
    </div>
  </body>
--- a/pages/cheat.html
+++ b/pages/cheat.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../styles/cheat.css" />
+    <link rel="stylesheet" href="../styles/picnic.css">
+    <script type="text/javascript" src="../scripts/cheat.js"></script>
+    <script type="text/javascript" src="../scripts/parent.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="toolset">
+        <input id='tab-1' type='radio' name='tabgroupB' checked />
+        <label class="pseudo button toggle" for="tab-1">Quick Command</label>
+        <input id='tab-2' type='radio' name='tabgroupB'>
+        <label class="pseudo button toggle" for="tab-2">Avatar</label>
+        <input id='tab-3' type='radio' name='tabgroupB'>
+        <label class="pseudo button toggle" for="tab-3">Weapon</label>
+        <input id='tab-4' type='radio' name='tabgroupB'>
+        <label class="pseudo button toggle" for="tab-4">Item</label>
+        <input id='tab-5' type='radio' name='tabgroupB'>
+        <label class="pseudo button toggle" for="tab-5">Misc</label>
+      </div>
+      <div id="panel">
+
+      </div>
+    </div>
+  </body>
+</html>
--- a/pages/players.html
+++ b/pages/players.html
@ -3,7 +3,6 @@
  <head>
    <link rel="stylesheet" type="text/css" href="../styles/console.css" />
    <link rel="stylesheet" type="text/css" href="../styles/players.css" />
-    <script src="../scripts/console.js"></script>
    <script src="../scripts/parent.js"></script>
    <script src="../scripts/players.js"></script>
  </head>
--- a/scripts/cheat.js
+++ b/scripts/cheat.js
@ -0,0 +1,43 @@
+qucick_command = [
+    {name: "Heal All Characters", command: "heal", args: []},
+    {name: "Give 1000000 Mora", command: "give 202 1000000", args: []},
+    {name: "Give 100000 Proigem", command: "give 201 100000", args: []},
+    {name: "God mode", command: "godmode", args: []},
+    {name: "Clear all items", command: "clear all", args: []},
+    {name: "Clear all items", command: "clear all", args: []},
+    {name: "Clear all items", command: "clear all", args: []},
+    {name: "Clear all items", command: "clear all", args: []},
+    {name: "Clear all items", command: "clear all", args: []},
+    {name: "Clear all items", command: "clear all", args: []},
+    {name: "Clear all items", command: "clear all", args: []},
+    {name: "Clear all items", command: "clear all", args: []},
+    {name: "Clear all items", command: "clear all", args: []},
+    {name: "Clear all items111", command: "clear all", args: []},
+]
+
+document.addEventListener("DOMContentLoaded", ()=> {
+    var panel = document.getElementById("panel");
+    var i = 0;
+    for (i=0; i< qucick_command.length; i++) {
+        var command = qucick_command[i];
+        console.log(i);
+        var div = document.createElement("div");
+        var label = document.createElement("span");
+        var button = document.createElement("button");
+        var hr = document.createElement("hr");
+        hr.classList.add("solid");
+        div.classList.add('commandGroup');
+        label.innerText = command.name;
+        button.innerText = "Go!";
+        button.command_id = i;
+        div.appendChild(label);
+        div.appendChild(button);
+        panel.appendChild(div);
+        button.onclick = (e) => {
+            var cmd = qucick_command[e.target.command_id];
+            var payload = cmd.command;
+            sendCommand(payload);
+        }
+        panel.appendChild(hr);
+    }
+});
--- a/scripts/console.js
+++ b/scripts/console.js
@ -1,7 +1,7 @@
-async function sendCommand(payload){
+async function sendCommand(payload, method="invoke", background=false){
  let key = new window.URLSearchParams(window.location.search).get("k");
  let url = '/mojoplus/api';
-  let data = JSON.stringify({ "k": key, "request": "invoke", "payload": payload });
+  let data = JSON.stringify({ "k": key, "request": method, "payload": payload });

  let response = await fetch(url, {
    method: 'POST',
@ -12,10 +12,22 @@ async function sendCommand(payload){
  })

  let json = await response.json();
-  
+  if (method == 'invoke' && !background) {
+    document.getElementById("messageContent").innerText = json.payload;
+  document.getElementById("message").style.opacity = 1;
+  document.getElementById("message").classList.remove("hide");
+  }
  return json
 }

+function dismissMessage(){
+  document.getElementById("message").style.opacity = 1;
+  setTimeout(() => {
+    document.getElementById("message").classList.add("hide");
+  }, 500);
+  document.getElementById("message").style.opacity = 0;
+}
+
 function switchPage(page) {
  const iframe = document.getElementById("content");
  iframe.src = `pages/${page}.html`;
--- a/scripts/onload.js
+++ b/scripts/onload.js
@ -1,7 +1,33 @@
+function checkStatus(){
+  var status = document.getElementById("status");
+  sendCommand("", "ping").then(res => {
+    if (res.code == 200) {
+      status.classList.add("ready");
+      status.classList.remove("error");
+      document.getElementById("statusText").innerText = "Ready";
+    } else {
+      throw new Error("");
+    }
+  }).catch(err => {
+    status.classList.add("error");
+    status.classList.remove("ready");
+    document.getElementById("statusText").innerText = "Error";
+  })
+}
+
 document.addEventListener("DOMContentLoaded", () => {
  const sidebarItems = document.querySelector("#sidebar").children;

  for (const item of sidebarItems) {
    item.onclick = (e) => switchPage(e.target.dataset.value)
  }
+  checkStatus();
+  setInterval(() => {
+    checkStatus();
+  }, 30 * 1000 );
+  document.getElementById("messageBox").onclick = (e) => {
+    e.stopImmediatePropagation();
+  }
+  window.
+  document.getElementById("content").style.height = "400px";
 })
--- a/scripts/parent.js
+++ b/scripts/parent.js
@ -1,4 +1,4 @@
-async function sendCommand(payload) {
+async function sendCommand(payload, method="invoke", background=false) {
  const parent = window.parent
-  return await parent.sendCommand(payload)
+  return await parent.sendCommand(payload, method, background)
 }
--- a/scripts/players.js
+++ b/scripts/players.js
@ -9,7 +9,7 @@ function kickUser(username) {
 }

 async function displayUserList() {
-  const resp = await sendCommand('/list');
+  const resp = await sendCommand('/list', 'invoke', true);

  // Do some funky string stuff
  const dataArr = resp.payload.split('\n').map(x => x.trim()).filter(x => x.length > 0);
--- a/styles/cheat.css
+++ b/styles/cheat.css
@ -0,0 +1,34 @@
+.container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.toolset {
+    display: flex;
+    flex-direction: column;
+}
+
+#panel {
+    margin-left: 3em;
+    display: flex;
+    flex-direction: column;
+    margin-right: 3em;
+    min-width: 30em;
+}
+
+.commandGroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    overflow-y: auto;
+}
+
+hr.solid {
+    border-top: 1px solid #bbb;
+    margin-left: 1px;
+    margin-right: 1px;
+    margin-top: -5px;
+    margin-bottom: 8px;
+}
+  
--- a/styles/console.css
+++ b/styles/console.css
@ -61,6 +61,13 @@ button:hover {
  padding: 20px;
  text-align: left;
  font-weight: bold;
+  margin-left: 30px;
+}
+
+#status {
+  font-size: 0.7em;
+  display: inline-block;
+  margin-left: 20em;
 }

 #sidebar {
@ -88,3 +95,80 @@ button:hover {
  height: 100%;
  width: 100%;
 }
+
+.dot {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.ready {
+  color: lightgreen;
+}
+
+.ready .dot {
+  background-color: lightgreen;
+
+}
+
+.error {
+  color: darkred;
+}
+
+.error .dot {
+  background-color: darkred;
+}
+
+#message {
+  position: absolute;
+  background-color: #0000005b;
+  width: 100vw;
+  height: 100vh;
+  z-index: 100;
+  top: 0px;
+  transition: all ease-in 0.5s;
+  opacity: 1;
+}
+
+#messageBox {
+  width: 300px;
+  height: 200px;
+  position: absolute;
+  top:50%;
+  left:50%;
+  background-color: #f2f3c6;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 25px;
+  overflow: hidden;
+  -webkit-box-shadow: 0px 0px 26px -9px rgba(0,0,0,0.83); 
+  box-shadow: 0px 0px 26px -9px rgba(0,0,0,0.83);
+}
+
+#messageContent {
+  margin-top: 0.2em;
+  overflow-wrap: break-word;
+  overflow-y: auto;
+  margin-bottom: 0.2em;
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+.hide {
+  display: none;
+}
+
+.messageBoxTitle {
+  width: 100%;
+  height: 2em;
+  padding-top:1em;
+  text-align: center;
+
+  background: rgb(16,232,253);
+background: linear-gradient(180deg, rgba(16,232,253,1) 0%, rgba(16,248,253,0.5914959733893557) 70%, rgba(249,255,0,0) 100%);
+
+}
--- a/styles/picnic.css
+++ b/styles/picnic.css