Let's start by copying the piano application that we created in the previous chapter, and renaming the files to pinaoHero.html, pianoHero.js, and pianoHero.css. We will also rename the main application object to PianoHeroApp. You can find the code for this section in Chapter 7/example7.1.

Now let's create the splash panel. First we'll define the HTML in pianoHero.html. We will add a new <div> element above the keyboard element to hold the splash panel:

<div id="splash">
    <h1>Piano Hero</h1>
    <section class="loading">
        Loading audio...<br/>
        <progress max="100" value="0"></progress>
    </section>

First we add a section with a class of "loading" that displays the status of loading the audio when the application first starts up. Notice that we are using the new HTML5 <progress> element. This element is used to implement a progress bar in your application. It has a max attribute that defines the maximum value, and a value attribute to set the current value. Since we are showing percent complete we set the max to 100. We will update the value attribute from JavaScript as audio files are loaded.

Then we add a section with a class of "error" that will show an error message if there is an error loading the audio. Otherwise it will be hidden:

    <section class="error">
        There was an error loading the audio.
    </section>

Lastly, we add a section that shows the game options and buttons. This panel is shown after all audio has been loaded:

    <section class="loaded hidden">
        <label>Choose a song</label>
        <select id="select-song">
            <option value="rowBoat">Row Your Boat</option>
            <option value="littleStar">
              Twinkle, Twinkle, Little Star</option>
            <option value="londonBridge">London Bridge</option>
            <option value="furElise">Fur Elise</option>
        </select><br/>
        <label>Choose difficulty</label>
        <select id="select-rate">
            <option value="0.5">Slow (60bpm)</option>
            <option value="1" selected>Normal (120bpm)</option>
            <option value="1.5">Fast (180bpm)</option>
        </select>
        <p>
            <button id="start-game">Start Game</button>
            <button id="start-song">Play Song</button>
        </p>
    </section>
</div>

Here the user selects the song and difficulty from the drop-down lists. The difficulty is expressed in terms of the rate of speed that the song plays. A value of one is the default speed of 120 beats per minute. A value less than one is slower, and more than one is faster.

Now we need to style the splash panel. Please see the source code for all of the styles. The one noteworthy piece of styling is for the PIANO HERO title, which we placed inside an <h1> header element:

#splash h1
{
    font-size: 6em;
    color: #003;
    text-transform: uppercase;
    text-shadow: 3px 3px 0px #fff, 5px 5px 0px #003;
}

We set the color for the text to dark blue. Then we use text-shadow to produce an interesting block text effect. When using text-shadow, you may specify any number of shadows separated by commas. The shadows will be drawn in order from last to first. So in this case, we first draw a dark blue shadow with an offset of 5 pixels, then a white shadow with an offset of 3 pixels, and finally the dark blue text will be drawn on top of that:

Now let's create a new JavaScript file named splashPanel.js, and define a new object called SplashPanel in it that will contain all of the code to control the splash panel. The constructor will take one parameter, a reference to audioManager:

function SplashPanel(audioManager)
{
    var $div = $("#splash"),
    error = false;

We define a $div object to hold a reference to the splash panel's root <div> element, and an error variable to set if there was an error loading the audio. Next we define the public show() and hide() methods. These will be called by the main application object to show or hide the panel:

    this.show = function()
    {
        $div.fadeIn();
        return this;
    };
    this.hide = function()
    {
        $div.hide();
        return this;
    };
}

Next we will move the loadAudio() method from PianoHeroApp to SplashPanel. In this method we need to make a couple of minor changes to the call to audioManager.getAudio():

audioManager.getAudio(noteName,
    function()
    {
        if (error) return;
        if (++loaded == count) showOptions();
        else updateProgress(loaded, count);
    },
    function(audio) { showError(audio); }
);

In our function that gets called each time an audio file is loaded, we first check if there was an error, and if so get it out. Then we check if all of the audio files have been loaded (loaded == count), and if so call the showOptions() method. Otherwise we call the updateProgress() method to update the progress bar:

function updateProgress(loadedCount, totalCount)
{
    var pctComplete = parseInt(100 * loadedCount / totalCount);
    $("progress", $div)
        .val(pctComplete)
        .text(pctComplete + "%");
}

The updateProgress() method takes the loaded count and total count as parameters. We compute the percent complete and use that to update the value of the <progress> element. We also set the inner text of the <progress> element. This will only show for browsers that don't support the <progress> element.

function showOptions()
{
    $(".loading", $div).hide();
    $(".options", $div).fadeIn();
}

The showOptions() method is called after all audio has been loaded. First we hide the element with the "loading" class, and then fade in the element with the "options" class. This hides the progress section and shows the section that contains the game options.

Our error handler function calls showError(), passing it the audio element that failed:

function showError(audio)
{
    error = true;
    $(".loading", $div).hide();
    $(".error", $div)
        .append("<div>" + audio.src + "<div>")
        .show();
}

In the showError() method we set the error flag to true so we know not to continue in the getAudio() call. First we hide the loading section, then we append the name of the file that failed to the error message, and show the error section.

The last thing we need in our splash panel is to hook up event handlers to the buttons. There are two buttons, Start Game and Play Song. The only difference between them is that the Play Song button plays the song without scoring, so the user can hear the song and practice:

$(".options button", $div).click(function()
{
    var songName = $("#select-song>option:selected", $div).val();
    var rate = Number($("#select-rate>option:selected", $div).val());
    var playGame = ($(this).attr("id") == "start-game");
    app.startGame(songName, rate, playGame);
});

We use the same event handler for both buttons. First we get the options that the user selected, including the song and playback rate. You can find the selected <option> element in jQuery using the :selected selector. We determine which button the user pressed by looking at the button's id attribute. Then we call the startGame() method on the global app object passing in the selected options. We will write that method later.