search

Rafafrias2012 / BonziworldXP

0 stars 0 forks source link

Add a draggable window #6

Closed Rafafrias2012 closed 2 months ago

Rafafrias2012 commented 2 months ago

Add a draggable window

codeautopilot[bot] commented 2 months ago

Potential solution

To add a draggable window, we need to make changes to the CSS, JavaScript, and HTML files. The CSS will style the draggable window, the JavaScript will handle the dragging behavior, and the HTML will include the structure of the draggable window.

How to implement

Step 1: Update CSS for Draggable Window

Add the following CSS rules to build/www/css/style.css to style the draggable window:

/* Draggable window container */
.draggable-window {
  width: 400px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #000;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Draggable window header */
.draggable-window-header {
  background-color: #0078d7;
  color: #fff;
  padding: 10px;
  cursor: move;
  font-family: 'WinXP';
  font-size: 16px;
}

/* Draggable window content */
.draggable-window-content {
  padding: 20px;
  font-family: 'Tahoma', sans-serif;
  font-size: 14px;
}

Step 2: Implement Dragging Functionality in JavaScript

Add the following JavaScript code to build/www/js/app.protected.noskiddies.js to handle the dragging behavior:

Add Event Listeners for Mouse Events

Modify the newWindow function to set up the event listeners for dragging:

function newWindow(type, header, body, buttons, top, left) {
  var localId = Id(5);
  var previous = 0;
  var current = 0;

  currentDrag = localId;

  $("#content").append('<div id='+localId+' class="window draggable-window" style="position: absolute;top: '+top+'; left: '+ left+';"><div style="height:14%;width:85%;" id="'+localId+'_bar" class="draggable-window-header"><img id="'+localId+'_x" class="x" src="/img/desktop/x.png"></div><div id="'+localId+'_con" class="draggable-window-content" style="position:relative;left: 2%;"><h3 class="header">'+header+'</h3><br>'+body+'</div></div>');

  $("#" + localId + "_con").css({'font-family': 'WinXP'});

  // Add event listeners for dragging
  $("#" + localId + "_bar").on("mousedown", startDrag);
  $(window).on("mousemove", doDrag);
  $(window).on("mouseup", stopDrag);

  if(buttons == "ok"){
    $("#" + localId).append('<div style="position:relative;top: 29%;left:2%;"><button id="'+localId+'_ok">Ok</button>');
  }
  if(buttons == "ok_cancel"){
    $("#" + localId).append('<div style="position:relative; top: 29%; left:2%; display:flex;"><button id="'+localId+'_ok">Ok</button><button id="'+localId+'_cancel">Cancel</button></div>');
  }
  if(buttons.includes('<')){
    $("#" + localId).append(buttons);
  }
  document.getElementById(localId).style.position = "absolute";
  $("#" + localId + "_x").on("mousedown", function(){
    $("#" + localId).remove();
  });
  $("#" + localId + "_ok").on("mousedown", function(){
    if(type == "options"){
    socket.emit("command",{list: ["color",$("#color").val()]});
    socket.emit("command",{list: ["name",$("#newname").val()]}); 
    }
    $("#" + localId).remove();
  });
  $("#" + localId + "_cancel").on("mousedown", function(){
    $("#" + localId).remove();
  });
  document.addEventListener('mousemove', (e) => {
    left = e.clientX;
    t = e.clientY;
  });
}

Track the Drag State

Add the following variables at the top of the script to track the drag state:

var isDragging = false;
var dragOffsetX = 0;
var dragOffsetY = 0;
var dragElement = null;

Implement Drag Functions

Add the following functions to handle the dragging behavior:

function startDrag(e) {
  if (e.which === 1) { // Only allow left mouse button
    isDragging = true;
    dragElement = $(e.target).closest('.draggable-window');
    dragOffsetX = e.clientX - dragElement.offset().left;
    dragOffsetY = e.clientY - dragElement.offset().top;
  }
}

function doDrag(e) {
  if (isDragging) {
    var newLeft = e.clientX - dragOffsetX;
    var newTop = e.clientY - dragOffsetY;
    dragElement.css({
      left: newLeft + 'px',
      top: newTop + 'px'
    });
  }
}

function stopDrag(e) {
  if (isDragging) {
    isDragging = false;
    dragElement = null;
  }
}

Step 3: Add Draggable Window to HTML

Insert the new div element for the draggable window within the <body> tag of build/www/index.html:

<!DOCTYPE html>
<html>
<head>
    <title>BonziWORLD XP</title>
    <meta charset="utf-8" />
    <meta content="">
    <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 http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet" type="text/css" href="https://botoxparty.github.io/XP.css/XP.css">

    <link rel="icon" type="image/png" href="./favicons/favicon-32x32.png" sizes="32x32">
    <link rel="manifest" href="./favicons/manifest.json">
    <meta name="theme-color" content="#ffffff">

    <script src="./js/lib/easeljs.min.js"></script>
    <script src="./js/lib/preloadjs-0.6.2.min.js"></script>
    <script src="./js/lib/jquery.min.js"></script>
    <script src="./js/lib/seedrandom.min.js"></script>
    <script src="./js/lib/socket.io-1.4.5.js"></script>
    <script src="./js/lib/speakjs/speakClient.js"></script>
    <script src="./js/lib/jquery.contextMenu.min.js"></script>

    <script src="./js/platform.js"></script>

    <script src="./js/app.protected.noskiddies.js" ></script>
    <script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
</head>
<body>
    <div id="content">

        <div id="room_info">
            <p id="users_online">Users online: 0</p>
            Room ID - <p class="room_id">???</p><br>
            <p id="room_public">This room is public.</p>
            <p id="room_private">This room is private.</p>
            <p id="room_owner"><br>You are the owner of this room.</p>
        </div>

        <canvas id="bonzi_canvas" width="100" height="100"></canvas>

        <table id="chat_bar"><tr>
            <td id="chat_send">send</td>
            <td id="chat_message_cont"><input id="chat_message" type="text" placeholder="Enter a message"></td>
            <td id="chat_tray">
                <div id="btn_tile" class="tray_btn"></div>
            </td>
        </tr></table>

        <div id="extras_bar">
            <img src="/img/desktop/extras_slide.png" id="extras_slide">
            <img src="/img/desktop/infobubble.png" id="info_icon" width="14" height="14" style="position:relative;left:-5px;top:4px;">
        </div>

        <div id="my_bonzi" class="icon" style=" background-image: url(./img/desktop/mybonzi.png);">
            <p class="icon_label">My Settings</p>
        </div>
        <div id="brk"></div>
        <div id="bsn_messenger" class="icon" style=" background-image: url(./img/desktop/bsn.png);" onclick="alert('BSN Messenger not available in this version')">
            <p class="icon_label">BSN Messenger</p>
        </div>
        <div id="brk"></div>
        <div id="games" class="icon" style=" background-image: url(./img/desktop/games.png);">
            <p class="icon_label">Games</p>
        </div>
        <div id="brk"></div>
        <div id="bonzi_log" class="icon" style=" background-image: url(./img/desktop/bonzi_log.png);">
            <p class="icon_label">Bonzi Log</p>
        </div>
        <div id="flash_window" class="window_large" style="position: absolute;top: 10%; left: 10%;visibility:hidden;"><div style="height:5%;width:90%;" id="flash_bar"><img id="flash_x" class="large_x" src="/img/desktop/x.png"></div><div id="flash_con" style="position: relative; left: 2%; font-family: WinXP;"><a id="flash_it" href="javascript:console.log('start')">Icy Tower</a><br><a 
id="flash_pb" href="javascript:console.log('start')">Papa's Burgeria</a><br><input type="text" id="swfurl"><button id="cst">Custom Swf URL</button></div></div>

        <!-- New draggable window -->
        <div id="draggable_window" class="draggable-window">
            <div id="draggable_header" class="draggable-window-header">Draggable Window</div>
            <div id="draggable_content" class="draggable-window-content">
                <p>This is a draggable window. You can move it around!</p>
            </div>
        </div>
        <!-- End of new draggable window -->

        <div id="page_login" class="page">
            <div id="login_apps" class="app_showcase"></div>
            <div id="login_readme">Make sure to check out the <a id="readme" href="readme.html" target="_blank">README</a> before use.<br>This server is now apart of BonziWORLD.org! <a style="font-family:'WinXP';font-size:20px;" href="https://bonziworld.org">Visit BW.org</a><hr><p style="font-size: 20px;"><a style="font-family:'WinXP';" href="changelog.html">Changelog/Updates</a></p></div>
            <div id="login_card" style="display:none">
                <div id="login_go1"></div>
                <div style="height:50px;"></div>
                <p style="left:5px;color:white;position:relative;font-size:20px;font-family:'WinXP';">Start</p>
                <div id="login_error" style="display:none"></div>
            </div>
            <div id="login_load">loading</div>
            <div id="login_version" style="font-size: 20px;">
                BW XP:
                1.1.0A
            </div>
        </div>

        <div id="page_error" class="page" style="display:none;">
            <div id="error_cont" class="message_cont" style="font-family:'WinXP';font-size:18px;">
                <img src="./img/error/logo.png"><br>
                <br>
                <h3 style="font-family:'WinXP';">BonziWORLD.exe has encountered an error and needs to close.</h3><br>
                Nah, but seriously there was an error and you got disconnected from the server. Chances are, your internet just died out for a brief moment or your device went to sleep. Otherwise the server just screwed up.<br>
                <br>
                Try and reload the page. If that doesn't work and your internet is okay, then panic. We'll probably be back up Soon™ though.<br>
                <br>
                <a href="#" onclick="window.location.reload()">Reload?</a><br>
                <br>
                Room ID - <span class="room_id">???</span><br>
            </div>
        </div>
        <div id="page_ban" class="page" style="display:none;font-family:'WinXP';font-size:18px;">
            <div id="ban_cont" class="message_cont">
                <img src="./img/ban/logo.png"><br>
                <br>
                <h3 style="font-family:'WinXP';">You got banned!</h3><br>
                <br>
                <p>Why? </p><span id="ban_reason"></span><br>
                <p>When is it over? </p><span id="ban_end"></span><br>
            </div>
        </div>
    <div id="page_kick" class="page" style="display:none">
            <div id="kick_cont" class="message_cont">
                <img src="./img/ban/logo.png"><br>
                <br>
                <h1>You got kicked!</h1><br>
                <br>
                <b>Why? </b><span id="ban_reason"></span><br>
            </div>
        </div>
        <div id="page_unsupp" class="page" style="display:none">
            <div id="unsupp_cont" class="message_cont">
                <img src="./img/error/logo.png"><br>
                <br>
                <h1>BonziWORLD cannot run on this platform.</h1><br>
                Unfortunately, BonziWORLD cannot run in this browser for the following reasons:<br>
                <ul id="unsupp_reasons"></ul>
                You can try to download a BonziWORLD app that works on your device, or update your browser.
                <div id="login_apps" class="app_showcase"></div>
            </div>
        </div>
    </div>

    <div id="titlebar">
        <div id="minimize"></div>
        <div id="maximize"></div>
        <div id="close"></div>
    </div>

    <ad></ad>

</body>
</html>

Explanation:

This new div will be styled and made draggable using CSS and JavaScript in the respective files (style.css and app.protected.noskiddies.js).

With these changes, you have implemented the draggable window functionality. The window can now be dragged around the screen by clicking and holding the mouse button on the window's title bar.

Click here to create a Pull Request with the proposed solution

Files used for this task:

Changes on build/www/css/style.css To add a draggable window, we need to define the CSS rules that will style the draggable window. Here is a concrete proposal for the changes needed in the `build/www/css/style.css` file: 1. **Define the draggable window container**: This will be the main container for the draggable window. 2. **Define the header for the draggable window**: This will be the area where the user can click and drag to move the window. Here are the CSS rules to add: ```css /* Draggable window container */ .draggable-window { width: 400px; height: 300px; background-color: #fff; border: 1px solid #000; position: absolute; top: 50px; left: 50px; z-index: 1000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); overflow: hidden; } /* Draggable window header */ .draggable-window-header { background-color: #0078d7; color: #fff; padding: 10px; cursor: move; font-family: 'WinXP'; font-size: 16px; } /* Draggable window content */ .draggable-window-content { padding: 20px; font-family: 'Tahoma', sans-serif; font-size: 14px; } ``` ### Explanation: - **`.draggable-window`**: This class styles the main container of the draggable window. It sets the width, height, background color, border, position, and shadow. - **`.draggable-window-header`**: This class styles the header of the draggable window, which will be used to drag the window. It sets the background color, text color, padding, cursor, and font. - **`.draggable-window-content`**: This class styles the content area of the draggable window. It sets the padding and font. These CSS rules will ensure that the draggable window is styled appropriately and can be moved around by dragging the header. The next steps would involve adding the corresponding HTML structure in `index.html` and implementing the JavaScript logic for the dragging behavior in `app.protected.noskiddies.js`.
Changes on build/www/js/app.protected.noskiddies.js To implement the draggable window functionality in the `build/www/js/app.protected.noskiddies.js` file, you need to add JavaScript functions that handle the dragging behavior. Here is a step-by-step guide to achieve this: 1. **Add Event Listeners for Mouse Events**: You need to add event listeners for `mousedown`, `mousemove`, and `mouseup` events to handle the dragging. 2. **Track the Drag State**: Use variables to track whether the window is being dragged and its position. 3. **Update the Window Position**: Update the position of the window based on the mouse movements. Here is the code to implement these steps: ### Step 1: Add Event Listeners for Mouse Events Add the following code to the `newWindow` function to set up the event listeners for dragging: ```javascript function newWindow(type, header, body, buttons, top, left) { var localId = Id(5); var previous = 0; var current = 0; currentDrag = localId; $("#content").append('

'+header+'


'+body+'
'); $("#" + localId + "_con").css({'font-family': 'WinXP'}); // Add event listeners for dragging $("#" + localId + "_bar").on("mousedown", startDrag); $(window).on("mousemove", doDrag); $(window).on("mouseup", stopDrag); if(buttons == "ok"){ $("#" + localId).append('
'); } if(buttons == "ok_cancel"){ $("#" + localId).append('
'); } if(buttons.includes('<')){ $("#" + localId).append(buttons); } document.getElementById(localId).style.position = "absolute"; $("#" + localId + "_x").on("mousedown", function(){ $("#" + localId).remove(); }); $("#" + localId + "_ok").on("mousedown", function(){ if(type == "options"){ socket.emit("command",{list: ["color",$("#color").val()]}); socket.emit("command",{list: ["name",$("#newname").val()]}); } $("#" + localId).remove(); }); $("#" + localId + "_cancel").on("mousedown", function(){ $("#" + localId).remove(); }); document.addEventListener('mousemove', (e) => { left = e.clientX; t = e.clientY; }); } ``` ### Step 2: Track the Drag State Add the following variables at the top of the script to track the drag state: ```javascript var isDragging = false; var dragOffsetX = 0; var dragOffsetY = 0; var dragElement = null; ``` ### Step 3: Implement Drag Functions Add the following functions to handle the dragging behavior: ```javascript function startDrag(e) { if (e.which === 1) { // Only allow left mouse button isDragging = true; dragElement = $(e.target).closest('.window'); dragOffsetX = e.clientX - dragElement.offset().left; dragOffsetY = e.clientY - dragElement.offset().top; } } function doDrag(e) { if (isDragging) { var newLeft = e.clientX - dragOffsetX; var newTop = e.clientY - dragOffsetY; dragElement.css({ left: newLeft + 'px', top: newTop + 'px' }); } } function stopDrag(e) { if (isDragging) { isDragging = false; dragElement = null; } } ``` ### Final Integration Ensure that the `startDrag`, `doDrag`, and `stopDrag` functions are defined in the same scope as the `newWindow` function or are accessible from it. With these changes, you have implemented the draggable window functionality. The window can now be dragged around the screen by clicking and holding the mouse button on the window's title bar.
Changes on build/www/index.html To add a draggable window to the `index.html` file, you need to insert a new `div` element that will serve as the draggable window. Here's a step-by-step guide on how to do this: 1. **Add a new `div` element for the draggable window**: - Insert the new `div` element within the `` tag of the `index.html` file. - Give it an appropriate ID and class for styling and JavaScript manipulation. Here's the modified `index.html` file with the new draggable window `div` added: ```html BonziWORLD XP

Users online: 0

Room ID -

???


This room is public.

This room is private.


You are the owner of this room.

send

My Settings

BSN Messenger

Games

Bonzi Log

Draggable Window

This is a draggable window. You can move it around!

Make sure to check out the README before use.
This server is now apart of BonziWORLD.org! Visit BW.org

Changelog/Updates

loading
BW XP: 1.1.0A
``` ### Explanation: - **New `div` for draggable window**: - `id="draggable_window"`: The main container for the draggable window. - `class="draggable"`: A class for styling purposes. - `id="draggable_header"`: The header of the draggable window, which will be used to drag the window. - `id="draggable_content"`: The content area of the draggable window. This new `div` will be styled and made draggable using CSS and JavaScript in the respective files (`style.css` and `app.protected.noskiddies.js`). Next steps: - **Style the draggable window** in `style.css`. - **Implement the dragging functionality** in `app.protected.noskiddies.js`.