Jump to content

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

ememoide

By ememoide
in Discussion

 Share

Recommended Posts

ememoide Newbie

ememoide

Posted
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 an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...