A little game to demonstrate how XState can be used front-end with a back-end framework such as Laravel, Ruby on Rails or AdonisJS, that renders plain HTML pages, and where JavaScript is only used to enhance them.

The green square needs to be moved to the red square to win the game. There are four buttons, to move the green square up, right, down and left.

When a game is won, another one can be started. The score is incremented.

See XState machine →

See machine interpreting and petite-vue setup →

See template page →

AdonisJS renders server-side a plain HTML page thanks to its template engine.

The logic of the game is driven by a XState machine.

petite-vue is used to add reactivity to the plain HTML page. We interpret the machine and we create a reactive object that contains the current state of the machine and a function to send events to it. This reactive object is attached to the petite-vue instance and can be used everywhere in the page.

The board is built server-side by AdonisJS, but styles for green and red squares are added client-side, according to values of the context of the machine.

Buttons are constructed server-side too, and in the expression for the @click attribute, executed when the button is clicked, we send an event to the machine, whose name is the label of the button, known server-side.

When the game is finished, a modal is displayed to ask if another game should be started. The modal is displayed when the current state is Won game. The game is restarted when the button on the modal is clicked.

Follow those steps to launch the application on your computer:

1. Clone the repository
2. Install dependencies: npm install
3. Create .env file at the root from the content of .env.example
4. Launch AdonisJS development server: npm run dev
5. Visit development server at localhost:3333

I thank all the contributors of the awesome tools I used for this project:

• XState
• AdonisJS
• petite-vue
• Tailwind CSS
• Tailwind UI
• Clever Cloud (for deployment)