https://ball-labyrinth-game.web.app/js/vars/screens/packagesScreen.js

1var packagesScreen = {
2    init: function() {
3        get('packagesBackBtn').click(function(){
4            fireEvent(SOUND, {sound: CLICK_SOUND});
5            screens.show('home');
6        });
7
8        screens.onDisplay['packages'] = packagesScreen.onDisplay;
9        screens.onHide['packages'] = packagesScreen.onHide;
10    },
11
12    onDisplay: function() {
13        var mode = state.mode.current;
14
15        var clList = get('packagesScreen').classList;
16        clList.remove(STAR_MODE);
17        clList.remove(MOOVE_MODE);
18        clList.add(mode);
19
20        get('packagesContent').innerHTML = '';
21
22        var packages = levels[mode];
23        for (var i=0; i<packages.length; i++) {
24            //if (packages[i].levels.length > 3) {
25                get('packagesContent')
26                    .appendChild(
27                        packagesScreen.createPackage(packages[i], i)
28                    );
29            //}
30        }
31
32        get('packagesUserStars').innerHTML = state.userStars();
33
34        setTimeout(packagesScreen.postDisplay, 260)
35    },
36
37    postDisplay: function() {
38        get('packagesScreen').classList.remove(WAITING)
39    },
40
41    onHide: function() {
42        setTimeout(packagesScreen.postHide, 260)
43    },
44
45    postHide: function() {
46        get('packagesScreen').classList.add(WAITING)
47        get('packagesContent').scrollTop = 0
48    },
49
50    createPackage: function(package, i) {
51        const packageStats = state.packageStats(state.mode.current, i);
52        const packageBought = state.unlockedPackages.includes(i)
53
54        let pack  = document.createElement('div');
55        const packageClasses = 'package'
56            + (packageStats.available || packageBought ? ' open' : '')
57            + (i > 5 ? ' waiting' : '')
58
59        pack.setAttribute('class', packageClasses);
60        pack.innerHTML = "<div class='packageName'><span class='name'>" + package.name + "</span><span class='index'>" + (i+1) + "</span></div>"
61            + "<div class='packageDetails'>"
62                + "<div class='stats'>"
63                    + "<div class='details clearAfter'>"
64                        + "<span class='stars'>" + packageStats.stars + "/" + packageStats.allStars + "</span>"
65                        + "<span class='awards'>" + packageStats.awards + "/" + packageStats.levels + "</span>"
66                    + "</div>"
67                + "</div>"
68                + "<div class='locked'>" + translation('locked') + "</div>"
69            + "</div>";
70
71        ((index)=>{pack.click(() => packagesScreen.selectPackage(index))})(i);
72
73        return pack;
74    },
75
76    selectPackage: function (index) {
77        fireEvent(SOUND, {sound: CLICK_SOUND});
78
79        state.package.current = index;
80        screens.show('levels');
81    }
82}