Final Technical Overview

[BobTheFarmer]

USAGE OF:

• [x] Frontend
• [x] Backend
• [x] API
• [x] Agile

HOOK: Points: 3.6-4.0 Reason:

• Code runs and connected to the backend
• Data interpreted in the frontend, moving the cars appropriately.

KNOWLEDGE: Points: 3.6-4.0 Reason:

• Extensive review below

VALUE: Points: 0.6-1.0 Reason:

• Helps students learn the java coding language in a fun and easy way

WOW FACTOR: Reason:

Frontend

Game control loop

Overview/goal of this code

The frontend needs a central script to update the positions of the cars from the API data. It's also important that this script is well-connected both to the animation and the backend, acting as the connector.

Use of OOP

I want to store the position data in an object that mirrors the backend objects. This will make the process of updating the player positions easier. The Player object needs to do four things:

• Store the index of each player
• Store the progress of each car along the track (to be pulled from backend)
• Update the position of the cars by being passed JSON data
• Reset the progress of the cars

  class Player {
      constructor(index) {
          this.progress = 0;
          this.index = index;
      }

      reset() {
          this.progress = 0;
      }

      update(positionData) {
          this.progress = positionData[this.index];
      }
  }

Notice how the update takes all the JSON data and interprets it rather than just take its own data. That will make the code more concise and easier to write later.

Challenges from writing this code before other parts of the project are ready

This code will serve as the 'glue' connecting the backend to the animations on the frontend. However, in order to test this code before those two parts were ready, I had to be creative with where data is received and sent.

• The API has its own function getAPIData() which can hold temporary testing data to be manually edited for testing
• The position values can be printed as they cannot yet be sent to the animation parts

function getAPIData() {
    return [10, 0, 20,30];
}

Ticking system

To avoid inconsistencies in how fast positions are updated depending on connection speed, I used a ticking system to only call the API over some interval. A constant is used to make this interval easily adjustable.

const tickRate = 1000;

function tick() {
    updatePositions(getAPIData());

    //Update cars animations

}

let interval = setInterval(tick, tickRate);

SIgn in page

This page will be the landing page where players will sign up. I tried to make it follow a racing color scheme and theme while also being easy to follow.

For now, this page is essentially a wireframe. However in the future it will link to the backend and be responsible for assigning players to their cars in the game.

Typing System

Integrating old demo code

The original demo had some basic code for the typing system with a few temporary words. I used some of this code as a base to start with the new system.

// Function to generate a random word for the user to type
function generateRandomWord() {
    const words = ["HELLO", "WORLD", "HTML", "CSS", "JAVA"];
    const randomIndex = Math.floor(Math.random() * words.length);
    targetWord.innerText = words[randomIndex];
}

// Initialize the game
generateRandomWord();

However, most of the code, which was in the checkWord() function cannot be used as it directly updates the frontend and in a different way than we are going to do with exponential movement.

New way of doing it

The code has become a lot simpler and shorter because we got rid of the acceleration. All the code needs to do now is check the typing box and generate new phrases.

const typingText = document.getElementById("typing-text");
const typingBox = document.getElementById("typing-box");
currentPhrase = "Loading...";

function nextPhrase() {
    randomIndex = Math.floor(Math.random() * phrases.length);
    currentPhrase = phrases[randomIndex];
    typingText.textContent = currentPhrase;
}

function checkTypingBox() {
    if(typingBox.value == currentPhrase) {
        //TO-DO: Update API pos
        typingBox.value = "";
        nextPhrase();
    }
}

Backend

Issues we faced

The Problem

The backend developers are having trouble working on the API because they cannot localhost or deploy the backend. Whenever someone tries to localhost, they get a jwt error and postman does not receive any data.

What we tried

We mostly focused on the jwt error which we now know was not the problem. I tried:

• Disconnecting the person from the rest of the backend
• Removing all the security
• Removing all instances of jwt

This did not work, however, it did give us a different 404 error which confused me more.

After consulting with Mr. Mort

We learned that the jwt error is not a problem. It simply happens because the requests from postman are not associated with the jwt cookies so requests to the person api can't be verified.

Mr. Mort told me that the problem may have come from the newest version of Spring. We recloned the repository so that is why other teams did not have this issue.

Using GitLens to fix it

Mr. Mort also showed me how to use GitLens to investigate this further. GitLens is an extension in vscode which allows you to easily back up to previous commits. We used this to find that going back a couple of weeks allows the backend to run correctly.

How I will avoid mistakes like this in the future

I wasted a lot of time investigating the jwt error, but it turned out it was not important to the overall problem. In the future, I will be more careful not to blindly follow the error but read it carefully and take a more direct approach to the problem, rather than just look for anything related to the error in the code. I will also not be afraid to ask for help if I get stuck on something like this.

Phrases API

Why we need this API

In our game, the player will type from a bank of phrases. We want the bank to be scalable and extremely large. Storing it on the frontend may cause lag and is unnecessary, so we are going to put it on the backend.

'Sculpting' approach

The jokes API already provided by Mr. Mort is very similar to what I need to make. All I needed to do was remove the like and jeer system, leaving only the index and the jokes in the API.

The final phrases API is just like the jokes API but with all that removed. Here's what that looks like:

@Data  // Annotations to simplify writing code (ie constructors, setters)
@NoArgsConstructor
@AllArgsConstructor
@Entity // Annotation to simplify creating an entity, which is a lightweight persistence domain object. Typically, an entity represents a table in a relational database, and each entity instance corresponds to a row in that table.
public class Jokes {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    @Column(unique=true)
    private String joke;

    // starting jokes
    public static String[] init() {
        final String[] jokesArray = {
            "If you give someone a program... you will frustrate them for a day; if you teach them how to program... you will frustrate them for a lifetime.",
            "Q: Why did I divide sin by tan? A: Just cos.",
            "UNIX is basically a simple operating system... but you have to be a genius to understand the simplicity.",
            "Enter any 11-digit prime number to continue.",
            "If at first you don't succeed; call it version 1.0.",
            "Java programmers are some of the most materialistic people I know, very object-oriented",
            "The oldest computer can be traced back to Adam and Eve. It was an apple but with extremely limited memory. Just 1 byte. And then everything crashed.",
            "Q: Why did Wi-Fi and the computer get married? A: Because they had a connection",
            "Bill Gates teaches a kindergarten class to count to ten. 1, 2, 3, 3.1, 95, 98, ME, 2000, XP, Vista, 7, 8, 10.",
            "Q: What’s a aliens favorite computer key? A: the space bar!",
            "There are 10 types of people in the world: those who understand binary, and those who don’t.",
            "If it wasn't for C, we’d all be programming in BASI and OBOL.",
            "Computers make very fast, very accurate mistakes.",
            "Q: Why is it that programmers always confuse Halloween with Christmas? A: Because 31 OCT = 25 DEC.",
            "Q: How many programmers does it take to change a light bulb? A: None. It’s a hardware problem.",
            "The programmer got stuck in the shower because the instructions on the shampoo bottle said: Lather, Rinse, Repeat.",
            "Q: What is the biggest lie in the entire universe? A: I have read and agree to the Terms and Conditions.",
            "An SQL statement walks into a bar and sees two tables. It approaches, and asks may I join you?"
        };
        return jokesArray;
    }

AI generating the new phrases

Now all we have to do to customize the API is change the phrases to whatever we want. I am going to generate the phrases by using chatGPT. The benefit of this is that it will format them in JSON so no formatting will be needed on my part.

Players API

[jm1021]

USAGE OF:

• [x] Frontend
• [ ] Backend
• [x] API
• [x] Database
• [ ] Agile

HOOK: Points: 3.6-4.0 Reason: Game play is very fun.

KNOWLEDGE: Points: 3.6-4.0 Reason: Very knowledgeable on game side. Backend was not discussed.

VALUE: Points: 0.6-1.0 Reason: Fun and interactive game with code theme

WOW FACTOR: Reason: Very nice looking game. Lots of two person possibilities.

9/10, this could be a lot higher with deployment.

[TayKimmy]

• [ ] Frontend
• [ ] Backend
• [ ] API
• [ ] Agile

HOOK: Points: 3.8 Reason: Doesn't fully hook in the audience but does connect to the project well.

KNOWLEDGE: Points: 4.0 Reason: Shows screenshots of code and explains their uses. Has good knowledge of their features and how their code works.

VALUE: Points: 1.0 Reason: Their biggest aspect is their race + chatbox, which is well developed. Has value of helping people code quicker.

WOW FACTOR: Reason: Moving cars and user input.

[Soham360]

Criteria/Key Features:

• [x] Frontend
• [ ] Backend
• [x] API
• [x] Database
• [x] Agile, several students interacting with answering questions.

HOOK: Points: 3.9 Reason: Super enthusiastic and entertaining. Similar to NitroType which was a game I enjoyed as a kid

KNOWLEDGE: Points: 4.0 Reason: Everyone was very knowledgeable about the topic

VALUE: Points: 1.0 Reason: Helps people type code faster and understand syntax well

WOW FACTOR: Reason: I loved the fact that you could play this game with multiple people

8.9/9

[ak146]

USAGE OF: HOOK: Points: 3.6-4.0 Reason: Super exiting and entertaining. The game was very fun.

Code runs and connected to the backend Data interpreted in the frontend, moving the cars appropriately. KNOWLEDGE: Points: 3.6-4.0 Reason: Everyone could talk and explain the project they created

Extensive review below VALUE: Points: 0.6-1.0 Reason: It was a fun typing game that could help people learn how to type with greater speed. It was also a fun game.

Helps students learn the java coding language in a fun and easy way WOW FACTOR: Reason: Multiplayer!

8.8/9

[Orlando-c]

HOOK: Points: 4.0 Reason: Super enthusiastic and entertaining. Similar to NitroType which was a game I enjoyed as a kid

KNOWLEDGE: Points: 4.0 Reason: Everyone was very knowledgeable about the topic

VALUE: Points: 1.0 Reason: Helps people type code faster and teaches very basic aspects of coding

WOW FACTOR: Reason: I loved the fact that you could play this game with multiple people and its very competitive so I can feel better when I beat little children at the game

9/9