- The purpose of the Rule the Story game is to inspire milenials and generation Z to read more while enjoying playing the game where they decide how the story unfolds.
The idea has been inspired by Bundersnatch episode from Black Mirror series, but in this case it will be text based. There are many "Choose your own adventure" games, however most of them are done in the last century. Rule the Story is a way to bring back a retro game using new technologies.
This project will have three pages, which are: "Home", "Story" and "Feedback" pages. The "Home" page has pop up box with a little description of the game, sound effect and click here button which leads user to "Story" page. The "Story" page has the game itself - text with two or more choices.
This website is targeting from teenagers to middle aged groups, for those who enjoy reading and would like to be truly involved in the story. Users here can choose how character will procceed, which will make them feel as part of the story.
User Stories
- I want to easily understand the main purpose of the site.
- I want to intuitively navigate throughout the site and easily start the game itself.
- I want to see engaging design and content.
- I want the game being easily accepable and being able to get to it without too many clicks
- I want story to be interesting as well as choices options
- I want to be able to restart the game should I get to the dead end.
- I have chosen simple design and navigation. The Home page to have pop up box with text animated gif/ image, click button as a link to the Story page and the welcome sound. At the top of each page to have navbar with the logo.
- For the Story page to have story text followed by the options to choose from and once certain options chosen to have images dispayed. Additionally, once user gets to dead end to have a sound effect.
- For the Feedback page to have contact input information and text area which once submited to have it sent to my email using emailjs.
- I have used mixed content of text, images and sounds.
I decided to separate the website into three pages: the Home page, Begin Your Adventure page and Feedback page.
I used a very simple layout with two predominant dark colors, while playing their shades. For logo I used rainbow text-shadow to give the pages retro look. All buttons, content boxes and input fields are in rounded shapes, which creates consistency and harmony throughout all 3 pages.
- Gif was used for Home page to add a little bit of visual interactivity.
-
-
- Main colors of the website are - black, purple and white. This colourscheme is consistant throughout all pages and in my opinion the best for retro look. For the buttons I used slightly lighter shade of purple with black borders and when hover over it reverses border and background colours. For the logo - rainbow text-shadow has been used.
-
- The Orbitron font used for logo/name of the website. While Play font is the main font used throughout the whole website with Sans Serif as the fallback font in case the font isn't loading. Orbitron is perfect for retro looking logo and combining with rainbow text-shadow. Play is very similar to Orbitron in the way it shaped, which creates uniformity throughout the whole website. Play has as well a retro while still is nicely spaced out and easy to read.
-
- Font Awesome was used for icons and they are psent on all pages at the footer.
-
- The navbar's background has been designed with a vertical gradient-style fading to the body, creating seamless transition to black body background.
- Nav elements have rounded shapes placed in the centre right underneath the logo.
- Logo can be clicked on any page and it will take the user to home one.
- For the logo a rainbow text-shadow declaration have been used.
- Content box is present in the middle of the body
- Box shadow declaration used for the content box
- Gif added to the content box
- Underneath gif and text is button "Click Here!" that takes user to Begin your Adventure page.
- In the middle of the page content box is present similar to the one on Home page
- Content box have same as home page box shadow present
- Text for the game is wrapper in another container to have a white background
- Text for the game is changing depending on user's choice of actions
- Buttons inside content box underneeth the text are in the same style as navbar buttons for the consistency, however the font weight is 400 instead of 700 for easier readability as they contain more text
- Each button inside content box is the choices for a user to pick from for the desired story involvement
- When arrive to dead end the restart button takes you to the begining
- Contains form to fill out for leaving feedback or requesting a new content
- EmailJS used to link the form to my email
- The same as header vertical gradient-style fade has been aplied
- Feedback link can be clicked for user to go straight to feedback page
- Social media icons link to my profile pages
- Music effects when arrive to the dead end.
- Visual ilustrations to curtain scenes
- Ability to get, exchange and store items
- Bootstrap v5.0 - A mobile-first responsive library used to construct various parts of the website, including the Navbar, Grid System Buttons.
- GoogleFonts - Orbitron and Play fonts
- FontAwesome - Used for icons used for the footer
- Balsamiq - used for creating the wireframes
- Github - Used to store the code and to deploy the website.
- Gitpod - Used as the primary version control IDE for development to further push and commit code to Gihub.
- Code Institute Course Content - Main learning base as well as inspiration for curtain features.
- ChromeDevTools - Used frequently to check layout, responsivness and any malfunctions, especially using console for JS functionality.
- W3Schools - used for CSS coding for gradient navbar.
- HTML.am - Used for Copyright sign code.
- Mathew Lein - Used for rainbox text-shadow for the logo.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent