Toby-Leeder / binarygames-frontend

MIT License
0 stars 1 forks source link

Final Project Check #24

Open Nathan-Capule opened 1 year ago

Nathan-Capule commented 1 year ago

Runtime Link (Frontend)

Runtime Link (Backend)

Run Instructions

  1. Open the Website:

    • Click the link above

      OR

    • Open a web browser (Google Chrome, Mozilla Firefox, etc.).
    • Type the URL of the escape room game website (https://binarygames.tech) in the address bar.
    • Press Enter to navigate to the website.
  2. Create an Account or Log In:

    • On the homepage of the website, you will see options for logging in or creating a new account if you don't have one
    • To create a new account, click on the "Sign Up" button and follow the instructions to provide the required information, such as username, password, and password confirmation
    • If you already have an account, enter your username and password and click "Enter" to access your account
  3. Navigate to the Escape Room:

    • After logging in, you will be redirected to the main interface of the escape room game
    • Scroll down if needed and double-click the escape room environment preview. Now you are playing the game and the timer will start
  4. Explore the Escape Room:

    • Once you enter the escape room, you will have control to move around and look around
    • Use the keys W, A, S, and D to move your position. You can move your mouse to look around
  5. Interact with Objects:

    • As you explore the escape room, you will encounter various objects in the room
    • When the crosshair hovers over certain objects in the room, you will notice they become dimmer. This means the object can be accessed by left-clicking while the crosshair is focused on it
    • Pay attention to details, search for hidden objects, and complete games to progress in the escape room
  6. Progress and Completion:

    • As you succeed in the games that can be found in the room, an escape code will automatically compile
    • The games are meant to be educational and teach the user how certain things in Computer Science work, such as binary math, logic gates, etc...)
    • The code will be complete when you have beat each game. Then the door will unlock, allowing you to escape
    • The ultimate goal is to beat all the games and successfully escape from the room as fast as possible
  7. Other Features:

    • Leaderboard
      • You can find the Binary Games leaderboard by scrolling up and clicking "Leaderboard"
      • You will see a table ranking users by best time in ascending order, displaying each user's ranking, name, and best time
      • You can also search for a specific user by name to see their rank and best time
    • Individual Games
      • You can click the "Games" button next to "Leaderboard"
      • This will take you to the "Binary Racer" game by default, hosted in its own section of the website
      • You can navigate between individual games using the secondary navbar under the main one
      • Here, each game is hosted individually with no relation to the escape room, in case the user simply wants to practice their Comp Sci skills without worrying about being timed and ranked
    • Account Settings
      • The account settings page can be found by scrolling to the top and clicking the button "Account" in the top right corner of the screen
      • This page displays your registered name and best time you've achieved in the Escape Room (both fetched from backend)
      • It also allows the user to change their name, password, and/or delete their account (CRUD methods with API)
  8. Logging Out

    • To log out, scroll to the top of the page and click the button "Log Out" in the top left corner of the screen
    • This will redirect you to the login page
    • When you close the tab, your login info will remain persistent, meaning you can reopen it and continue, however, your in-game information may be lost
    • By logging out, our website prevents you from accessing any part of the Escape Room, Leaderboard, Games, and Account info. It will simply automatically redirect you to log in first

Remember to enjoy the immersive experience of the escape room game and have fun learning and playing the games!

Frontend Repository

Backend Repository

N@TM Video including Demos