ThrillTyper

typetriller

Keywords

Section 4 Python React Type Racing Web Application

Project Abstract

Welcome to the exciting world of ThrillTyper – a cutting-edge typing racer game that's here to make typing fun and competitive. This game is an online web application that offers various single player modes including a robot opponent mode, custom mode, and dynamic race mode, private online multiplayer, and public online multiplayer. In multiplayer each race is composed of up to ten racers, and in online multiplayer the host of the game shall have the option between two to ten competitors. Metrics for each race shall be logged to each user’s account including words-per-minute (wpm), time, and accuracy, however, if the player has no account they shall be playing as a guest with no saved data. Participants shall be able to register accounts, join typing races, and compete in real-time against each other. The game shall feature a user-friendly interface built with JavaScript, a backend powered by Flask, and WebSocket technology for seamless real-time communication. The game shall include user authentication, race creation, and a dynamic leaderboard to showcase the fastest typists.

High Level Requirement

ThrillTyper is the ultimate typing challenge, offering players an array of modes to engage with. In robot opponent mode, users will see the robot’s progress typing against them and their own metrics. Custom mode will allows users to input texts, select genres, and select between words and sentences. Dynamic race mode will analyze the user’s last few sentences typed and their metrics to generate a few new lines based on that data and what AI deems best to generate. While online multiplayer provides the thrill of real-time competition with two to ten players hosted by a game master. Key metrics, such as words-per-minute (wpm), time, and accuracy, shall be shown in game and meticulously logged for each user, creating a personalized experience. Whether you're a registered user tracking your progress or a guest enjoying the rush, ThrillTyper ensures an exciting typing adventure for everyone.

Conceptual Design

The initial design concept envisions a software architecture where the frontend, developed using JavaScript, provides a user-friendly interface for interaction. The backend is powered by Flask, a framework written in Python, serving as a robust foundation for text generation, multiplayer connection handling and user data handling. Real-time communication is facilitated through WebSocket technology, ensuring dynamic multiplayer experience. The software stack is designed for compatibility with standard web browsers, making it accessible across various operating systems. The development process adheres to industry best practices, utilizing Git for version control and collaborative development.

Background

ThrillTyper seeks to distinguish itself through the incorporation of real-time multiplayer capabilities, a dynamic leaderboard, and an emphasis on performance metrics tracking. Proprietary products like "TypeRacer" and "Nitro Type" were also scrutinized for their user engagement features and various capabilities. In crafting ThrillTyper, the aim is not only to offer a unique and thrilling game experience but also to strategically position the product by leveraging successful elements observed in existing projects while introducing innovative differentiators like Robot Opponent Mode and Dynamic Text Generation that cater to a broader user base.

Required Resources

This is a software-dominant project with zero outside hardware requirements. The Visual Studio Code IDE shall be the biggest requirement to program in JavaScript and Python. Experience with Python Flask and JavaScript shall be helpful. A computer or server provider shall be needed to act as a server to host the application.

Implemented Features

Single Player: basic timed gameplay
Robot Opponent Mode: competing against a simulated opponent with difficulties of either easy, medium, or hard
Custom Mode: allows user to choose genre for words to type or input a blurb of their own to type
User Systems: accounts, logging in, dashboard, and leaderboard
Dynamic Mode: generates an easy blurb for the user to type initially and based on the WPM the users has for that it generates a new blurb, and this goes on until time runs out

Known Bugs

Release 1.0

Dynamic Text Generation does not allow the user to advance if they type two spaces in a row after finishing their last blurb
Multiplayer does not synchronize gameplay so that the match ends when one player has finished the race
The background of the cosmetic function may not always maintain a fixed size depending on the length of the monitor.

Build & Run Instructions

Release 1.0 or higher

For zipped folder release

Extract the zipped folder. For machines that do not have a Python environment or Python IDE (such as VSCode), download Python from python.org.
The extracted folder includes a requirements.txt that holds all dependencies of the software. Open the Python shell or Python IDE and navigate to the folder. Run pip install -r requirements.txt. Hints: for developers, using the virtual environment module to install dependencies can avoid global installations on the machine.
Check if there is an .env file inside the extracted folder.

3.1. If there is one, run the app.py directly and open the link displayed on the terminal. One of them is http://127.0.0.1:5000.

3.2. If there is no .env file, create one in the folder's root directory and add your custom keys:
```
CLIENT_ID = your_google_credential_id
CLIENT_SECRET = your_google_credential_secret
FLASK_SECRET = your_secret_can_be_anything

CHAT_API_KEY = your_own_openai_apikey
```
For those without the need for Google OAuth2 login, we can omit the client id and secret in the .env file.

For those without the need for OpenAI text generation, we can omit CHAT_API_KEY too.
Make sure you're in the extracted folder directory. Run python app.py in the Python shell or IDE terminal. The server will start immediately and display the link(s) to the website.