DEV Community: NabajitS

Exploding Kittens Card Game - React, Nodejs and Redis (Part 2)

NabajitS — Tue, 09 May 2023 16:15:19 +0000

This is the second part of the series. In this part I'll be going over the backend implementation, the frontend code along with its implementation has been given in the first part, so you can check it out.

Prerequisites 🖥️

React (Basics)

Nodejs (Basics)

Typescript (Basics)

Also, having Redis-insight installed is recommended. You can get it here

For this project we are going to be using Redis Cloud, just go here and signup to create an account (you can also install and setup a Redis database locally).

I choose the free plan, where we get 30mb free storage, although it might feel less, but it's enough to get familiar with redis.

After you signup inside subscriptions click on your database name. It's configuration page will open up, you will get the database public endpoint, username and password from here. We will be using these values to connect our application as well as redis-insight to our cloud database.

Let's get started

First let us install the required dependencies for this project -

npm install express jsonwebtoken nodemon dotenv cors redis-om

You might be wondering, what is this redis-om?
What redis-om basically does is provide a level of abstraction so that we can work with data without worrying about how it is actually stored inside of Redis.
For example redis-om provides us the functionality of storing and retrieving data in json format, however under the hood redis actually stores data in the form of key-value pairs.

Here's the projects folder structure

-
├── src
│   ├── controllers
│   ├── middleware
│   ├── routes
│   ├── schema
│   └── redisClient.ts
├── server.ts
├── tsconfig.json
├── package.json
└── package-lock.json

We will initiate the server inside server.ts

//server.ts
import express from 'express';
import cors from 'cors';
import { authRouter } from './src/routes/userRoutes';

const app = express();
app.use(cors());

app.use(express.json());
const port = process.env.PORT ?? 5000;

app.listen(port, () => {
  console.log(`Server running on: http://localhost:${port}`);
});

app.use('/users', authRouter);

Then inside the userRoutes.ts file

import express from 'express';
import { createUser, updateScores, getHighScores, signInUser } from '../controllers/userController';
import { checkAuth } from '../middleware/checkAuth';

const authRouter = express.Router();

authRouter.post('/signup', createUser);
authRouter.post('/login', signInUser);

authRouter.use(checkAuth)

authRouter.get('/updatescore', updateScores);
authRouter.get('/highest', getHighScores);

export { authRouter }

We set up the various routes and their respective controllers. On /signup and /login we will call the createUser and signInUser controllers, which we will create later. We we will add checkAuth middleware which checks the user authentication and saves current user's validated token to browser's local storage so that it can be sent to the server on subsequent requests.

Now let's get to the Redis bit
First we will connect to our Redis cloud database from our app.
The connection string will have the following format

redis://<username>:<password>@<host:port or Public endpoint>

So inside redisClient.ts add the following code.

//redisClient.ts
import { Client } from 'redis-om';
import { config } from 'dotenv';
config()

const redisClient = new Client();

(async () => {
    await redisClient.open(`redis://${process.env.USER}:${process.env.PASS}@${process.env.URL}`)
})();
;

export { redisClient }

We import the Client class from redis-om and connect to the database by calling its open method, and then export the client.
Also, if the code block looks unfamiliar to you, then it's called IIFE and what it basically does is call the function as soon as it is defined. And as to why we need to use it, we use it to make typescript happy😅

Inside userSchema.ts add the following code.

//userSchema.ts
import { Entity, Schema } from "redis-om"

interface User {
    password: string,
    email: string,
    score: number
}

class User extends Entity { }

export const userSchema = new Schema(User, {
    password: { type: 'string' },
    email: { type: 'string' },
    score: {
        type: 'number', sortable: true
    }
}, {
    dataStructure: "JSON"
})

Our userSchema consists of an id, email, password and a score field. Ideally we would have a seperate schema(i.e objects) such as scoreSchema for score and a seperate schema for the user's email, password and id. Then add a createdBy field to scoreSchema to denote to which user that score belongs to.Then filter the information based on userID.
But here we going to everything in one single object.
We also add an extra property sortable to score, this basically helps us in getting the sorted results faster.

By default entities map to JSON documents using RedisJSON but we can still define their type by.

{
    dataStructure: "JSON"
}

There are other options too, such as HASH

Then let us create a .env file for storing the environment variables

PORT=
#If your using redis cloud, user should be default
USER=default
#URL is the public endpoint, which you can find on your database configuration page, along with the password
URL=
PASS=
# jwt secret, you can write any string here
SECRET=

Now, we will create the middleware checkAuth, which checks and verifies user authentication using jwt.

//checkAuth.ts
import jwt, { JwtPayload } from "jsonwebtoken"
import { Request, Response } from "express";

interface CustomRequest extends Request {
    currUserId?: any;
}

const checkAuth = async (req: CustomRequest, res: Response, next: () => void) => {
    const { authorization } = req.headers;

    if (!authorization) {
        return res.status(401).json({ error: "Authorization token not present" })
    }
    const token = authorization.split(' ')[1]

    try {
        const { id } = jwt.verify(token, process.env.SECRET as string) as JwtPayload

        req.currUserId = id  // add a new property to the req object to store current authenticated user's id.
        next();
    }
    catch (err) {
        res.status(401).json({ error: "Token not verified" })
    }
}

export { checkAuth }

We create CustomRequest interface because we are going to store the authenticated user's id(or entity Id) by adding a new property called currUserId on the req object so that the server can keep track of which user is making the requests.
This id is returned by the jwt.verify method after it verifies the token

Now lets create the controllers

//userControllers.ts
import { Request, Response } from 'express';
import { redisClient } from '../redisClient';
import { userSchema } from '../schema/userschema';
import jwt from "jsonwebtoken"

const userRepository = redisClient.fetchRepository(userSchema);
(async () => {
    await userRepository.createIndex();
})();

const createToken = (id: string) => {
    const token = jwt.sign({ id: id }, "amanandacateatfoodtogether", { expiresIn: '3d' });
    return token;
}

interface CustomRequest extends Request {
    currUserId?: any;
}

const createUser = async (req: CustomRequest, res: Response) => {
    try {
        const { email, password } = req.body

        let user = userRepository.createEntity({
            password: password,
            email: email,
            score: 0,
        })
        const id = await userRepository.save(user)
        const token = createToken(id)

        res.status(200).json({
            email: email,
            token: token
        })
    }
    catch (err: any) {
        res.status(401).json({ err: err.message })
    }
}

const signInUser = async (req: CustomRequest, res: Response) => {
    try {
        const { email, password } = req.body

        const userSearch: any = await userRepository.search() 
           .where('email').eq(email).where('password')
            .eq(password).return.first()

        if (!userSearch) {
            return res.status(401).json({
                msg: "invalid email or password"
            })
        }
        const token = createToken(userSearch?.entityId)

        res.status(200).json({
            email: userSearch.email,
            token: token
        })
    }
    catch (err: any) {
        res.status(401).json({ err: err.message })
    }
}

const updateScores= async (req: CustomRequest, res: Response) => {
    const user = await userRepository.fetch(req.currUserId);
    user.score = user.score + 1;
    await userRepository.save(user);

    res.send(user)
}

const getHighScores = async (req: CustomRequest, res: Response) => {
    const users = await userRepository.search()
        .sortDescending('score')
        .return.page(0, 10);  //page(offset, count) i.e start from 0 and go till 2 i.e returns 2 user highscores

    res.send(users);
}

export { createUser, updateScores, signInUser, getHighScores, userRepository }

First we create a repository called userRepository because inorder to work with entitites i.e to create, read entities we need access to that repository. Then inside the IIFE we create an Index on the repository, to get search functionality on a repository we first need to create an index on it.
Inside creatUser the createEntity method creates an entity but remember it doesn't save it to Redis, we do that by calling save. This will return the entityId of the recently created entity(or object), which we then send to the createToken function to create a jwt token.
The updateScores function is called when a user wins a game and all it does is update the user's score in the database with 1.
The other controllers are quite simple.

With this we are done.
You can the source code for the whole project here

Exploding Kittens Card Game - React, Nodejs and Redis

NabajitS — Mon, 08 May 2023 16:08:04 +0000

Introduction

If your familiar with Redis you might know it is primarily used as a caching database along with a few other use cases.

What this basically means is that, a Redis database acts as a high-speed data store that sits between the client and the main database, providing fast data retrieval compared to other primary databases such as MySQL, MongoDB, etc. This makes getting query results very fast.

Enough about what it is, you can read up more about Redis from their docs.

What this article covers

What this tutorial is about is How to build a Card game using React and Redux Toolkit on the frontend, Nodejs on the backend and Redis as the primary database.
Now, you might be thinking why use Redis as a primary database, and for that question my friend I only have one answer.

On a more serious note, Redis provides many modules such as RedisSearch, RedisJson etc which allows us to extend the core Redis functionality, thus allowing us to use it more like a primary database.

This article is part 1 of a two part series, in this part I'll go over the frontend implementation of the game. So if you are only concerned about the backend implementation you can visit just the second blog.

Prerequisites 🖥️

React (Basics)

Nodejs (Basics)

Typescript (Basics)

Let's get started

If your familiar with game "Exploding Kittens😼💣" that's great, but my version of the game is different. So, even if you're not familiar with the game it doesn't matter. Here's how my version works.

This will be an online single-player card game that consists of 4 different types of cards

Cat card 😼
Defuse card 🙅‍♂️
Shuffle card 🔀
Exploding kitten card 💣

There will be a button to start the game. When the game is started there will be a deck of 5 cards ordered randomly. Each time user clicks on the deck a card is revealed and that card is removed from the deck. A player wins the game once he draws all 5 cards from the deck and there is no card left to draw.

Rules

If the card drawn from the deck is a cat card, then the card is removed from the deck.
If the card is exploding kitten (bomb) then the player loses the game.
If the card is a defusing card, then the card is removed from the deck. This card can be used to defuse one bomb that may come in subsequent cards drawn from the deck.
If the card is a shuffle card, then the game is restarted and the deck is filled with 5 cards again.

What our game offers

Our game will allow a player to draw a random card from the deck once the game is started.
Allow users to create a username to enter the game and create a leaderboard to record how many games they won.
We will use Redis as a database to store the points of all the users and NodeJs using typescript for the backend. One game won is equal to one point.

This is part 1 of a 2 part series, this article will cover the frontend implementation of the game and the second part will cover the backend implementation using Redis as the primary database.

Here's the projects folder structure

-
├── src
│   ├── components
|   │   ├── Navbar.jsx
|   |   ├── Login.jsx
|   |   ├── Signup.jsx
|   |   ├── Highscore.jsx
|   │   └── componentStyle.css
|   ├── redux
|        └──slices
|           └── userSlice.js
|   ├── App.jsx
|   ├── Board.jsx
|   ├── Board.css
│   └── main.jsx
├── package.json
└── package-lock.json

The project is setup using vite
After initial setup run

npm run dev

to start the frontend

Before we begin I just want to state that there's a lot of room for optimization and removal of redundant code, I just wanted to get through the frontend as soon as possible.

Let's Begin
So our main game logic lies inside Board.jsx

function Board() {
const [deck, setDeck] = useState([])

const initializeDeck = () => {

const cards = [
 { cardName: 'Cat card', cardTitle: 'first title' },
 { cardName: 'Defuse card', cardTitle: 'second title' },
 { cardName: 'Shuffle card', cardTitle: 'third title' },
 { cardName: 'Exploding kitten card', cardTitle: 'forth title' }
]
const tempDeck = [];

const getRandomInt = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

for (let i = 0; i < 5; i++) {
   tempDeck.push(cards[getRandomInt(0, cards.length - 1)]);
}    
 return tempDeck;
}

useEffect(() => {
        const tempDeck = initializeDeck();
        setDeck(tempDeck);
}, [])

return (
  <div>
   Board
  <div>
 )
}

export default Board

We create a state variable deck, which will hold the 5 cards for the game. And we create the initializeDeck function which will fill the deck with 5 random cards when the game starts. We extract it out into a function because we will need to reuse it multiple times.
We then call the initializeDeck function inside useEffect and set the deck on initial render.

const [diffuseCardCount, setDiffuseCardCount] = useState(0)
const [currentCard, setCurrentCard] = useState(null)
const [cardIsShowing, setCardIsShowing] = useState(false);
const [gameOver, setGameOver] = useState(false);
const [gameWon, setGameWon] = useState(false);

const handleCardShow = () => {
 const tempDeck = [...deck];
 const currCard = tempDeck[tempDeck.length-1];
 setCurrentCard(currCard)
 setCardIsShowing(true)
 setTimeout(() => {
   if(tempDeck.length == 1 && currCard.cardName != "Shuffle card" 
 && currCard.cardName != "Exploding kitten card"){
    setGameWon(true)
    dispatch(updateScore())
 }
 if(currCard.cardName == "Cat card"){
   //remove card from deck
   tempDeck.pop();
   setDeck(tempDeck);
 }
 else if(currCard.cardName == "Defuse card"){
 setDiffuseCardCount(prev => prev + 1)
 tempDeck.pop();
 setDeck(tempDeck);
 }
 else if(currCard.cardName == "Shuffle card"){
 restartGame() //Restart Game 
}
 else if(currCard.cardName == "Exploding kitten card"){ //exploding kitten card
  if(diffuseCardCount > 0 ){ //if player has any diffuse cards
   setExplodeAction(true);   //Game over
  }
  else{
   setGameOver(true)
 }
}
 setCurrentCard(null); //set currentCard to null after 2.5 secs
 setCardIsShowing(false)
 }, 2500)

}

<div className='board' >
   <div className="container">
     <div className='card-cont' >
      {
       deck && deck.map((card, ind) => (
        <div key={ind} className={`card card-${ind+1}`}>card {ind} 
        </div>
     ))
      }
    </div>

    {currentCard && ( 
              <div className='card active-card'> 
                    {  currentCard.cardName  }
              </div>
      )}

     { !cardIsShowing && <button className='show-btn' onClick= 
        {handleCardShow} >show card</button>
     }  

            <h2>Diffuse Cards Available - {diffuseCardCount}</h2>
        </div>
</div>

Then we introduce 5 more state variables diffuseCardCount to keep track of total diffuse cards drawn ingame(in order to counter the exploding kitten card). And the other 4 are what their names suggest.
Inside the component we map over the deck to display the 5 cards, display the current card on show card button press by running the handleCardShow function. We display the card for 2.5 secs before any action takes place.

const restartGame = () => {
    const tempDeck = initializeDeck();
    setDeck(tempDeck);
    setDiffuseCardCount(0);
    dispatch(fetchHighscore())
    setGameOver(false)
    setGameWon(false)
}

return (
<>
 <Navbar/>
 {
   gameWon ? (
     <div>
       <h1>You Won</h1>
       <button onClick={ restartGame } >Restart</button>
      </div>
        ) : (
    gameOver ? (
       <div>
       <h1>Game Over</h1>
         <button onClick={ restartGame } >Restart</button>
       </div>
        ) : (
   <div className='board' >

    <div className="container">
       (...._Same code as before_)
     </div>

    <Highscore highscore={highscore} />
   </div>
        )
      )
    }
</>

Then, if user wins set gameWon to true and if user losses set gameOver to true and display their respective div's. On click restart button the restartGame function gets called thus reinitializing the deck and resetting all state variables to initial condition.
The Highscore component gets the top 10 user high scores from the Redis database and displays it on the screen.

I won't go over the Redux code you can view it from the repo which I'll link below as it contains a very basic code, there was no need to use Redux for this project. I was just playing around and felt like using Redux.

Here's the link to the codebase - code