Are you ready to fulfill your destiny and become the greatest trivia fighter of all time?
The adventure you seek is back!
Trivia Fighter Turbo is a browser-based trivia game. Players try to maximize their score by answering a upto 20 questions right, before the timer runs out. If a player can get a top score, they are prompted to add their name into the leaderboard.
Computer games have become an integral part of our daily lives now. From big platform productions like God of War to addictive smartphone essentials like Farmville, there are millions of cool games to choose from. Unfortunately, I feel like it is still hard to find titles that can replicate the excitement and the amusement retro arcade games.
I was looking for ideas to practise my JAMStack skills. That is why I decided to revitilize an old project where I tried paying homage to "the good old days" by creating a SMS-based arcade-style trivia game.
Developed in part due to the Udemy Programming Challenge
- Get Questions from Open Trivia DB
- Round Timer
- Calculate Score
- Insert Score to Leaderboard DB
- Get Leaderboard from DB
- Display DB
The game is developed using Gatsby which is a PWA generator that uses React and Webpack. The static files generated by Gatsby are hosted by Netlify. The goal is to leverage the advantages of JAMStack like faster page load times and wide-browser support to present a better performance to players.
- index.js => A static landing page
- play.js => Where the magic happens
- leaderboard.js => Players can view the list of highest ranked players here
- 404.js => 404 Error Page with a Street Fighter reference
The pages are based on React's functional components. useState and useEffect hooks are used heavly on play.js and leaderboard.js in conjunction with the API calls to the Lambda functions to make the application come alive.
gatsby-starter-default was used to initialize this project. The basic layout that comes with the starter code is used almost as is with the adition of some in-line CSS here and there. Deeper dive into the visual design of components is necessary but is not required at this stage.
Trivia Fighter Turbo makes use of the Lambda functions and serverless architecture provided by Netlify. The client makes request to the Netlify functions that acts as the Back-End, to perform 3 distinct operations:
- leaderboard.js => Get current leaderboard from Hasura Database
- questions.js => Generate questions using Open Trivia DB API
- insertScore.js => Insert new player and score into Hasura Database
The database is fairly simple. There is only one table called 'leaderboard'. The entries on the table have 3 fields; 'name', 'score' and 'time', where 'name' is the primary key. The database is stored on Hasura Cloud. The Netlify functions interface with the database using GraphQL.
New entries are added using Hasura's "upsert" method. If the client tries to add an entry with a name that already exists in the database, the database overwrites the score and the time of the existing entry. Therefore, a name can be used by multiple players which can lead to collusions and partial loss of progress. Unfortunately, it is not possible to have user verification without a proper sign-in feature. Sign-in is left out since such a feature would be overkill for a basic arcade style game.
- Add try-catch blocks to every API call
- Input validation
- Input validation (name & score) validation at insertScore.js
- Migrate in-line CSS to Emotion or CSS Modules
- Stylize Question component
- Reveal correct answer after each round
- Colorcode question difficulties (Yellow, Orange, Red)
- Reconfigure font sizes for responsiveness (Especially for iPad)
- Add CSS Transformations/Animations to taste
- 2nd Pass at Accessibility
Trivia Fighter Turbo presents you arcade style trivia in a web browser! Compete in upto 20 rounds of multiple choice questions to get the highest score and put your name on the leaderboard.
Game is over if you guess wrong or if you run out of time.
Trivia Fighter Turbo gets its questions from Open Trivia DB. Be prepared for questions from +20 different categories!
Questions come at random difficulty levels, at every new round. Fortune might favor you with a flurry of easy questions or one difficult opponent might be your end. On the bright side, harder questions yield more points!
- Easy = 100 Points
- Medium = 200 Points
- Hard = 500 Points
Every round 10 more seconds are added to your timer. If the timer runs out before you can answer a question, game is over. Use the time wisely if you want to reach the top!
Beat other fighters' scores to put your name on the map. Check the leaderboard frequently to see if you still qualify for the top 10.
Disclaimer: It might take a refresh or two for your name to show up on the leaderboard
-
Install the Dependencies.
Use the Gatsby CLI to create a new site, specifying the default starter.
npm install -g gatsby-cli npm install netlify-cli -g
-
Start Playing.
cd trivia-fighter-web npm install netfliy dev -
Open the source code and play!
The site is now running at
http://localhost:8000!Note: You'll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial._Note: Netlify will serve your functions from a different port than 8000. Keep an eye out for a message like "Functions server is listening on 53088". You can use your own browser or an application like Postman to test the endpoints._
A quick look at the top-level files and directories
.
├── node_modules
├── functions
├── public
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
-
/node_modules: This directory contains all of the modules of code that the project depends on (npm packages) are automatically installed. -
/src: This directory contains all of the code related to what will be displayed on the front-end of the site (what you see in the browser) such as the site header or a page template.srcis a convention for “source code”. -
.gitignore: This file tells git which files it should not track / not maintain a version history for. -
.prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent. -
gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser. -
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail). -
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -
gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering. -
LICENSE: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license. -
package-lock.json(Seepackage.jsonbelow, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly). -
package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. -
README.md: A text file containing useful reference information about your project. -
functions: This directory contains all of the code that is used by Netlify to create serverless Lamda functions. -
public: This directory contains all the static assets of the web application that are served by Netlify.