Logo

Roger Clotet Solé

Hello, World!

I'm a dad and a software craftsman based in Girona
I build stuff for the web and distributed systems
I love learning, photography, videogames, and driving

Latest posts

Project Minesweeper Part 1: Introduction and Tech

The goal of this project was to learn some new technologies (new for me, of course) while completing a simple project from end to end.

I wanted to make something in real time to try out and learn Socket.IO, and a simple game with straightforward multiplayer interactions seemed like a good idea. I had different ideas, like using Phaser to create some new but simple game that could be played by any number of player, similar to Agar.io and its many clones.

That seemed a bit too much for the purpose of learning a real time communication library, so I ended up with a much simpler concept: a turn-based multiplayer minesweeper.

My inspiration was Minesweeper Flags, the minesweeper game some of us played many years ago in MSN Instant Games within MSN Messenger and Windows Live Messenger:

Minesweeper Flags in MSN Instant Games

In this game, players take turns revealing tiles on a board with the goal of finding as many mines as possible. The player that finds the most mines when all of them have been found wins. There is also the bomb, a power up that reveals a square of tiles at once, and it can be used once per game. When a player finds a mine, they can play again, allowing for fun streaks and comebacks.

The main difference between the old game and my implementation is that the new one allows for an arbitrary amount of players. You can set up a big board and play with a group of friends while talking in the game chat.

This is how it looks:

Screenshot

Tech breakdown

These are the technologies used in the full project:

Client Server Shared
Rendering: ReactJS Server: NodeJS Real-time communication: Socket.IO
Styling: TailwindCSS Database: MongoDB

From this table, the only thing I was familiar with was ReactJS, which would facilitate rendering the relevant information to the DOM, keeping a client state, and handling user events.

Socket.IO

Socket.IO was the more interesting and useful library I used. It has separate client and server libraries, with support for several languages, and you can actually combine any of the implementations.

For simplicity’s sake, and since I haven't used NodeJS to build a server before, I decided to go with Javascript in both client and server.

Here's a small example of client and server sending and handling messages:

// Client

// Sending a message to create a room with custom parameters to the server:
socket.emit('create_room', gameType.boardSize, gameType.mineCount)

// Listening and handling a message from the server:
socket.on('room_created', ({ id }) => {
  // Handle `room_created` from the server using the parameter `id`.
})
// Server

// Sending a message to the client connected to `socket`:
socket.emit('room_list', exportedRooms)

// Listening and handling a message from the client connected to `socket`:
socket.on('create_room', async ([boardSize, mineCount]) => {
  // Handle `create_room` using parameters `boardSize` and `mineCount` sent by client.
})

As you can see, messages are sent and received in a very similar way from the client and the server. There are some differences and details to take into account, like for broadcasting a message to a room:

// Server

// Add the user connected to `socket` to a room:
socket.join('room_' + state.currentRoomId)

// Send a message to a room:
io.to('room_' + room._id).emit('room', roomData)

If you want to learn more, you can see Socket.IO's excellent documentation here.

There is also a very good Get Started with some interesting small projects.

What's next

In the second part I'll go into a bit more detail about how some specific parts of the game were implemented.

In the meantime, you can play the game on https://minesweeper.clotet.dev and see the code on https://gitlab.com/rogerclotet/minesweeper.

See all posts in the blog

Work Experience

Resume

Typeform Logo
Typeform

Senior Software Engineer

March 2020 - November 2021

I worked in Typeform as a senior software engineer.

We helped brands and companies to create and customize interactive experiences for their communities, building forms, quizzes, and other engaging interactions.

I was involved mainly in the form and logic creator, using React in the frontend and Go in the backend.

TravelPerk Logo
TravelPerk

Senior Software Engineer

June 2019 - March 2020

I worked in TravelPerk as a full-stack senior software engineer.

Small multidisciplinary squads with rapid development cycles trying to improve and modernise business travel. Fast development cycles with continuous integration and deployment.

Used React in frontend and Python with Django and Tornado in backend. I was also involved in onboarding new people to the team.

I learned a lot and was enjoying working in TravelPerk and being part of a great team, left to improve work-life balance.

Social Point Logo
Social Point

Backend Engineer / Senior Backend Engineer

June 2012 - May 2019

I worked developing the server side of highly successful mobile games, with millions of daily active users. During 5 years in a 5 people team and for a year in a different project in a 2-person team.

Encountered many challenges, mostly related to concurrency and high availability. Used mostly PHP (with Symfony) and Go, but also many more technologies for specific problems, like Redis, SQS, DynamoDB, CloudWatch and ElasticSearch. Learned the importance of good design and maintainability -with games like Dragon City with 5+ years of active development- and test-driven development. Experience in maintaining old code, improving it and making it future-proof.

Personal projects

These are some of my personal projects. Most things I develop as side projects don't end up anywhere and only serve as learning experiences, which are very valuable, but these are the ones I think are worth sharing the most

Project Minesweeper - 2021

This is a multiplayer minesweeper game I built to learn about Socket.IO and NodeJS, inspired by Minesweeper Flags.

It uses real-time communication with server state persistence. It has a chat, editable user profiles, configurable web and desktop notifications, and a game list with board preview to manage multiple concurrent games.

On the technical side, I used ReactJS, the previously mentioned Socket.IO, MaterialUI, tailwindcss, and MongoDB.

You can read more about it in the blog: Project Minesweeper Part 1: Introduction and Tech

Source code

Project Minesweeper

Blocs! - 2020

A small puzzle game for mobile. The first game I published on the Google Play Store.

The gameplay is inspired by other puzzle games I tried before, but were full of ads and in-app purchases. I started learning game development some time before, took part in a game jam, and wanted to make a simple game to "test my skills", and this seemed like a good way of doing it.

It was made with Unity, art was created with Aseprite, and has local saves for high scores, last games and current game state, localization in Catalan, English, and Spanish, and different color schemes to choose from.

You can install and play the game for free on Android, or play now from mobile or desktop on https://blocs.clotet.dev.

Source code

Blocs!

Amic Invisible webapp - 2018

A webapp to manage Secret Santa groups with friends and family, built as a prototype with plans to rewrite it in a better way in the future.

It allows you to create groups, invite people using a link or using the share dialog in your phone, decide randomly who is each other's secret Santa, and share a "wish list" to help her or him get ideas for your gift.

Amic Invisible webapp

Ja Arribarem Club website - 2006

A website for a popular walk event I've built, iterated upon, and maintained since 2006.

It started as a static site to provide basic information of the current year's event, and since then I've rewritten it a couple of times to what it is today: s Symfony application with an administration zone to edit and add new contents every year and require minimal maintenance from my side.

Source code

Ja Arribarem Club website

That's it!

I'm always working in side projects and willing to collaborate.

Feel free to get in touch!