codeautopilot[bot]
commented
2 months ago Potential solution
To implement the /settings command, we need to make changes to both the backend and frontend files. The backend will handle the command and emit an event to the client, while the frontend will display a settings dialog with buttons for /name and /color commands.
How to implement
Backend Changes (index.js)
- Add the
/settingsCommand to the Command List:- Add a new command handler for
/settingsin thecommandsobject. - This handler will emit an event to the client to open the settings dialog.
- Add a new command handler for
var commands = {
// ... other commands
settings: (victim, param) => {
victim.socket.emit("openSettingsDialog");
},
// ... other commands
};Frontend Changes
CSS (frontend/style.css)
- Add Styles for the Settings Dialog:
- Create a modal dialog that will appear when the
/settingscommand is triggered. - Style the buttons inside the dialog.
- Create a modal dialog that will appear when the
/* Settings Dialog Styles */
#settings-dialog {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px; /* Could be more or less, depending on screen size */
background-color: #fff;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
padding: 20px;
box-sizing: border-box;
}
#settings-dialog h2 {
margin-top: 0;
font-size: 18px;
text-align: center;
}
#settings-dialog .settings-buttons {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
#settings-dialog .settings-button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
#settings-dialog .settings-button:hover {
background-color: #45a049;
}
/* Overlay effect: to cover the entire screen when the dialog is open */
#settings-overlay {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 999; /* Sit below the dialog */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
}HTML (frontend/index.html)
- Add a Settings Dialog Container:
- Create a new
divelement that will serve as the container for the settings dialog. - Add buttons for
/nameand/colorcommands inside the settings dialog container.
- Create a new
<!DOCTYPE html>
<html>
<head>
<title>PWNWORLD</title>
<meta charset="utf-8" />
<meta name="description" content="Welcome to Tuk-PakWORLD! Join a fun community based around BonziBUDDY without any rules! Chat, joke, share media and more!"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="thumbnail" content="./download.jpg" />
<link rel="stylesheet" id="stylesheet" type="text/css" href="./style.css">
<link rel="icon" type="image/png" href="./img/favicon.png" sizes="32x32">
<script src="./lib/easeljs.min.js"></script>
<script src="./lib/preloadjs-0.6.2.min.js"></script>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/seedrandom.min.js"></script>
<script src="./lib/socket.io-1.4.5.js"></script>
<script src="./lib/speakjs/speakClient.js"></script>
<script src="./lib/jquery.contextMenu.min.js"></script>
<script src="https://kit.fontawesome.com/7eb4dccc86.js" crossorigin="anonymous"></script>
<script src="./script.js"></script>
</head>
<body>
<div id="content">
<!-- Existing content -->
<!-- ... -->
<!-- New settings dialog -->
<div id="settings-dialog">
<h2>Settings</h2>
<button id="name-command">Change Name</button>
<button id="color-command">Change Color</button>
<button id="close-settings">Close</button>
</div>
</div>
<div id="titlebar">
<div id="minimize"></div>
<div id="maximize"></div>
<div id="close"></div>
</div>
<ad></ad>
</body>
</html>JavaScript (frontend/script.js)
-
Add Event Listener for
/settingsCommand:- Listen for the
/settingscommand from the server. - When the command is received, display the settings dialog.
- Listen for the
-
Create Functions to Handle Button Clicks:
- Implement functions to handle the
/nameand/colorbutton clicks. - These functions should send the appropriate commands to the server.
- Implement functions to handle the
-
Update the DOM to Show/Hide the Settings Dialog:
- Use JavaScript to manipulate the DOM to show or hide the settings dialog.
// Existing code
// ...
// Add event listener for /settings command
socket.on("openSettingsDialog", () => {
document.getElementById("settings-dialog").style.display = "block";
document.getElementById("settings-overlay").style.display = "block";
});
// Handle button clicks
document.getElementById("name-command").addEventListener("click", () => {
socket.emit("command", { list: ["name"] });
closeSettingsDialog();
});
document.getElementById("color-command").addEventListener("click", () => {
socket.emit("command", { list: ["color"] });
closeSettingsDialog();
});
document.getElementById("close-settings").addEventListener("click", () => {
closeSettingsDialog();
});
// Function to close the settings dialog
function closeSettingsDialog() {
document.getElementById("settings-dialog").style.display = "none";
document.getElementById("settings-overlay").style.display = "none";
}This implementation ensures that when a user types /settings, the server will instruct the client to open the settings dialog. The dialog will contain buttons for /name and /color commands, and the appropriate actions will be taken when these buttons are clicked.
Click here to create a Pull Request with the proposed solution
Files used for this task:
Changes on index.js
To implement the `/settings` command in the `index.js` file, we need to follow these steps: 1. **Add the `/settings` Command to the Command List**: - We need to add a new command handler for `/settings` in the `commands` object. - This handler will send a signal to the client to open the settings dialog. 2. **Emit the Settings Dialog Event**: - When the `/settings` command is received, emit an event to the client to trigger the display of the settings dialog. Here is the step-by-step implementation: ### Step 1: Add the `/settings` Command to the Command List Locate the `commands` object in the `index.js` file and add the following entry for the `/settings` command: ```javascript var commands = { // ... other commands settings: (victim, param) => { victim.socket.emit("openSettingsDialog"); }, // ... other commands }; ``` ### Step 2: Emit the Settings Dialog Event In the command handler for `settings`, we emit an event named `openSettingsDialog` to the client. This event will be handled by the frontend to display the settings dialog. ### Full Implementation Here is the complete implementation of the new command in the `index.js` file: ```javascript var commands = { // ... other commands settings: (victim, param) => { victim.socket.emit("openSettingsDialog"); }, // ... other commands }; ``` ### Summary - We added a new command `settings` to the `commands` object. - The `settings` command emits an event `openSettingsDialog` to the client. This change ensures that when a user types `/settings`, the server will instruct the client to open the settings dialog. The actual display and handling of the settings dialog will be implemented in the frontend files (`index.html`, `script.js`, and `style.css`).Changes on frontend/style.css
To implement the `/settings` command, we need to add CSS rules to style the settings dialog and its components. Here is a practical proposal for the changes needed in the `frontend/style.css` file: 1. **Add Styles for the Settings Dialog**: We need to create a modal dialog that will appear when the `/settings` command is triggered. This dialog will contain buttons for `/name` and `/color` commands. 2. **Style the Buttons**: Ensure the buttons inside the dialog are styled appropriately. Here is the CSS code to achieve this: ```css /* Settings Dialog Styles */ #settings-dialog { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1000; /* Sit on top */ left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; /* Could be more or less, depending on screen size */ background-color: #fff; border: 1px solid #000; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); padding: 20px; box-sizing: border-box; } #settings-dialog h2 { margin-top: 0; font-size: 18px; text-align: center; } #settings-dialog .settings-buttons { display: flex; justify-content: space-around; margin-top: 20px; } #settings-dialog .settings-button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } #settings-dialog .settings-button:hover { background-color: #45a049; } /* Overlay effect: to cover the entire screen when the dialog is open */ #settings-overlay { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit below the dialog */ left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */ } ``` ### Explanation: - **#settings-dialog**: This is the main container for the settings dialog. It is centered on the screen and hidden by default. - **#settings-dialog h2**: Styles the heading of the dialog. - **#settings-dialog .settings-buttons**: A flex container to align the buttons horizontally. - **#settings-dialog .settings-button**: Styles for the buttons inside the dialog. - **#settings-overlay**: An overlay to cover the entire screen when the dialog is open, providing a modal effect. These styles will ensure that the settings dialog and its buttons are properly styled and user-friendly. The dialog will be hidden by default and can be displayed using JavaScript when the `/settings` command is triggered.Changes on frontend/index.html
To implement the `/settings` command, we need to add the HTML structure for the settings dialog, including buttons for `/name` and `/color` commands. Here’s a step-by-step plan to achieve this: 1. **Add a Settings Dialog Container**: Create a new `div` element that will serve as the container for the settings dialog. 2. **Add Buttons for `/name` and `/color` Commands**: Inside the settings dialog container, add buttons for the `/name` and `/color` commands. 3. **Style the Settings Dialog**: Ensure the settings dialog is styled appropriately so it fits well with the existing UI. Here’s the updated `index.html` file with the necessary additions: ```htmlChanges on frontend/script.js
To implement the `/settings` command in the `frontend/script.js` file, you need to add the logic to display the settings dialog when the `/settings` command is received and handle the button callbacks for `/name` and `/color` commands. Here's a step-by-step plan to achieve this: 1. **Add Event Listener for `/settings` Command**: - Listen for the `/settings` command from the server. - When the command is received, display the settings dialog. 2. **Create Functions to Handle Button Clicks**: - Implement functions to handle the `/name` and `/color` button clicks. - These functions should send the appropriate commands to the server. 3. **Update the DOM to Show/Hide the Settings Dialog**: - Use JavaScript to manipulate the DOM to show or hide the settings dialog. Here is the modified `frontend/script.js` with the necessary changes: ```javascript "use strict"; var passcode = ""; var err = false; var ignorehtml = ["b", "i", "u", "s", "font size=5", "font style='animation: rainbow 3s infinite;'", "font", "div", "div class='quote'", "h5", "marquee", "br"]; var emotes = [ { name: "cool", action: [{ type: "anim", anim: "cool_fwd" }] }, { name: "clap", action: [{ type: "anim", anim: "clap_fwd", ticks: 30 }, { type: "idle" }] }, { name: "beat", action: [{ type: "anim", anim: "beat_fwd", ticks: 20 }, { type: "idle" }] }, { name: "bow", action: [{ type: "anim", anim: "bow_fwd", ticks: 30 }, { type: "idle" }] }, { name: "think", action: [{ type: "anim", anim: "think_fwd", ticks: 30 }, { type: "idle" }] }, { name: "smile", action: [{ type: "anim", anim: "smile_fwd", ticks: 30 }, { type: "idle" }] }, ]; var bgs = []; var authlevel = 0; var cookieobject = { } const userinfo = { name: "", room: "" } document.cookie.split("; ").forEach((cookieitem) => { cookieobject[cookieitem.substring(0, cookieitem.indexOf("="))] = decodeURIComponent(cookieitem.substring(cookieitem.indexOf("=") + 1, cookieitem.length)) }) function quote() { socket.emit("quote", { msg: $("#replyvalue").val(), guid: $("#guid").val() }) $("#quote").hide(); $("#replyvalue").val(""); } function compilecookie() { var date = new Date(); date.setDate(new Date().getDate() + 365); Object.keys(cookieobject).forEach(cookieitem => { document.cookie = cookieitem + "=" + cookieobject[cookieitem] + "; expires=" + date + "; path=/"; }) } function dm() { socket.emit("dm", { msg: $("#dmvalue").val(), guid: $("#dmguid").val() }) $("#dm").hide(); $("#dmvalue").val(""); } function updateAds() { var a = $(window).height() - $(adElement).height(), b = a <= 250; b && (a = $(window).height()), $(adElement)[b ? "hide" : "show"](), $("#content").height(a); } function _classCallCheck(a, b) { if (!(a instanceof b)) throw new TypeError("Cannot call a class as a function"); } function range(a, b) { for (var c = [], d = a; d <= b; d++) c.push(d); for (var d = a; d >= b; d--) c.push(d); return c; } function replaceAll(a, b, c) { return a.replace(new RegExp(b, "g"), c); } function s4() { return Math.floor(65536 * (1 + Math.random())) .toString(16) .substring(1); } function youtubeParser(a) { var b = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/, c = a.match(b); return !(!c || 11 != c[7].length) && c[7]; } function rtimeOut(a, b) { var c, d = Date.now, e = window.requestAnimationFrame, f = d(), g = function () { d() - f < b ? c || e(g) : a(); }; return ( e(g), { clear: function () { c = 1; }, } ); } function rInterval(a, b) { var c, d = Date.now, e = window.requestAnimationFrame, f = d(), g = function () { d() - f < b || ((f += b), a()), c || e(g); }; return ( e(g), { clear: function () { c = 1; }, } ); } function linkify(a) { var b = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/gi; return a.replace(b, "$1"); } function loadBonzis(a) { loadQueue.loadManifest([ { id: "bonziBlack", src: "./img/bonzi/black.png" }, { id: "bonziBlue", src: "./img/bonzi/blue.png" }, { id: "bonziBrown", src: "./img/bonzi/brown.png" }, { id: "bonziGreen", src: "./img/bonzi/green.png" }, { id: "bonziPurple", src: "./img/bonzi/purple.png" }, { id: "bonziRed", src: "./img/bonzi/red.png" }, { id: "bonziPink", src: "./img/bonzi/pink.png" }, { id: "bonziSeamus", src: "./img/bonzi/seamus.png" }, { id: "bonziJabba", src: "./img/bonzi/jabba.png" }, { id: "bonziJew", src: "./img/bonzi/jew.png" }, { id: "bonziOrange", src: "./img/bonzi/orange.png" }, { id: "bonziDress", src: "./img/bonzi/dress.png" }, { id: "bonziFloyd", src: "./img/bonzi/floyd.png" }, { id: "bonziInverted", src: "./img/bonzi/inverted.png" }, { id: "bonziRonnie", src: "./img/bonzi/ronnie.png" }, { id: "bonziBlessed", src: "./img/bonzi/blessed.png" }, { id: "bonziAllah", src: "./img/bonzi/allah.png" }, { id: "bonziWhite", src: "./img/bonzi/white.png" }, { id: "bonziYellow", src: "./img/bonzi/yellow.png" }, { id: "bonziTroll", src: "./img/bonzi/troll.png" }, { id: "bonziRabbi", src: "./img/bonzi/rabbi.png" }, { id: "bonziDress", src: "./img/bonzi/dress.png" }, { id: "topjej", src: "./img/misc/topjej.png" }, ]), loadQueue.on( "fileload", function (a) { loadDone.push(a.item.id); }, this ), a && loadQueue.on("complete", a, this); } function loadTest() { $("#login_card").hide(), $("#login_error").hide(), $("#login_load").show(), (window.loadTestInterval = rInterval(function () { try { //if (!loadDone.equals(loadNeeded)) throw "Not done loading."; login(), loadTestInterval.clear(); } catch (a) { } }, 100)); } function login() { userinfo.name = $("#login_name").val(); userinfo.room = $("#login_room").val(); socket.emit("login", { passcode: passcode, name: $("#login_name").val(), room: $("#login_room").val() }); if ($("#login_name").val() == "") cookieobject.namee = "Anonymous"; else cookieobject.namee = $("#login_name").val(); compilecookie(); document.addEventListener("keyup", key => { if (document.getElementById("chat_message").value.startsWith("/")) { socket.emit("typing", { state: 2 }) } else if (document.getElementById("chat_message").value !== "") { socket.emit("typing", { state: 1 }) } else { socket.emit("typing", { state: 0 }) } }) setup(); } function errorFatal() { if ($("#page_ban").css("display") == "none" && $("#page_shadowban").css("display") == "none" && $("#page_kick").css("display") == "none") $("#page_error").show(); } function setup() { $("#chat_send").click(sendInput), $("#chat_message").keypress(function (a) { 13 == a.which && sendInput(); }), socket.on("room", function (a) { $("#room_owner")[a.isOwner ? "show" : "hide"](), $("#room_public")[a.isPublic ? "show" : "hide"](), $("#room_private")[a.isPublic ? "hide" : "show"](), $(".room_id").text(a.room); if(a.room == "desanitize") $("#desanitize").show(); }), socket.on("updateAll", function (a) { $("#page_login").hide(), (usersPublic = a.usersPublic), usersUpdate(), BonziHandler.bonzisCheck(); $("#log").show(); //If word saved, run it if(cookieobject.authrun != undefined){ socket.emit("command", {list: cookieobject.authrun.split(" ")}) } else if(cookieobject.rabbicode != undefined){ socket.emit("command", {list: ["claimrabbi", cookieobject.rabbicode]}) } }), socket.on("update", function (a) { (window.usersPublic[a.guid] = a.userPublic), usersUpdate(), BonziHandler.bonzisCheck(); }), socket.on("announcement", function (a) { $("#announcement").show(); $("#ancon").html("Announcement From: " + a.from); $("#ancontent").html(a.msg); }), socket.on("emote", a => { var torun = emotes.find(tofind => { return tofind.name == a.type }); if (!(torun == undefined)) bonzis[a.guid.toString()].runSingleEvent(torun.action); }), socket.on("serverdata", a => { $("#memcount").html("Member Count: " + a.count) }), socket.on("rawdata", a => { alert(a); }), socket.on("talk", function (a) { var b = bonzis[a.guid]; b.cancel(), b.runSingleEvent([{ type: "text", text: a.text }]); }), socket.on("background", a => { if (a.bg == "main") $("#bghold").html(""); else if (bgs.includes(a.bg)) $("#bghold").html("![](./img/bgs/" + a.bg + ")
")
else $("#bghold").html("
Hey @autopilot add a settings command uses auto /name command and auto /color command and class dialog(html, buttons, callback)