Jump to content

ememoide

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by ememoide

    Problem with preview of the ped, Using HTML/CEF, js

    in Discussion

    Posted

     

    Hello, I'm having this problem to be able to correctly display my player in the corresponding container, I leave my code if anyone helps me.
    EVIDENCE: https://youtu.be/2LgJJlESXis

    CODE:

    JAVASCRIPT:

    let inventoryBrowser = null;
    // Crear Ped
    function createPed() {
        mp.game.ui.setPauseMenuActive(false);
        //mp.game.ui.setFrontendActive(false);
        mp.game.ui.activateFrontendMenu(mp.game.gameplay.getHashKey("FE_MENU_VERSION_EMPTY"), false, -1);
     
        let playerPed = mp.peds.new(
            mp.players.local.model,
            new mp.Vector3(mp.players.local.position.x, mp.players.local.position.y, mp.players.local.position.z - 1),
            0,
            mp.players.local.dimension
            );
        setInterval(() =>
            {
            mp.game.invoke("0x2162C446DFDF38FD", true);
            }, 0);
        playerPed.setInvincible(true);
        playerPed.setCollision(false, false);
        mp.players.local.cloneToTarget(playerPed.handle);
        mp.game.entity.setVisible(playerPed.handle, false, false);
        this.screenPedHandle = playerPed.handle;
     
        mp.game.ped.setCapsule(this.screenPedHandle, 0.001);
        mp.game.wait(100);
        mp.game.hud.givePedToPauseMenu(this.screenPedHandle, 1);
        mp.game.hud.setPauseMenuPedLighting(true);
        mp.game.hud.setPauseMenuPedSleepState(true);
     
        mp.game.hud.replaceColourWithRgba(117, 0, 0, 0, 0);
        mp.game.invoke("0x98215325A695E78A", false);
        mp.gui.chat.push("Ped creado correctamente");
    }
     
    // Eliminar Ped
    function deletePed() {
        mp.game.invoke("0xF314CF4F0211894E", 117, 0, 0, 0, 186); // REPLACE_HUD_COLOUR_WITH_RGBA
        mp.game.hud.clearPedInPauseMenu();
        mp.game.ui.setPauseMenuActive(false);
        //mp.game.ui.setFrontendActive(false);
        mp.game.invoke("0x98215325A695E78A", true);
        let findPed = mp.peds.atHandle(this.screenPedHandle);
        if (findPed && mp.peds.exists(findPed)) {
            findPed.destroy();
        }
        mp.gui.chat.push('Ped eliminado.');
    }
     
    // Deshabilitar los controles no deseados
    mp.game.controls.disableControlAction(0, 199, true); // Desactiva el menú de pausa
    mp.game.controls.disableControlAction(0, 157, true); // Desactiva la selección de armas (1)
    mp.game.controls.disableControlAction(0, 158, true); // Desactiva la selección de armas (2)
    mp.game.controls.disableControlAction(0, 159, true); // Desactiva la selección de armas (3)
    mp.game.controls.disableControlAction(0, 160, true); // Desactiva la selección de armas (4)
    mp.game.controls.disableControlAction(0, 161, true); // Desactiva la selección de armas (5)
    mp.game.controls.disableControlAction(0, 162, true); // Desactiva la selección de armas (6)
    mp.game.controls.disableControlAction(0, 163, true); // Desactiva la selección de armas (7)
    mp.game.controls.disableControlAction(0, 164, true); // Desactiva la selección de armas (8)
    mp.game.controls.disableControlAction(0, 165, true); // Desactiva la selección de armas (9)
     
    mp.events.add("render", () => {
        mp.game.controls.disableControlAction(0, 199, true); // Desactiva el menú de pausa
        mp.game.controls.disableControlAction(0, 157, true); // Desactiva la selección de armas (1)
        mp.game.controls.disableControlAction(0, 158, true); // Desactiva la selección de armas (2)
        mp.game.controls.disableControlAction(0, 159, true); // Desactiva la selección de armas (3)
        mp.game.controls.disableControlAction(0, 160, true); // Desactiva la selección de armas (4)
        mp.game.controls.disableControlAction(0, 161, true); // Desactiva la selección de armas (5)
        mp.game.controls.disableControlAction(0, 162, true); // Desactiva la selección de armas (6)
        mp.game.controls.disableControlAction(0, 163, true); // Desactiva la selección de armas (7)
        mp.game.controls.disableControlAction(0, 164, true); // Desactiva la selección de armas (8)
        mp.game.controls.disableControlAction(0, 165, true); // Desactiva la selección de armas (9)
    });
     
    // Alternar el inventario
    function toggleInventoryJs() {
        if (inventoryBrowser !== null) {
            //console.log("Destruyendo navegador CEF..."); // Depuración
            inventoryBrowser.destroy(); // Destruir el navegador
            inventoryBrowser = null;
            mp.gui.cursor.show(false, false); // Ocultar el cursor
            mp.events.callRemote("toggleInventoryBrowser"); // Notificar al servidor
            deletePed();
        }
    }
     
    mp.keys.bind(0x09, false, function() { // Tecla TAB
        mp.events.callRemote("checkTabPress"); // Llamamos al servidor cuando se presiona TAB
        if (inventoryBrowser === null) {
            inventoryBrowser = mp.browsers.new("package://Inventario/inventario.html"); // Creamos el navegador CEF
            mp.gui.cursor.show(true, true); // Mostrar el cursor
            mp.events.callRemote("toggleInventoryBrowser"); // Notificar al servidor
            createPed();
        } else {
            toggleInventoryJs(); // Alternar la visibilidad del inventario
        }
    });
     
    mp.events.add("toggleInventory", () => {
        toggleInventoryJs();
    });
     
    // Ejecutar código JavaScript en el CEF
    mp.events.add("cefExecute", (jsCode) => {
        mp.gui.chat.push("Ejecutando código JS desde cefExecute:", jsCode); // Depuración
        eval(jsCode); // Ejecutar el código recibido
    });

    CSS:

    /* Configuración global */
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo translúcido */
        font-family: Arial, sans-serif;
    }
     
    /* Contenedor principal del inventario */
    .inventory-container {
        position: relative; /* Añadido */
        width: 55vw; /* Aumentado al 55% del ancho de la pantalla para hacer más grande el rectángulo */
        height: 55vh; /* 55% de la altura de la pantalla */
        background: rgba(0, 0, 0, 0.8); /* Fondo oscuro */
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding: 60px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); /* Sombra */
        overflow: hidden; /* Evita que los elementos se desborden */
    }
     
    /* Botón de cierre (cruz) */
    .close-button {
        position: absolute; /* Posición absoluta para colocarlo en la esquina */
        top: 0px; /* Más cerca del borde superior */
        right: 0px; /* Más cerca del borde derecho */
        width: 66px; /* Aumenta el tamaño del botón */
        height: 66px; /* Aumenta el tamaño del botón */
        background: transparent; /* Sin fondo */
        border: none; /* Sin borde */
        padding: 0; /* Elimina el padding */
        cursor: pointer; /* Muestra el cursor como puntero */
    }
     
    /* Opcional: Puedes agregar un borde o un fondo más visible al botón */
    .close-button:hover {
        background-color: rgba(255, 255, 255, 0.2); /* Fondo semitransparente al pasar el ratón */
        border-radius: 50%; /* Botón redondeado */
    }
    /* Rectángulo del inventario */
    .inventory {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-grow: 1;
        gap: 15px; /* Espacio reducido entre los elementos */
    }
     
    /* Parte izquierda (slots de ropa) */
    .clothes {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Alinea los slots hacia el inicio (más compacto) */
        align-items: flex-start;
        width: 180px; /* Mantenemos el mismo tamaño de los slots de ropa */
        gap: 5px;
    }
     
    .clothes-slot {
        width: 100%;
        height: 80px; /* Reducido el tamaño de los slots de ropa */
        background-color: #333;
        border: 1px solid #555;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
    }
     
    .clothes-slot:hover {
        background-color: #555;
    }
     
    .character {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 600px;  /* Altura definida para el contenedor */
        background-color: #333;  /* Fondo oscuro para que el modelo sea visible */
        overflow: hidden;  /* Evita que el contenido se desborde */
        position: relative;  /* Asegura que los elementos dentro de él se ajusten correctamente */
    }
     
    .inventorybody {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
     
    /* Parte derecha (slots para objetos) */
    .items {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* 5 columnas para los 10 slots */
        gap: 10px; /* Espacio reducido entre los slots */
        flex-grow: 4; /* Aumentado el tamaño relativo de la sección de objetos */
        width: 100%;
        margin-top: 0; /* Sin margen superior */
    }
     
    /* Hacemos los slots cuadrados perfectos */
    .slot {
        position: relative; /* Necesario para usar padding con aspect-ratio */
        width: 100%;
        padding-top: 100%; /* Esto asegura que la altura sea igual al ancho */
        background-color: #444;
        border: 2px solid #555;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        font-size: 18px; /* Un poco más grande el texto */
    }
     
    .slot:hover {
        background-color: #555;
    }
     
    /* Eliminar la sección de botones */
    .actions {
        display: none; /* Esto hace que los botones no aparezcan */
    }
     
    #pedCanvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1; /* El canvas estará detrás de los elementos HTML */
        width: 100%; /* Puedes ajustar el tamaño según sea necesario */
        height: 100%; /* Ajusta la altura según sea necesario */
    }


    HTML

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Inventario</title>
        <link rel="stylesheet" href="inventario.css">
    </head>
    <body>
        <div class="inventory-container" id="inventoryContainer">
            <!-- ACA SE EJECUTA EL BOTON DE LA CRUZ PARA CERRAR EL INVENTARIO -->
            <img src="cruz.png" class="close-button" alt="Cerrar" id="closeButton">
            <script>      
                const closeButton = document.getElementById('closeButton');
                closeButton.addEventListener('click', function() {
                    toggleInventory();
                });
                document.getElementById('closeButton').addEventListener('click', function() {
                    mp.trigger('toggleInventory');
                });
            </script>
     
            <div class="inventory">
                <div class="clothes">
                    <div class="clothes-slot" id="headSlot">Cabeza</div>
                    <div class="clothes-slot" id="torsoSlot">Torso</div>
                    <div class="clothes-slot" id="pantsSlot">Piernas</div>
                    <div class="clothes-slot" id="shoesSlot">Pies</div>
                </div>
                <div class="character" id="characterContainer">
                    <!-- Aquí tiene que ir el modelo del jugador -->
                    <canvas id="pedCanvas"></canvas>
                </div>
                <div class="items">
                    <div class="slot" id="item1">Item 1</div>
                    <div class="slot" id="item2">Item 2</div>
                    <div class="slot" id="item3">Item 3</div>
                    <div class="slot" id="item4">Item 4</div>
                    <div class="slot" id="item5">Item 5</div>
                    <div class="slot" id="item6">Item 6</div>
                    <div class="slot" id="item7">Item 7</div>
                    <div class="slot" id="item8">Item 8</div>
                    <div class="slot" id="item9">Item 9</div>
                    <div class="slot" id="item10">Item 10</div>
                </div>
            </div>
        </div>
        <script>
            window.toggleInventory = toggleInventory;
        </script>
    </body>
    </html>
×
×
  • Create New...