Decided to join Advent of Code as an excuse to practise my Rust!

# Advent of Code: Day 1 & 2
After a couple of months since completing the `minigrep` program in Rust from the [Rust Book](https://doc.rust-lang.org/book/ch12-00-an-io-project.html), I wanted to get my hands dirty. I tried to rawdog writing a compiler to, shockingly, absolutely no success. With [Advent of Code](https://adventofcode.com/), I thought it’s a good excuse to practice my rusty Rust and refresh my super basic Rust skills.
## Day 1
### Part 1
The solution itself was quite simple, but it took me around 2 hours just to get it working, because I forgot all the syntax and data types and what not. This is my first draft:

```rust
use std::fs;

fn main() {
    // list 1 and list 2
    // pair up the numbers in ascending order, and find the distance between them
    // then, add all the numbers

    // 1. load input (txt?)
    // 2. loop through, assign left, then right; list1, then list2
    // 3. sort line1 and line2
    // 4. compare per index, total each diff into a tmp var
    // 5. return tmp var

    let input = fs::read_to_string("input.txt").unwrap();

    let mut line1: Vec<i32> = vec![];
    let mut line2: Vec<i32> = vec![];

    for line in input.lines() {
        let tmp: Vec<&str> = line.split("   ").collect();
        line1.push(tmp[0].parse().unwrap());
        line2.push(tmp[1].parse().unwrap());
    }

    line1.sort();
    line2.sort();

    let mut result: i32 = 0;
    for (i, x) in line1.iter().enumerate() {
        let line2 = &line2[i];
        if x >= line2 {
            result += x - line2;
        } else {
            result += line2 - x;
        }
    }

    println!("{}", result);
}
```

And it worked! I did not care much about error handling at the time; my primary focus was to get a correct, working code. There are a couple of things I realised I can do better afterwards, such as replacing `.split("   ")` to `.split_whitespace()`. Another is using `result += x.abs_diff(line2)` instead of the cursed `if else` statement to not get a negative number.
### Part 2
The only difference in part 2 is during the looping through. Add another loop to “collect” multipliers, and adding `multiplier * x` to the `result` 

```rust
    // snip
    let mut result: i32 = 0;
    for x in line1.iter() {
        // loop through line2 until no more of same number
        let mut multiplier: i32 = 0;
        for (j, y) in line2.iter().enumerate() {
            if x == y {
                multiplier += 1;
            }
            // end of loop
            if j == line2.len() - 1 {
                result += multiplier * x;
                multiplier = 0;
            }
        }
    }
    // snip
```
## Day 2
On Day 2, I wanted to mess with *proper* error handling (at least more thought out than in Day 1). I also wanted to measure how long the execution time is. Luckily, we can do this quite easily with Rust!

```rust
let start = Instance::now();
// code to be executed here...
let duration = start.elapsed();
println!("{}", duration);
```
### Part 1
For Day 2, I wanted to keep both solutions in one `cargo` project, compared to two when I was doing Day 1. This way, I only need to write the logic for reading the input data once. I also wanted to type `cargo run <input file>` to be able to run between the test data and real input data.

```rust
use core::panic;
use std::{env, fs, process, time::Instant};

fn main() {
    // input is one report per line
    // report = line (y-value)
    // levels = columns (x-value)
    // count how many reports are safe!
    // safe can be based on:
    // 1. each report must be constantly increasing/decreasing (can't look like /\)
    // 2. delta is 1 <= d <= 3
    // 3. if delta == 0, it's unsafe

    let start = Instant::now();
    let filename: Vec<String> = env::args().collect();

    if filename.len() < 2 {
        eprintln!("Error: no filename detected. Please enter filename.");
        process::exit(1);
    }

    let input = match fs::read_to_string(&filename[1]) {
        Ok(string) => string,
        Err(_) => {
            panic!("Can't read file. Please make sure file exists.")
        }
    };

    // let res = part1(input);
    let res = part2(input);
    println!("total: {}", res);

    let duration = start.elapsed();
    println!("time elapsed: {:?}", duration);
}
```

I know, I know.. I still have to change the code manually to run day 1 vs day 2 code. This could be extended in Day 3 perhaps - `cargo run <input> <day>`

For Part 1, the solution was again, quite straightforward, though longer than Day 1. This forced me (especially due to part 2) to break up my code into functions - like how it should be!

```rust
pub fn part1(input: String) -> i32 {
    let mut total_safe = 0;

    for line in input.lines() {
        let row: Vec<&str> = line.split_whitespace().collect();
        let res = check_if_safe(&row);

        if res {
            total_safe += 1;
        }
    }
    return total_safe;
}

pub fn check_if_safe(row: &Vec<&str>) -> bool {
    let mut delta_is_positive = true;
    let mut safe = true;

    for (j, x) in row.iter().enumerate() {
        // logic starts after index 0
        if j > 0 {
            let cur_value = x.parse::<i32>().unwrap();
            let prev_value = row[j - 1].parse::<i32>().unwrap();
            let delta = cur_value - prev_value;
            let delta_diff = delta.abs_diff(0);

            if delta_diff < 1 || delta_diff > 3 {
                safe = false;
                break;
            }

            if delta == 0 {
                safe = false;
                break;
            } else if delta > 0 {
                if j > 1 {
                    if delta_is_positive == false {
                        safe = false;
                        break;
                    }
                }
                delta_is_positive = true;
            } else {
                if j > 1 {
                    if delta_is_positive == true {
                        safe = false;
                        break;
                    }
                }
                delta_is_positive = false;
            }
        }
    }

    return safe;
}
```

Upon copy/pasting the code to Notion right now, I just realised that I could probably remove the `safe` variable in `check_if_safe` function and replacing the `break` with an early `return false` , returning `true` by default if no early returns are called. +1 learning!

Writing the solution in Day 2 also forced me to think more about passing by reference or by value to functions. The compiler throws a warning/error if I tried to access a value that has been moved/borrowed, which was really helpful to write *proper* Rust code. Luckily, I have not need to think about lifetimes yet - the time will come.
### Part 2
I thought Part 2 is quite tricky, because I couldn’t figure it out on my own the first try. My first solution was a crazy amount of nested `if` statements - I got lost in the sauce. Not only was I lost in the sauce, my solution was outright wrong. I had to find an [implementation in JavaScript](https://github.com/JoanaBLate/advent-of-code-js/blob/main/2024/day02-solve2.js), digest it, and implemented it in Rust by myself.

```rust
pub fn part2(input: String) -> i32 {
    let mut total_safe = 0;

    for line in input.lines() {
        let row: Vec<&str> = line.split_whitespace().collect();
        // each row, generate all possibilities
        // then, check if it's safe or not

        if check_if_safe(&row) {
            total_safe += 1;
        } else {
            for i in 0..row.len() {
                let mut modified_row: Vec<&str> = Vec::clone(&row);
                modified_row.remove(i);
                if check_if_safe(&modified_row) {
                    total_safe += 1;
                    break;
                };
            }
        }
    }
    
    return total_safe;
}
```
## Initial Thoughts
After the first 2 days of Advent of Code, I think that it’s a super good tool to learn a new language! Especially if you’re starting out, since the problems (until now) are not super complicated, hence more time can be spent on figuring out the syntax of the language itself. As the days go on and the challenges harder, the learning curve would probably get steeper, but I’m looking forward to do it!


Advent Of Code: Day 1 & 2

Instead of using WordPress to create my portfolio and/or blog, I decided to build it in Next.js because I am an epic developer. Also because I wanted to learn more about what a website is made of; how it is built. By the same vein, it is why I chose to integrate a headless CMS to power the site, even though I could (and did) simply put all the pictures and markdown files in the /public directory.

# Using Sanity as Headless CMS to Next.js Pages Router

Instead of using WordPress to create my portfolio and/or blog, I decided to build it in Next.js because I am an epic developer. Also because I wanted to learn more about what a website is made of; how it is built. By the same vein, it is why I chose to integrate a headless CMS to power the site, even though I could (and did) simply put all the pictures and markdown files in the /public directory.

This article is going to be a brief overview of how I setup and integrate Sanity as my headless CMS to my portfolio site.

## 1. Setting Up Sanity

After creating an account with Sanity, the next step is embedding Sanity Studio into my Next.js project. I started a new Sanity project with:

```jsx
// portfolio is the name of the Sanity project
npx sanity@latest init --env --create-project "portfolio" --dataset production
```

It asked a bunch of prompts that I just answered, most importantly the option to embed Sanity Studio into the project in a new directory, `/sanity`.

After the initialisation, Sanity created a `.env` file, which we need to rename to `.env.local` - just a Next.js thing so we can use `process.env.` to access it.

Navigating to `http://[localhost:3000](http://localhost:3000)/studio` will be met with a pop up, saying that `localhost:3000` should be added to CORS origin. Following the link and adding the link to the CORS settings of my Sanity project, navigating back to the Studio, and voila! My very own Sanity Studio is setup.

After following the Day One course in Sanity, I found myself creating a my first Sanity schema.

## 2. Configuring Schemas

Schemas are used to structure data in Sanity. I think of it as something similar to a JSON object, with extra meta-tags on them. The only schema I have is a `projectType`.

To initialise a custom schema, I created a new directory inside `/sanity` called `schemaTypes`. Created a `projectType.ts` in `/sanity/schemaTypes` and built the schema.

```tsx
import { defineField, defineType } from "sanity";

export const projectType = defineType({
    name: "project",
    title: "Project",
    type: "document",
    fields: [
        defineField({
            name: "title",
            type: "string",
            validation: (rule) => rule.required(),
        }),
        defineField({
            name: "slug",
            type: "slug",
            options: { source: "title" },
            validation: (rule) => rule.required(),
        }),
        defineField({
            name: "description",
            type: "string",
            validation: (rule) => rule.required(),
        }),
        defineField({
            name: "thumbnail",
            type: "image",
            validation: (rule) => rule.required(),
        }),
        // Sanity doesn't support markdown out of the box
        defineField({
            name: "markdownContent",
            type: "markdown",
        }),
    ],
});
```

In `defineField()`, `validation` is a function that returns a rule - in this case the fields are required for data entry. However, it is to note that markdown is not supported out of the box. Sanity uses `PortableText` specification to store their data. In order to store markdown (because all my content was created in markdown), I had to install a plugin from Sanity.

Simply run this command to install the plugin (and its peer dependency)

```tsx
npm install --save sanity-plugin-markdown easymde@2
```

Afterwards, add the plugin to the `sanity.config.ts` and the type “markdown” is available in `defineField()`.

```tsx
export default defineConfig({
    ...,
    plugins: [
        markdownSchema(),
        ...
        ,
    ],
});
```

Complete the new schema setup by adding it to `schema.ts`

```tsx
import { type SchemaTypeDefinition } from "sanity";
import { projectType } from "./schemaTypes/projectType";

export const schema: { types: SchemaTypeDefinition[] } = {
    types: [projectType],
};
```

After schemas are created, they can be viewed by opening the Sanity Studio, in this case `http://localhost:3000/studio`. Data can then be inserted into Sanity. Next up, let’s see how I use the data from Sanity to create the UI.

## 3. Populating the page with Sanity data

In `client.ts`, we can use a helper function recommended by Sanity.

```tsx
// helper function that only caches for 30s in dev. 
// in production, caches for an hour.
export async function sanityFetch<QueryResponse>({
    query,
    params = {},
    tags,
}: {
    query: string;
    params?: QueryParams;
    tags?: string[];
}) {
    return client.fetch<QueryResponse>(query, params, {
        next: {
            revalidate: process.env.NODE_ENV === "development" ? 30 : 3600,
            tags,
        },
    });
}
```

I used this helper function to fetch data from Sanity from inside of `getStaticProps()` of a page. This ensures that the page is compiled at build-time, and a snappier experience when navigating through the website.

 Other than the props of the data itself, I have put in `revalidate: 10` in the return object. This ensures that any update or changes to the content in Sanity is reflected in the webpage itself. Next will revalidate the cache every 10 seconds to check if the content of the page is up-to-date. If it is, the next time the page is requested, Next will serve the most updated page.

```tsx
export async function getStaticProps() {
    const GET_PROJECTS_QUERY = groq`*[_type=='project']{title, slug, description, thumbnail, markdownContent}`;
    const projects = await sanityFetch<GET_PROJECTS_QUERYResult>({
        query: GET_PROJECTS_QUERY,
    });

    return {
        props: {
            projects,
        },
		    revalidate: 10,
    };
}
```

You might notice that the `sanityFetch()` function uses a type. This type can be generated with `sanity typegen generate` using the Sanity CLI. I am not covering it in this article, though I highly recommend checking it out yourselves [here.](https://www.sanity.io/docs/sanity-typegen)

Now, we need to take the `projects` prop in the page component itself, and parse the data.

```tsx

interface Props {
    projects: Project[];
}

export default function Home({ projects }: Props) {
    return (
        <>
         ...
		    <div className='projects-grid'>
              {/* List of Projects */}
              {projects.map((project) => (
                  <ProjectItemCard
                      project={project}
                      key={project.title}
                  />
              ))}
          </div>
          ...
        </>
    );
}
```

## 4. Wrapping-Up

So that’s how I used Sanity to back my portfolio! This project entry will be sent to Sanity, and if this is live, Sanity has fully integrated into my website. My experience with Sanity has been great - everything is quite straightforward, and the documentation is ample. Then again, my current website does not require a lot of data manipulation or complex **groq** queries. Be sure to check my [Github](https://github.com/shawnanuptra/shawn-am) for more insight!

Sanity as Headless CMS to Next.js Pages Router

When developing my portfolio, I wanted to have a section of the website just for me. An admin side, so to speak. While I have used Firebase before, I wanted to explore new technologies that I have not used before. Since the portfolio is built on top of Next.js, I decided to use NextAuth (v4) for this project.

# Using NextAuth in Next Pages Router

When developing my portfolio, I wanted to have a section of the website just for me. An admin side, so to speak. While I have used Firebase before, I wanted to explore new technologies that I have not used before. Since the portfolio is built on top of Next.js, I decided to use NextAuth (v4) for this project.

It’s important to note that this project would be using the `/pages` directory, instead of `/app`.

## Installation

```jsx
	npm install next-auth
```

## Add `[...nextauth.ts]`

In `/pages/api`, add `/auth/[...nextauth.ts]`. Here, I initialised and configured `NextAuth()` itself.

```jsx
import NextAuth from "next-auth/next";
import GithubProfile from "next-auth/providers/github";

export default NextAuth({
    providers: [
        GithubProfile({
            clientId: process.env.GITHUB_ID as string,
            clientSecret: process.env.GITHUB_SECRET as string,
        }),
    ],
    callbacks: {
        // only allow sign in from my email
        async signIn({ user }) {
            if (user.email == "shawnanuptraamartin@gmail.com") {
                return true;
            } else {
                return false;
            }
        },
    },
    secret: process.env.NEXTAUTH_SECRET as string,
});

```

I configured `NextAuth` properties: `providers`, `callbacks`, and `secret`. The `providers` options is used to configure the different ways to authenticate users. Google, Twitter, Discord, and many more are available. I chose Github because I am a well respected developer, and definitely not because my mentor suggested it.

The `callbacks` option basically states callback functions that are called after an action was run. I only used the `signIn` callback as an authorisation tool - ensuring only one email can be used to sign in and access the page. `return true` to continue the auth flow, `return false` will bring up the default error page.

While it is not needed in development, the `secret` option is essential in production as it will not complete the build process without it. It is used to encrypt JWTs and hash email tokens.

The use of `process.env` variables is used so that I do not expose my keys. It’s never fun to have someone else use your keys.

## Implementation

Firstly, we need to wrap the entire app with `<SessionProvider>` with the prop `session`.

```jsx
import Layout from "@/components/layout";
import { GlobalStyles } from "@/components/styles";
import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app";

export default function App(
    { Component, pageProps }: AppProps,
    session: Session
) {
    return (
        <SessionProvider session={session}>
            <Layout>
                <GlobalStyles />
                <Component {...pageProps} />
            </Layout>
        </SessionProvider>
    );
}
```

The `<SessionProvider>`  allows sessions to be shared between browser tabs. However, it is to note that the `session` prop will need to be populated later.

Now the fun part: using it in the UI!

```jsx
import { signIn, signOut, getSession, GetSessionParams } from "next-auth/react";
import { useRouter } from "next/router";

const Login = ({ session }: any) => {
    if (session?.user?.email) {
        return (
            <div>
                Signed in as {session?.user?.email} <br />
                <button onClick={() => signOut()}>Sign out</button>
            </div>
        );
    } else {
        return (
            <div>
                <button onClick={() => signIn()}>Sign in</button>
            </div>
        );
    }
};

export default Login;

export async function getServerSideProps(ctx: GetSessionParams | undefined) {
    const session = await getSession(ctx);
    return { props: { session } };
}
```

When `/admin` is first loaded, since there are no sessions, the page will render the Sign in button. After clicking the button and invoking `signIn()` , the user will be redirected to a sign in page auto generated by NextAuth. After the sign in process, when the user is redirected back to `/admin`, the `async signIn()` that was configured in `callbacks` before was invoked, determining if the current user is able to access the page.

If the user is successfully signed in and redirected to the page, the page will need reload to load new information (a new session object). I mentioned before that the `SessionProvider` will need to be populated; since the page contains dynamic content (based on user authorisation), we need to implement Server Side Rendering (SSR), or the page won’t work properly. This is why we have `export async function getServerSideProps()`.

By using `getServerSideProps()`, we are telling Next.js to fetch some data before rendering and sending the HTML back to the browser. In this case, getting the `session` object. This `session` object is passed and accessed in the `Login()` component through the props.

This can also be seen in `/admin/dashboard` below.

```jsx
import { getSession, GetSessionParams } from "next-auth/react";
import React from "react";

const Dashboard = ({ session }: any) => {
    return (
        <div>
	          Dashboard
        </div>
    );
};

export default Dashboard;

export async function getServerSideProps(ctx: GetSessionParams | undefined) {
    const session = await getSession(ctx);
    // if no session, redirect to home
    if (!session) {
        return {
            redirect: {
                destination: "/",
                permanent: false,
            },
        };
    }
    return { props: { session } };
}
```

Note in the above code that there are extra functionalities in `getServerSideProps()`. This just means that the user will be redirected if the page is accessed before the session object is created.

And now you’re all set! Time to push to production!

## Pushing 🅿️(roduction)

Using Vercel as a host makes the process of pushing to production really easy. Just connect your Github account with Vercel, and you can deploy any of your public repository. There are a few things to keep in mind:

1. Remember to change / add the URL of your deployed site to your auth provider! I used Github for my project, and I created a production-only app since Github only allows one domain and authorised callback url.
2. When deploying in Vercel, your main domain name is [https://www.your-domain.com](https://www.your-domain.com). **Please take note of the www!!!** It took me 3 days of work to figure this out. Don’t make the same mistake as I did and make sure all your authorised callback urls contains the www.

## Conclusion

We have gone through the process of implementing authentication and authorisation with NextAuth with Next.js. The process is relatively straightforward (at least with Github), as long as the correct configuration steps are followed. 

Now you can go and make your own authenticated websites! Goodluck and have fun 🥳🥳

### P.S.

It’s very annoying to use NextAuth in preview branches in Vercel. The build constantly fails, and I have no intentions of using other methods to authenticate. It might just be an OAuth thing instead, though.

NextAuth in Next.js Pages Router

A simple web-based game that uses vanilla JavaScript to run.

# Flappy Bird Clone!

[https://github.com/shawnanuptra/flappy-bird-ripoff](https://github.com/shawnanuptra/flappy-bird-ripoff)

A simple web-based game that uses vanilla JavaScript to run.

This project consists of only 3 files - the index.html, style.css, and script.js

<video
src='/flappy-bird-clone/flappy_bird_muted.mp4'
width='100%'
height='auto'
controls

> </video>

## Index.html

The index.html is served as the ‘canvas’ of the game. It consists of all the elements in the game, such as the #game boundaries itself, #pipes for the moving pipe in Flappy Bird, #character for the player hitbox.

```html
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Flappy Bird</title>
        <link rel="stylesheet" href="style.css" />
        <link
            href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
            rel="stylesheet"
        />
    </head>
    <body style="text-align: center;">
        <br /><br /><br /><br /><br /><br />

        
        <div id="game">
            
            <div id="pipes"></div>
            
            <div id="hole"></div>
            
            <div id="character"></div>
            <div id="text">
                CLICK <br />
                OR <br />
                SPACEBAR <br />TO START
            </div>
        </div>

        <div id="title" style="margin: 20px;">
            <h1>
                <span>SCORE: </span>
                <span id="score">0</span>
            </h1>
        </div>
    </body>
    <script src="script.js"></script>
</html>
```

## Style.css

This is where all the styling of the HTML elements are set. Game boundary, character and pipe stylings, and text styling. Animations are also configured here!

```jsx
* {
    ...,
    touch-action: manipulation;
}
```

Setting touch-action to **manipulation** disallows the use of double-tap to zoom. Disabling double-tap to zoom removes the delay of click events when the user taps the screen, leading to a more responsive game.

```scss
@keyframes pipes {
    0% {
        left: 400px;
    } /*during start, position of #pipes is left:400px*/
    100% {
        left: -50px;
    } /*at the end, position of #pipes is left: -50px,
    because the width of the pipes is 50px,
    so the position has to be 50px less than 0, in order for the pipe to 'disappear'*/
}

@keyframes fadeAnimation {
    0% {
      opacity: 100%;
    }
    50% {
      opacity: 100%;
    }
    75% {
      opacity: 0%;
    }
    100% {
      opacity: 100%;
    }
}
```

Above are the animations that are used in the project. **Pipes** are used for both #hole and #pipes, as they will need to move together and overlap in the game, in order to give the effect of a 2 pipes (top and bottom) with a hole in the middle.

## Script.js

This is where all the game logic and states are stored. There are 3 main functions that used: **jump(), animationIteration(),** and **startGame().**

Jump() is used to calculate the position of the #character when they click on the screen, and execute the changing of the #character position relative to time.


```js
function jump() {
    let characterTop = parseInt(
        window.getComputedStyle(character).getPropertyValue("top")
    );

    //if it is currently jumping, clear the previous Interval, and the next jumpInterval will be made
    //allows to jump while jump animation is not done. clearInterval clears the previous jump information, frame=0 resets the jump animation
    if (jumping) {
        clearInterval(jumpInterval);
        jumpFrame = 0;
    }

    //set jumping flag as true
    jumping = true;

    //setInterval in 60fps (updates 1000/60ms once)
    jumpInterval = setInterval(() => {
        //when animation first starts (frame == 0), use characterTop as jump 'starting point'
        //after frame > 0, use prevCharTop as jump 'starting point'
        if (jumpFrame == 0) {
            character.style.top =
                easeOutCubic(jumpFrame / 60, characterTop, -70, 0.3) + "px";
            prevJumpCharTop = characterTop;
        } else {
            character.style.top =
                easeOutCubic(jumpFrame / 60, prevJumpCharTop, -70, 0.3) + "px";
        }

        //increments the frame, so easeOutCubic can return a different value
        jumpFrame++;

        //stop jumping after animation is done (length of jump = 20 frames)
        if (jumpFrame >= 20) {
            //set jumping flag to false
            jumping = false;
            //stop the jumpInterval (stopping the jumping animation)
            clearInterval(jumpInterval);
            //resets the frame to 0
            jumpFrame = 0;
        }
    }, 1000 / 60);
}
```

AnimationIteration() is used to randomise the position of the #hole, and increasing the score everytime the #character successfully goes through the #hole.

```jsx
function animationIteration() {
    // we want hole.style.top range from -450 until -200
    // this is so that the hole is always inbetween the pipes (visually)
    let random = -(Math.random() * 250 + 200);
    hole.style.top = random + "px";
    //increment the score after the character has passed the hole, aka new pipes animation iterates
    score++;
    scoreOutput.innerHTML = score;
}
```

StartGame() is used to process user input (spacebar or click). If it’s during a game, jump(). If the game’s over, reset all states to initial starting screen and state. If it’s in the initial state, start game logic. This includes starting gravity logic, clearing start screen text, initiating pipe animations, and hitbox logic to end the game if the #character hits the pipe or the bottom.

```jsx
function startGame() {
    //if game is running, run jump();
    if (gameState === 1) {
        jump();
    }
    //if game is in starting screen,
    else if (gameState === 0) {
        //set game to state 1, to signal it's starting to run
        gameState = 1;
        //RESET TO NEW GAME SETTINGS
        score = 0;
        gravFrame = 0;
        prevGravCharTop = 250;
        //clear the board
        text.innerHTML = "";
        //start the animation
        pipes.style.animation = "";
        hole.style.animation = "";
        // addEventListener to #hole, so an anonymous function will be triggered to randomize the position of #hole
        hole.addEventListener("animationiteration", animationIteration);

        //GRAVITY FUNCTION PART OF THE CODE
        startInterval = setInterval(() => {
            // get the value of the 'top' property of the character
            let characterTop = parseInt(
                window.getComputedStyle(character).getPropertyValue("top")
            );

            //if currently not jumping
            if (jumping === false) {
                //set new character style top value. adding the top value will move the element down => 'gravity'
                //use prevGravCharTop as 'a point where the char starts falling'
                character.style.top =
                    easeInQuad(gravFrame / 60, prevGravCharTop, 500, 1.15) +
                    "px";
                //increments gravFrame to continue animation. easeInQuad will return diff values everytime setInterval is run
                gravFrame++;
            }
            //when it's jumping, set the prevGravCharTop to the most updated position of the char, characterTop.
            //resets the gravity animation, gravFrame = 0;
            else {
                prevGravCharTop = characterTop;
                gravFrame = 0;
            }

            //HIT DETECTION PART OF THE CODE
            let pipesLeft = parseInt(
                window.getComputedStyle(pipes).getPropertyValue("left")
            );
            let holeTop = parseInt(
                window.getComputedStyle(hole).getPropertyValue("top")
            );
            let cTop = -(500 - characterTop);

            //if character 'hits' the bottom of game div, go to gameState 2
            //OR
            //if character 'hits' the pipes, go to gameState 2
            //if pipes.left < char.width AND pipes.left < -pipes.width+char.width AND (cTop is taller than holeTop OR cTop is shorter than lowerHoleTop-char.height)
            if (
                characterTop >= 470 ||
                (pipesLeft < 50 &&
                    pipesLeft > -20 &&
                    (cTop < holeTop || cTop > holeTop + 150 - 30))
            ) {
                pipes.style.animation = "none"; //stops the animation
                hole.style.animation = "none"; //stops the animation

                text.innerHTML = "GAME OVER <br><br>TRY AGAIN?";
                //disables fadingAnimation
                text.style.animation = "none";
                //sets gameState = 2;
                gameState = 2;
            }
        }, 1000 / 60);
        jump(); //jump new game is starting
    } else {
        //if gameState = 2, and startGame() is invoked:
        //set to main screen settings
        text.innerHTML = "CLICK<br>OR<br>SPACEBAR<br>TO START";
        text.style.animation = "";
        //RESET TO DEFAULT SETTINGS
        //resets the position of the character, and score
        score = 0;
        scoreOutput.innerHTML = score;
        character.style.top = "50%"; //resets the char position
        gravFrame = 0; //resets the gravity
        clearInterval(jumpInterval);
        jumping = false;
        prevGravCharTop = 250;
        jumpFrame = 0;
        clearInterval(startInterval);
        hole.removeEventListener("animationiteration", animationIteration);
        //sets gameState = 0;
        gameState = 0;
    }
}
```

Hello there!

Latest Projects