early-learning-lab

The Tākaro i tētahi kēmu (Play a game) is a website designed to host a number of learning games for early childhood research

MacOS or Linux are recommended for development; consider using WSL if you only have Windows available

Pre requisite tools

1. Git
2. Node. I recommend installing using NVM and then following these instructions to fix the Husky Git Hooks

Developing the Landing page for all games

This site is built using Jekyll and hosted using Github Pages.

Local development requires Ruby

From the docs directory (the root of any github pages site);

1. Run bundle install to install the Ruby dependencies
2. Run bundle exec jekyll serve to run the site locally on localhost
3. Make changes to the files, commit, push, and confirm the changes on the live site

Developing an individual Game

Games are built using Phaser using TypeScript.

Each game can (and should) be developed independently, without running the site landing page.

This repository is setup as a monorepo, a single repository containing multiple distinct projects with the ability to share code between.

Pre-requisite tools;

2. Run corepack enable to ensure that yarn is available
3. Run yarn install to resolve dependencies

Modifying an existing game

In the game directory, e.g. games/apple-catcher

1. Run the game using yarn dev
2. Make changes to the game code under src
3. Verify the changes work locally and as they will be deployed using the developing the Site instructions

Adding a new game

1. Duplicate the games/template directory, with a new name, and
   1. Change the name in package.json to match the directory name.
   2. Change the final path segment in the outDir in /vite/config.prod.mjs to match the directory name.
   3. Change the title in index.html to the game name.
2. Create a new file <game-name>.md in the _games directory , with the following content

---
heading: <the game name or title e.g A>
subheading: <the game name or title e.g Apple Catcher>
colour: <a CSS colour name for the game icon, from https://developer.mozilla.org/en-US/docs/Web/CSS/named-color, e.g orange>
ref: <the folder name for the game e.g apple-catcher>
---

3. Develop and test as per modifying an existing game

Deploying changes

Every commit to the main branch will publish the site to the URL shown in the settings, using the Github Actions workflows.

The build process will build each game and copy the built output to the docs/games/<game name> directory.