TypeScript: Modern JavaScript Development

Drawing the view

In lib/game/view.ts, we will render the game. We start with importing types that we defined earlier:

import { State, Level, Object, Wall, Side, Menu } from "./model"; 
import { Picture, Pictures, Translate, Scale, Rotate, Rectangle, Line, Circle, Color, Text, Empty } from "../framework/picture"; 

We will store the font name in a variable, so we can easily change it later:

const font = "Arial"; 

In draw, we will render the game. For now, that means only drawing the level. Later on, we will add a menu to the game:

export function draw(state: State, width: number, height: number) { 
  drawLevel(state.level, width, height), 
} 

We render the level in drawLevel. We calculate the size of all objects with the size of the grid and the canvas:

function ...