Dynamic readme: Tic-tac-toe

It was a very boring saturday...

Premise

Usually, you are used to see a readme file as something static (actually, they are thought to be static). You can add a bit of dynamic information with badges, but nothing that you can interact with.

Action

So, as I sad, the saturday morning was very boring, so I decided to challenge myself with something new, and the idea I had was to try to create interactive readme. My first thought was about a minesweeper game, but it was to much to make in a morning, so I decided for something easier: tic-tac-toe.

Development

Obviously, it requires a bit of tricks in order to work.

Initial failure

My original idea was to use a single svg image with links around different shapes. Each link will call a server with X and Y, server will update the game state, and new image will be served the next time. This idea failed instantly: github wrapps hole image inside a link to open it, so you cannot use internal links.

Second idea

At this point I started thinking on how to workaround this behaviour. Actually it was very easy: instead of having only one image, I will display a table, where each cell is a game cell with link inside of it. And it worked!

How it works

The whole project consists of 3 parts:

• Readme
• Server
• Database

Readme

This one is very simple: 3x3 table with a footer row for some additional functionalities (restart, whose turn). Each cell contains a link that wraps around the image:

<td>
    <a href="url_to_php?x=1&y=1&action=move">
        <img src="url_to_php?x=1&y=1&action=view">
    </a>
</td>

Both image and link are pointing to the same file, but they have different action:

• if action is move, it will update the game state and reload the page.
• if action is view, it will fetch the image with value saved for X and Y position.

Server

This is where the business is done. It runs php (I don't know which version).

Once it receives request, it will update the database with new data or serve the image based on a value saved in DB for X and Y.

Database

Nothing special here. Database is MySQL. It has two tables:

• board: saves board;
• game: saves game information (next turn, was board generated, etc...);

Last words

If you want to give it a shot, you can find it here: https://github.com/OleksandrDemian/readme-tic-tac-toe