Before moving to the core game logic, we decorate the game's layout with graphics.
The required graphics assets are shown in the following screenshot. Let's put the image files into the images folder:
In these steps, we add the graphics to beautify our DOM elements:
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; }The border's width affects the canvas's size. In the
view.jsfile, 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), right: parseInt...