The user can play a game of Yahtzee with a friend on the same machine or against the computer. A tutorial provides instructions on how the game works on this site and the Yahtzee game rules in general.

link to the "Yahtzee Dice Roller" site
TIP! >>> press CTRL while clicking on a link opens the page in a new tab <<< TIP!

• quick and easy game set up

  

  • "add human player"
    • add as many players as you like (to be played manually on one machine)
  • "add cpu player"
    • add as many players as you like (to be played by the computer)
  • "tutorial"
    • explains how the game works on this site and the rules of Yahtzee
  • "restart game"
    • clears the the "game table" for a new game

• player name

  

  • individual names can be given to the players
  • JavaScript is checking that the same name can not be used twice

• "game-logic"

  

  • the possible choices which the play has are highlighted by the "game-logic"
    (you can see in the image above, that "Player 1" rolled two twos but no ones. The "game-logic" highlighted 4 points in "twos" but no "ones".)
  • the player is guided through flashing-buttons (e.g. next player and where he can write points)

• "cpu player"

  

  • makes decisions which dices to roll and where to write the points
  • communicates with the human player via text and sound

• see what the computer is doing

  

  • with the chrome "dev tool" (F12) the console can be opened in which the "player-object" and some important values are displayed while the cpu is playing ( JavaScript game logic control flow graph)

• intuitive game design

  

  • easy to understand symbols make the game accessible to a wide variety of players

• tutorial

  • explains how the game works
  • explains the Yahtzee game rules
  • easy to navigate through a navigation bar which sticks to the top of the screen

• "mobile first" design

  

  • can be easily played on a smart phone with a big screen
  • buttons have been given enough spaced to avoid mistakes
  • only up and down scrolling (only side scrolling if there are more than three players set up)

• adding a setting menu, to customize user profile, dice color, theme
• adding a data base would allow the user to save there profile and high score
• increase sites "Lighthouse" performers by minimizing "Cumulative Layout Shift",

Please, follow this link for the "customer story" and "user experience".

Please, have a look at the diagram for the JavaScript game logic!
clicking on this link -> JavaScript game logic

1. Browser Testing:

   • functionality- and layout- tests where successful on: "Chrome", "Mozilla Firefox" and "Microsoft Edge"
   • because the tester has no access to "Safari", the site was not tested on that browser (Apple does not support the Windows version of Safari any longer.)

2. Validator Testing

   • HTML Nu Html Checker :

     • test returned clean, NO ERRORS or warnings

   • CSS Jigsaw Test :

     • the document validates as CSS level 3 + SVG !
     • test returned clean, NO ERRORS and 28 warnings which are related to "safari" and "Mozilla" code (e.g. -webkit-border-radius, -moz-animation)

       

   • JavaScript JSHint :
     (config: New JavaScript features (ES6): ON | Unused variables: OFF )
     (JavaScript is split into 3 flies, to improve maintainability and readability. Unused variable option is turned off for the test because functions are imported between files and variable could be used during runtime.)

     • script.js (base script)
       • NO ERRORS and no warnings
       • There are 4 functions in this file.
       • Function with the largest signature take 1 arguments, while the median is 0.
       • Largest function has 2 statements in it, while the median is 1.
       • The most complex function has a cyclomatic complexity value of 2 while the median is 1.
     • function.js (containing all the code for the base game)
       • NO ERRORS and 6 warnings
       • There are 28 functions in this file.
       • Function with the largest signature take 2 arguments, while the median is 1.
       • Largest function has 206 statements in it, while the median is 6.
       • The most complex function has a cyclomatic complexity value of 60 while the median is 2.
     • cpu.js (containing all the code for the "computer" player)
       • NO ERRORS and 12 warnings
       • There are 106 functions in this file.
       • Function with the largest signature take 3 arguments, while the median is 0.
       • Largest function has 49 statements in it, while the median is 1.
       • The most complex function has a cyclomatic complexity value of 109 while the median is 1

     NOTE: All 18 warnings are related to semantics, but they are necessary for the script to function correctly ( "Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (i)" )

3. Performance Test

   • Lighthouse (desktop) report:
     
     • the performance could be improved by minimizing "Cumulative Layout Shift",
       link to article -> smashingmagazine

• dice does not turn:

  • The animation for the dices is triggered after a random number (between 1-6) for each of the (unlocked) dices has been generated. The "class" of the dice changes, which triggers the animation and determines the shown number (e.g. "class="show-1" will show the dice with one dot).
    The bug happens when the same number is randomly generated as already shown on the dice. (e.g. one is the starting number and one is shown again)

• dice from previous player can be locked:

  • It is possible to cheat by locking the "lock" on the dices after the previews player has finished there turn
    (e.g. the previous player has rolled an "Yahtzee", now I could lock the dices before I start to roll)

• HTML for marking up the text elements on the site
• CSS for styling the site
• JavaScript for functionality and logic
• Git for version control (back up)
• GitHub for making the source code accessible and deploying the site via "GitHub Pages"

The site was deployed to "GitHub Pages". The steps to deploy are as follows:

1. In the GitHub repository, navigate to the "Settings" tab.

2. In the "Settings" tab, navigate to the "Pages" tab.

3. In the section "GitHub Pages":

   • From the "Source" section drop-down menu, select the "main" Branch and click on "Save"

   • above a message appears "Your site is published at ... " with the link to the GitHub Page

     

The live link to the "Yahtzee Dice Roller" GitHub Page can be found
here -> https://zolske.github.io/yahtzee-dice-roller/ .

I would like to thank the creators of the free tools, art and tutorials which have made this site possible.

• the code for the dice animation is based on
  Lena Stanleys Roll the dice! and
  CHRIS GODBER How to Create 3D Rolling Dice with CSS and JavaScript
• the Yahtzee game rules for the tutorial are from Ultra Board Games
• the flashing button animation is from Muhammad Arslan Aslam and his code can be found on codepen
• the robot ".gif" is from "Graphic Mama"
• the emojis are from html-css-js
• "tutorial navbar" is based on the code from w3schools
• the font for the heading is "Monoton" and was created by "Vernon Adams" (you can follow him on sansoxygen)

• code editing was done with vscode
• the sound was downloaded from mixkit
• the logo was created with freelogodesign
• the favicon was converted with favicon
• the wireframe was done with figma
• the images are from ...
  • ... unsplash and
  • ... pixelbay
• the color palette was created with coolors
• the gradients where coded with cssgradient
• icons are from flaticon
• the sprite has been made with Responsive CSS Sprites
• the gif was created with Screen to Gif
• the mock up was created with techsini
• the font was imported from Fonts Google
• control flow graph was created with diagrams

• w3schools Very good site to look things up for a basic explanation. They have also a very good section where components are shown and explained How To ...
• MDN Web Docs Very technical explanation.
• Coding with Mosh Very good video tutorials, no time waster, straight to the point!

• Code Institute for providing me with the learning materials and student support.
• Spencer Barriball my Mentor. Thank you for your advise and support. (especially for the article on JavaScript promises)