MultiplayerMinesweeper/www/scripts/display/draw.js

import * as main from '../script.js';
import {tileArray} from './tileRenderer.js';
import { cursor } from '../interface/game/mouse.js'
import { ctx, hctx } from './html.js';
import { game } from '../game/game.js'

export function render() {
renderTiles()
}

export function renderTiles() {      // DRAW THE IMAGE TO THE CANVAS.
  let x, y = 0
  const gridSize = game.gridSize;
  const tileSize = game.tileSize;
  for(x = 0; x < gridSize[0]; x++){
    for(y = 0; y < gridSize[1]; y++){
      const xu = x*tileSize;
      const yu = y*tileSize;
      const tempWorld = game.world.data;
			// Draw buildings

      ctx.drawImage(tileArray[tempWorld[x][y].type], xu,yu)

			// Draw Structures
      const flag = tempWorld[x][y].flag
      // console.log(flag)
      if (flag !== 0) {
        // console.log("FALAG")
      ctx.drawImage(tileArray[flag + 7], xu,yu)
      }

    }
  }
  console.log("image Rendered")
}

export function renderHud(x, y) {
  const tileSize = game.tileSize;
  hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, tileSize)
  hctx.drawImage(tileArray[4], x*tileSize,y*tileSize)
}