Anterior

Siguientes

Ejercicio: Adición de estadísticas de PER a la aplicación web

Completado

Ahora que hemos agregado correctamente los jugadores al banquillo, necesitamos mostrarle al entrenador cuáles son los números de PER iniciales de los jugadores, para que pueda decidir qué cinco jugadores deben formar la alineación inicial.

Adición de las estadísticas de PER iniciales

Igual que antes, podemos revisar el archivo index.html para averiguar si hay un valor de div con el identificador playerCards que podemos usar para mostrar las estadísticas de PER de cada jugador. Además, igual que cuando creamos dinámicamente los botones de los jugadores, podemos crear dinámicamente un valor de div para cada jugador, de modo que represente el valor de PER del jugador para ese cuarto del partido.

// This function is called at the beginning of the game play to initialize
// PER for each player, and at each quarter to do two things: 
// 1. Ensure the players currently on the court have the correct PER represented
// 2. Update the stats for each player for the current quarter
function displayPlayerCards() {
    // Get the div in which the stats will be shown.
    var playerCardDisplay = document.getElementById('playerCards');

    // For each player, create a player stat card to show the PER for that player for a 
    // specific quarter.
    for (let [playerName, playerStats] of playerMap.entries()) {
        // Create an overall div that will contain the player stat information.
        var playerCard = document.createElement('div');

        // Set an ID for the card so we can get it later
        playerCard.id = playerName + '_card';

        // Set the style class name
        playerCard.className = 'playerCard';

        // Add the player image to the div.
        var playerImage = document.createElement('img');

        // Set the style for the image
        playerImage.className = 'perCard';

        // Load the image
        playerImage.src = 'images/'+playerName+'.png';

        // Add the image to the card
        playerCard.appendChild(playerImage);

        // Add the player's PER to the div.
        var newPlayerPER = document.createElement('p');

        // Set the style for the number
        newPlayerPER.className = 'perCard';

        // Set the text for the PER
        newPlayerPER.innerText = 'PER: ' + playerStats[currentQuarter].toPrecision(4);

        // Add the PER
        playerCard.appendChild(newPlayerPER);

        // Add the player stat card to the game.
        playerCardDisplay.appendChild(playerCard);
    }
}

Prueba de forma local de la pantalla de estadísticas inicial

Podemos probar la pantalla de estadísticas inicial de forma local. Para ello, haga clic con el botón derecho en el archivo index.html, seleccione Copiar ruta de acceso y pegue la ruta en la barra de direcciones del explorador. Si tenía la página abierta desde la última unidad, asegúrese de realizar una actualización forzada (CTRL+Mayús+R en Windows y Cmd+Mayús+R en Mac). Vuelva a cargar el archivo game_stats.csv. Debería ver los 16 jugadores en el banquillo, con las tarjetas de estadísticas de los 16 jugadores en el panel de estadísticas de la derecha.

© 2021 Warner Bros. Ent. Todos los derechos reservados

Continuar