Decorating the game

Before moving to the core game logic, we decorate the game's layout with graphics.

Prepare for lift off

The required graphics assets are shown in the following screenshot. Let's put the image files into the images folder:

Engage thrusters

In these steps, we add the graphics to beautify our DOM elements:

1. First, we add the background and border image to the customer view:

   #customer-view {
     background: url(../images/stand-background.png) center center no-repeat;
     background-size: cover;
     border-style: solid;
     border-width: 26px 32px 42px 32px;
     border-image: url(../images/sushi-stand-border.png) 26 32 42 32 repeat;
   }

2. The border's width affects the canvas's size. In the view.js file, we add the following function to get the border width style from the computed style:

   var getBorderWidths = function(element) {
   // get computed style.
   var style = getComputedStyle(element);
   
     // return the 4 values as object.
     return {
       top: parseInt(style.borderTopWidth...