Mod3 Project | Flatiron School

Monster Match is a webapp that utilizies JavaScript, Ruby on Rails, HTML, and CSS.
Monster Match was a challenge I gave myself that incorporated two of the major topics we covered in Mod3: working with event listeners, authentication, authorization, and challenged my understanding of CSS Flexbox.

Technologies

• JavaScript
• Ruby on Rails
• HTML5
• CSS

Setup

To run this project, install it locally by cloning this GitHub repository and opening it in your code editor.

From there, open two terminal windows. In the first, navigate into the folder titled full-snack-backend and run rails s in your terminal.
In the second terminal window, navigate into the folder titled full-snack-backend and run lite-server

This should prompt your browser to open a page at: localhost:3001

You are now ready to start playing Monster Match! 👻

Instructions

Once you have opened the project through lite-server, you have the option to Sign up,Login, or play as a guest!

Move your first Monster to begin the game! Keep track of your high score by creating an account or signing in!

Code Examples

Authenticating Users:

class AuthenticationController < ApplicationController
    skip_before_action :verify_auth, only: [:login]

    def login
        @user = User.find_by(username: params[:username])

        if (@user&.authenticate(params[:password]))
            @token = JWT.encode({
                user_id: @user.id,
                exp: 24.hours.from_now.to_i
            }, Rails.application.secrets.secret_key_base)

            render json: {token: @token}, status: :ok
        else
            render json: {message: 'Login credentials not found'}, status: :unauthorized
        end
    end
end

Game Over and Posting Personal High Score:

function gameOver(turnCount) {
    if (turnCount === 0) {
        board.innerHTML = `
        <div class="game-over-container">
            <img id="game-over-image" src="images/game-over.png" alt="Game Over">
        </div>
        `
        if (score > highScore) {
            highScoreboard.innerHTML = `${score}`
            localStorage.setItem('highScore', score)
        }
    }
}

App Preview

Game Play:

Free Matches + Points Message:

New Game:

Sign up and Login Previews Coming Soon!

User Stories

As a user, you will be able to:

1. Create an account.
2. Play a game
3. See remaining moves
4. See total points
5. See personal high score

Status

With time, we would like to refactor my code utilizing more iterables, update login and sign up pages, and add features such as:

Adding User Profile

Creating User High Score Leaderboard

Add a button to navigate back to the top of the page.

Challenges

Working with a game matrix and understanding the calculations

Initially, my biggest bug was empty Monster image drops on some matches. The issue was my function to populate was within a conditional.

Flexbox was an incredible challenge that took me several days to understand how divs interact with each other.

Developing a High Score table populated with a user's highest score

Contact

Tiffany Kanjanabout

Resources

Coming Soon!