Nyan Cat or Giga Cat Epic Sport

Nyan Cat Sport

Nyan cat recreation is definitely a music rhythm primarily based recreation 🎶 I.e you begin with a good issue because the music in begin is respectable and it count on you to cross by it, after just a few tries a minimum of.
When you cross by the primary part of the sport, you will enter a Panic occasion part, the place it will get actual thrilling 🎸. Panic occasion can begin anytime above the rating of 50 pts.

Submission Class:

Wacky Wildcards

Screenshots 📷

Overview video 🎥

This is a brief video that explains the undertaking and the way it makes use of Redis:

The way it works 🤔

With regards to working of this recreation, it comes all the way down to an internet utility. Right here I’ve created a Subsequent app utilizing npx create-next-app. Metamask pockets deal with for person Authentication, this app makes use of Subsequent.js framework with Moralis SDK and Redis for querying & storing information into Redis cloud.
Right here recreation is rendered utilizing HTML5 canvas.

How the info is saved: 🤔

On this utility, I’ve one thing referred to as Redis-om for Node.js.
Right here information is saved within the type of JSON the place following schema is created

class Rating extends Entity {}

const schema = new Schema(
  Rating,
  {
    deal with: { sort: "string" },
    rating: { sort: "quantity", sortable: true, textSearch: true },
  },
  { dataStructure: "JSON" }
);

export const createScore = async (information) => {
  await join();

  const repository = shopper?.fetchRepository(schema, shopper);

  const rating = repository.createEntity();
  rating.rating = information.rating;
  rating.deal with = information.deal with;

  const id = await repository.save(rating);

  const ttlInSeconds = 21600;
  await repository.expire(id, ttlInSeconds);

  await shopper.shut();
  return id;
};

Discover I’ve additionally declared one thing as const ttlInSeconds = 21600; after which used it in await repository.expire(id, ttlInSeconds); as a result of we do not need to retailer any information longer than 6 hours. Sure, your scores will reset after 6 hours.
As soon as that is performed, we are able to create an API route in our Subsequent.js utility.

import { createScore } from "../../lib/redis";

export default async operate handler(req, res) {
  const id = await createScore(req.physique);
  res.standing(200).json({ id });
}

As soon as we create it in our database, it is going to be saved in our database by giving information from our frontend, I’ve used javascript’s fetch API for this function. You possibly can test this file, the place I’ve declared such logic.

How the info is accessed: 🤔

Now when you’ve gone by the applying, there’s a part of leaderboard, the place now we have scores and addresses of gamers with highest pts.
To entry our database after which fetch it from our Redis database, now we have couple of the way like…

In our improvement part, I’ve used Redis Perception, importing my database utilizing public endpoint & password.

However in our utility I’ve used .env.native file to retailer all API keys.
As soon as that’s performed, in our redis.js file we create a redis occasion additionally referred to as Consumer() like:

import { Consumer } from "redis-om";

const shopper = new Consumer();

const join = async () => {
  if (!shopper.isOpen()) {
    await shopper.open(course of.env.NEXT_PUBLIC_REDIS_URL);
  }
};

Now as soon as that is setup, we use fetch API to question for information.

  const fetchScores = async () => {
    const res = await fetch("/api/search?" + question);
    const outcomes = await res.json();
    return outcomes["scores"];
  };

To do that, we additionally must create an index utilizing await repository.createIndex(); after which we are able to create one other API path to name this.

import { createIndex } from "../../lib/redis";

export default async operate handler(req, res) {
  await createIndex();
  res.standing(200).ship("Index is created");
}

Then we use a customized operate searchScore() to get the info of top-3 gamers with highest scores, we used RediSearch for that function.

export const searchScore = async () => {
  await join();

  const repository = shopper.fetchRepository(schema, shopper);

  const offset = 0;
  const rely = 3;

  const scores = await repository
    .search()
    .sortDesc("rating")
    .return.web page(offset, rely);

  return scores;
};

This can get us the info we would like. And we are able to get that information utilizing API route as search.js

import { searchScore } from "../../lib/redis";

export default async operate handler(req, res) {
  const information = req.question;
  const question = Object.keys(information)[0];
  // console.log(question);

  const scores = await searchScore(question);
  res.standing(200).json({ scores });
}

You possibly can test this file, the place I’ve declared such logic.

Confer with Utilizing RediSearch.

Methods to run it domestically? 💻

Necessities 📝

1. Node.js – Anticipated model “>=14.17.0”. Should you want assist in putting in on Linux like me Try.
2. Yarn – 1.22.19 (I used).
3. Metamask put in on Browser – Obtain right here

You will want Metamask account to cross Authentication 📝

Comply with these steps to run in your machine after Cloning the repository and cd project-giga-cat to enter the foundation undertaking folder.

1. First issues first, use yarn set up to put in all of the dependencies.
2. In root listing of the repo, create a file .env.native and declare 3 env variables. However earlier than that go to Moralis.io & Redis and create a free account over each.
3. In Moralis dashboard, click on on Create new Dapp and choose the Surroundings Testnet and below testnets choose ETH Goerli testnet. Choose a area and provides a cute title, lastly proceed with it.
4. Now, create a subscription in your Redis Cloud after which create a database for your self. Be sure to save lots of their particulars.
5. In your .env.native, create 3 variables as:
   NEXT_PUBLIC_MORALIS_SERVER_URL
NEXT_PUBLIC_MORALIS_APP_ID
NEXT_PUBLIC_REDIS_URL
   and provides them their values.
6. For Moralis, go to settings of your Dapp, and replica the Dapp URL for SERVER_URL & Utility ID for APP_ID.
7. For Redis, go to your database and from Safety part copy the person password, and likewise take the public endpoint from Basic part. Now paste them within the .env.native file, formatted as NEXT_PUBLIC_REDIS_URL=redis://default:password@endpoint:port. Be aware: port ought to be appended on the final of your public endpoint.
8. Now run yarn run dev to run the applying.
9. Go to http://localhost:3000/ and you may see the Join Pockets web page.
10. Click on on Join pockets and for signing in, Metamask ought to’ve popped up. And you will enter the dashboard.

Should you’ve discover any issue on this, Verify my video! 🔥

Should you discover something uncommon strive refreshing the web page. If it does not fixes the conduct, please create a problem in Github 🙂

Deployment 🚀

Deployment is completed utilizing Vercel.

Caught? 🤔

Be at liberty to contact me by anyplace, LinkedIn, Gmail, or depart a create a Github problem.

MIT

Every Soundtracks fully belongs to the respective artist & I do not personal them in any respect.

Hope you favored the undertaking ❤️