ChooserGUI_Implementation

Description

The integration of background music chooser GUI into code involves making a music icon which will be shown on each screen. Clicking on the music icon will open a dialog containing two radio buttons with background music names. The choice of the user will be persisted in local storage. The user should also be given an option to disable background music for a particular screen.

BackgroundSelectionComponent.java: Location

Implementation

Creating a reusable component

The idea of creating a reusable BackgroundSelectionComponent is that it can be attached to the lifecycle of the UI entities of all the screens and there is minimal technical debt when it comes to adding new background music. In this guideline, we will focus on the UI side of things. This reusable component accepts two props:-

Property	Type	Description
Screen name	String (any)	The name of the screen. This name is displayed in the dialog box that opens. It also maps to the backgroundMusic.json file which contains the list of background music files for that particular screen.
Position	String ('tl', 'tr', 'bl', 'br')	Accepts the position where the music icon should be placed. 'tl' - Top left 'tr' - Top right 'bl' - Bottom left 'br' - Bottom right

Usage:

addComponent(new BackgroundSelectionComponent("Achievements", "br"))

Inner implementation of the position prop:

switch (iconPosition) {
   case "tl":
        musicSelectionTable.top().left();
        break;
   case "bl":
        musicSelectionTable.bottom().left();
        break;
   case "br":
        musicSelectionTable.bottom().right();
        break;
   default:
        musicSelectionTable.top().right();
}
musicSelectionTable.add(musicImgBtn).size(120, 120);

On clicking the icon, open dialog

Clicking on the music icon opens the dialog which contains a dialog and two radio buttons with background music track names.

mage musicImg = new Image(ServiceLocator.getResourceService()
                .getAsset("images/settings/musicSelectionButton.png", Texture.class));
        ImageButton musicImgBtn = new ImageButton(musicImg.getDrawable());
        musicImgBtn.addListener(new ChangeListener() {
            @Override
            public void changed(ChangeEvent event, Actor actor) {
                showMusicDialog();
            }
});

Clicking on a radio button or track plays music as preview

Clicking on a radio button or track in the dialog box plays the track selected as preview, and at the same time persists the choice, clears the table and then re-renders the table to update the radio button state.

private Table getTrackTable(String trackPath, boolean selected) {
        String songName = getSongName(trackPath);
        Table table = new Table();
        table.add(getRadioButton(selected)).size(50, 50);
        table.add(getLabel(songName)).width(350);

        table.addListener(new ChangeListener() {
            @Override
            public void changed(ChangeEvent event, Actor actor) {
                BackgroundMusic.selectMusic(screenName, trackPath);
                entity.getEvents().trigger("changeSong", trackPath);
                dialog.getContentTable().clear();
                renderTracks();
            }
        });

        return table;
}