DEV Community

Cover image for Dynamic readme: Tic-tac-toe
Oleksandr Demian
Oleksandr Demian

Posted on

Dynamic readme: Tic-tac-toe

It was a very boring saturday...

Alt Text


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.


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.


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


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:

    <a href="url_to_php?x=1&y=1&action=move">
        <img src="url_to_php?x=1&y=1&action=view">
Enter fullscreen mode Exit fullscreen mode

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.


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.


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:

Top comments (1)

isaachagoel profile image
Isaac Hagoel

Really cool :)