Alias is an online browser game that revolves around teams, each comprising two or more members. In this game, one team member is assigned the task of explaining a given word using alternative words to their fellow team members.

The objective of this project is to create a dynamic front-end website that adapts to user interactions, modifying the presentation of information to fulfill the user's objectives.

Link to the live site

• User Experience UX
  • Target Audience
  • User Stories
  • Site Aims
• Design
  • Wireframes
    • Home page on Desktop
    • Home page on Mobile
    • Game page on Desktop
    • Game page on Mobile
  • Color Scheme
  • Typography
• Features
  • Teams settings
  • Game settings
  • Categories settings
  • Game section
    • Before-round section
    • Round section
    • After Round section
    • Who guessed pop-up menu
  • Win section
  • Future Features
• Testing
• Bugs
  • Bugs Fixed
  • Bugs Unfixed
• Technologies used
• Deploying
• How to Clone
• Credits
  • Content
  • Media
• Acknowledgements
• Codeanywhere Reminders

Table of contents generated with markdown-toc

This site caters to a wide-ranging audience, including individuals of different ages, by providing various levels of difficulty tailored to accommodate diverse skill levels.

Back to top

• Enable users to access clear instructions on how to play the game.
• Allow users to reset the game at any point for a fresh start.
• Ensure a user-friendly interface that clearly displays the game elements.
• Display the current score of the game for users to stay informed about their progress.
• Implement clearly labeled buttons to give users intuitive control over the game.

Back to top

The goal of the site is to offer friends an enjoyable and amusing time playing this game together.

Back to top

The site's design draws inspiration from the mobile application of the game "play.google.com". I've modified the structure of certain elements, completely overhauled the color scheme, and crafted an appearance specifically optimized for laptop screens.

Back to top

I used balsamiq to create wireframes

Back to top

I used coolors.co to generate this color palette.

Back to top

I use Inter Tight font.

Back to top

Back to top

link to team.html

• Add new team button. It adds new team to a game session (allowed no more then 6 team).

• The "Delete team" button. It deletes a team from a game session.

• The "Next" button. It saves chosen teams to localStorage and navigates to next settings' stage

Back to top

link to team.html

• The "word count" input. It sets amount of words which a team must to achieve to win.

• The "Round duration" input. It sets a round's time.

• The "Penalty for a miss" input. It enables a one point penalty for missed word.

• The "Common final word" input. It enables all teams to guess the last word.

• The "Next" button. It saves chosen settings to localStorage and navigates to next settings' stage

Back to top

link to categories.html

• There are three buttons which define difficulty of game. It saves game words for corresponding level of difficulty and navigate user to game.html page.

Back to top

link to game.html

• The game section has tree state of appearance (before-round > round > after-round). The states runs in a loop until some team get win.

There are three parts of the before-round section

1. The first one show the "amount of words to win" and list of teams and them score.

2. The second one show a round number of certain team and team name which is going to play upcoming round.

3. The third one is a button that allows user to navigate to the next "round" section.

Back to top

The round section has main features.

1. The first one shows a team name that is going to paly and number of guessed words.

2. The second one is the button start which runs the current round. After click on it, the word "Start" disappears and a explainable word to be shown.

3. The third one is the guess button. It allows team member, who is explaining, to add the word to guessed list.

4. The fourth one is the miss button. It allows team member, who is explaining, to add the word to missed list.

5. The last one shows amount of missed words and a countdown timer indicating the remaining time until the end of the round..

In the "Round" section, users on touch screen devices can make guesses by swiping up and register missed words by swiping down.

Back to top

The after-round section has three main features

1. The first one shows amount of points gotten for round and teams who got them.

2. The second one shows all words of round. User can change status of a word from "guessed" to "missed" and vise versa if he made mistake.

3. The third one is button that adds earned points to corresponding team and navigates user either to the win page, if someone won, or to the before-round stage by changing current team.

Back to top

The Who guessed pop-up menu appears in two cases if the "Common final word" of the "Game settings" was enabled.

1. The first case occur during the round section,When the round is over and a user has not yet processed the last word. After the processing the user will be offered to choose the team who guessed the last word.

2. The second case occur during the after-round section. When the user is trying to change state of the last word.

Back to top

link to win.html

The "Win section" has three main features.

1. The first one shows a winner team name and his points.

2. The second one shows rest of teams with their points.

3. The third one is button that navigate user to the home page.

Back to top

• Add maintaining different languages so people all over the word will be able to paly this game.

• Add sounds effects.

• Create online mode of this game. It will allow users to play being in different places.

Back to top

View testing here

Back to top

Back to top

• Delayed content loading when accessing a page (fix commit)

• The lack of setup for the content of "#round-timer" leads to issues in the proper functioning of checkIsRoundFinished(). (fix commit)

• Didn't use "let" keyword in "for of" loop. (fix commit)

• Correct behavior for counting words when user refreshes page during a round (fix commit)

• Correct behavior of "#control" element when user click on it multiple times (fix commit)

• Template of ".winner-team-info" wasn't deleted and appears on page. (fix commit)

Back to top

• licking the "Change Word Status" button multiple times is leading to the duplication of the team block within the "#who-guessed" element.

Back to top

• JavaScript - provides interactivity of site
• HTML5 - Provides the structure of the site information, elements and website content.
• CSS3 - Provides the styling of the HTML content.
• Balsamiq - Wireframing software used to plan and design website templates.
• GitHub - An online host for web and software development projects. Used to store the repository and deploy the finished website.
• Git - Software for tracking changes to files. Used with GitPod to add, commit and push code changes to the repository on GitHub.
• Google PageSpeed Insights was employed to assess the performance, accessibility, best practices, and SEO aspects of the web pages.
• ChatGPT was used to create more readable and sensible text.

Back to top

The Alias is presently hosted and accessible on GitHub Pages. The deployment process is managed as follows:

Repository Configuration: The GitHub repository for my project is configured to deploy automatically from the main branch to GitHub Pages.

Push to Deploy: Whenever I push new changes to the main branch, GitHub Pages initiates an automatic deployment of the updated version, ensuring it becomes instantly available online.

Accessing the Live Application: You can access the live application by visiting this link: Alias.

1. Log into your account on GitHub
2. Go to the repository of this project Alias
3. Click on the code button, and copy your preferred clone link.
4. Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
5. Type git clone into the terminal, paste the link you copied in step 3 and press enter.

Back to top

• Custom range slider w3schools.com

• JavaScript MutationObserver mozilla.org

• Fonts fonts.google.com.

• CSS linear-gradient mozilla.org

• Custom checkbox styles alvarotrigo.com

• Wavy backgrounds fireship.io

Back to top

• Color palettes generator

• Favicon and logo icons8

• Icons Font Awesome.

Back to top

I want to convey my immense gratitude to my mentor, Luke Buchanan, for pinpointing my mistakes and providing advice on how to rectify them. Special thanks to my friends who assisted in testing the application, and to the Slack community, always ready to offer valuable tips at any time.

Back to top

To run a frontend (HTML, CSS, Javascript only) application in Codeanywhere, in the terminal, type:

python3 -m http.server

A button should appear to click: Open Preview or Open Browser.

To run a frontend (HTML, CSS, Javascript only) application in Codeanywhere with no-cache, you can use this alias for python3 -m http.server.

http_server

To run a backend Python file, type python3 app.py, if your Python file is named app.py of course.

A button should appear to click: Open Preview or Open Browser.

In Codeanywhere you have superuser security privileges by default. Therefore you do not need to use the sudo (superuser do) command in the bash terminal in any of the lessons.

To log into the Heroku toolbelt CLI:

1. Log in to your Heroku account and go to Account Settings in the menu under your avatar.
2. Scroll down to the API Key and click Reveal
3. Copy the key
4. In Codeanywhere, from the terminal, run heroku_config
5. Paste in your API key when asked

You can now use the heroku CLI program - try running heroku apps to confirm it works. This API key is unique and private to you so do not share it. If you accidentally make it public then you can create a new one with Regenerate API Key.