We use PixiJS library for operations with graphics.

Why PixiJS

Will write later

How to run

1. In 'front' directory type yarn install command (or npm i)

2. Type yarn run run (or npm run run)

3. In browser go to http://localhost:8080/dist

How to test

1. After install (see 'How to run' above) type yarn test

API

This code creates grid object and puts it to the page. And set units on the grid.
See the game object in console: window.game

Grid: window.game.grid

Fill hex in row y and column x:
window.game.grid.fill_hex(y, x)

Move unit from point (y1, x1) to point (y2, x2):
window.game.move_unit(y1, x1, y2, x2)

Set parameters of grid in code:
game.js
let grid = new Hex_grid(this.app.stage, 8, 6, 50, 100, 100);

Hex_grid class

Parameters:

• stage - where to draw grid (PIXI.Container)
• m, n - number of rows and columns in grid
• cellsize - length of side of a hexcell
• x_offset, y_offset - left and top offsets inside stage
• cells - matrix of cells (call - cells[y][x]), numeration from the top left cell

Constants:

• BORDER_COLOR
• BORDER_WIDTH
• FILL_COLOR

Methods:

• draw - create cells array and draw grid on the stage
• fill_hex - fill hex in row y, column x with FILLCOLOR
• create_hex - create and return hex object with side = r

hex_obj:

• hex - PIXI.Graphics object
• points - array of its vertexes (needed to fill)