Frontend Technical Documentation - hikaruhotta/password-iOS-app GitHub Wiki

Welcome Screen

Front End Elements	Expected Behavior
New Game Button	Calls createLobby() cloud function, designates the user as the host, and segues to the lobby Screen.
Join Game Button	Segues to Lobby Code Screen.
Username Field	Players can click on this field and input their preferred username. If no username is inputted, the username defaults to "Anonymous".
Change Emoji Button	Clicking on the user icon randomly assigns a new emoji from 💃🏻, 🦁, 🤓, 🌲, 🐮, 🧨, 🎱, 🍔, 🐶, 🍺, 🍕 as the user icon.
Information Button	The Tutorial Screen is presented as a pop-over.

Tutorial Screen

Front End Elements	Expected Behavior
Scroll View	Outlines the game rules. Swiping down hides the tutorial pop-up.

Lobby Code Screen

Front End Elements	Expected Behavior
Lobby Code Field	Users can click on this field and enter a lobby code provided by the host.
Enter Lobby Button	Users can press this button to enter a lobby. Once pressed, the joinGame() cloud function is called. If an incorrect lobby code is entered, an alert will be raised. If joining the lobby is successful, a segue to the Lobby Screen is triggered.
Back Button	Triggers a segue to the Welcome Screen.

Lobby Screen

Front End Elements	Expected Behavior
Start Game Button	When the button is pressed, the startGame() cloud function is called, with the parameter numRounds specified by the slider. This changes the game status from "LOBBY" to "SUBMISSION". The button is only visible and enabled to the lobby host and disabled when there is only one player in the lobby.
Lobby Tableview	Each Lobby Tableview Cell displays the icon and username of users who have joined the lobby with the displayed room code.
Number of Rounds Slider	Users can adjust the number of rounds that they wish to play. This is only visible to the room host.
Number of Rounds Label	The label is updated every time the slider is moved to reflect the new number of rounds the user has selected. This is only visible to the room host.
Add Bot Button	This button adds a bot to the lobby.
Player Added Listener	Observes new players who are added to the lobby database and refreshes the Tableview to display those users.
Game Status Listener	Observes changes to the game status from "LOBBY" to "SUBMISSION". Once this change is detected, a segue to the Game Screen is triggered (for all players).
Back Button	Triggers a segue to the Welcome Screen and resets Local Data.

Game Screen

Front End Elements	Expected Behavior
Word Text Field	Users can press this field which makes the iOS keyboard appear. Users can then input their word submission in the text field.
Word Submission Button	Pressing this calls the submitWord() cloud function where the user input in the text field is passed as a variable. If the submitted word contains non-alphabetical characters, an alert is raised.
Word-Bank Buttons	The user's unique word-bank is displayed as six buttons. Users can submit any of the words in the word-bank by pressing the button which calls the submitWord() cloud function. Once a button is pressed it is disabled so word-bank words cannot be repeatedly submitted.
Reset Word Bank	Assigns six new words to the word bank by calling the 'requestNewWords()' cloud function.
Word Bank Listener	Observes changes to the user's word-bank and reassigns the text labels of the Word-Bank Buttons when a change is detected.
Information Button	The Tutorial Screen is presented as a pop-over.
Game/Chat Toggle	Toggles between the Game Screen and Chat Screen by updating the Tableview and hiding/unhiding the word bank.
Leader Board Button	Triggers a segue to the Results Screen
Game Tableview	The Game Tableview cell displays the icon, name, and score of the user who's turn it is. Once the user submits a word, the text field in the cell is updated to display the word. Voting buttons ✔ ✖ are only displayed when it is not a user's turn. The voting progress bar is shown when voting starts. The Game Tableview shows the history of submitted words and by default scrolls to the bottom.
Voting Buttons	Once a word is submitted, voting buttons ✔ ✖ are displayed. A user can vote by pressing on either of the voting buttons which calls the 'voteOnWord()' cloud function. When ✔ is pressed, true is passed as a parameter in 'voteOnWord()' and when ✖ is pressed false is passed in as a parameter. The voting buttons are hidden for the user who submitted the word. Users can either vote for or against a word. A word is accepted when all players vote for a submitted word. A word is challenged if any player votes against a word.
Voting Progress Bar	Once a word is submitted, the voting progress bar is displayed for all players. It increments for every vote that is submitted. It is hidden as soon as voting is completed.
Back Button	Triggers a segue to the Welcome Screen and resets Local Data.
Game Status Listener	Observes changes to the game status. When the status changes to "SUBMISSION", the voting buttons and voting progress bar are hidden. A new Game Tableview cell is generated and updated to display the icon, name, and score of the user who's turn it is and ensures that only that player can submit a word. When the status changes to "VOTING", the voting buttons and the status bar are displayed.
Voting Progress Listener	Observes changes to the number of votes submitted. As the number of votes increments, the progress bar is updated to reflect the change.
Submitted Words Listener	Observes newly submitted words and updates the Words Tableview to display the word.

Chat Screen

Front End Elements	Expected Behavior
Chat Text Field	Users can press this field which makes the iOS keyboard appear. Users can then type their chat message in the field. The chat is restricted to 100 characters.
Chat Submit Button	Pressing this button writes the message in the text field to the public directory in the firebase lobby.
Reset Button	Clears the Chat Text Field.
Chat Tableview	Each cell displays the user icon and chat message. The tableview scrolls to the bottom by default.
Chat Listener	Observes when new chat messages are submitted. This generates a new tableview cell with the chat message and refreshes the chat tableview.
Game/Chat Toggle	Toggles between the Game Screen and Chat Screen by updating the Tableview and hiding/unhiding the word bank.
Information Button	The Tutorial Screen is presented as a pop-over.
Leader Board Button	Triggers a segue to the Results Screen.
Back Button	Triggers a segue to the Welcome Screen and resets Local Data.

Results Screen

Front End Elements	Expected Behavior
Leaderboard Cards	Displays the top three ranking players with their username, icon, and score
Exit Game Button	Segues to the Welcome Screen and clears LOCAL DATA. It only appears when the game is over.
Back Button	Segues back to the Game Screen.
Game Status Listener	Observes changes of the game status to "DONE".