PaperTrek

Papertrek is a website made for the puzzles and The Big Bang Theory fans. The goal of this website, is giving the user a challenging opponent to play a against in a variation of Rock, Paper and Scissors. The game is made of 5 moves, and once the moves are out, the one with more points win the game.

Features

PaperTrek is a simple and well designed page. The website has a galactical theme and presents a challenging game. In it's layout there is a Game Menu page, where you can choose between reading the instructions or starting the game. On the game, the player has 5 options to choose, between: Rock, Paper, Scissors, Lizard and Spock. The option choosen both by player and computer, are showed on the display. Once the game is over, a modal pops up, telling who the winner was and also giving an option to restart the game.

Existing Features

• Game Menu

  • The section game menu is the one the user arrives when accessing the website. This page contains 2 buttons, one to start playing and another one containing the instructions.

  

• Instructions

  • The instructions button pops up a modal, that teaches the player how to play the game.

  

• Gaming Area

  • This section group all the features on the website. Here you find the buttons to play the game, the score and the display that shows the options chosen.

  

• Score

  • This section shows the score and the moves left. It's updated everytime the player pick a movement.

  

• Result

  • This modal pops up once the game is over. It tells who was the winner and gives and option to restart the game.

  

Testing

The website passed in all tests with a high performance, presenting no bugs.

Validator Testing

• HTML
  • No errors were returned when passing through the official W3C validator
• CSS
  • No errors were found when passing through the official (Jigsaw) validator
• JavaScript
  • No errors were found when passing through the official JSHint Validator

Fixed Bugs

• The display area was becoming binger than the gaming area on small screens. I solved it trying different measurements styles, such as vw and %.

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

Credits

Content

• The icons used as game buttons were taken from flaticon
• The background belongs to FreePik
• W3Schools articles, helped me solve bugs on my project.