1. About the project
   1. User Goals
   2. Owner Goals
2. Website structure
   1. Landing Page and Story Content
3. Wireframes
   1. Mobile
   2. Desktop
   3. Narrative
4. Design
   1. Colours
   2. Typography
   3. Imagery
   4. Future Development
5. Testing
   1. HTML Validator
   2. Jigsaw CSS Validator
   3. JS Hint
   4. Lighthouse Accessibility (DevTools)
   5. Manual testing
6. Bugs and fixes
7. Deployment
   1. GitHub Pages
   2. Forking Repository
   3. Cloning the project
8. Used technologies and credits
   1. Languages
   2. Content
   3. Media
   4. Other technologies
   5. Credits

StoryCraft is designed to be a shortform narrative game in which the user can make meaningful choices.

• Experience a full story, from beginning to end, in a short amount of time.
• Encounter choices that are not merely cosmetic but have different characteristics and lead to different results.
• Navigate easily through a clear, readable website.

• Present a short narrative that balances genuine story branching with the need to avoid scope creep.
• Provide a clear user interface that does not obstruct the story experience.

The website is presented as a single page, the content of which changes as the user advances through the story. As all content should be displayed on a single screen at all times, without the need to scroll, a navbar proper is not needed. However, a hamburger icon with dropdown menu is provided to clarify how to play the game and what controls can be used, in case such information is not apparent to the user.

• The user may find it jarring to be immediately confronted with story content and choices, without any explanation of what the site is and what users can do there. As such, on loading the site, the user immediately encounters a brief description of the site and is invited to begin a story by pressing the Start button. The user will not see this invitation again unless they reload the page.
• Once the Start button is pressed, the user will exclusively experience story content (unless they reload the site or consult the menu). Story content consists of some establishing text and a number of choices which may be taken to advance the story. Eventually, the user's choices lead to an ending being locked in. Once this occurs, the "choices" are reduced to one. By selecting this sole remaining "choice," the user reaches one of the story's five endings. The user may then begin again from the start. Additionally, the option to begin again is always present at the bottom of the page.

The site was prototyped in GIMP using the initially chosen colour palette and background image. While some elements changed as the project developed and its scope was altered, several aspects of the initial design persisted to the final product. Both mobile and desktop wireframes show a portrait feature that did not make the final version of the site, as scope was reduced to achieve minimum viable product within the associated timeframe.

• The mobile version of the site was wireframed first. Working with a small gameplay area made it clear that each story element should be relatively short, so that all story content could be displayed on small devices without scrolling. This visual restriction supported the narrative aim of offering a story experience that can be read relatively quickly and easily.

• The desktop version of the site has a larger area for story content. However, with the amount of story content remaining the same, it becomes clear that allowing the gameplay area to stretch to almost full desktop width offers no additional utility. By limiting the width of the gameplay area on larger screens, some aesthetic utility is gained as more of the background image is allowed to appear.

• As well as the usual wireframing, the particulars of a narrative game called for "wireframing" the story. This was done in several stages, with the first narrative wireframe including barebones versions of three stories and the beginning of a proposed fourth story. However, due to time limitations, only one story was ultimately written in full and implemented in the live site (this is represented in yellow in the narrative wireframe image). Narrative wireframing took place in Flamewind Conversation Editor 2.0, a standalone version of the conversation editor from Bioware's Aurora Toolset.

• The single story implemented in the live site was elaborated from the wireframe in the conversation editor of Bioware's Aurora Toolset, a tool designed to easily create and track narrative content. If the story had been written directly in the script, it would have been difficult to track which choices led to which nodes without making mistakes. The Aurora Toolset made this aspect of development much smoother. Giving each story node a number in the Aurora Toolset allowed the content to be transferred easily to the storyNodes variable in script.js, with each story number in the toolset tracking directly to a story id in the variable. In the image below, story nodes are shown in red, choices in blue, and links in grey. (Links are used to channel a branch of a story back towards existing content, to prevent the story growing exponentially every time choices are offered.) In this image, each choice has an associated character, so that readers of this readme can understand where the links lead. These characters were not used in script.js and exist solely for documentation purposes.

• A minimalist colour scheme of dark grey backgrounds and very light grey text was chosen for the website. These colours offer a level of contrast that ensures readability.
• In the website as initially imagined, the background image (and user portrait, a feature not ultimately implemented) would change based on choices made by the user. The changing images would use a wide range of different colours, but the main gameplay area would stay dark grey, a neutral colour that would not clash with the other elements.

• Fondamento: this clear, clean calligraphic font is used to make the site logo in the upper left corner stand out.
• Dosis: this rounded sans-serif font, chosen for readability, is used in all content apart from the site logo.

• The source for the arrow in the dropdown menu is Font Awesome. The arrow is used to delineate between menu items and the instructions that display when menu items are clicked.
• When looking at the background image as a whole, one sees a landscape. However, inspecting particular details shows artistic elements of chaos that evoke the central experience conveyed in the story.

• In addition to wireframed stories that were not completed, a future version of the site could include planned visual elements that were cut due to time constraints. Examples of cut content include portraits that age when the story time-skips and backgrounds that change as the story develops. The aging portraits would be suitable for the sole implemented story, while most of the backgrounds would be more suited to the proposed additional stories which are currently only wireframed. See the images below for a range of this proposed content.

No errors were returned when passing through the official W3C validator.

No errors were returned when passing through the official Jigsaw validator.

Only metrics were returned when passing through JS Hint.

Running the site through Lighthouse, checking both mobile and desktop versions, resulted in the following reports:

• I tested that the site works in different browsers: Edge, Chrome, Firefox.
• Via Chrome DevTools, I tested the responsiveness of the site across a range of screen sizes, from phone to tablet to desktop.

• The dropdown menu caused persistent issues, preventing choices from being selected even when it was not dropped down. This bug was caused by a misunderstood adaptation of the tutorial followed to create this content. Once it was understood that the inactive menu needed to be both opaque and moved to the side of the page, this bug was fixed.
• The site was not developed with landscape phone view in mind, but rather a portrait view. User reports indicted that it did not work in landscape mode. Additional media queries were added to address this issue.

The steps to deploy via GitHub pages:

1. Log in to GitHub and locate the GitHub Repository.
2. Click the "Settings" option at the top of the repository.
3. Click the "Pages" option on the left-hand menu, located near the bottom.
4. Within the "Source" tab Select the drop-down titled "None".
5. Select the branch named "main" (it is sometimes named "Master").
6. Click "Save".
7. You will be prompted with a URL to your site, which is now deployed.

By forking the GitHub repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository. Follow these steps:

1. Log in to GitHub and locate the GitHub Repository that you want to fork.
2. In the upper right of the repository, click the "Fork" button.
3. A copy of the repository will now be available within your repositories.

This copy of the code can be edited without affecting the original code.

To make a local clone of the project, follow these steps:

1. Log into your GitHub account.
2. Navigate to the Repository.
3. In the upper section of the repository, click the dropdown named "Code".
4. Copy the SHH address.
5. Open GitBash.
6. Navigate to the correct directory.
7. Create a new directory named "storycraft".
8. CD into "storycraft".
9. Enter "git clone SSH_ADDRESS".
10. GitBash will clone the repository into this directory.
11. Enter "code ." which will open VS CODE.

• HTML5
• CSS3
• JavaScript

• Code to show and move between story nodes is adapted from a tutorial by YouTube user Web Dev Simplified.
• The hamburger icon and dropdown menu are adapted from a tutorial by YouTube user codefoxx.
• The Unicorn Revealer browser extension was used to quickly and clearly identify which styling elements were causing overflow.
• Narrative wireframing was done in Flamewind Conversation Editor 2.0. However, due to encountering some bugs in Flamewind, story development moved to the Bioware Aurora Toolset when writing the full version of the story.

• The background image was generated by 0kellyo on Artbreeder, then lightly edited for visual consistency. The removed element of the image looks at first glance like a watermark, but in fact is not, as it disappears if some Artbreeder settings are changed. Had a genuine watermark been present, it would not have been removed.
• Image compression was done via Tiny PNG.
• Image editing, including site prototyping, was performed using GIMP 2.10.24.
• The arrow used in the menu comes from FontAwesome.
• Fonts used throughout the website are imported from Google Fonts.
• Colours were chosen and checked for contrast on Contrast Grid.

• GitHub provided a repository for the website.

• Code Institute Slack Fellow members of the Code Institute on Slack provided an invaluable database of information and community of support. I am particularly grateful to the msletb-nov-2021 cohort, our facilitator Kasia, and my mentor Darío.