DEV Community

Cover image for I made a realtime 1v1 game with Next.js & Tailwind CSS, learn how
Nico Andrade
Nico Andrade

Posted on

I made a realtime 1v1 game with Next.js & Tailwind CSS, learn how

Everyone knows about Wordle the game where you have to guess a 5 letter word and you only have 6 attempts.

So I thought that will be a good idea to make a version where you can play against another player to see who can guess the word first.
And that you can see in realtime the guesses from your opponent.

I called it WarWordly and it was product of the day in Product Hunt

Rules of the game

The rules of the game are simple enough, you start with a valid word and each letter receives a color acording to this rules:

  • โฌœ๏ธ Gray: the letter is incorrect
  • ๐ŸŸง Orange: the letter is correct but in the wrong position
  • ๐ŸŸฉ Green: the letter is correct and is in the correct position

Guessing the word

Make Wordle a 1v1 game

The idea for this game is that we can compete with another player, and for that we have to see how our opponent is doing, like this:

Playing against opponent

So on the left is our guesses and on the right is our opponent.

Making it realtime

The main technology used was:

These tools make it so easy right know to start with an idea and make it real so anyone can use it, and why not, make your little game Product of the Day on Product Hunt.

The entire game is Open Source and you can see the project on GitHub.

We are going to focus on the realtime feature in this post.

Let's code

On Supabase you can create any kind of PostgreSQL database, but they have a really cool feature where you can create subscription to any table with their javascript client.

Just install their client on your project

npm install @supabase/supabase-js
Enter fullscreen mode Exit fullscreen mode

Then import the client into your page

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
Enter fullscreen mode Exit fullscreen mode

You can grab your SUPABASE_URL and SUPABASE_ANON_KEY from your Supabase account.

Now we are going to create a React Hook to subscribe to our table from our database.

import { useEffect } from "react";

useEffect(() => {
    if (!battleId) return;

    // Subscribe to the Battle
    const battleSubscription = supabase
        .from(`battles:id=eq.${battleId}`)
        .on("UPDATE", (payload) => {
            // Updates all the data from the Battle to SWR
            battleMutate(payload.new);
        })
        .subscribe();

    // Cleanup on unmount
    return () => {
        battleSubscription.unsubscribe();
    };
}, [battleId]);
Enter fullscreen mode Exit fullscreen mode

This code is where the magic happens, so let's take a closer look ๐Ÿ‘‡.

First we import useEffect from React.
Then we create our hook, which is this one:

useEffect(() => {
   // code...
}, [battleId]);
Enter fullscreen mode Exit fullscreen mode

We use battleId as a dependency for the Hook, this is a variable with our Battle ID, since we need the ID to find the battle on our database.

After that all we have to do is use the Supabase JS client to create a new subscription to our database:

// Subscribe to the Battle
const battleSubscription = supabase
    .from(`battles:id=eq.${battleId}`)
    .on("UPDATE", (payload) => {
        // Updates all the data from the Battle to SWR
        battleMutate(payload.new);
    })
    .subscribe();
Enter fullscreen mode Exit fullscreen mode

This code sends us a JS object everytime someone makes an UPDATE on our database.

This is how we keep track of the guesses from our opponent.

Then we can update the state of the battle using the awesome SWR and its mutate function

// Updates all the data from the Battle to SWR
battleMutate(payload.new);
Enter fullscreen mode Exit fullscreen mode

And that's it.

This is the code that lets the game be in realtime and see who player guess the word first.

You can see this code on the repo on GitHub.

Ending

I hope that this short post helps you learn how to make an easy realtime feature on your app with just a few lines of code.

๐ŸŽฎ You can play the game here
๐Ÿ›  View the entire project on GitHub
๐Ÿ™‹โ€โ™‚๏ธ Say hi on Twitter

Top comments (0)