- The project brief can be found by clicking here
- The project guidelines can be found by clicking here
This project is all about having fun, while making a game which demonstrates Python as the backbone programming language.
The Game is designed to run on Heroku and will facilitate multiple players, playing the same game at the same time. The players will be able to register their own unique usernames when they log into the game. Their usernames will be used to tack their progress throughout the game.
A leader-board will show the scores of players from highest to lowest.
| Focus | User Needs | Business Objectives |
|---|---|---|
| What are you aiming to achieve? | To be able to play a simple game of riddles. | To demonstrate my coding ability with the use of simple user authentication. |
| To see the score for each played riddle. | Deploy sessions as well as basic security principles to insure the player can enjoy the game without the site breaking if tampered with. | |
| For whom? | To see the total score amongst other players on the leader-board. | |
| TARGET AUDIENCE |
| Focus | Functional Specification | Content Requirements |
|---|---|---|
| My project is to create a game for lovers of old style Victorian Era Riddles that have been sourced from the Gutenberg Project | ||
| Which features? | User name and authentication. | SQL database for username and encrypted password storage. Flash messaging for user feedback with conditional style formatting. |
| What’s on the table? | View a riddle to be played. | A list of riddles, answers and imagery. |
| Submit an answer to a riddle and have it checked. | A form field for submitting an answer. | |
| If the the answer is correct, to move on to the next riddle. | Flash messaging to inform the player of their progress. | |
| If an answer is incorrect, to be provided with the correct answer. | Answer/Data validation check which shows the correct answer in a flash message. | |
| To increment the player score for each correct answer given. | An internal score card, for logging the players score. | |
| On completion of the riddles, to present a leader board of the top 5 scores. | A leader board which reads from all the players score cards. | |
| Version control managed with Git & GitHub |
| Focus | Interaction Design | Information Architecture |
|---|---|---|
| How is the information structured? | Where am I? / How did I get here? / What can I do here? / Where can I go? | Organizational / Navigational schemas (tree / nested list / hub and spoke / dashboard) |
| User sign-up or login | Tree Structure | |
| How is it logically grouped? | Unsuccessful login prompts user to register first. | Start/home page |
| TThe user is asked a riddle. If answered correctly, the next riddle is given. | Answer riddle, progress through all riddles, ending at leader board. | |
| If the wrong answer is given, the correct answer is shown. The user is then given a new riddle to answer. | ||
| Following the last riddle, the leader board ins shown. The player ban play again from the home button. |
| Focus | Interface Design | Navigational Design | Information Design |
|---|---|---|---|
| How will the information be represented? | See wireframes | Flash messaging with conditional formatting | |
| How will the user navigate to the information and features? | Home button and navbar links. | Title and informational typescripts |
| Focus | Visual Design |
|---|---|
| What will the finished product look like? | The Bootstrap 4 template used in this project was from Start Bootstrap - Coming Soon. |
| A video background of an old style ticking timepiece, marks the passage of time while the player deliberates over the answer to a riddle. | |
| I tried to use typography that works on both mobile and large screens. | |
| What colours, typography and design elements will be used? | I worked with feedback from test users |
-
Tools used
- Written in VSCode
- SQL database was created with SQLite3 (see database included with repository)
- css files were compiled from scss using sass watch (Please see programming comments within the styles.css)
- Tested Chrome dev tools & VSCode debugger
- HTML and CSS checked with help from the Mark-up Validation Service
- Version management and test branches created in git
- Web deployment hosted on Heroku
-
Reference Literature
-
Code Development The project brief was to follow a a pattern of Test Driven Development. A series of tests were written at the start of this project and then the run time function was written, based on the test. I used user feedback to assist with identifying and debugging the code.
Not all functions were written in this way and these will be followed up with tests.
def test_loadUsers(self):
"""
test to check that the plyers can be loaded from the
users file which stores player names and wrong answers.
"""
users = run.loadUsers()
self.assertEqual(len(users), 3)def loadUsers():
"""
Gets our player names from a text file used to store their wrong guesses:
"""
answer_given = []
with open("data/users.txt", "r") as player_answer:
answer_given = player_answer.readlines()
return answer_givendef test_storePlayerName(self):
users = run.storePlayerName()
self.assertGreater(len(users), 0) def storePlayerName(username, answer_given):
"""
Stores player names and wrong answer to a txt file. Adapted from chat app tutorial
that maintained the chat history:
"""
write_to_file('data/users.txt', f'{datetime.now().strftime("%H:%M:%S")}, {username.title()}, {answer_given}\n')def test_loadRiddles(self):
"""
test to check that the users can be loaded from the
json file
"""
riddles = run.loadRiddles()
self.assertEqual(len(riddles), 14)def loadRiddles():
"""
Read the riddles from the riddles txt:
"""
with open("data/riddles.json", "r") as json_data:
data = json.load(json_data)
return datadef test_validateAnswer(self):
"""
test to vslidate the user's answer against our own
from our json file.
"""
riddles = run.loadRiddles()
self.assertEqual(run.validateAnswer(riddles[0],"clock"), True)
self.assertEqual(run.validateAnswer(riddles[0],"house"), False)def validateAnswer(riddle, answer):
"""
check the player's answer against our own
"""
answer_given = request.form["answer"].lower()
return answer_givendef test_count_eq(self):
"""Will succeed"""
self.assertCountEqual(self.result, self.expected)def countRiddles():
"""
Count the number or riddle in out list so we can keep score! This makes our count dynamic.
"""
numRiddles = len(loadRiddles())
return numRiddlesdef newUserScore(username, score):
"""
User's inital score has to be created. This is set to 0 and the score file is created on successful login.
"""
data ={}
data['game'] = []
data['game'].append({
'date': datetime.now().strftime("%d/%m/%Y"),
'username': f'{username}',
'score': (score)
})
"""
Every instance of the game, requiers a dedicated
score board for the game. A pre-existing score,json file is
removed at login, if it is already present.
So, our score alwasy starts from 0.
"""
dir = f'data/player_data/{username}/'
if not os.path.exists(dir):
os.makedirs(dir)
else:
shutil.rmtree(dir) #removes all the subdirectories!
os.makedirs(dir)
# The score board will alwasy write over itself, permitting the score
# to increase.
write_to_json(f'data/player_data/{username}/scores.json', data)def writeScore(username, score):
"""
User's score has to be saved after answering each
riddle. To do this, we rewrite the JSON file.
"""
data ={}
data['game'] = []
data['game'].append({
'date': datetime.now().strftime("%d/%m/%Y"),
'username': f'{username}',
'score': (score)
})
write_to_json(f'data/player_data/{username}/scores.json', data)- Instructions for deployment to a hosing site: Heroku
-
Log into Heroku
-
Select New and Create new App.
-
Create a App name, select the region.
- then Create app.
-
Select Resources.
- then select Find more add-ons.
- Select Heroku Postgres.
- Install Heroku Postgres, using the hobby plan.
-
Return to Personal menu then select ddeveloper72-riddle-me-this.
-
select Deploy
- Note the deployment instructions.
-
Log in to Heroku:
$ heroku login
-
Verify the app name is present, created in step 1 above:
$ heroku apps
-
Connect git to new app location on Heroku:
$ heroku git:remote -addeveloper72-riddle-me-this set git remote herokutohttps://git.heroku.com/ddeveloper72-riddle-me-this.git
-
Create the requirements file, defining the modules imported to Heroku:
sudo pip3freeze --local > requirements.txt
-
Create the proc file:
echo web: python run.py > Procfile
-
Add all project files:
$ git add .
-
Create a default message for the first commit to Heroku:
$ git commit -am "makeit better- Use Heroku"
-
Push the project to Heroku:
$ git push heroku master$ heroku buildpacks:clear
-
Push the project to Heroku
$ git push heroku master(watch the installation log for errors).
-
Scale the app dynos for Heroku:
$ heroku ps:scale web=1
-
Set run.py debug to false before publishing
if __name__ == '__main__': """ #assign a port ID works with cloud9 """ app.run(host=os.environ.get('IP'), port=int(os.environ.get('PORT')), debug=False)
-
Disable Flask developer-mode by setting debug=True to False. Save and execut11.
git add run.py
-
Execute
$ git commit -m "Turned off server developer mode"
-
Execute
$ git push heroku master
-
Save above changes to existing git profile
$ git push
- Select Settings
- Select
Config Vars - set
IPto0.0.0.0 - set
PORTto5000 - set
SECRET_KEYtoSome_Secret
- Select
- Select More, beside Open app:
- Click
Restart all dynos.
- Click
- Click Open app
- Select new tab, Riddle Me This
-
During development, media responsiveness of the game was tested using Chrome dev tools to simulate different small and large screen devices.
-
I later shared my game with family and friends on WhatsApp so that they could follow the Heroku link to the game app and see the game on their mobile handsets. In this way I found that I had to limit the sizes of my riddle images as well as title page images.
-
I found response issues when viewing the game when switching between portrait and landscape modes in my development environment. I was able to correct these by adding in media queries to my sass file.
-
When testing the game in multiplayer mode- I created several player logins by running different browsers simultaneously. The browsers and hardware that I used were:
- Chrome
- Firefox
- Opra Browser
- Internet Explorer
- Edge
- Samsung Galaxy S5
- Samsung Galaxy S8+
I thought that the best way to test this game was to run a beta test by putting the game on Heroku and then letting everyone in my college play it. While doing so, I asked for feedback on the game. This is the feedback I got:
- The riddle answer checks were too literal. eg
A clockfailed, butClockpassed. - The bottom of the masthead template gets cut-off, hiding my footer so it is no longer visible.
- The web page itself doesn't permit a user to scroll down on smaller screens.
- The ordering of the scores from highest to lowest was in random order.
- Clicking the home button on the nav bar started the riddle game again, but didn't reset the score to 0.
- The image on the index page was too big when seen on a mobile device.
- The log in, log out and sign up nav links were disabled on certain pages by design, but still visible.
- I had written in an overflow-x scroll-bar feature for riddles, which were sometimes too long to view on the screen. User feedback was to remove this as it was too awkward to use on computers with smaller screens.
- If a player closes the browser without logging out of the game, they remain in session, when they open game again. _
- I changed the checking system between player answer and riddle answer from the same as to is in. (from
==toìs). - I changed the masthead height to 100% and added overflow-y scroll. This was a very difficult fix to resolve, because it wasn't know what was causing the problem preventing vertical page scrolling.
- I had been experimenting with the leader board code and had left the return resulting brackets when I shouldn't have.
- In the @app.route('/') I added a line to the if statement which I use on the login decorator. It creates a new player score, which is set at 0. So the player can play the game again without having to log out and log back in again.
- I added a media queries for the main image as well as the leader board images for smaller screen sizes.
- I implemented an if else flask function which uses session, to manage the navbar login, logout and sign-up nav links for the secure and insecure areas of the site.
- I added a height auto to the riddles dialog box, so as to remove the need for the vertical scroll bars.
- I haven't implemented a solution yet, to log a player out of the game, if they close the browser window. I am currently researching [Flask.session persisting after close browser(https://stackoverflow.com/questions/37227780/flask-session-persisting-after-close-brower).
-
I used Victorian Era Riddles that have been sourced with thanks from the Gutenberg Project.
-
There are loads of people that I want to give credit to. These include, first and foremost my family for their support!
-
My friends within the Code Institute who go by the Slack handles @JoWings, @Eventret, @Miro, @saraloh, @JohnL3, @Sonya my Mentor, Nishant and tutors @niel_ci and @nakita_ci and many others. You guys have helped me to find my way, introduced me to using various online resources like Pretty Printed and personally shared resources like UXD design templates-to help keep my thoughts on task and on track and help with my C9 coding environment. Thank you ladies and gentlemen!
-
To create a login function for my game site, I adapted the tutorial from Pretty Printed to create an SQL dataset for storing my player names and passwords in an secure environment. The tutorial which I followed was called: Build a User Login System With Flask-Login, Flask-WTForms, Flask-Bootstrap, and Flask-SQLAlchemy.