Digi & Dice is an online initiative dice roller for table top and/or online Dungeons and Dragons player. Designed specifically for those days when you forget to pack you d20 for battle.
The Digi & Dice project is a user centric interactive Front-End Development website. This is my second project as part of the Diploma in Software Development at Code Institute.
Link to live website: https://anabramos.github.io/Digi-n-Dice/
-
Header & logo
- The header is situated at the top of the page, with the logo of the Digi & Dice to the left. The logo brings the distinct dragon in the shape of the icon & that can be recognized by all true D&D players.
- The Digi & Dice logo also functions as an anchor link to the homepage in case the user wishes to refresh/restart/load the page again.
-
Quote section
- As part of the interactivity of the page, the user will find a variety of quotes related to D&D coming back every 3 seconds to engage them with the website and attract their interest.
- This feature is disabled for side-bar and mobile mode (screens with max-width of 620px).
-
Initiative dice roll section
- The dice roll functionality is built so that users can include their initiative modifiers and the initiative roll will calculate the sum of these two values.
- If no initiative modifier is provided when performing a dice roll, the user will receive as a result a reminder to add its modifier.
- When the user clicks on the dice roll button having added a valid initiative modifier value, they will receive as a response the already calculated total initiative value of their roll + initiative modifier.
-
Initiative history section
- The initiative history section will log the results of a user's initiative rolls up until a maximum of 7 rolls.
- After 7 rolls, for every new dice roll the latest logged initiatives will be deleted, giving room for the newest one.
- This feature allows the user to see their latest rolled initiative especially in cases where you get inspiration, help and/or advantage and need to compare/sum two different rolls.
-
Initiative triggered gif section
- Another interactive feature of Digi & Dice is the gif display triggered by the initiative value rolled.
- For lower initiative values (initiative < 7) the section will display gifs that translate the slowness of the action.
- For medium initiative values (initiative > 7 && initiative < 13) the section will display gifs that translate the medium pace of the action.
- For high initiative values (initiative > 13) the section will display gifs that translate the speediness of the action.
- This feature is disabled for side-bar and mobile mode (screens with max-width of 620px).
-
Footer
- The footer credits the creator of the website.
- Implement an API for quote and gif generators
- Expand the dice roll beyond initiative rolls (d20) to include also d4, d6, d8, d10, and d12.
The user experience for the website is built with 2 personas in mind. Each persona presents a different user story and different goals when accessing the website.
-
Personas
- Persona 1: Tabletop player.
- Persona 2: Online player.
- Persona 3: New D&D player
-
User stories
-
A tabletop player:
- I often play D&D with my party in person around a table.
- I want an initiative dice roller that can be used by the whole party.
- We need to have the history of initiative rolled up to 5 party members.
- We would like to have fun while using the online dice roller.
-
An online player:
- I often play D&D online
- I require a vertical side-bar version of an initiative dice roller only with the most basic features.
- I do not want to have to scroll down on the website to see the results.
-
A new D&D player:
- I am still getting familiar with the different dice rolls.
- I want to use an online dice roller that will clearly state the kind of dice I should be using for a certain action (initiative d20).
- I want to learn from the website what different roll values stand for and how to calculate these values.
-
-
Digi & Dice goals with the website:
- Attract D&D enthusiasts to make use of the website.
- Create an interactive and fun experience for group parties using the website.
-
Compatibility & Responsiveness
- The website was tested and it is working on different browsers: Google Chrome, Firefox, and Microsoft Edge.
- Tested on different devices using Chrome DevTools and other available from myself and friends.
- The website is responsive on screen widths from 2560px to 320px.
-
Header/Logo
- The internal link in the logo is working and opening the home page as desired.
-
Quote section
- The quote section is working and displaying a random quote every 3 seconds.
-
Modifier input field
- The modifier input field is working and will only accept number inputs.
- The modifier input field is required, which means if the user does not fill in the calculation for initiative will not happen and the user will receive a message requiring to do so.
-
Roll dice button
- The button is working and providing the correct output based on the calculation it does.
- When the button is clicked, it will trigger 3 things:
- Display an initiative number or a request for the user to provide an initiative modifier;
- Display the calculation of the initiative in the 'initiative history box' on the top of the list, with distinct style;
- Display a gif that corresponds with the initiative number rolled.
-
Initiative history container
- All initiatives rolled are being logged properly into the container, including being added to the top of the list in different styling.
- The sum between the dice roll and initiative modifier is working correctly.
During a game friends of mine tested the website in their own mobiles, laptops, etc.
-
Overall Navigation
- No issues reported.
-
Website Responsiveness
- Issue reported with horizontal scrolling caused by the footer content. Changes to address this issue were implemented by giving the footer a different content in smaller screen sizes.
- Issue reported with gifs that were either displaying in line with other containers or below it. Changes to address this issue were implemented by adding different styling to the div holding the gifs section.
-
Dice roll section
- No issues reported.
-
Initiative history section
- Issue reported with the way in which the initiative history is logged, which was displayed in line and not very transparent in regards to the dice roll. Changes to address this issue were implemented by displaying the initiative history log in a list format and presenting the entire calculation rather than just the initiative number.
While building Digi & Dice, many things were not working as expected. Some bugs I encountered were:
-
When building the quotes section I used the setInterval() method to display a random quote every 3 seconds after the loading of the DOM. Initially I could see the placeholder welcome text would change to a quote after 3 seconds, but this would then stay on as the only displayed quote. This happened because the randomQuote variable had been defined outside the function (and therefore was out of scope), and it was returning the already defined random quote. By introducing this variable inside the loadRandomQuote() function I was able to fix the bug and make a new random quote appear every 3 seconds.
-
When using JavaScript to get the value of the element with id = "modifier" this was returning as a string value and therefore was printing the sum of the dice roll and initiative modifier one after the other. Example: dice roll = 15 and initiative modifier = 3, the sum was logging 153. To fix this I have used the .valueAsNumber property.
-
My HTML code was not passing the W3C validation because my img tag had no src attribute, which was because there was a condition in my JavaScript document that would add a src to the tag based on the initiative that was rolled. To avoid having errors in this situation I have created a square image with same color background as the website so that this is the initial src attribute of the img tag while still looking like the page is empty.
-
Because I have made use of the 'click' event listener I have not used a submit type button, but rather just a button. In this case, I was not able to use the required attribute on my modifier input field and therefore decided to create an if/else statement to print a reminder paragraph for users who do not fill in their initiative modifiers.
- On Mozila Firefox the initiative history container creates a bigger top margin gap in comparison with the roll dice box container, making one box taller than the other. This however does not impact the functionality of the website and main features.
-
HTML
- No errors or warnings returned from the W3C Markup Validator Service
-
CSS
- No errors or warnings returned from the W3C CSS Validator Service
-
JavaScript
- No errors, warnings or bugs returned from the JSHint
-
The color pallet and contrast for the website was tested on WebAIM
-
The website has been tested on lighthouse for accessibility.
- Desktop
- Mobile
The website was deployed using GitHub Pages. For that, the following steps were taken:
-
From the GitHub repository page go to 'Settings'.
-
From 'Settings', scroll until the 'GitHub Pages' section.
-
At the 'GitHub Pages' section open the dedicated GitHub Pages tab by clicking on the link.
-
In the new tab select the main branch using the dropdown menu and click 'Save'.
-
A link will be provided where the website is now published.
- After deployment the live website link was available at most devices from friends, colleagues and CI community members but not on my own computer. After consulting tutor support and research on stack overflow, I made an empty commit (which was recommended) and then the website became available again.
- Forking
- To use this project as a reference or starting point, or even to propose changes to it, you can fork this repository by following these steps:
- From the GitHub repository page click on 'Fork' in the top-right corner.
- Create a new repository with a new name based on this project.
- Make sure to credit the project in case you decide to use any of the original code.
- To use this project as a reference or starting point, or even to propose changes to it, you can fork this repository by following these steps:
-
Colors
-
The website colors are inspired by D&D Fire dragons. It uses different shades of red and dark red with yellow details to create contrast between text and background.
-
-
Fonts
- The website uses a combination of Josefin Slab and Special Elite fonts, with a fall back to sans-serif. These fonts are popularly paired together. Special Elite is used in the website for high-level headings while Josefin Slab is used for regular text and low level headings. The fonts were compared and taken from Google Fonts.
-
Icons
- This website makes use of icons from Font Awesome to give a new visual element and reference existing imagery from Dungeons and Dragons. The Icons are used to indicate the purpose of the website.
-
Gifs
- All gifs for this project were taken from GIPHY.
-
Languages
-
Libraries & Frameworks
-
Tools
-
Content
- All code for this project was written by myself: Ana Ramos Barretto.
-
Media
- All gifs for this website were taken from GIPHY.
A huge thanks to my mentor Samantha Dartnall, the CI slack community and tutoring team, my party the Erasmus Eradicators and DM who tested the website during our last game.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent