Load images by folder

[themakshter]

In preloadState.js, we are loading each image INDIVIDUALLY, which is unreasonable and unsustainable. It is better to maybe just add a folder and have a function to load all the images from that folder.

[am2367]

@themakshter I can take a look at this

[themakshter]

That sounds good @am2367 , I will look forward to your pull request!

[am2367]

@themakshter I installed a node package but can't seem to require it in preloadState.js. Every time I build I get an error telling me it can't resolve the module. Any idea why this might be?

[themakshter]

I'm not quite sure. When and how does this happen? And what package are you installing?

[am2367]

@themakshter The package is fs https://www.npmjs.com/package/fs . I added it to the dependencies and it installed. I can also find it in node_modules. But when I request the package inside the preloadState.js module, it is not found. Maybe something needs to be done in webpack?

[themakshter]

Looking at that link, it doesn't seem to have anything in it:

fs is a built in module for Node so for a front-end package, which would be running on browsers and hence won't have the same environment as offered in Node, you might want to try using a separate library. I think browserfs (link) is one, but you can look around

[am2367]

I think you're right. I should have installed this package. file-system . Will take a look later tonight and update you.

|

file-system

Strengthen the ability of file system |

|

|

On Thursday, October 11, 2018, 9:53:27 AM EDT, Mohammad Ali Khan <notifications@github.com> wrote:  

Looking at that link, it doesn't seem to have anything in it:

fs is a built in module for Node so for a front-end package, which would be running on browsers and hence won't have the same environment as offered in Node, you might want to try using a separate library. I think browserfs (link) is one, but you can look around

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[themakshter]

Take a look at a few of the packages and see which one has the most stars/downloads so we can get the most stable/best package. I think browserfs has more stars than file-system

[am2367]

@themakshter I just spent an hour trying to figure it out and I can't. I still get the fs error even with the other libraries. It has something to with webpack and there are a gazillion threads on it, but none of the fixes work.

[themakshter]

Don't worry about it @am2367 . I read up a bit more on it and realised that we cannot really figure out how many files are in a particular folder as we would just make a request to get a particular value on a file path. We won't really be able to have access to a particular folder to do as we want to on a front end library. I do not think this is possible without us actually know all the names of the files.

At the very least, for this enhancement, we can move each of these images into an array and call this.game.load(filesName, 'assets/round-the-world/flags/filename.png') on them in a loop

[am2367]

@themakshter What I had in mind was the following using the file-system package.

fs.recurseSync('assets/round-the-world/flags/', function(filepath, relative, filename) { let splitName = filename.split("/"); let imageName = splitName[3]; let name = imageName.split(".")[0]; this.game.load.image(name, filename); });

[themakshter]

I'd imagine that would work if you were doing it on the backend, but in our case, our library would be running on the front end, where it would not have this sort of access.

[am2367]

I was wondering if we could somehow load the files into an array using webpack and then access that array in the program.

[themakshter]

The way I am planning on using this library, i do not think it would work for now. That might be something we might look at in the future, but not immediately.

[DonNicoJs]

@themakshter actually i think this is doable, doing a quick attempt now if you don't mind

[DonNicoJs]

@themakshter PR ready :) let me know if this satisfy your needs

[am2367]

@lordfuoco Very nice! I was thinking something like this would be possible but I am not great with webpack haha.

[themakshter]

Closed by #26