This website is my second milestone project about Interactive Frontend Development at Code Institute. I've had a long brainstorm session about what to create for this project and decided to build a card game I sometimes play with friends. The game is all about luck with a 50/50 win ratio per round where there are four rounds in total. My main goal is to make the game realistic so that you actually have a pack of cards where the program is the dealer. In this way it is possible to count cards and beat the game the deeper you get in untill the deck is empty and needs to be reshuffled.
Note: There is no button to go back to the intro screen but this is on purpose since all the information and settings can be find after at the settings view.
Hosted on GitHub Pages Repository on GitHub
Expected users of the website are people who want to play an easy card game but have no card deck available.
- You are at someones party and like to play a quick game of Bussen with some friends
- Friends travelling who wish to play a card game at an overnight stop
- Just arrived at the hotel with some friends but no card deck available
- Travelling with public transport and you try to speed up the time
- Waiting for your doctors appointment and wondering how many times you can win
On larger screens You will find a picture of a schoolbus because the game is about riding the buss and trying to get off.
.
For fonts I tried to give it a look with rectangular shapes to fit the game.
- Fonts:
- Titles: font-family: 'Bebas Neue', cursive;
- Text: font-family: 'Ubuntu', sans-serif;
Colors, cards and backgrounds are customizable by the user with a default setting, with an exception to the introduction screen. All custom card designs are made by myself in photoshop by using copyright plus edit free images found from google. I've chosen to let the user decide the colors and designs so that the application is more interactive which is the main goal of this project.
- For a neutral but modern look the introduction page has a background of
#B3B3B3 - Color schemes:
- default Dark: text-color
#FAFAFA, background-color#000000 - Light: text-color
#000000, background-color#FAFAFA - Blue: text-color
#000000, background-color#00f0ff - Red: text-color
#000000, background-color#ff0000
- default Dark: text-color
- Backgrounds:
- Card designs:
- default Default.
- English Bus.
- City Skyline.
- Dragon Ball.
- Super Saiyan Goku.
The base idea gave me a good impression on how the game itself should look like but the end result is totaly different:
Features planned, implemented and outlined for later development
- Documentation - ReadMe File & Mockups
- Working Card Game
- Realistic Game Mechanics
- Colour Schemes
- Custom Backgrounds
- Customizable Card
- Statistical Information
- Personal Stats By Player
- Bootstrap - HTML, CSS Framework
- Grid System - Columns and Rows
- Responsive design - Mobile First
- UX elements
- User Flow
- Animations
- Transitions
- Accesibility
- Git - Version Control System
- GitHub - Remote Repository
- Deployed - Hosted on Github Pages
- Documentation - ReadMe File & Mockups
- Working Card Game
- Realistic Game Mechanics
- Colour Schemes
- Custom Backgrounds
- Customizable Card
- Statistical Information
- Bootstrap - HTML, CSS Framework
- Grid System - Columns and Rows
- Responsive design - Mobile First
- UX elements
- User Flow
- Animations
- Transitions
- Accesibility
- Git - Version Control System
- GitHub - Remote Repository
- Deployed - Hosted on Github Pages
- Personal Stats For Player
- Wider Variation Of Color Schemes
- Wider Variation Of Backgrounds
- Wider Variation Of Card Designs
This project makes use of:
- HTML
- HTML for basic strucutre
- CSS
- CSS for Styling
- Bootstrap
- HTML and CSS Framework from Bootstrap
- Javascript
- JavaScript for game application
- jQuery
- The project uses JQuery to simplify DOM manipulation
- Visual Studio Code
- Changed to local workspace where I used VS Code as editor
- Google Chrome
- Used for browser and dev tools
- Mozilla Firefox
- Used for browser and dev tools
- Safari
- Used for test purpose
- Internet Explorer 11
- Used for test purpose
- Google
- Google was used for research.
- Git
- Git used for Version Control
- GitHub
- Repository hosted on GitHub
- Github Pages
- Website hosted on Github Pages
- Am I Responsive
- Testing responsiveness of the website
The website was tested by users regularly and for errors on W3. Most bugs and errors came up on mobile IOS devices and have all been addressed.
Preview was send regularly to people within my social circle and asked for testing.
- Sending website location to specific users over messaging.
- Collecting feedback.
- Address and find possible solutions.
- Test if solutions fix the specific problem and implement the solution.
Testing has been done on the following mobile devices:
- Samsung S9+
- Samsung S7
- Oneplus 7 Pro
- Iphone 11
- Iphone 6
- Iphone SE
- Ipad Pro
Testing has been done in the following browsers:
- Safari (mobile)
- Mozilla Firefox (desktop)
- Google Chrome (desktop and mobile)
- Internet Explorer 11 (desktop)
Know Bugs:
- On mobile phones the background images jumps when the address bar appears/hides.
After complete product start to addres coding errors:
- Go to W3's validation websites HTML or CSS.
- Fill in URL of every specific page and look for errors.
- Locate errors and solve accordingly.
- After all errors are solved go back to step 1 and continue untill no errors are shown.
The project is hosted on GitHub Pages
The process involved:
- Host a git repository on GitHub. Explained here.
- The root folder contains README.md and index.html files
- On GitHub repository settings page move to GitHub Pages section
- Change source to master branch. (Or any desired branch)
- Provided link will be your projects home (index) page.
To deploy your own version of the website:
- Have git installed
- Visit the repository
- Click 'Clone or download' and copy the code for http
- Open your chosen IDE (Cloud9, VS Code, etc.)
- Open a terminal in your root directory
- Type 'git clone ' followed by the code taken from github repository
git clone https://github.com/Albastraoz/bussen.git
- When this completes you have your own version of the website
- Feel free to make any changes to it
- The website can be run by opening one of the HTML files within a web browser
- Visit the link provided
- Your website with any made changes will appear
- Saved changes to the website will appear here after refreshing the page
The benefits of hosting your website on GitHub pages is that any pushed changes to your project will automatically update the website. Development branches can be created and merged to the master when complete.
It may take a moment for changes to appear on the hosted website.
Fonts are imported from Google fonts:
All media is edited by myself in order to fit the website. The images for the website are copyright free and taken from:
All images direct location:
- schoolbus.png
- background_texture_green.jpg
- background_texture_red.jpg
- background_sunset.jpg
- background_clouds.jpg
- background_amsterdam.jpg
- All vector playing cards
- card_cover_default.png
- card_cover_goku.png
- card_cover_gokusuper.png
- card_cover_englishbus.png
- card_cover_tokyo.png
Thank you to the following for inspiration, motivation and the direction I needed:
- Seun Owonikoko @seun_mentor
- Aart Kaal Testing application
- Monique Kroon Testing application
- Yung-Chin Huang Testing application
- Code Institute
- Google - your best friend