Decluttering

 Currently, the chemistry lab game has a lot of clutter. Every file in the project is included on the index.html page, and it's not very modular. As the project gets larger, I will have to include more and more files all on the same page. This is not ideal.

While searching for a game library that I could use to simplify the process of creating this game, I came across requirejs. It appears to be similar to NodeJS's require function. With requirejs, I can take all the imports I have at the top of my index.html file, and convert them into one line. Then individual include each file that I need in the files that I need them in.

The first thing that I needed to do was add the following line of code to the index.html file.

	<script data-main="js/app" src="lib/require.js"></script>

The value of the data-main attribute is the location of the file that the scripts will start executing in.

Somewhere in the file you setup with data-main, you will need to call requirejs's config function. The config function is where you can setup your base URL, and aliases to paths in your project.

	// lib is the name of the directory where you will
    // keep files like jquery, and requirejs itself.
    // Paths are paths to directories that you would like to include 
    requirejs.config({
        baseUrl: 'lib',
        paths: {
            app: '../js/classes'
        }
    });

The key 'app' is an alias to the path ../js/classes in the code above, so you can replace app wherever you want to use the path "../js/classes" in requirejs code.

Then whenever you want to load a file you go like this:

	requirejs(["app/main"])

app/main is the path to the file you want to load.

If you want to define a module you go like this:

	define(["dependency1", "dependency2", "..."], function(dependency1, dependency2 ...) {
    	// module code 
        
        // return an object you can use when importing this module 
        return {}
        	
    })

The list of dependencies are other files with define in them.

Updates on Chemistry Lab

 I stopped working on the chemistry lab game for a couple years. Now I'm back working on it, and I've made a few updates.

• I revamped the snapping system, so it's easier to add new snappable objects to the game.
• There is now a class called snappable that all objects that have snapping behaviour will inherit from.
• Fluid now flows through the pipes correctly, so there is no fluid filling up two connecting tanks when there wasn't enough fluid produced in the first place.
• I updated the fluid system as well, so it is more object-oriented instead of having one big function in the world-class.
• All the classes have been rewritten, so they use the ES6 way of declaring classes. In my opinion, this is a cleaner syntax, and something I'm more familiar with as I used to code in languages like Java, C++, and Scala.

More updates to come.

Liquid Drops Dispersing into the Tank

Here is what it will look like when liquid drops disperse in the tank. 

Fluid Dynamics V1

Here is how liquids flow through pipes. 

I've hosted the game, so you can test it out directly: Chemistry Lab

Connecting Pipes to Tank Final Trial

Unfortunately, my second attempt did not fix the problem, so I went back to the beginning again. I constructed a solution using a similar method to the first with a few tweaks. It works great! Here is what it looks like:

Connecting Pipes to Tanks Second Trial

My first attempt did not work quite as I wanted. The pipe would quickly go from one side of the tank to the other. I came up with the following solution:

Pipe Basics