Creating a Sushi Shop Game with Device Scaling - HTML5 Game Development - page 302

#status-bar {
float: left;
width: auto;
padding-left: 3px;
padding-right: 3px;
border-right: 1px solid #979797;
}
#customer-view { /*reduce the height of customer view*/
height: 100px;
}
#sushi-area { /*reduce the height of sushi area*/
height: 200px;
}
}
5. In contrast, when the screen is wide enough, we use the following styles to put the
enire game on the let-hand side and the recipe secion to the right:
/* wide screen */
@media screen and (min-width: 800px) {
#game {
width: 60%;
}
#recipes {
width: 40%;
}
}
6. Although most of the resizing is done in CSS, we need JavaScript to change the
canvas's size. It is because the size of the canvas isn't a style. The canvas's dimension
is the data that we need to set with the JavaScript API. In the view.js file, we set
up the resize logic to change the canvas's width and height based on its parent's
dimension. Ater resizing the canvas of the customer view, we also reposiion the
customers inside the view to ensure they are displayed correctly:
game.view = {};
game.view.init = function() {
initCustomerView();
initDOMElements();
initResizeHandler();
};
function initResizeHandler() {
var customerView = document.getElementById
('customer-view');