Making Four-In-A-Row Using JavaScript - Part 5: Reorganisation

Intro

In the previous blog post, you checked for wins and draws in FourInARowGame.

Now you'll be reorganising the work you've done so far in preparation the the HTML5 Canvas front-end that you'll be creating for the game.

Creating The Game Logic Directory

First, create a new directory in the src directory called gameLogic.

Now move the src/constants directory and src/FourInARowGame.js to src/gameLogic.

Lastly, create a file under src/gameLogic called index.js with the following contents:

import FourInARowGame from "./FourInARowGame.js";
import * as Constants from "./constants/index.js";

export { Constants, FourInARowGame };

From now on the core game logic will be stored in and referenced from src/gameLogic. The outside of src/gameLogic will be for the front end.

Importing From The Game Logic Module

You're now exporting your core game logic as a module from src/gameLogic/index.js. You'll now need to fix outdated imports of the FourInARowGame class.

To do this, fix the import statement in src/index.js so that you import the FourInARowGame class from the game logic module:

import { FourInARowGame } from "./gameLogic/index.js";

window.fourInARowGame = new FourInARowGame();

If you test the code in your web browser's console, you should still be able to interact with window.fourInARowGame just like before.

If not, please make sure that you've followed the instructions in this post correctly!

Great! Now, you're ready to start working on the front end in the next post.

Thanks for reading!