app/scripts/core/gameCoordinator.js
/**
   * Load all assets into a hidden Div to pre-load them into memory.
   * There is probably a better way to read all of these file names.
   */
Load all assets into a hidden Div to pre-load them into memory.
There is probably a better way to read all of these file names.
Load all assets into a hidden Div to pre - load them into memory . There is probably a better way to read all of these file names .
preloadAssets() {
    return new Promise((resolve) => {
      const loadingContainer = document.getElementById('loading-container');
      const loadingPacman = document.getElementById('loading-pacman');
      const loadingDotMask = document.getElementById('loading-dot-mask');
      const imgSources = [
        arrowDown, 
        arrowDown, 
        arrowLeft, 
        arrowRight, 
        arrowUp, 
        pacmanDeath, 
        pacmanError, 
        pacmanDown, 
        pacmanLeft, 
        pacmanRight, 
        pacmanUp, 
        blinkyDownAngry, 
        blinkyDownAnnoyed, 
        blinkyDown, 
        blinkyLeftAngry, 
        blinkyLeftAnnoyed, 
        blinkyLeft, 
        blinkyRightAngry, 
        blinkyRightAnnoyed, 
        blinkyRight, 
        blinkyUpAngry, 
        blinkyUpAnnoyed, 
        blinkyUp, 
        clydeDown, 
        clydeLeft, 
        clydeRight, 
        clydeUp, 
        inkyDown, 
        inkyLeft, 
        inkyRight, 
        inkyUp, 
        pinkyDown, 
        pinkyLeft, 
        pinkyRight, 
        pinkyUp, 
        eyesDown, 
        eyesLeft, 
        eyesRight, 
        eyesUp, 
        scaredBlue, 
        scaredWhite, 
        pacdot, 
        powerPellet, 
        maze, 
      ];
      const totalSources = imgSources.length;
      this.remainingSources = totalSources;
      loadingPacman.style.left = '0';
      loadingDotMask.style.width = '0';
      Promise.all([
        this.createElements(imgSources, 'img', totalSources, this),
      ])
        .then(() => {
          loadingContainer.style.opacity = 0;
          resolve();
          setTimeout(() => {
            loadingContainer.remove();
            this.mainMenu.style.opacity = 1;
            this.mainMenu.style.visibility = 'visible';
          }, 1500);
        })
        .catch(this.displayErrorMessage);
    });
  }
preloadAssets ( ) { return new Promise ( ( resolve ) => { const loadingContainer = document . getElementById ( 'loading-container' ) ; const loadingPacman = document . getElementById ( 'loading-pacman' ) ; const loadingDotMask = document . getElementById ( 'loading-dot-mask' ) ; const imgSources = [ arrowDown , arrowDown , arrowLeft , arrowRight , arrowUp , pacmanDeath , pacmanError , pacmanDown , pacmanLeft , pacmanRight , pacmanUp , blinkyDownAngry , blinkyDownAnnoyed , blinkyDown , blinkyLeftAngry , blinkyLeftAnnoyed , blinkyLeft , blinkyRightAngry , blinkyRightAnnoyed , blinkyRight , blinkyUpAngry , blinkyUpAnnoyed , blinkyUp , clydeDown , clydeLeft , clydeRight , clydeUp , inkyDown , inkyLeft , inkyRight , inkyUp , pinkyDown , pinkyLeft , pinkyRight , pinkyUp , eyesDown , eyesLeft , eyesRight , eyesUp , scaredBlue , scaredWhite , pacdot , powerPellet , maze , ] ; const totalSources = imgSources . length ; this . remainingSources = totalSources ; loadingPacman . style . left = '0' ; loadingDotMask . style . width = '0' ; Promise . all ( [ this . createElements ( imgSources , 'img' , totalSources , this ) , ] ) . then ( ( ) => { loadingContainer . style . opacity = 0 ; resolve ( ) ; setTimeout ( ( ) => { loadingContainer . remove ( ) ; this . mainMenu . style . opacity = 1 ; this . mainMenu . style . visibility = 'visible' ; } , 1500 ) ; } ) . catch ( this . displayErrorMessage ) ; } ) ; }
Load all assets into a hidden Div to pre-load them into memory.
Load all assets into a hidden Div to pre - load them into memory .
// Pacman // `${imgBase}characters/pacman/arrow_down.svg`, // './../../style/graphics/spriteSheets/characters/pacman/arrow_down.svg'; // './../../style/graphics/spriteSheets/characters/pacman/arrow_left.svg'; // './../../style/graphics/spriteSheets/characters/pacman/arrow_right.svg'; // './../../style/graphics/spriteSheets/characters/pacman/arrow_up.svg'; // './../../style/graphics/spriteSheets/characters/pacman/pacman_death.svg'; // './../../style/graphics/spriteSheets/characters/pacman/pacman_error.svg'; // './../../style/graphics/spriteSheets/characters/pacman/pacman_down.svg'; // './../../style/graphics/spriteSheets/characters/pacman/pacman_left.svg'; // './../../style/graphics/spriteSheets/characters/pacman/pacman_right.svg'; // './../../style/graphics/spriteSheets/characters/pacman/pacman_up.svg'; // Blinky // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_down_angry.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_down_annoyed.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_down.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_left_angry.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_left_annoyed.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_left.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_right_angry.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_right_annoyed.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_right.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_up_angry.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_up_annoyed.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/blinky/blinky_up.svg'; // Clyde // './../../style/graphics/spriteSheets/characters/ghosts/clyde/clyde_down.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/clyde/clyde_left.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/clyde/clyde_right.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/clyde/clyde_up.svg'; // Inky // './../../style/graphics/spriteSheets/characters/ghosts/inky/inky_down.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/inky/inky_left.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/inky/inky_right.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/inky/inky_up.svg'; // Pinky // './../../style/graphics/spriteSheets/characters/ghosts/pinky/pinky_down.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/pinky/pinky_left.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/pinky/pinky_right.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/pinky/inky_up.svg'; // Ghosts Common // './../../style/graphics/spriteSheets/characters/ghosts/eyes_down.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/eyes_left.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/eyes_right.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/eyes_up.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/scared_blue.svg'; // './../../style/graphics/spriteSheets/characters/ghosts/scared_white.svg'; // Dots // './../style/graphics/pickups/pacdot.svg'; // './../style/graphics/pickups/powerPellet.svg'; // Maze // `${imgBase}maze/maze_blue.svg`,