1. Home/
  2. Portfolio/
  3. Table Tennis Rumble

Table Tennis Rumble

My fun take on playing table tennisView Website
Table Tennis Rumble on various devices

The Project

Some time ago I had an idea of a table tennis scoreboard which can be controlled by voice commands. While it is possible, the Web Speech API was not able to understand commands most times.

I have come back to this idea based on a video game called Rocket League. There is a mode called Rumble where every 30 seconds, the player's car is enhanced with a random special ability.

This got me thinking, I can do something similar with table tennis by applying a modifier every single point. But instead of enhancing, the modifiers are wacky and fun. e.g., play with two bats.

Weapons of choice

  • Nuxt 3
  • Tailwind CSS
  • Pinia
  • Vercel

The modifiers

After each point, the user's modifier will update at random. Some of the modifiers are:

  • Two bats
  • Bounce the ball over the net
  • Backhands only
  • Forehands only

Virtual Umpire

Going back to the Web Speech API, I thought why not apply Speech Synthesis to my application. The following actions have been accounted for:

  • Score update
  • Change serve
  • Match point
  • Game won
  • Game reset

Nuxt

My previous project involved using Nuxt.

My experience this time was good..... up until deploy time.

Previewing the app locally showed some cool errors. My pages were mixing up with each other.

The index and game page elements mixed together.
The index and game page elements mixed together.

In the end, I deduced that it was an issue with the local build complier as deploying to Vercel looks as intended.

Conclusion

It is great to have a tool that I can use during my table tennis games. I do not think I will be forgetting the score now with the virtual umpire tracking everything. Should be interesting to try this with family and friends.

Learnt a lot about the Speech Synthesis and how I can apply it to my projects.